ifl/iflrandevu
1
1
Fork 0
forked from mirrors/easyappointments
Code Issues 6 Pull requests Releases 3 Activity

Code refactoring and improvements for the categories page.

Browse source
This commit is contained in:
Alex Tselegidis 2022-01-17 06:40:48 +01:00
parent 0a7f40a65e
commit 8b74297fb3
1 changed files with 64 additions and 82 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

144
assets/js/pages/categories.js
View file

@ -16,19 +16,23 @@
*/ */
App.Pages.Categories = (function () { App.Pages.Categories = (function () {
const $categories = $('#categories'); const $categories = $('#categories');
const $filterCategories = $('#filter-categories');
const $id = $('#category-id');
const $name = $('#category-name');
const $description = $('#category-description');
let filterResults = {}; let filterResults = {};
let filterLimit = 20; let filterLimit = 20;
/** /**
* Bind the event handlers. * Add the page event listeners.
*/ */
function bindEventHandlers() { function addEventListeners() {
/** /**
* Event: Filter Categories Form "Submit" * Event: Filter Categories Form "Submit"
* *
* @param {jQuery.Event} event * @param {jQuery.Event} event
*/ */
$categories.on('submit', '#filter-categories form', function (event) { $categories.on('submit', '#filter-categories form', (event) => {
event.preventDefault(); event.preventDefault();
const key = $('#filter-categories .key').val(); const key = $('#filter-categories .key').val();
$('.selected').removeClass('selected'); $('.selected').removeClass('selected');
@ -40,64 +44,64 @@ App.Pages.Categories = (function () {
* Event: Filter Categories Row "Click" * Event: Filter Categories Row "Click"
* *
* Displays the selected row data on the right side of the page. * Displays the selected row data on the right side of the page.
*
* @param {jQuery.Event} event
*/ */
$categories.on('click', '.category-row', function () { $categories.on('click', '.category-row', (event) => {
if ($('#filter-categories .filter').prop('disabled')) { if ($('#filter-categories .filter').prop('disabled')) {
$('#filter-categories .results').css('color', '#AAA'); $('#filter-categories .results').css('color', '#AAA');
return; // exit because we are on edit mode return; // exit because we are on edit mode
} }
const categoryId = $(this).attr('data-id'); const categoryId = $(event.target).attr('data-id');
const category = filterResults.find(function (filterResult) { const category = filterResults.find((filterResult) => Number(filterResult.id) === Number(categoryId));
return Number(filterResult.id) === Number(categoryId);
});
display(category); display(category);
$('#filter-categories .selected').removeClass('selected'); $('#filter-categories .selected').removeClass('selected');
$(this).addClass('selected'); $(event.target).addClass('selected');
$('#edit-category, #delete-category').prop('disabled', false); $('#edit-category, #delete-category').prop('disabled', false);
}); });
/** /**
* Event: Add Category Button "Click" * Event: Add Category Button "Click"
*/ */
$categories.on('click', '#add-category', function () { $categories.on('click', '#add-category', () => {
resetForm(); resetForm();
$('#categories .add-edit-delete-group').hide(); $categories.find('.add-edit-delete-group').hide();
$('#categories .save-cancel-group').show(); $categories.find('.save-cancel-group').show();
$('#categories .record-details').find('input, select, textarea').prop('disabled', false); $categories.find('.record-details').find('input, select, textarea').prop('disabled', false);
$('#filter-categories button').prop('disabled', true); $filterCategories.find('button').prop('disabled', true);
$('#filter-categories .results').css('color', '#AAA'); $filterCategories.find('.results').css('color', '#AAA');
}); });
/** /**
* Event: Edit Category Button "Click" * Event: Edit Category Button "Click"
*/ */
$categories.on('click', '#edit-category', function () { $categories.on('click', '#edit-category', () => {
$('#categories .add-edit-delete-group').hide(); $categories.find('.add-edit-delete-group').hide();
$('#categories .save-cancel-group').show(); $categories.find('.save-cancel-group').show();
$('#categories .record-details').find('input, select, textarea').prop('disabled', false); $categories.find('.record-details').find('input, select, textarea').prop('disabled', false);
$('#filter-categories button').prop('disabled', true); $filterCategories.find('button').prop('disabled', true);
$('#filter-categories .results').css('color', '#AAA'); $filterCategories.find('.results').css('color', '#AAA');
}); });
/** /**
* Event: Delete Category Button "Click" * Event: Delete Category Button "Click"
*/ */
$categories.on('click', '#delete-category', function () { $categories.on('click', '#delete-category', () => {
const categoryId = $('#category-id').val(); const categoryId = $id.val();
const buttons = [ const buttons = [
{ {
text: App.Lang.cancel, text: App.Lang.cancel,
click: function () { click: () => {
$('#message-box').dialog('close'); $('#message-box').dialog('close');
} }
}, },
{ {
text: App.Lang.delete, text: App.Lang.delete,
click: function () { click: () => {
remove(categoryId); remove(categoryId);
$('#message-box').dialog('close'); $('#message-box').dialog('close');
} }
@ -110,14 +114,14 @@ App.Pages.Categories = (function () {
/** /**
* Event: Categories Save Button "Click" * Event: Categories Save Button "Click"
*/ */
$categories.on('click', '#save-category', function () { $categories.on('click', '#save-category', () => {
const category = { const category = {
name: $('#category-name').val(), name: $name.val(),
description: $('#category-description').val() description: $description.val()
}; };
if ($('#category-id').val() !== '') { if ($id.val() !== '') {
category.id = $('#category-id').val(); category.id = $id.val();
} }
if (!validate()) { if (!validate()) {
@ -130,8 +134,8 @@ App.Pages.Categories = (function () {
/** /**
* Event: Cancel Category Button "Click" * Event: Cancel Category Button "Click"
*/ */
$categories.on('click', '#cancel-category', function () { $categories.on('click', '#cancel-category', () => {
const id = $('#category-id').val(); const id = $id.val();
resetForm(); resetForm();
if (id !== '') { if (id !== '') {
select(id, true); select(id, true);
@ -139,21 +143,6 @@ App.Pages.Categories = (function () {
}); });
} }
/**
* Remove the previously registered event handlers.
*/
function unbindEventHandlers() {
$categories
.off('click', '#filter-categories .clear')
.off('submit', '#filter-categories form')
.off('click', '.category-row')
.off('click', '#add-category')
.off('click', '#edit-category')
.off('click', '#delete-category')
.off('click', '#save-category')
.off('click', '#cancel-category');
}
/** /**
* Filter service categories records. * Filter service categories records.
* *
@ -168,11 +157,9 @@ App.Pages.Categories = (function () {
$('#filter-categories .results').empty(); $('#filter-categories .results').empty();
response.forEach( response.forEach((category) => {
function (category) {
$('#filter-categories .results').append(getFilterHtml(category)).append($('<hr/>')); $('#filter-categories .results').append(getFilterHtml(category)).append($('<hr/>'));
}.bind(this) });
);
if (response.length === 0) { if (response.length === 0) {
$('#filter-categories .results').append( $('#filter-categories .results').append(
@ -185,10 +172,10 @@ App.Pages.Categories = (function () {
'type': 'button', 'type': 'button',
'class': 'btn btn-outline-secondary w-100 load-more text-center', 'class': 'btn btn-outline-secondary w-100 load-more text-center',
'text': App.Lang.load_more, 'text': App.Lang.load_more,
'click': function () { 'click': () => {
filterLimit += 20; filterLimit += 20;
filter(keyword, selectId, show); filter(keyword, selectId, show);
}.bind(this) }
}).appendTo('#filter-categories .results'); }).appendTo('#filter-categories .results');
} }
@ -207,7 +194,7 @@ App.Pages.Categories = (function () {
App.Http.Categories.save(category).then((response) => { App.Http.Categories.save(category).then((response) => {
App.Layouts.Backend.displayNotification(App.Lang.category_saved); App.Layouts.Backend.displayNotification(App.Lang.category_saved);
resetForm(); resetForm();
$('#filter-categories .key').val(''); $filterCategories.find('.key').val('');
filter('', response.id, true); filter('', response.id, true);
}); });
} }
@ -231,9 +218,9 @@ App.Pages.Categories = (function () {
* @param {Object} category Contains the category data. * @param {Object} category Contains the category data.
*/ */
function display(category) { function display(category) {
$('#category-id').val(category.id); $id.val(category.id);
$('#category-name').val(category.name); $name.val(category.name);
$('#category-description').val(category.description); $description.val(category.description);
} }
/** /**
@ -242,15 +229,15 @@ App.Pages.Categories = (function () {
* @return {Boolean} Returns the validation result. * @return {Boolean} Returns the validation result.
*/ */
function validate() { function validate() {
$('#categories .is-invalid').removeClass('is-invalid'); $categories.find('.is-invalid').removeClass('is-invalid');
$('#categories .form-message').removeClass('alert-danger').hide(); $categories.find('.form-message').removeClass('alert-danger').hide();
try { try {
let missingRequired = false; let missingRequired = false;
$('#categories .required').each(function (index, requiredField) { $categories.find('.required').each((index, fieldEl) => {
if (!$(requiredField).val()) { if (!$(fieldEl).val()) {
$(requiredField).addClass('is-invalid'); $(fieldEl).addClass('is-invalid');
missingRequired = true; missingRequired = true;
} }
}); });
@ -261,7 +248,7 @@ App.Pages.Categories = (function () {
return true; return true;
} catch (error) { } catch (error) {
$('#categories .form-message').addClass('alert-danger').text(error.message).show(); $categories.find('.form-message').addClass('alert-danger').text(error.message).show();
return false; return false;
} }
} }
@ -270,17 +257,17 @@ App.Pages.Categories = (function () {
* Bring the category form back to its initial state. * Bring the category form back to its initial state.
*/ */
function resetForm() { function resetForm() {
$('#filter-categories .selected').removeClass('selected'); $filterCategories.find('.selected').removeClass('selected');
$('#filter-categories button').prop('disabled', false); $filterCategories.find('button').prop('disabled', false);
$('#filter-categories .results').css('color', ''); $filterCategories.find('.results').css('color', '');
$('#categories .add-edit-delete-group').show(); $categories.find('.add-edit-delete-group').show();
$('#categories .save-cancel-group').hide(); $categories.find('.save-cancel-group').hide();
$('#categories .record-details').find('input, select, textarea').val('').prop('disabled', true); $categories.find('.record-details').find('input, select, textarea').val('').prop('disabled', true);
$('#edit-category, #delete-category').prop('disabled', true); $('#edit-category, #delete-category').prop('disabled', true);
$('#categories .record-details .is-invalid').removeClass('is-invalid'); $categories.find('.record-details .is-invalid').removeClass('is-invalid');
$('#categories .record-details .form-message').hide(); $categories.find('.record-details .form-message').hide();
} }
/** /**
@ -309,20 +296,15 @@ App.Pages.Categories = (function () {
* If the category ID does not exist in the list then no record will be selected. * If the category ID does not exist in the list then no record will be selected.
* *
* @param {Number} id The record ID to be selected from the filter results. * @param {Number} id The record ID to be selected from the filter results.
* @param {Boolean} show Optional (false), if true then the method will display the record * @param {Boolean} show Optional (false), if true then the method will display the record on the form.
* on the form.
*/ */
function select(id, show = false) { function select(id, show = false) {
$('#filter-categories .selected').removeClass('selected'); $filterCategories.find('.selected').removeClass('selected');
$('#filter-categories .category-row[data-id="' + id + '"]').addClass('selected'); $filterCategories.find('.category-row[data-id="' + id + '"]').addClass('selected');
if (show) { if (show) {
const category = filterResults.find( const category = filterResults.find((category) => Number(category.id) === Number(id));
function (category) {
return Number(category.id) === Number(id);
}.bind(this)
);
display(category); display(category);
@ -336,7 +318,7 @@ App.Pages.Categories = (function () {
function initialize() { function initialize() {
resetForm(); resetForm();
filter(''); filter('');
bindEventHandlers(); addEventListeners();
} }
document.addEventListener('DOMContentLoaded', initialize); document.addEventListener('DOMContentLoaded', initialize);