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 = $('', {
'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 = $('', {
'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 = [];