Code refactoring and improvements for the working plan utilities page.
This commit is contained in:
parent
b13fb1c574
commit
89c91fbf8b
1 changed files with 707 additions and 713 deletions
|
@ -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;
|
||||||
})();
|
})();
|
||||||
|
|
Loading…
Reference in a new issue