From f47ceae4665fc2c91bfdb7a6426f768b91540434 Mon Sep 17 00:00:00 2001
From: Alex Tselegidis <alextselegidis@gmail.com>
Date: Mon, 4 May 2020 13:13:22 +0200
Subject: [PATCH] Added multi provider/service filtering in the backend
 calendar table view.

---
 assets/css/backend.css                   | 32 ++++++++++++++++++++++++
 assets/js/backend_calendar_table_view.js | 29 +++++++++++++++------
 2 files changed, 54 insertions(+), 7 deletions(-)

diff --git a/assets/css/backend.css b/assets/css/backend.css
index 36503124..6ef04e56 100644
--- a/assets/css/backend.css
+++ b/assets/css/backend.css
@@ -450,6 +450,38 @@ body .form-horizontal .controls {
     margin: 10px 10px 10px 0;
 }
 
+#calendar .calendar-header select {
+    min-width: 300px;
+}
+
+#calendar .calendar-header label {
+    margin: 0 10px;
+}
+
+#calendar .calendar-header .select2-container--default .select2-selection--multiple {
+    border: none !important;
+    border-bottom: 1px solid #ddd !important;
+    border-radius: 0 !important;
+    height: 29px;
+}
+
+#calendar .calendar-header .select2-search__field {
+    margin: 0 !important;
+}
+
+#calendar .calendar-header .select2-container--default .select2-selection--multiple .select2-selection__choice {
+    margin-top: 0;
+    padding: 0 3px;
+    border-radius: 2px;
+    border: 1px solid #d9d9d9;
+    font-size: 12px;
+}
+
+.select2-dropdown {
+    border: 1px solid #ddd;
+    border-radius: 0;
+}
+
 #calendar .calendar-view {
     overflow-x: auto;
 }
diff --git a/assets/js/backend_calendar_table_view.js b/assets/js/backend_calendar_table_view.js
index 6ba92b58..b7634a7e 100755
--- a/assets/js/backend_calendar_table_view.js
+++ b/assets/js/backend_calendar_table_view.js
@@ -355,6 +355,7 @@ window.BackendCalendarTableView = window.BackendCalendarTableView || {};
 
             $filterProvider = $('<select/>', {
                 'id': 'filter-provider',
+                'multiple': 'multiple',
                 'on': {
                     'change': function () {
                         var startDate = new Date($('.calendar-view .date-column:first').data('date'));
@@ -365,10 +366,11 @@ window.BackendCalendarTableView = window.BackendCalendarTableView || {};
             })
                 .appendTo($calendarHeader);
 
-            $filterProvider.append(new Option('', '', true));
             providers.forEach(function (provider) {
                 $filterProvider.append(new Option(provider.first_name + ' ' + provider.last_name, provider.id));
             });
+
+            $filterProvider.select2();
         }
 
         var services = GlobalVariables.availableServices.filter(function (service) {
@@ -386,6 +388,7 @@ window.BackendCalendarTableView = window.BackendCalendarTableView || {};
 
         $filterService = $('<select/>', {
             'id': 'filter-service',
+            'multiple': 'multiple',
             'on': {
                 'change': function () {
                     var startDate = new Date($('.calendar-view .date-column:first').data('date'));
@@ -396,10 +399,11 @@ window.BackendCalendarTableView = window.BackendCalendarTableView || {};
         })
             .appendTo($calendarHeader);
 
-        $filterService.append(new Option('', '', true));
         services.forEach(function (service) {
             $filterService.append(new Option(service.name, service.id));
         });
+
+        $filterService.select2();
     }
 
     /**
@@ -490,11 +494,20 @@ window.BackendCalendarTableView = window.BackendCalendarTableView || {};
         })
             .appendTo($dateColumn);
 
-        var providers = GlobalVariables.availableProviders.filter(function (provider) {
-            var servesService = $filterService.val() !== '' && provider.services.indexOf($filterService.val()) !== -1;
+        var filterProviderIds = $filterProvider.val();
+        var filterServiceIds = $filterService.val();
 
-            return ($filterProvider.val() === '' && $filterService.val() === '') || servesService
-                || Number($filterProvider.val()) === Number(provider.id);
+        var providers = GlobalVariables.availableProviders.filter(function (provider) {
+            var servedServiceIds = provider.services.filter(function(serviceId) {
+                var matches = filterServiceIds.filter(function(filterServiceId) {
+                    return Number(serviceId) === Number(filterServiceId);
+                });
+
+                return matches.length;
+            });
+
+            return (!filterProviderIds.length && !filterServiceIds.length) || servedServiceIds.length
+                || filterProviderIds.indexOf(provider.id) !== -1;
         });
 
         if (GlobalVariables.user.role_slug === 'provider') {
@@ -832,8 +845,10 @@ window.BackendCalendarTableView = window.BackendCalendarTableView || {};
             return;
         }
 
+        var filterServiceIds = $filterService.val();
+
         appointments = appointments.filter(function (appointment) {
-            return $filterService.val() === '' || Number(appointment.id_services) === Number($filterService.val());
+            return !filterServiceIds.length || filterServiceIds.indexOf(appointment.id_services) !== -1;
         });
 
         var calendarEvents = [];