fix: Improve call popup UI

This commit is contained in:
Suraj Shetty 2019-06-06 14:48:37 +05:30
parent c0a640c462
commit 97780613ad
4 changed files with 32 additions and 57 deletions

View File

@ -42,14 +42,13 @@ def get_last_interaction(number, reference_doc):
if query_condition:
query_condition = query_condition[:-2]
last_communication = frappe.db.sql("""
SELECT `name`, `content`
FROM `tabCommunication`
WHERE {}
ORDER BY `modified`
LIMIT 1
""".format(query_condition))
last_communication = frappe.db.sql("""
SELECT `name`, `content`
FROM `tabCommunication`
WHERE {}
ORDER BY `modified`
LIMIT 1
""".format(query_condition))
if customer_name:
last_issue = frappe.get_all('Issue', {

View File

@ -24,13 +24,13 @@ def handle_incoming_call(*args, **kwargs):
@frappe.whitelist(allow_guest=True)
def handle_end_call(*args, **kwargs):
frappe.publish_realtime('call_disconnected', data=kwargs.get('CallSid'))
update_call_log(kwargs, 'Completed')
frappe.publish_realtime('call_disconnected', kwargs.get('CallSid'))
@frappe.whitelist(allow_guest=True)
def handle_missed_call(*args, **kwargs):
frappe.publish_realtime('call_disconnected', data=kwargs.get('CallSid'))
update_call_log(kwargs, 'Missed')
frappe.publish_realtime('call_disconnected', kwargs.get('CallSid'))
def update_call_log(call_payload, status):
call_log = get_call_log(call_payload, False)

View File

@ -1,8 +1,7 @@
class CallPopup {
constructor({ call_from, call_log, call_status_method }) {
this.caller_number = call_from;
constructor(call_log) {
this.caller_number = call_log.call_from;
this.call_log = call_log;
this.call_status_method = call_status_method;
this.make();
}
@ -45,7 +44,7 @@ class CallPopup {
const values = this.dialog.get_values();
if (!values.call_summary) return
frappe.xcall('erpnext.crm.doctype.utils.add_call_summary', {
'docname': this.call_log.name,
'docname': this.call_log.call_id,
'summary': values.call_summary,
}).then(() => {
this.dialog.set_value('call_summary', '');
@ -56,10 +55,9 @@ class CallPopup {
this.set_call_status();
}
});
this.set_call_status(this.call_log.call_status);
this.set_call_status();
this.make_caller_info_section();
this.dialog.get_close_btn().show();
this.setup_call_status_updater();
this.dialog.$body.addClass('call-popup');
this.dialog.set_secondary_action(() => {
clearInterval(this.updater);
@ -81,7 +79,7 @@ class CallPopup {
wrapper.append(`
<div class="caller-info">
<div>Unknown Number: <b>${this.caller_number}</b></div>
<a class="contact-link text-medium" href="#Form/Contact/New Contact?phone=${this.caller_number}">
<a class="contact-link" href="#Form/Contact/New Contact?phone=${this.caller_number}">
${__('Create New Contact')}
</a>
</div>
@ -89,12 +87,14 @@ class CallPopup {
} else {
const link = contact.links ? contact.links[0] : null;
const contact_link = link ? frappe.utils.get_form_link(link.link_doctype, link.link_name, true): '';
const contact_name = `${contact.first_name || ''} ${contact.last_name || ''}`
wrapper.append(`
<div class="caller-info flex">
<img src="${contact.image}">
<div class='flex-column'>
<span>${contact.first_name} ${contact.last_name}</span>
<span>${contact.mobile_no}</span>
${frappe.avatar(null, 'avatar-xl', contact_name, contact.image)}
<div>
<h5>${contact_name}</h5>
<div>${contact.mobile_no || ''}</div>
<div>${contact.phone_no || ''}</div>
${contact_link}
</div>
</div>
@ -113,17 +113,17 @@ class CallPopup {
set_call_status(call_status) {
let title = '';
call_status = call_status || this.call_log.call_status;
if (['busy', 'completed'].includes(call_status) || !call_status) {
if (['Ringing'].includes(call_status) || !call_status) {
title = __('Incoming call from {0}',
[this.contact ? `${this.contact.first_name} ${this.contact.last_name}` : this.caller_number]);
[this.contact ? `${this.contact.first_name || ''} ${this.contact.last_name || ''}` : this.caller_number]);
this.set_indicator('blue', true);
} else if (call_status === 'in-progress') {
} else if (call_status === 'In Progress') {
title = __('Call Connected');
this.set_indicator('yellow');
} else if (call_status === 'missed') {
this.set_indicator('red');
title = __('Call Missed');
} else if (call_status === 'disconnected') {
} else if (['Completed', 'Disconnected'].includes(call_status)) {
this.set_indicator('red');
title = __('Call Disconnected');
} else {
@ -133,27 +133,12 @@ class CallPopup {
this.dialog.set_title(title);
}
update(data) {
this.call_log = data.call_log;
update_call_log(call_log) {
this.call_log = call_log;
this.set_call_status();
}
setup_call_status_updater() {
this.updater = setInterval(this.get_call_status.bind(this), 20000);
}
get_call_status() {
frappe.xcall(this.call_status_method, {
'call_id': this.call_log.call_id
}).then((call_status) => {
if (call_status === 'completed') {
clearInterval(this.updater);
}
});
}
disconnect_call() {
this.set_call_status('disconnected');
this.set_call_status('Disconnected');
clearInterval(this.updater);
}
@ -183,17 +168,16 @@ class CallPopup {
}
$(document).on('app_ready', function () {
frappe.realtime.on('show_call_popup', data => {
frappe.realtime.on('show_call_popup', call_log => {
if (!erpnext.call_popup) {
erpnext.call_popup = new CallPopup(data);
erpnext.call_popup = new CallPopup(call_log);
} else {
erpnext.call_popup.update(data);
erpnext.call_popup.update_call_log(call_log);
erpnext.call_popup.dialog.show();
}
});
frappe.realtime.on('call_disconnected', () => {
if (erpnext.call_popup) {
frappe.realtime.on('call_disconnected', id => {
if (erpnext.call_popup && erpnext.call_popup.call_log.call_id === id) {
erpnext.call_popup.disconnect_call();
}
});

View File

@ -1,12 +1,4 @@
.call-popup {
.caller-info {
padding: 0 15px;
}
img {
width: auto;
height: 100px;
margin-right: 15px;
}
a:hover {
text-decoration: underline;
}