From 53a6a8c3a84bbe3d0a5d1335ed313753f83fdc59 Mon Sep 17 00:00:00 2001
From: Alex Tselegidis <alextselegidis@gmail.com>
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) {
-                        $('<div/>', {
-                            '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) {
                             $('<div/>', {
                                 '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) {
+                                $('<div/>', {
+                                    'data-id': customer.id,
+                                    'text': customer.first_name + ' ' + customer.last_name
+                                })
+                                    .appendTo($list);
+                            }
+                        });
+                    })
+                    .always(function() {
+                        $('#loading').css('visibility', '');
                     });
-                });
+            }, 1000);
         });
 
         /**