Added support for working plan exceptions in the table view page

assets/js/backend_calendar_table_view.js

@@ -91,7 +91,10 @@ window.BackendCalendarTableView = window.BackendCalendarTableView || {};
 
                                 $providerColumn.find('.calendar-wrapper').fullCalendar('removeEvents');
 
-                                createNonWorkingHours($providerColumn.find('.calendar-wrapper'), JSON.parse($providerColumn.data('provider').settings.working_plan));
+                                createNonWorkingHours(
+                                    $providerColumn.find('.calendar-wrapper'),
+                                    $providerColumn.data('provider')
+                                );
 
                                 // Add the appointments to the column.
                                 createAppointments($providerColumn, response.appointments);
@@ -145,7 +148,36 @@ window.BackendCalendarTableView = window.BackendCalendarTableView || {};
 
             var $dialog;
 
-            if (lastFocusedEventData.data.is_unavailable === '0') {
+            if (lastFocusedEventData.data.workingPlanException) {
+                var date = lastFocusedEventData.data.date;
+                var workingPlanException = lastFocusedEventData.data.workingPlanException;
+                var provider = lastFocusedEventData.data.provider;
+
+                WorkingPlanExceptionsModal
+                    .edit(date, workingPlanException)
+                    .done(function (date, workingPlanException) {
+                        var successCallback = function () {
+                            Backend.displayNotification(EALang.working_plan_exception_saved);
+
+                            var workingPlanExceptions = jQuery.parseJSON(provider.settings.working_plan_exceptions) || {};
+
+                            workingPlanExceptions[date] = workingPlanException;
+
+                            for (var index in GlobalVariables.availableProviders) {
+                                var availableProvider = GlobalVariables.availableProviders[index];
+
+                                if (Number(availableProvider.id) === Number(provider.id)) {
+                                    availableProvider.settings.working_plan_exceptions = JSON.stringify(workingPlanExceptions);
+                                    break;
+                                }
+                            }
+
+                            $('#select-filter-item').trigger('change'); // Update the calendar.
+                        };
+
+                        BackendCalendarApi.saveWorkingPlanException(date, workingPlanException, provider.id, successCallback, null);
+                    });
+            } else if (lastFocusedEventData.data.is_unavailable === '0') {
                 var appointment = lastFocusedEventData.data;
                 $dialog = $('#manage-appointment');
 
@@ -592,7 +624,10 @@ window.BackendCalendarTableView = window.BackendCalendarTableView || {};
         createCalendar($providerColumn, date, provider);
 
         // Create non working hours.
-        createNonWorkingHours($providerColumn.find('.calendar-wrapper'), JSON.parse(provider.settings.working_plan))
+        createNonWorkingHours(
+            $providerColumn.find('.calendar-wrapper'),
+            provider
+        );
 
         // Add the appointments to the column.
         createAppointments($providerColumn, events.appointments);
@@ -793,11 +828,38 @@ window.BackendCalendarTableView = window.BackendCalendarTableView || {};
         $(element).fullCalendar('option', 'height', getCalendarHeight());
     }
 
-    function createNonWorkingHours($calendar, workingPlan) {
+    function createNonWorkingHours($calendar, provider) {
+        var workingPlan = JSON.parse(provider.settings.working_plan);
+        var workingPlanExceptions = JSON.parse(provider.settings.working_plan_exceptions);
         var view = $calendar.fullCalendar('getView');
         var start = view.start.clone();
         var end = view.end.clone();
         var selDayName = start.toDate().toString('dddd').toLowerCase();
+        var selDayDate = start.format('YYYY-MM-DD');
+
+        if (workingPlanExceptions[selDayDate]) {
+            workingPlan[selDayName] = workingPlanExceptions[selDayDate];
+
+            var workingPlanExceptionStart = selDayDate + ' ' + workingPlan[selDayName].start;
+            var workingPlanExceptionEnd = selDayDate + ' ' + workingPlan[selDayName].end;
+
+            var workingPlanExceptionEvent = {
+                title: EALang.working_plan_exception,
+                start: moment(workingPlanExceptionStart, 'YYYY-MM-DD HH:mm', true),
+                end: moment(workingPlanExceptionEnd, 'YYYY-MM-DD HH:mm', true).add(1, 'day'),
+                allDay: true,
+                color: '#879DB4',
+                editable: false,
+                className: 'fc-working-plan-exception fc-custom',
+                data: {
+                    date: selDayDate,
+                    workingPlanException: workingPlanExceptions[selDayDate],
+                    provider: provider
+                }
+            };
+
+            $calendar.fullCalendar('renderEvent', workingPlanExceptionEvent, false);
+        }
 
         if (workingPlan[selDayName] === null) {
             var nonWorkingDay = {
@@ -1036,10 +1098,10 @@ window.BackendCalendarTableView = window.BackendCalendarTableView || {};
         if ($(this).hasClass('fc-unavailable') || $parent.hasClass('fc-unavailable') || $altParent.hasClass('fc-unavailable')) {
             displayEdit = (($parent.hasClass('fc-custom') || $altParent.hasClass('fc-custom'))
                 && GlobalVariables.user.privileges.appointments.edit === true)
-                ? 'mr-2' : 'd-none';
+                ? '' : 'd-none';
             displayDelete = (($parent.hasClass('fc-custom') || $altParent.hasClass('fc-custom'))
                 && GlobalVariables.user.privileges.appointments.delete === true)
-                ? 'mr-2' : 'd-none'; // Same value at the time.
+                ? '' : 'd-none'; // Same value at the time.
 
             $html = $('<div/>', {
                 'html': [
@@ -1070,8 +1132,30 @@ window.BackendCalendarTableView = window.BackendCalendarTableView || {};
                     $('<hr/>'),
 
                     $('<div/>', {
-                        'class': 'd-flex justify-content-between',
+                        'class': 'd-flex justify-content-center',
                         'html': [
+                            $('<button/>', {
+                                'class': 'close-popover btn btn-outline-secondary mr-2',
+                                'html': [
+                                    $('<i/>', {
+                                        'class': 'fas fa-ban mr-2'
+                                    }),
+                                    $('<span/>', {
+                                        'text': EALang.close
+                                    })
+                                ]
+                            }),
+                            $('<button/>', {
+                                'class': 'delete-popover btn btn-outline-secondary mr-2 ' + displayDelete,
+                                'html': [
+                                    $('<i/>', {
+                                        'class': 'far fa-trash-alt mr-2'
+                                    }),
+                                    $('<span/>', {
+                                        'text': EALang.delete
+                                    })
+                                ]
+                            }),
                             $('<button/>', {
                                 'class': 'edit-popover btn btn-primary ' + displayEdit,
                                 'html': [
@@ -1083,28 +1167,6 @@ window.BackendCalendarTableView = window.BackendCalendarTableView || {};
                                     })
                                 ]
                             }),
-                            $('<button/>', {
-                                'class': 'delete-popover btn btn-outline-secondary ' + displayDelete,
-                                'html': [
-                                    $('<i/>', {
-                                        'class': 'far fa-trash-alt mr-2'
-                                    }),
-                                    $('<span/>', {
-                                        'text': EALang.delete
-                                    })
-                                ]
-                            }),
-                            $('<button/>', {
-                                'class': 'close-popover btn btn-outline-secondary',
-                                'html': [
-                                    $('<i/>', {
-                                        'class': 'fas fa-ban mr-2'
-                                    }),
-                                    $('<span/>', {
-                                        'text': EALang.close
-                                    })
-                                ]
-                            })
                         ]
                     })
                 ]
@@ -1112,11 +1174,11 @@ window.BackendCalendarTableView = window.BackendCalendarTableView || {};
         } else if ($(this).hasClass('fc-working-plan-exception') || $parent.hasClass('fc-working-plan-exception') || $altParent.hasClass('fc-working-plan-exception')) {
             displayEdit = (($parent.hasClass('fc-custom') || $altParent.hasClass('fc-custom'))
                 && GlobalVariables.user.privileges.appointments.edit === true)
-                ? 'mr-2' : 'd-none'; // Same value at the time.
+                ? '' : 'd-none'; // Same value at the time.
 
             displayDelete = (($parent.hasClass('fc-custom') || $altParent.hasClass('fc-custom'))
                 && GlobalVariables.user.privileges.appointments.delete === true)
-                ? 'mr-2' : 'd-none'; // Same value at the time.
+                ? '' : 'd-none'; // Same value at the time.
 
             $html = $('<div/>', {
                 'html': [
@@ -1158,18 +1220,18 @@ window.BackendCalendarTableView = window.BackendCalendarTableView || {};
                         'class': 'd-flex justify-content-center',
                         'html': [
                             $('<button/>', {
-                                'class': 'edit-popover btn btn-danger ' + displayEdit,
+                                'class': 'close-popover btn btn-outline-secondary mr-2',
                                 'html': [
                                     $('<i/>', {
-                                        'class': 'far fa-edit mr-2'
+                                        'class': 'fas fa-ban mr-2'
                                     }),
                                     $('<span/>', {
-                                        'text': EALang.edit
+                                        'text': EALang.close
                                     })
                                 ]
                             }),
                             $('<button/>', {
-                                'class': 'delete-popover btn btn-outline-secondary ' + displayDelete,
+                                'class': 'delete-popover btn btn-outline-secondary mr-2 ' + displayDelete,
                                 'html': [
                                     $('<i/>', {
                                         'class': 'far fa-trash-alt mr-2'
@@ -1180,13 +1242,13 @@ window.BackendCalendarTableView = window.BackendCalendarTableView || {};
                                 ]
                             }),
                             $('<button/>', {
-                                'class': 'close-popover btn btn-outline-secondary',
+                                'class': 'edit-popover btn btn-primary ' + displayEdit,
                                 'html': [
                                     $('<i/>', {
-                                        'class': 'fas fa-ban mr-2'
+                                        'class': 'far fa-edit mr-2'
                                     }),
                                     $('<span/>', {
-                                        'text': EALang.close
+                                        'text': EALang.edit
                                     })
                                 ]
                             })
@@ -1196,9 +1258,9 @@ window.BackendCalendarTableView = window.BackendCalendarTableView || {};
             });
         } else {
             displayEdit = (GlobalVariables.user.privileges.appointments.edit === true)
-                ? 'mr-2' : 'd-none';
+                ? '' : 'd-none';
             displayDelete = (GlobalVariables.user.privileges.appointments.delete === true)
-                ? 'mr-2' : 'd-none';
+                ? '' : 'd-none';
 
             $html = $('<div/>', {
                 'html': [
@@ -1284,18 +1346,18 @@ window.BackendCalendarTableView = window.BackendCalendarTableView || {};
                         'class': 'd-flex justify-content-center',
                         'html': [
                             $('<button/>', {
-                                'class': 'edit-popover btn btn-primary ' + displayEdit,
+                                'class': 'close-popover btn btn-outline-secondary mr-2',
                                 'html': [
                                     $('<i/>', {
-                                        'class': 'far fa-edit mr-2'
+                                        'class': 'fas fa-ban mr-2'
                                     }),
                                     $('<span/>', {
-                                        'text': EALang.edit
+                                        'text': EALang.close
                                     })
                                 ]
                             }),
                             $('<button/>', {
-                                'class': 'delete-popover btn btn-outline-secondary ' + displayDelete,
+                                'class': 'delete-popover btn btn-outline-secondary mr-2' + displayDelete,
                                 'html': [
                                     $('<i/>', {
                                         'class': 'far fa-trash-alt mr-2'
@@ -1306,13 +1368,13 @@ window.BackendCalendarTableView = window.BackendCalendarTableView || {};
                                 ]
                             }),
                             $('<button/>', {
-                                'class': 'close-popover btn btn-outline-secondary',
+                                'class': 'edit-popover btn btn-primary ' + displayEdit,
                                 'html': [
                                     $('<i/>', {
-                                        'class': 'fas fa-ban mr-2'
+                                        'class': 'far fa-edit mr-2'
                                     }),
                                     $('<span/>', {
-                                        'text': EALang.close
+                                        'text': EALang.edit
                                     })
                                 ]
                             })