From 97780613ad49212d1e4b24ee65a4fe2998ed21be Mon Sep 17 00:00:00 2001 From: Suraj Shetty Date: Thu, 6 Jun 2019 14:48:37 +0530 Subject: [PATCH] fix: Improve call popup UI --- erpnext/crm/doctype/utils.py | 15 +++-- .../exotel_integration.py | 4 +- erpnext/public/js/call_popup/call_popup.js | 62 +++++++------------ erpnext/public/less/call_popup.less | 8 --- 4 files changed, 32 insertions(+), 57 deletions(-) diff --git a/erpnext/crm/doctype/utils.py b/erpnext/crm/doctype/utils.py index 93ad0932eb..75562dd3b6 100644 --- a/erpnext/crm/doctype/utils.py +++ b/erpnext/crm/doctype/utils.py @@ -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', { diff --git a/erpnext/erpnext_integrations/exotel_integration.py b/erpnext/erpnext_integrations/exotel_integration.py index 41f8c26252..57cba78bdb 100644 --- a/erpnext/erpnext_integrations/exotel_integration.py +++ b/erpnext/erpnext_integrations/exotel_integration.py @@ -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) diff --git a/erpnext/public/js/call_popup/call_popup.js b/erpnext/public/js/call_popup/call_popup.js index 9ae9fd1eab..c8c4e8b280 100644 --- a/erpnext/public/js/call_popup/call_popup.js +++ b/erpnext/public/js/call_popup/call_popup.js @@ -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(`
Unknown Number: ${this.caller_number}
- + ${__('Create New Contact')}
@@ -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(`
- -
- ${contact.first_name} ${contact.last_name} - ${contact.mobile_no} + ${frappe.avatar(null, 'avatar-xl', contact_name, contact.image)} +
+
${contact_name}
+
${contact.mobile_no || ''}
+
${contact.phone_no || ''}
${contact_link}
@@ -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(); } }); diff --git a/erpnext/public/less/call_popup.less b/erpnext/public/less/call_popup.less index 3f4ffef3c0..4b2ddfa9b4 100644 --- a/erpnext/public/less/call_popup.less +++ b/erpnext/public/less/call_popup.less @@ -1,12 +1,4 @@ .call-popup { - .caller-info { - padding: 0 15px; - } - img { - width: auto; - height: 100px; - margin-right: 15px; - } a:hover { text-decoration: underline; }