From 72e84bd4f3c22e920e129d1685f8778a9b8e78ef Mon Sep 17 00:00:00 2001 From: Alex Tselegidis Date: Thu, 26 May 2022 15:17:33 +0200 Subject: [PATCH] Group commonly used UI components to a single utility module --- application/views/pages/calendar.php | 1 + application/views/pages/legal_settings.php | 1 + application/views/pages/providers.php | 1 + assets/js/components/appointments_modal.js | 137 +--------- .../js/components/unavailabilities_modal.js | 132 +--------- .../working_plan_exceptions_modal.js | 101 +------- assets/js/pages/legal_settings.js | 6 +- assets/js/utils/calendar_table_view.js | 26 +- assets/js/utils/ui.js | 233 ++++++++++++++++++ 9 files changed, 263 insertions(+), 375 deletions(-) create mode 100644 assets/js/utils/ui.js diff --git a/application/views/pages/calendar.php b/application/views/pages/calendar.php index 5c6be1d6..881f3e5b 100755 --- a/application/views/pages/calendar.php +++ b/application/views/pages/calendar.php @@ -126,6 +126,7 @@ + diff --git a/application/views/pages/legal_settings.php b/application/views/pages/legal_settings.php index fbf2e8dc..64f5b183 100755 --- a/application/views/pages/legal_settings.php +++ b/application/views/pages/legal_settings.php @@ -80,6 +80,7 @@ + diff --git a/application/views/pages/providers.php b/application/views/pages/providers.php index 75075f4d..36f0d028 100755 --- a/application/views/pages/providers.php +++ b/application/views/pages/providers.php @@ -341,6 +341,7 @@ + diff --git a/assets/js/components/appointments_modal.js b/assets/js/components/appointments_modal.js index eda202ab..749ce134 100755 --- a/assets/js/components/appointments_modal.js +++ b/assets/js/components/appointments_modal.js @@ -167,7 +167,7 @@ App.Components.AppointmentsModal = (function () { } else { $selectService.find('option:first').prop('selected', true).trigger('change'); } - + $selectProvider.trigger('change'); const serviceId = $selectService.val(); @@ -410,7 +410,7 @@ App.Components.AppointmentsModal = (function () { // Empty form fields. $appointmentsModal.find('input, textarea').val(''); $appointmentsModal.find('.modal-message').fadeOut(); - + $language.val('english'); $timezone.val('UTC'); @@ -452,81 +452,8 @@ App.Components.AppointmentsModal = (function () { const startDatetime = new Date(); const endDatetime = moment().add(duration, 'minutes').toDate(); - let dateFormat; - switch (vars('date_format')) { - case 'DMY': - dateFormat = 'dd/mm/yy'; - break; - case 'MDY': - dateFormat = 'mm/dd/yy'; - break; - case 'YMD': - dateFormat = 'yy/mm/dd'; - break; - default: - throw new Error('Invalid date format value.'); - } - - const firstWeekDay = vars('first_weekday'); - - const firstWeekDayNumber = App.Utils.Date.getWeekdayId(firstWeekDay); - - $startDatetime.datetimepicker({ - dateFormat: dateFormat, - timeFormat: vars('time_format') === 'regular' ? 'h:mm tt' : 'HH:mm', - - // Translation - dayNames: [ - lang('sunday'), - lang('monday'), - lang('tuesday'), - lang('wednesday'), - lang('thursday'), - lang('friday'), - lang('saturday') - ], - dayNamesShort: [ - lang('sunday').substr(0, 3), - lang('monday').substr(0, 3), - lang('tuesday').substr(0, 3), - lang('wednesday').substr(0, 3), - lang('thursday').substr(0, 3), - lang('friday').substr(0, 3), - lang('saturday').substr(0, 3) - ], - dayNamesMin: [ - lang('sunday').substr(0, 2), - lang('monday').substr(0, 2), - lang('tuesday').substr(0, 2), - lang('wednesday').substr(0, 2), - lang('thursday').substr(0, 2), - lang('friday').substr(0, 2), - lang('saturday').substr(0, 2) - ], - monthNames: [ - lang('january'), - lang('february'), - lang('march'), - lang('april'), - lang('may'), - lang('june'), - lang('july'), - lang('august'), - lang('september'), - lang('october'), - lang('november'), - lang('december') - ], - prevText: lang('previous'), - nextText: lang('next'), - currentText: lang('now'), - closeText: lang('close'), - timeOnlyTitle: lang('select_time'), - timeText: lang('time'), - hourText: lang('hour'), - minuteText: lang('minutes'), - firstDay: firstWeekDayNumber, + App.Utils.UI.initializeDatetimepicker($startDatetime, { onClose: () => { const serviceId = $selectService.val(); @@ -539,64 +466,10 @@ App.Components.AppointmentsModal = (function () { $endDatetime.datetimepicker('setDate', new Date(start.getTime() + service.duration * 60000)); } }); + $startDatetime.datetimepicker('setDate', startDatetime); - $endDatetime.datetimepicker({ - dateFormat: dateFormat, - timeFormat: vars('time_format') === 'regular' ? 'h:mm tt' : 'HH:mm', - - // Translation - dayNames: [ - lang('sunday'), - lang('monday'), - lang('tuesday'), - lang('wednesday'), - lang('thursday'), - lang('friday'), - lang('saturday') - ], - dayNamesShort: [ - lang('sunday').substr(0, 3), - lang('monday').substr(0, 3), - lang('tuesday').substr(0, 3), - lang('wednesday').substr(0, 3), - lang('thursday').substr(0, 3), - lang('friday').substr(0, 3), - lang('saturday').substr(0, 3) - ], - dayNamesMin: [ - lang('sunday').substr(0, 2), - lang('monday').substr(0, 2), - lang('tuesday').substr(0, 2), - lang('wednesday').substr(0, 2), - lang('thursday').substr(0, 2), - lang('friday').substr(0, 2), - lang('saturday').substr(0, 2) - ], - monthNames: [ - lang('january'), - lang('february'), - lang('march'), - lang('april'), - lang('may'), - lang('june'), - lang('july'), - lang('august'), - lang('september'), - lang('october'), - lang('november'), - lang('december') - ], - prevText: lang('previous'), - nextText: lang('next'), - currentText: lang('now'), - closeText: lang('close'), - timeOnlyTitle: lang('select_time'), - timeText: lang('time'), - hourText: lang('hour'), - minuteText: lang('minutes'), - firstDay: firstWeekDayNumber - }); + App.Utils.UI.initializeDatetimepicker($endDatetime); $endDatetime.datetimepicker('setDate', endDatetime); } diff --git a/assets/js/components/unavailabilities_modal.js b/assets/js/components/unavailabilities_modal.js index 5198416f..b6acb927 100755 --- a/assets/js/components/unavailabilities_modal.js +++ b/assets/js/components/unavailabilities_modal.js @@ -188,138 +188,12 @@ App.Components.UnavailabilitiesModal = (function () { true ); - let dateFormat; - - switch (vars('date_format')) { - case 'DMY': - dateFormat = 'dd/mm/yy'; - break; - case 'MDY': - dateFormat = 'mm/dd/yy'; - break; - case 'YMD': - dateFormat = 'yy/mm/dd'; - break; - } - - const firstWeekday = vars('first_weekday'); - - const firstWeekdayId = App.Utils.Date.getWeekdayId(firstWeekday); - - $startDatetime.datetimepicker({ - dateFormat: dateFormat, - timeFormat: vars('time_format') === 'regular' ? 'h:mm tt' : 'HH:mm', - - // Translation - dayNames: [ - lang('sunday'), - lang('monday'), - lang('tuesday'), - lang('wednesday'), - lang('thursday'), - lang('friday'), - lang('saturday') - ], - dayNamesShort: [ - lang('sunday').substr(0, 3), - lang('monday').substr(0, 3), - lang('tuesday').substr(0, 3), - lang('wednesday').substr(0, 3), - lang('thursday').substr(0, 3), - lang('friday').substr(0, 3), - lang('saturday').substr(0, 3) - ], - dayNamesMin: [ - lang('sunday').substr(0, 2), - lang('monday').substr(0, 2), - lang('tuesday').substr(0, 2), - lang('wednesday').substr(0, 2), - lang('thursday').substr(0, 2), - lang('friday').substr(0, 2), - lang('saturday').substr(0, 2) - ], - monthNames: [ - lang('january'), - lang('february'), - lang('march'), - lang('april'), - lang('may'), - lang('june'), - lang('july'), - lang('august'), - lang('september'), - lang('october'), - lang('november'), - lang('december') - ], - prevText: lang('previous'), - nextText: lang('next'), - currentText: lang('now'), - closeText: lang('close'), - timeOnlyTitle: lang('select_time'), - timeText: lang('time'), - hourText: lang('hour'), - minuteText: lang('minutes'), - firstDay: firstWeekdayId - }); + App.Utils.UI.initializeDatetimepicker($startDatetime); + $startDatetime.val(start); - $endDatetime.datetimepicker({ - dateFormat: dateFormat, - timeFormat: vars('time_format') === 'regular' ? 'h:mm tt' : 'HH:mm', + App.Utils.UI.initializeDatetimepicker($endDatetime); - // Translation - dayNames: [ - lang('sunday'), - lang('monday'), - lang('tuesday'), - lang('wednesday'), - lang('thursday'), - lang('friday'), - lang('saturday') - ], - dayNamesShort: [ - lang('sunday').substr(0, 3), - lang('monday').substr(0, 3), - lang('tuesday').substr(0, 3), - lang('wednesday').substr(0, 3), - lang('thursday').substr(0, 3), - lang('friday').substr(0, 3), - lang('saturday').substr(0, 3) - ], - dayNamesMin: [ - lang('sunday').substr(0, 2), - lang('monday').substr(0, 2), - lang('tuesday').substr(0, 2), - lang('wednesday').substr(0, 2), - lang('thursday').substr(0, 2), - lang('friday').substr(0, 2), - lang('saturday').substr(0, 2) - ], - monthNames: [ - lang('january'), - lang('february'), - lang('march'), - lang('april'), - lang('may'), - lang('june'), - lang('july'), - lang('august'), - lang('september'), - lang('october'), - lang('november'), - lang('december') - ], - prevText: lang('previous'), - nextText: lang('next'), - currentText: lang('now'), - closeText: lang('close'), - timeOnlyTitle: lang('select_time'), - timeText: lang('time'), - hourText: lang('hour'), - minuteText: lang('minutes'), - firstDay: firstWeekdayId - }); $endDatetime.val(end); // Clear the unavailability notes field. diff --git a/assets/js/components/working_plan_exceptions_modal.js b/assets/js/components/working_plan_exceptions_modal.js index ff13a7b8..17833e86 100644 --- a/assets/js/components/working_plan_exceptions_modal.js +++ b/assets/js/components/working_plan_exceptions_modal.js @@ -386,108 +386,13 @@ App.Components.WorkingPlanExceptionsModal = (function () { $('.working-plan-exceptions-add-break').prop('disabled', false); } - /** - * Initialize a datepicker instance on the provided target selector. - * - * @param {jQuery} $target - */ - function initializeDatepicker($target) { - let dateFormat; - - switch (vars('date_format')) { - case 'DMY': - dateFormat = 'dd/mm/yy'; - break; - - case 'MDY': - dateFormat = 'mm/dd/yy'; - break; - - case 'YMD': - dateFormat = 'yy/mm/dd'; - break; - - default: - throw new Error('Invalid date format setting provided: ' + vars('date_format')); - } - - $target.datepicker({ - dateFormat: dateFormat, - firstDay: App.Utils.Date.getWeekdayId(vars('first_weekday')), - minDate: 0, - defaultDate: moment().toDate(), - dayNames: [ - lang('sunday'), - lang('monday'), - lang('tuesday'), - lang('wednesday'), - lang('thursday'), - lang('friday'), - lang('saturday') - ], - dayNamesShort: [ - lang('sunday').substr(0, 3), - lang('monday').substr(0, 3), - lang('tuesday').substr(0, 3), - lang('wednesday').substr(0, 3), - lang('thursday').substr(0, 3), - lang('friday').substr(0, 3), - lang('saturday').substr(0, 3) - ], - dayNamesMin: [ - lang('sunday').substr(0, 2), - lang('monday').substr(0, 2), - lang('tuesday').substr(0, 2), - lang('wednesday').substr(0, 2), - lang('thursday').substr(0, 2), - lang('friday').substr(0, 2), - lang('saturday').substr(0, 2) - ], - monthNames: [ - lang('january'), - lang('february'), - lang('march'), - lang('april'), - lang('may'), - lang('june'), - lang('july'), - lang('august'), - lang('september'), - lang('october'), - lang('november'), - lang('december') - ], - prevText: lang('previous'), - nextText: lang('next'), - currentText: lang('now'), - closeText: lang('close') - }); - } - - /** - * Initialize a timepicker on the provided target selector. - * - * @param {jQuery} $target - */ - function initializeTimepicker($target) { - $target.timepicker({ - timeFormat: vars('time_format') === 'regular' ? 'h:mm tt' : 'HH:mm', - currentText: lang('now'), - closeText: lang('close'), - timeOnlyTitle: lang('select_time'), - timeText: lang('time'), - hourText: lang('hour'), - minuteText: lang('minutes') - }); - } - /** * Initialize the module. */ function initialize() { - initializeDatepicker($date); - initializeTimepicker($start); - initializeTimepicker($end); + App.Utils.UI.initializeDatepicker($date); + App.Utils.UI.initializeTimepicker($start); + App.Utils.UI.initializeTimepicker($end); $modal .on('hidden.bs.modal', onModalHidden) diff --git a/assets/js/pages/legal_settings.js b/assets/js/pages/legal_settings.js index 0bb69319..f3573ce4 100644 --- a/assets/js/pages/legal_settings.js +++ b/assets/js/pages/legal_settings.js @@ -141,9 +141,9 @@ App.Pages.LegalSettings = (function () { * Initialize the module. */ function initialize() { - $cookieNoticeContent.trumbowyg(); - $termsAndConditionsContent.trumbowyg(); - $privacyPolicyContent.trumbowyg(); + App.Utils.UI.initializeTextEditor($cookieNoticeContent); + App.Utils.UI.initializeTextEditor($termsAndConditionsContent); + App.Utils.UI.initializeTextEditor($privacyPolicyContent); const legalSettings = vars('legal_settings'); diff --git a/assets/js/utils/calendar_table_view.js b/assets/js/utils/calendar_table_view.js index 32e54338..05d255c8 100755 --- a/assets/js/utils/calendar_table_view.js +++ b/assets/js/utils/calendar_table_view.js @@ -471,7 +471,7 @@ App.Utils.CalendarTableView = (function () { }); } - $filterProvider.select2(); + App.Utils.UI.initializeDropdown($filterProvider); const services = vars('available_services').filter((service) => { const provider = providers.find((provider) => provider.services.indexOf(service.id) !== -1); @@ -500,7 +500,7 @@ App.Utils.CalendarTableView = (function () { $filterService.append(new Option(service.name, service.id)); }); - $filterService.select2(); + App.Utils.UI.initializeDropdown($filterService); } /** @@ -1054,11 +1054,11 @@ App.Utils.CalendarTableView = (function () { $event.html( lang('break') + - ' ' + - moment(eventDate).format('HH:mm') + - ' (' + - eventDuration + - "')" + ' ' + + moment(eventDate).format('HH:mm') + + ' (' + + eventDuration + + "')" ); $event.data(entry); @@ -1226,8 +1226,8 @@ App.Utils.CalendarTableView = (function () { $('', { 'text': info.event.extendedProps.data ? info.event.extendedProps.data.provider.first_name + - ' ' + - info.event.extendedProps.data.provider.last_name + ' ' + + info.event.extendedProps.data.provider.last_name : '-' }), $('
'), @@ -1238,8 +1238,8 @@ App.Utils.CalendarTableView = (function () { $('', { 'text': App.Utils.Date.format( info.event.extendedProps.data.date + - ' ' + - info.event.extendedProps.data.workingPlanException.start, + ' ' + + info.event.extendedProps.data.workingPlanException.start, vars('date_format'), vars('time_format'), true @@ -1253,8 +1253,8 @@ App.Utils.CalendarTableView = (function () { $('', { 'text': App.Utils.Date.format( info.event.extendedProps.data.date + - ' ' + - info.event.extendedProps.data.workingPlanException.end, + ' ' + + info.event.extendedProps.data.workingPlanException.end, vars('date_format'), vars('time_format'), true diff --git a/assets/js/utils/ui.js b/assets/js/utils/ui.js new file mode 100644 index 00000000..d3fbaef9 --- /dev/null +++ b/assets/js/utils/ui.js @@ -0,0 +1,233 @@ +/* ---------------------------------------------------------------------------- + * Easy!Appointments - Online Appointment Scheduler + * + * @package EasyAppointments + * @author A.Tselegidis + * @copyright Copyright (c) Alex Tselegidis + * @license https://opensource.org/licenses/GPL-3.0 - GPLv3 + * @link https://easyappointments.org + * @since v1.5.0 + * ---------------------------------------------------------------------------- */ + +/** + * UI utility. + * + * This module provides commonly used UI functionality. + */ +window.App.Utils.UI = (function () { + /** + * Get the jQuery UI compatible date format. + * + * @return {String} + */ + function getDateFormat() { + switch (vars('date_format')) { + case 'DMY': + return 'dd/mm/yy'; + case 'MDY': + return 'mm/dd/yy'; + case 'YMD': + return 'yy/mm/dd'; + default: + throw new Error('Invalid date format value.'); + } + } + + + /** + * Initialize the date time picker component. + * + * This method is based on jQuery UI. + * + * @param {jQuery} $target + * @param {Object} [params] + */ + function initializeDatetimepicker($target, params = {}) { + const dateFormat = getDateFormat(); + + const firstWeekDay = vars('first_weekday'); + + const firstWeekDayNumber = App.Utils.Date.getWeekdayId(firstWeekDay); + + const options = { + dateFormat: dateFormat, + timeFormat: vars('time_format') === 'regular' ? 'h:mm tt' : 'HH:mm', + + // Translation + dayNames: [ + lang('sunday'), + lang('monday'), + lang('tuesday'), + lang('wednesday'), + lang('thursday'), + lang('friday'), + lang('saturday') + ], + dayNamesShort: [ + lang('sunday').substring(0, 3), + lang('monday').substring(0, 3), + lang('tuesday').substring(0, 3), + lang('wednesday').substring(0, 3), + lang('thursday').substring(0, 3), + lang('friday').substring(0, 3), + lang('saturday').substring(0, 3) + ], + dayNamesMin: [ + lang('sunday').substring(0, 2), + lang('monday').substring(0, 2), + lang('tuesday').substring(0, 2), + lang('wednesday').substring(0, 2), + lang('thursday').substring(0, 2), + lang('friday').substring(0, 2), + lang('saturday').substring(0, 2) + ], + monthNames: [ + lang('january'), + lang('february'), + lang('march'), + lang('april'), + lang('may'), + lang('june'), + lang('july'), + lang('august'), + lang('september'), + lang('october'), + lang('november'), + lang('december') + ], + prevText: lang('previous'), + nextText: lang('next'), + currentText: lang('now'), + closeText: lang('close'), + timeOnlyTitle: lang('select_time'), + timeText: lang('time'), + hourText: lang('hour'), + minuteText: lang('minutes'), + firstDay: firstWeekDayNumber, + + ...params + } + + $target.datetimepicker(options); + } + + /** + * Initialize the date picker component. + * + * This method is based on jQuery UI. + * + * @param {jQuery} $target + * @param {Object} [params] + */ + function initializeDatepicker($target, params = {}) { + const dateFormat = getDateFormat(); + + $target.datepicker({ + dateFormat: dateFormat, + firstDay: App.Utils.Date.getWeekdayId(vars('first_weekday')), + minDate: 0, + defaultDate: moment().toDate(), + dayNames: [ + lang('sunday'), + lang('monday'), + lang('tuesday'), + lang('wednesday'), + lang('thursday'), + lang('friday'), + lang('saturday') + ], + dayNamesShort: [ + lang('sunday').substring(0, 3), + lang('monday').substring(0, 3), + lang('tuesday').substring(0, 3), + lang('wednesday').substring(0, 3), + lang('thursday').substring(0, 3), + lang('friday').substring(0, 3), + lang('saturday').substring(0, 3) + ], + dayNamesMin: [ + lang('sunday').substring(0, 2), + lang('monday').substring(0, 2), + lang('tuesday').substring(0, 2), + lang('wednesday').substring(0, 2), + lang('thursday').substring(0, 2), + lang('friday').substring(0, 2), + lang('saturday').substring(0, 2) + ], + monthNames: [ + lang('january'), + lang('february'), + lang('march'), + lang('april'), + lang('may'), + lang('june'), + lang('july'), + lang('august'), + lang('september'), + lang('october'), + lang('november'), + lang('december') + ], + prevText: lang('previous'), + nextText: lang('next'), + currentText: lang('now'), + closeText: lang('close'), + + ...params + }); + } + + /** + * Initialize the time picker component. + * + * This method is based on jQuery UI. + * + * @param {jQuery} $target + * @param {Object} [params] + */ + function initializeTimepicker($target, params = {}) { + $target.timepicker({ + timeFormat: vars('time_format') === 'regular' ? 'h:mm tt' : 'HH:mm', + currentText: lang('now'), + closeText: lang('close'), + timeOnlyTitle: lang('select_time'), + timeText: lang('time'), + hourText: lang('hour'), + minuteText: lang('minutes'), + + ...params + }); + } + + /** + * Initialize the select dropdown component. + * + * This method is based on Select2. + * + * @param {jQuery} $target + * @param {Object} [params] + */ + function initializeDropdown($target, params = {}) { + $target.select2(params); + } + + /** + * Initialize the text editor component. + * + * This method is based on Trumbowyg. + * + * @param {jQuery} $target + * @param {Object} [params] + */ + function initializeTextEditor($target, params = {}) { + $target.trumbowyg(params); + } + + return { + initializeDatetimepicker, + initializeDatepicker, + initializeTimepicker, + initializeDropdown, + initializeTextEditor, + }; +})();