Added multi provider/service filtering in the backend calendar table view.

This commit is contained in:
Alex Tselegidis 2020-05-04 13:13:22 +02:00
parent 01cf72c6a6
commit f47ceae466
2 changed files with 54 additions and 7 deletions

View file

@ -450,6 +450,38 @@ body .form-horizontal .controls {
margin: 10px 10px 10px 0; 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 { #calendar .calendar-view {
overflow-x: auto; overflow-x: auto;
} }

View file

@ -355,6 +355,7 @@ window.BackendCalendarTableView = window.BackendCalendarTableView || {};
$filterProvider = $('<select/>', { $filterProvider = $('<select/>', {
'id': 'filter-provider', 'id': 'filter-provider',
'multiple': 'multiple',
'on': { 'on': {
'change': function () { 'change': function () {
var startDate = new Date($('.calendar-view .date-column:first').data('date')); var startDate = new Date($('.calendar-view .date-column:first').data('date'));
@ -365,10 +366,11 @@ window.BackendCalendarTableView = window.BackendCalendarTableView || {};
}) })
.appendTo($calendarHeader); .appendTo($calendarHeader);
$filterProvider.append(new Option('', '', true));
providers.forEach(function (provider) { providers.forEach(function (provider) {
$filterProvider.append(new Option(provider.first_name + ' ' + provider.last_name, provider.id)); $filterProvider.append(new Option(provider.first_name + ' ' + provider.last_name, provider.id));
}); });
$filterProvider.select2();
} }
var services = GlobalVariables.availableServices.filter(function (service) { var services = GlobalVariables.availableServices.filter(function (service) {
@ -386,6 +388,7 @@ window.BackendCalendarTableView = window.BackendCalendarTableView || {};
$filterService = $('<select/>', { $filterService = $('<select/>', {
'id': 'filter-service', 'id': 'filter-service',
'multiple': 'multiple',
'on': { 'on': {
'change': function () { 'change': function () {
var startDate = new Date($('.calendar-view .date-column:first').data('date')); var startDate = new Date($('.calendar-view .date-column:first').data('date'));
@ -396,10 +399,11 @@ window.BackendCalendarTableView = window.BackendCalendarTableView || {};
}) })
.appendTo($calendarHeader); .appendTo($calendarHeader);
$filterService.append(new Option('', '', true));
services.forEach(function (service) { services.forEach(function (service) {
$filterService.append(new Option(service.name, service.id)); $filterService.append(new Option(service.name, service.id));
}); });
$filterService.select2();
} }
/** /**
@ -490,11 +494,20 @@ window.BackendCalendarTableView = window.BackendCalendarTableView || {};
}) })
.appendTo($dateColumn); .appendTo($dateColumn);
var providers = GlobalVariables.availableProviders.filter(function (provider) { var filterProviderIds = $filterProvider.val();
var servesService = $filterService.val() !== '' && provider.services.indexOf($filterService.val()) !== -1; var filterServiceIds = $filterService.val();
return ($filterProvider.val() === '' && $filterService.val() === '') || servesService var providers = GlobalVariables.availableProviders.filter(function (provider) {
|| Number($filterProvider.val()) === Number(provider.id); 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') { if (GlobalVariables.user.role_slug === 'provider') {
@ -832,8 +845,10 @@ window.BackendCalendarTableView = window.BackendCalendarTableView || {};
return; return;
} }
var filterServiceIds = $filterService.val();
appointments = appointments.filter(function (appointment) { 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 = []; var calendarEvents = [];