From 53a6a8c3a84bbe3d0a5d1335ed313753f83fdc59 Mon Sep 17 00:00:00 2001 From: Alex Tselegidis Date: Wed, 9 Dec 2020 16:00:15 +0200 Subject: [PATCH] Debounce keyup events when searching for existing customers --- .../js/backend_calendar_appointments_modal.js | 96 +++++++++++-------- 1 file changed, 55 insertions(+), 41 deletions(-) diff --git a/assets/js/backend_calendar_appointments_modal.js b/assets/js/backend_calendar_appointments_modal.js index 13393014..9e47fabe 100755 --- a/assets/js/backend_calendar_appointments_modal.js +++ b/assets/js/backend_calendar_appointments_modal.js @@ -223,64 +223,78 @@ window.BackendCalendarAppointmentsModal = window.BackendCalendarAppointmentsModa $('#select-customer').trigger('click'); // Hide the list. }); + var filterExistingCustomersTimeout = null; + /** * Event: Filter Existing Customers "Change" */ $('#filter-existing-customers').on('keyup', function () { + if (filterExistingCustomersTimeout) { + clearTimeout(filterExistingCustomersTimeout); + } + var key = $(this).val().toLowerCase(); - var $list = $('#existing-customers-list'); - var url = GlobalVariables.baseUrl + '/index.php/backend_api/ajax_filter_customers'; + filterExistingCustomersTimeout = setTimeout(function() { + var $list = $('#existing-customers-list'); - var data = { - csrfToken: GlobalVariables.csrfToken, - key: key - }; + var url = GlobalVariables.baseUrl + '/index.php/backend_api/ajax_filter_customers'; - // Try to get the updated customer list. - $.post(url, data) - .done(function (response) { - $list.empty(); + var data = { + csrfToken: GlobalVariables.csrfToken, + key: key + }; - response.forEach(function (customer) { - $('
', { - 'data-id': customer.id, - 'text': customer.first_name + ' ' + customer.last_name - }) - .appendTo($list); + $('#loading').css('visibility', 'hidden'); - // Verify if this customer is on the old customer list. - var result = GlobalVariables.customers.filter(function (globalVariablesCustomer) { - return Number(globalVariablesCustomer.id) === Number(customer.id); - }); + // Try to get the updated customer list. + $.post(url, data) + .done(function (response) { + $list.empty(); - // Add it to the customer list. - if (!result.length) { - GlobalVariables.customers.push(customer); - } - }) - }) - .fail(function (jqXHR, textStatus, errorThrown) { - // If there is any error on the request, search by the local client database. - $list.empty(); - - GlobalVariables.customers.forEach(function (customer, index) { - if (customer.first_name.toLowerCase().indexOf(key) !== -1 - || customer.last_name.toLowerCase().indexOf(key) !== -1 - || customer.email.toLowerCase().indexOf(key) !== -1 - || customer.phone_number.toLowerCase().indexOf(key) !== -1 - || customer.address.toLowerCase().indexOf(key) !== -1 - || customer.city.toLowerCase().indexOf(key) !== -1 - || customer.zip_code.toLowerCase().indexOf(key) !== -1 - || customer.notes.toLowerCase().indexOf(key) !== -1) { + response.forEach(function (customer) { $('
', { 'data-id': customer.id, 'text': customer.first_name + ' ' + customer.last_name }) .appendTo($list); - } + + // Verify if this customer is on the old customer list. + var result = GlobalVariables.customers.filter(function (globalVariablesCustomer) { + return Number(globalVariablesCustomer.id) === Number(customer.id); + }); + + // Add it to the customer list. + if (!result.length) { + GlobalVariables.customers.push(customer); + } + }) + }) + .fail(function (jqXHR, textStatus, errorThrown) { + // If there is any error on the request, search by the local client database. + $list.empty(); + + GlobalVariables.customers.forEach(function (customer, index) { + if (customer.first_name.toLowerCase().indexOf(key) !== -1 + || customer.last_name.toLowerCase().indexOf(key) !== -1 + || customer.email.toLowerCase().indexOf(key) !== -1 + || customer.phone_number.toLowerCase().indexOf(key) !== -1 + || customer.address.toLowerCase().indexOf(key) !== -1 + || customer.city.toLowerCase().indexOf(key) !== -1 + || customer.zip_code.toLowerCase().indexOf(key) !== -1 + || customer.notes.toLowerCase().indexOf(key) !== -1) { + $('
', { + 'data-id': customer.id, + 'text': customer.first_name + ' ' + customer.last_name + }) + .appendTo($list); + } + }); + }) + .always(function() { + $('#loading').css('visibility', ''); }); - }); + }, 1000); }); /**