Code refactoring and improvements for the working plan utilities page.

This commit is contained in:
Alex Tselegidis 2022-01-17 15:31:04 +01:00
parent b13fb1c574
commit 89c91fbf8b
1 changed files with 707 additions and 713 deletions

View File

@ -23,14 +23,14 @@ App.Utils.WorkingPlan = (function () {
* *
* @class WorkingPlan * @class WorkingPlan
*/ */
const WorkingPlan = function () { class WorkingPlan {
/** /**
* This flag is used when trying to cancel row editing. It is * This flag is used when trying to cancel row editing. It is
* true only whenever the user presses the cancel button. * true only whenever the user presses the cancel button.
* *
* @type {Boolean} * @type {Boolean}
*/ */
this.enableCancel = false; enableCancel = false;
/** /**
* This flag determines whether the jeditables are allowed to submit. It is * This flag determines whether the jeditables are allowed to submit. It is
@ -38,15 +38,14 @@ App.Utils.WorkingPlan = (function () {
* *
* @type {Boolean} * @type {Boolean}
*/ */
this.enableSubmit = false; enableSubmit = false;
};
/** /**
* Setup the dom elements of a given working plan. * Setup the dom elements of a given working plan.
* *
* @param {Object} workingPlan Contains the working hours and breaks for each day of the week. * @param {Object} workingPlan Contains the working hours and breaks for each day of the week.
*/ */
WorkingPlan.prototype.setup = function (workingPlan) { setup(workingPlan) {
const weekDayId = App.Utils.Date.getWeekdayId(App.Vars.first_weekday); const weekDayId = App.Utils.Date.getWeekdayId(App.Vars.first_weekday);
const workingPlanSorted = App.Utils.Date.sortWeekDictionary(workingPlan, weekDayId); const workingPlanSorted = App.Utils.Date.sortWeekDictionary(workingPlan, weekDayId);
@ -105,7 +104,9 @@ App.Utils.WorkingPlan = (function () {
if (workingDay) { if (workingDay) {
$('#' + index).prop('checked', true); $('#' + index).prop('checked', true);
$('#' + index + '-start').val(moment(workingDay.start, 'HH:mm').format(timeFormat).toLowerCase()); $('#' + index + '-start').val(
moment(workingDay.start, 'HH:mm').format(timeFormat).toLowerCase()
);
$('#' + index + '-end').val(moment(workingDay.end, 'HH:mm').format(timeFormat).toLowerCase()); $('#' + index + '-end').val(moment(workingDay.end, 'HH:mm').format(timeFormat).toLowerCase());
// Sort day's breaks according to the starting hour // Sort day's breaks according to the starting hour
@ -187,21 +188,21 @@ App.Utils.WorkingPlan = (function () {
// Make break cells editable. // Make break cells editable.
this.editableDayCell($('.breaks .break-day')); this.editableDayCell($('.breaks .break-day'));
this.editableTimeCell($('.breaks').find('.break-start, .break-end')); this.editableTimeCell($('.breaks').find('.break-start, .break-end'));
}; }
/** /**
* Setup the dom elements of a given working plan exception. * Setup the dom elements of a given working plan exception.
* *
* @param {Object} workingPlanExceptions Contains the working plan exception. * @param {Object} workingPlanExceptions Contains the working plan exception.
*/ */
WorkingPlan.prototype.setupWorkingPlanExceptions = function (workingPlanExceptions) { setupWorkingPlanExceptions(workingPlanExceptions) {
for (const date in workingPlanExceptions) { for (const date in workingPlanExceptions) {
const workingPlanException = workingPlanExceptions[date]; const workingPlanException = workingPlanExceptions[date];
this.renderWorkingPlanExceptionRow(date, workingPlanException).appendTo('.working-plan-exceptions tbody'); this.renderWorkingPlanExceptionRow(date, workingPlanException).appendTo(
'.working-plan-exceptions tbody'
);
}
} }
};
/** /**
* Enable editable break day. * Enable editable break day.
* *
@ -209,7 +210,7 @@ App.Utils.WorkingPlan = (function () {
* *
* @param {Object} $selector The jquery selector ready for use. * @param {Object} $selector The jquery selector ready for use.
*/ */
WorkingPlan.prototype.editableDayCell = function ($selector) { editableDayCell($selector) {
const weekDays = {}; const weekDays = {};
weekDays[App.Lang.sunday] = App.Lang.sunday; //'Sunday'; weekDays[App.Lang.sunday] = App.Lang.sunday; //'Sunday';
weekDays[App.Lang.monday] = App.Lang.monday; //'Monday'; weekDays[App.Lang.monday] = App.Lang.monday; //'Monday';
@ -220,7 +221,7 @@ App.Utils.WorkingPlan = (function () {
weekDays[App.Lang.saturday] = App.Lang.saturday; //'Saturday'; weekDays[App.Lang.saturday] = App.Lang.saturday; //'Saturday';
$selector.editable( $selector.editable(
function (value, settings) { function (value) {
return value; return value;
}, },
{ {
@ -231,20 +232,19 @@ App.Utils.WorkingPlan = (function () {
submit: '<button type="button" class="d-none submit-editable">Submit</button>', submit: '<button type="button" class="d-none submit-editable">Submit</button>',
cancel: '<button type="button" class="d-none cancel-editable">Cancel</button>', cancel: '<button type="button" class="d-none cancel-editable">Cancel</button>',
onblur: 'ignore', onblur: 'ignore',
onreset: function (settings, td) { onreset: function () {
if (!this.enableCancel) { if (!this.enableCancel) {
return false; // disable ESC button return false; // disable ESC button
} }
}.bind(this), }.bind(this),
onsubmit: function (settings, td) { onsubmit: function () {
if (!this.enableSubmit) { if (!this.enableSubmit) {
return false; // disable Enter button return false; // disable Enter button
} }
}.bind(this) }.bind(this)
} }
); );
}; }
/** /**
* Enable editable break time. * Enable editable break time.
* *
@ -252,9 +252,9 @@ App.Utils.WorkingPlan = (function () {
* *
* @param {Object} $selector The jquery selector ready for use. * @param {Object} $selector The jquery selector ready for use.
*/ */
WorkingPlan.prototype.editableTimeCell = function ($selector) { editableTimeCell($selector) {
$selector.editable( $selector.editable(
function (value, settings) { function (value) {
// Do not return the value because the user needs to press the "Save" button. // Do not return the value because the user needs to press the "Save" button.
return value; return value;
}, },
@ -272,20 +272,19 @@ App.Utils.WorkingPlan = (function () {
'text': App.Lang.cancel 'text': App.Lang.cancel
}).get(0).outerHTML, }).get(0).outerHTML,
onblur: 'ignore', onblur: 'ignore',
onreset: function (settings, td) { onreset: function () {
if (!this.enableCancel) { if (!this.enableCancel) {
return false; // disable ESC button return false; // disable ESC button
} }
}.bind(this), }.bind(this),
onsubmit: function (settings, td) { onsubmit: function () {
if (!this.enableSubmit) { if (!this.enableSubmit) {
return false; // disable Enter button return false; // disable Enter button
} }
}.bind(this) }.bind(this)
} }
); );
}; }
/** /**
* Enable editable break time. * Enable editable break time.
* *
@ -294,7 +293,7 @@ App.Utils.WorkingPlan = (function () {
* @param {String} date In "Y-m-d" format. * @param {String} date In "Y-m-d" format.
* @param {Object} workingPlanException Contains exception information. * @param {Object} workingPlanException Contains exception information.
*/ */
WorkingPlan.prototype.renderWorkingPlanExceptionRow = function (date, workingPlanException) { renderWorkingPlanExceptionRow(date, workingPlanException) {
const timeFormat = App.Vars.time_format === 'regular' ? 'h:mm a' : 'HH:mm'; const timeFormat = App.Vars.time_format === 'regular' ? 'h:mm a' : 'HH:mm';
return $('<tr/>', { return $('<tr/>', {
@ -341,12 +340,11 @@ App.Utils.WorkingPlan = (function () {
}) })
] ]
}); });
}; }
/** /**
* Bind the event handlers. * Bind the event handlers.
*/ */
WorkingPlan.prototype.bindEventHandlers = function () { bindEventHandlers() {
/** /**
* Event: Day Checkbox "Click" * Event: Day Checkbox "Click"
* *
@ -570,7 +568,7 @@ App.Utils.WorkingPlan = (function () {
function () { function () {
App.Components.WorkingPlanExceptionsModal.add().done( App.Components.WorkingPlanExceptionsModal.add().done(
function (date, workingPlanException) { function (date, workingPlanException) {
const $tr = null; let $tr = null;
$('.working-plan-exceptions tbody tr').each(function (index, tr) { $('.working-plan-exceptions tbody tr').each(function (index, tr) {
if (date === $(tr).data('date')) { if (date === $(tr).data('date')) {
@ -622,14 +620,13 @@ App.Utils.WorkingPlan = (function () {
$(document).on('click', '.delete-working-plan-exception', function () { $(document).on('click', '.delete-working-plan-exception', function () {
$(this).closest('tr').remove(); $(this).closest('tr').remove();
}); });
}; }
/** /**
* Get the working plan settings. * Get the working plan settings.
* *
* @return {Object} Returns the working plan settings object. * @return {Object} Returns the working plan settings object.
*/ */
WorkingPlan.prototype.get = function () { get() {
const workingPlan = {}; const workingPlan = {};
$('.working-plan input:checkbox').each( $('.working-plan input:checkbox').each(
@ -655,9 +652,10 @@ App.Utils.WorkingPlan = (function () {
start, start,
App.Vars.time_format === 'regular' ? 'h:mm a' : 'HH:mm' App.Vars.time_format === 'regular' ? 'h:mm a' : 'HH:mm'
).format('HH:mm'), ).format('HH:mm'),
end: moment(end, App.Vars.time_format === 'regular' ? 'h:mm a' : 'HH:mm').format( end: moment(
'HH:mm' end,
) App.Vars.time_format === 'regular' ? 'h:mm a' : 'HH:mm'
).format('HH:mm')
}); });
} }
}.bind(this) }.bind(this)
@ -675,14 +673,13 @@ App.Utils.WorkingPlan = (function () {
); );
return workingPlan; return workingPlan;
}; }
/** /**
* Get the working plan exceptions settings. * Get the working plan exceptions settings.
* *
* @return {Object} Returns the working plan exceptions settings object. * @return {Object} Returns the working plan exceptions settings object.
*/ */
WorkingPlan.prototype.getWorkingPlanExceptions = function () { getWorkingPlanExceptions() {
const workingPlanExceptions = {}; const workingPlanExceptions = {};
$('.working-plan-exceptions tbody tr').each(function (index, tr) { $('.working-plan-exceptions tbody tr').each(function (index, tr) {
@ -692,14 +689,13 @@ App.Utils.WorkingPlan = (function () {
}); });
return workingPlanExceptions; return workingPlanExceptions;
}; }
/** /**
* Enables or disables the timepicker functionality from the working plan input text fields. * Enables or disables the timepicker functionality from the working plan input text fields.
* *
* @param {Boolean} [disabled] If true then the timepickers will be disabled. * @param {Boolean} [disabled] If true then the timepickers will be disabled.
*/ */
WorkingPlan.prototype.timepickers = function (disabled) { timepickers(disabled) {
disabled = disabled || false; disabled = disabled || false;
if (disabled === false) { if (disabled === false) {
@ -713,7 +709,7 @@ App.Utils.WorkingPlan = (function () {
hourText: App.Lang.hour, hourText: App.Lang.hour,
minuteText: App.Lang.minutes, minuteText: App.Lang.minutes,
onSelect: function (datetime, inst) { onSelect: function () {
// Start time must be earlier than end time. // Start time must be earlier than end time.
const startMoment = moment($(this).parent().parent().find('.work-start').val(), 'HH:mm'); const startMoment = moment($(this).parent().parent().find('.work-start').val(), 'HH:mm');
@ -736,19 +732,17 @@ App.Utils.WorkingPlan = (function () {
} else { } else {
$('.working-plan input').timepicker('destroy'); $('.working-plan input').timepicker('destroy');
} }
}; }
/** /**
* Reset the current plan back to the company's default working plan. * Reset the current plan back to the company's default working plan.
*/ */
WorkingPlan.prototype.reset = function () {}; reset() {}
/** /**
* This is necessary for translated days. * This is necessary for translated days.
* *
* @param {String} value Day value could be like "monday", "tuesday" etc. * @param {String} value Day value could be like "monday", "tuesday" etc.
*/ */
WorkingPlan.prototype.convertValueToDay = function (value) { convertValueToDay(value) {
switch (value) { switch (value) {
case 'sunday': case 'sunday':
return App.Lang.sunday; return App.Lang.sunday;
@ -765,14 +759,13 @@ App.Utils.WorkingPlan = (function () {
case 'saturday': case 'saturday':
return App.Lang.saturday; return App.Lang.saturday;
} }
}; }
/** /**
* This is necessary for translated days. * This is necessary for translated days.
* *
* @param {String} day Day value could be like "Monday", "Tuesday" etc. * @param {String} day Day value could be like "Monday", "Tuesday" etc.
*/ */
WorkingPlan.prototype.convertDayToValue = function (day) { convertDayToValue(day) {
switch (day) { switch (day) {
case App.Lang.sunday: case App.Lang.sunday:
return 'sunday'; return 'sunday';
@ -789,7 +782,8 @@ App.Utils.WorkingPlan = (function () {
case App.Lang.saturday: case App.Lang.saturday:
return 'saturday'; return 'saturday';
} }
}; }
}
return WorkingPlan; return WorkingPlan;
})(); })();