Backend users and services page would register the tab content events again and again

This commit is contained in:
Alex Tselegidis 2020-12-08 13:23:37 +02:00
parent 334fee3727
commit e92902f332
13 changed files with 150 additions and 55 deletions

View file

@ -27,7 +27,7 @@
</script> </script>
<div class="container-fluid backend-page" id="customers-page"> <div class="container-fluid backend-page" id="customers-page">
<div class="row"> <div class="row" id="customers">
<div id="filter-customers" class="filter-records col col-12 col-md-5"> <div id="filter-customers" class="filter-records col col-12 col-md-5">
<form class="mb-4"> <form class="mb-4">
<div class="input-group"> <div class="input-group">

View file

@ -55,7 +55,7 @@
<i class="fas fa-search"></i> <i class="fas fa-search"></i>
</button> </button>
<button class="clear btn btn-outline-secondary" type="button" data-tippy-content="<?= lang('clear') ?>"> <button class="clear btn btn-outline-secondary" type="button" data-tippy-content="<?= lang('clear') ?>">
<i class="fas fa-redo-alt"></i> <i class="fas fa-redo-alt"></i>
</button> </button>
</div> </div>
</div> </div>

View file

@ -66,16 +66,16 @@
<div class="input-group"> <div class="input-group">
<input type="text" class="key form-control"> <input type="text" class="key form-control">
<span class="input-group-addon"> <div class="input-group-addon">
<div> <div>
<button class="filter btn btn-outline-secondary" type="submit" data-tippy-content="<?= lang('filter') ?>"> <button class="filter btn btn-outline-secondary" type="submit" data-tippy-content="<?= lang('filter') ?>">
<i class="fas fa-search"></i> <i class="fas fa-search"></i>
</button> </button>
<button class="clear btn btn-outline-secondary" type="button" data-tippy-content="<?= lang('clear') ?>"> <button class="clear btn btn-outline-secondary" type="button" data-tippy-content="<?= lang('clear') ?>">
<i class="fas fa-redo-alt"></i> <i class="fas fa-redo-alt"></i>
</button> </button>
</div> </div>
</span> </div>
</div> </div>
</form> </form>

View file

@ -35,7 +35,7 @@
/** /**
* Event: Filter Categories Cancel Button "Click" * Event: Filter Categories Cancel Button "Click"
*/ */
$('#filter-categories .clear').on('click', function () { $('#categories').on('click', '#filter-categories .clear', function () {
$('#filter-categories .key').val(''); $('#filter-categories .key').val('');
instance.filter(''); instance.filter('');
instance.resetForm(); instance.resetForm();
@ -43,13 +43,15 @@
/** /**
* Event: Filter Categories Form "Submit" * Event: Filter Categories Form "Submit"
*
* @param {jQuery.Event} event
*/ */
$('#filter-categories form').submit(function () { $('#categories').on('submit', '#filter-categories form', function (event) {
event.preventDefault();
var key = $('#filter-categories .key').val(); var key = $('#filter-categories .key').val();
$('.selected').removeClass('selected'); $('.selected').removeClass('selected');
instance.resetForm(); instance.resetForm();
instance.filter(key); instance.filter(key);
return false;
}); });
/** /**
@ -57,7 +59,7 @@
* *
* Displays the selected row data on the right side of the page. * Displays the selected row data on the right side of the page.
*/ */
$(document).on('click', '.category-row', function () { $('#categories').on('click', '.category-row', function () {
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
@ -78,7 +80,7 @@
/** /**
* Event: Add Category Button "Click" * Event: Add Category Button "Click"
*/ */
$('#add-category').on('click', function () { $('#categories').on('click', '#add-category', function () {
instance.resetForm(); instance.resetForm();
$('#categories .add-edit-delete-group').hide(); $('#categories .add-edit-delete-group').hide();
$('#categories .save-cancel-group').show(); $('#categories .save-cancel-group').show();
@ -90,7 +92,7 @@
/** /**
* Event: Edit Category Button "Click" * Event: Edit Category Button "Click"
*/ */
$('#edit-category').on('click', function () { $('#categories').on('click', '#edit-category', function () {
$('#categories .add-edit-delete-group').hide(); $('#categories .add-edit-delete-group').hide();
$('#categories .save-cancel-group').show(); $('#categories .save-cancel-group').show();
$('#categories .record-details').find('input, select, textarea').prop('disabled', false); $('#categories .record-details').find('input, select, textarea').prop('disabled', false);
@ -101,7 +103,7 @@
/** /**
* Event: Delete Category Button "Click" * Event: Delete Category Button "Click"
*/ */
$('#delete-category').on('click', function () { $('#categories').on('click', '#delete-category', function () {
var categoryId = $('#category-id').val(); var categoryId = $('#category-id').val();
var buttons = [ var buttons = [
@ -127,7 +129,7 @@
/** /**
* Event: Categories Save Button "Click" * Event: Categories Save Button "Click"
*/ */
$('#save-category').on('click', function () { $('#categories').on('click', '#save-category', function () {
var category = { var category = {
name: $('#category-name').val(), name: $('#category-name').val(),
description: $('#category-description').val() description: $('#category-description').val()
@ -147,7 +149,7 @@
/** /**
* Event: Cancel Category Button "Click" * Event: Cancel Category Button "Click"
*/ */
$('#cancel-category').on('click', function () { $('#categories').on('click', '#cancel-category', function () {
var id = $('#category-id').val(); var id = $('#category-id').val();
instance.resetForm(); instance.resetForm();
if (id !== '') { if (id !== '') {
@ -156,6 +158,21 @@
}); });
}; };
/**
* Remove the previously registered event handlers.
*/
CategoriesHelper.prototype.unbindEventHandlers = function () {
$('#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.
* *
@ -179,7 +196,7 @@
$('#filter-categories .results').empty(); $('#filter-categories .results').empty();
response.forEach(function(category) { response.forEach(function (category) {
$('#filter-categories .results') $('#filter-categories .results')
.append(this.getFilterHtml(category)) .append(this.getFilterHtml(category))
.append($('<hr/>')); .append($('<hr/>'));

View file

@ -50,6 +50,7 @@ window.BackendCustomers = window.BackendCustomers || {};
helper = new CustomersHelper(); helper = new CustomersHelper();
helper.resetForm(); helper.resetForm();
helper.filter(''); helper.filter('');
helper.bindEventHandlers();
if (defaultEventHandlers) { if (defaultEventHandlers) {
bindEventHandlers(); bindEventHandlers();
@ -60,7 +61,7 @@ window.BackendCustomers = window.BackendCustomers || {};
* Default event handlers declaration for backend customers page. * Default event handlers declaration for backend customers page.
*/ */
function bindEventHandlers() { function bindEventHandlers() {
helper.bindEventHandlers(); //
} }
})(window.BackendCustomers); })(window.BackendCustomers);

View file

@ -33,20 +33,22 @@
/** /**
* Event: Filter Customers Form "Submit" * Event: Filter Customers Form "Submit"
*
* @param {jQuery.Event} event
*/ */
$('#filter-customers form').submit(function (event) { $('#customers').on('submit', '#filter-customers form', function (event) {
event.preventDefault();
var key = $('#filter-customers .key').val(); var key = $('#filter-customers .key').val();
$('#filter-customers .selected').removeClass('selected'); $('#filter-customers .selected').removeClass('selected');
instance.filterLimit = 20; instance.filterLimit = 20;
instance.resetForm(); instance.resetForm();
instance.filter(key); instance.filter(key);
return false;
}); });
/** /**
* Event: Filter Customers Clear Button "Click" * Event: Filter Customers Clear Button "Click"
*/ */
$('#filter-customers .clear').on('click', function () { $('#customers').on('click', '#filter-customers .clear', function () {
$('#filter-customers .key').val(''); $('#filter-customers .key').val('');
instance.filterLimit = 20; instance.filterLimit = 20;
instance.filter(''); instance.filter('');
@ -58,7 +60,7 @@
* *
* Display the customer data of the selected row. * Display the customer data of the selected row.
*/ */
$(document).on('click', '.entry', function () { $('#customers').on('click', '.customer-row', function () {
if ($('#filter-customers .filter').prop('disabled')) { if ($('#filter-customers .filter').prop('disabled')) {
return; // Do nothing when user edits a customer record. return; // Do nothing when user edits a customer record.
} }
@ -77,7 +79,7 @@
/** /**
* Event: Add Customer Button "Click" * Event: Add Customer Button "Click"
*/ */
$('#add-customer').on('click', function () { $('#customers').on('click', '#add-customer', function () {
instance.resetForm(); instance.resetForm();
$('#add-edit-delete-group').hide(); $('#add-edit-delete-group').hide();
$('#save-cancel-group').show(); $('#save-cancel-group').show();
@ -91,7 +93,7 @@
/** /**
* Event: Edit Customer Button "Click" * Event: Edit Customer Button "Click"
*/ */
$('#edit-customer').on('click', function () { $('#customers').on('click', '#edit-customer', function () {
$('.record-details') $('.record-details')
.find('input, select, textarea') .find('input, select, textarea')
.prop('disabled', false); .prop('disabled', false);
@ -104,7 +106,7 @@
/** /**
* Event: Cancel Customer Add/Edit Operation Button "Click" * Event: Cancel Customer Add/Edit Operation Button "Click"
*/ */
$('#cancel-customer').on('click', function () { $('#customers').on('click', '#cancel-customer', function () {
var id = $('#customer-id').val(); var id = $('#customer-id').val();
instance.resetForm(); instance.resetForm();
if (id) { if (id) {
@ -115,7 +117,7 @@
/** /**
* Event: Save Add/Edit Customer Operation "Click" * Event: Save Add/Edit Customer Operation "Click"
*/ */
$('#save-customer').on('click', function () { $('#customers').on('click', '#save-customer', function () {
var customer = { var customer = {
first_name: $('#first-name').val(), first_name: $('#first-name').val(),
last_name: $('#last-name').val(), last_name: $('#last-name').val(),
@ -143,7 +145,7 @@
/** /**
* Event: Delete Customer Button "Click" * Event: Delete Customer Button "Click"
*/ */
$('#delete-customer').on('click', function () { $('#customers').on('click', '#delete-customer', function () {
var customerId = $('#customer-id').val(); var customerId = $('#customer-id').val();
var buttons = [ var buttons = [
{ {

View file

@ -51,6 +51,7 @@ window.BackendServices = window.BackendServices || {};
helper = servicesHelper; helper = servicesHelper;
helper.resetForm(); helper.resetForm();
helper.filter(''); helper.filter('');
helper.bindEventHandlers();
if (defaultEventHandlers) { if (defaultEventHandlers) {
bindEventHandlers(); bindEventHandlers();
@ -69,6 +70,10 @@ window.BackendServices = window.BackendServices || {};
* Changes the displayed tab. * Changes the displayed tab.
*/ */
$('a[data-toggle="tab"]').on('shown.bs.tab', function () { $('a[data-toggle="tab"]').on('shown.bs.tab', function () {
if (helper) {
helper.unbindEventHandlers();
}
if ($(this).attr('href') === '#services') { if ($(this).attr('href') === '#services') {
helper = servicesHelper; helper = servicesHelper;
} else if ($(this).attr('href') === '#categories') { } else if ($(this).attr('href') === '#categories') {
@ -77,16 +82,14 @@ window.BackendServices = window.BackendServices || {};
helper.resetForm(); helper.resetForm();
helper.filter(''); helper.filter('');
helper.bindEventHandlers();
$('.filter-key').val(''); $('.filter-key').val('');
Backend.placeFooterToBottom(); Backend.placeFooterToBottom();
}); });
servicesHelper.bindEventHandlers();
categoriesHelper.bindEventHandlers();
} }
/** /**
* Update the service category listbox. * Update the service category list box.
* *
* Use this method every time a change is made to the service categories db table. * Use this method every time a change is made to the service categories db table.
*/ */

View file

@ -33,18 +33,18 @@
* *
* @param {jQuery.Event} event * @param {jQuery.Event} event
*/ */
$('#filter-services form').submit(function (event) { $('#services').on('submit', '#filter-services form', function (event) {
event.preventDefault();
var key = $('#filter-services .key').val(); var key = $('#filter-services .key').val();
$('#filter-services .selected').removeClass('selected'); $('#filter-services .selected').removeClass('selected');
instance.resetForm(); instance.resetForm();
instance.filter(key); instance.filter(key);
return false;
}); });
/** /**
* Event: Filter Service Cancel Button "Click" * Event: Filter Service Cancel Button "Click"
*/ */
$('#filter-services .clear').on('click', function () { $('#services').on('click', '#filter-services .clear', function () {
$('#filter-services .key').val(''); $('#filter-services .key').val('');
instance.filter(''); instance.filter('');
instance.resetForm(); instance.resetForm();
@ -55,7 +55,7 @@
* *
* Display the selected service data to the user. * Display the selected service data to the user.
*/ */
$(document).on('click', '.service-row', function () { $('#services').on('click', '.service-row', function () {
if ($('#filter-services .filter').prop('disabled')) { if ($('#filter-services .filter').prop('disabled')) {
$('#filter-services .results').css('color', '#AAA'); $('#filter-services .results').css('color', '#AAA');
return; // exit because we are on edit mode return; // exit because we are on edit mode
@ -93,7 +93,7 @@
/** /**
* Event: Add New Service Button "Click" * Event: Add New Service Button "Click"
*/ */
$('#add-service').on('click', function () { $('#services').on('click', '#add-service', function () {
instance.resetForm(); instance.resetForm();
$('#services .add-edit-delete-group').hide(); $('#services .add-edit-delete-group').hide();
$('#services .save-cancel-group').show(); $('#services .save-cancel-group').show();
@ -118,7 +118,7 @@
* *
* Cancel add or edit of a service record. * Cancel add or edit of a service record.
*/ */
$('#cancel-service').on('click', function () { $('#services').on('click', '#cancel-service', function () {
var id = $('#service-id').val(); var id = $('#service-id').val();
instance.resetForm(); instance.resetForm();
if (id !== '') { if (id !== '') {
@ -129,7 +129,7 @@
/** /**
* Event: Save Service Button "Click" * Event: Save Service Button "Click"
*/ */
$('#save-service').on('click', function () { $('#services').on('click', '#save-service', function () {
var service = { var service = {
name: $('#service-name').val(), name: $('#service-name').val(),
duration: $('#service-duration').val(), duration: $('#service-duration').val(),
@ -161,7 +161,7 @@
/** /**
* Event: Edit Service Button "Click" * Event: Edit Service Button "Click"
*/ */
$('#edit-service').on('click', function () { $('#services').on('click', '#edit-service', function () {
$('#services .add-edit-delete-group').hide(); $('#services .add-edit-delete-group').hide();
$('#services .save-cancel-group').show(); $('#services .save-cancel-group').show();
$('#services .record-details') $('#services .record-details')
@ -174,7 +174,7 @@
/** /**
* Event: Delete Service Button "Click" * Event: Delete Service Button "Click"
*/ */
$('#delete-service').on('click', function () { $('#services').on('click', '#delete-service', function () {
var serviceId = $('#service-id').val(); var serviceId = $('#service-id').val();
var buttons = [ var buttons = [
{ {
@ -197,6 +197,21 @@
}); });
}; };
/**
* Remove the previously registered event handlers.
*/
ServicesHelper.prototype.unbindEventHandlers = function () {
$('#services')
.off('submit', '#filter-services form')
.off('click', '#filter-services .clear')
.off('click', '.service-row')
.off('click', '#add-service')
.off('click', '#cancel-service')
.off('click', '#save-service')
.off('click', '#edit-service')
.off('click', '#delete-service');
};
/** /**
* Save service record to database. * Save service record to database.
* *
@ -290,6 +305,7 @@
.find('input, select, textarea') .find('input, select, textarea')
.val('') .val('')
.prop('disabled', true); .prop('disabled', true);
$('#services .record-details h3 a').remove();
$('#services .add-edit-delete-group').show(); $('#services .add-edit-delete-group').show();
$('#services .save-cancel-group').hide(); $('#services .save-cancel-group').hide();
@ -347,7 +363,7 @@
response.forEach(function (service, index) { response.forEach(function (service, index) {
$('#filter-services .results') $('#filter-services .results')
.append(ServicesHelper.prototype.getFilterHtml(service)) .append(ServicesHelper.prototype.getFilterHtml(service))
.append( $('<hr/>')) .append($('<hr/>'))
}); });
if (response.length === 0) { if (response.length === 0) {

View file

@ -129,11 +129,15 @@ window.BackendUsers = window.BackendUsers || {};
* *
* Changes the displayed tab. * Changes the displayed tab.
*/ */
$('a[data-toggle="tab"]').on('shown.bs.tab', function () { $('#users-page > .nav-pills a[data-toggle="tab"]').on('shown.bs.tab', function () {
if ($(this).parents('.switch-view').length) { if ($(this).parents('.switch-view').length) {
return; // Do not proceed if this was the sub navigation. return; // Do not proceed if this was the sub navigation.
} }
if (helper) {
helper.unbindEventHandlers();
}
if ($(this).attr('href') === '#admins') { if ($(this).attr('href') === '#admins') {
helper = new AdminsHelper(); helper = new AdminsHelper();
} else if ($(this).attr('href') === '#providers') { } else if ($(this).attr('href') === '#providers') {

View file

@ -33,13 +33,15 @@
* Event: Filter Admins Form "Submit" * Event: Filter Admins Form "Submit"
* *
* Filter the admin records with the given key string. * Filter the admin records with the given key string.
*
* @param {jQuery.Event} event
*/ */
$('#admins').on('submit', '#filter-admins form', function () { $('#admins').on('submit', '#filter-admins form', function (event) {
event.preventDefault();
var key = $('#filter-admins .key').val(); var key = $('#filter-admins .key').val();
$('#filter-admins .selected').removeClass('selected'); $('#filter-admins .selected').removeClass('selected');
this.resetForm(); this.resetForm();
this.filter(key); this.filter(key);
return false;
}.bind(this)); }.bind(this));
/** /**
@ -180,6 +182,21 @@
}.bind(this)); }.bind(this));
}; };
/**
* Remove the previously registered event handlers.
*/
AdminsHelper.prototype.unbindEventHandlers = function() {
$('#admins')
.off('submit', '#filter-admins form')
.off('click', '#filter-admins .clear')
.off('click', '.admin-row')
.off('click', '#add-admin')
.off('click', '#edit-admin')
.off('click', '#delete-admin')
.off('click', '#save-admin')
.off('click', '#cancel-admin');
};
/** /**
* Save admin record to database. * Save admin record to database.
* *

View file

@ -35,13 +35,15 @@
* Event: Filter Providers Form "Submit" * Event: Filter Providers Form "Submit"
* *
* Filter the provider records with the given key string. * Filter the provider records with the given key string.
*
* @param {jQuery.Event} event
*/ */
$('#providers').on('submit', '#filter-providers form', function () { $('#providers').on('submit', '#filter-providers form', function (event) {
event.preventDefault();
var key = $('#filter-providers .key').val(); var key = $('#filter-providers .key').val();
$('.selected').removeClass('selected'); $('.selected').removeClass('selected');
this.resetForm(); this.resetForm();
this.filter(key); this.filter(key);
return false;
}.bind(this)); }.bind(this));
/** /**
@ -217,6 +219,23 @@
}); });
}; };
/**
* Remove the previously registered event handlers.
*/
ProvidersHelper.prototype.unbindEventHandlers = function() {
$('#providers')
.off('submit', '#filter-providers form')
.off('click', '#filter-providers .clear')
.off('click', '.provider-row')
.off('click', '#add-provider')
.off('click', '#edit-provider')
.off('click', '#delete-provider')
.off('click', '#save-provider')
.off('click', '#cancel-provider')
.off('shown.bs.tab', 'a[data-toggle="tab"]')
.off('click', '#reset-working-plan');
};
/** /**
* Save provider record to database. * Save provider record to database.
* *

View file

@ -35,13 +35,15 @@
* Event: Filter Secretaries Form "Submit" * Event: Filter Secretaries Form "Submit"
* *
* Filter the secretary records with the given key string. * Filter the secretary records with the given key string.
*
* @param {jQuery.Event} event
*/ */
$('#secretaries').on('submit', '#filter-secretaries form', function () { $('#secretaries').on('submit', '#filter-secretaries form', function (event) {
event.preventDefault();
var key = $('#filter-secretaries .key').val(); var key = $('#filter-secretaries .key').val();
$('#filter-secretaries .selected').removeClass('selected'); $('#filter-secretaries .selected').removeClass('selected');
this.resetForm(); this.resetForm();
this.filter(key); this.filter(key);
return false;
}.bind(this)); }.bind(this));
/** /**
@ -194,6 +196,21 @@
}.bind(this)); }.bind(this));
}; };
/**
* Remove the previously registered event handlers.
*/
SecretariesHelper.prototype.unbindEventHandlers = function() {
$('#secretaries')
.off('submit', '#filter-secretaries form')
.off('click', '#filter-secretaries .clear')
.off('click', '.secretary-row')
.off('click', '#add-secretary')
.off('click', '#edit-secretary')
.off('click', '#delete-secretary')
.off('click', '#save-secretary')
.off('click', '#cancel-secretary');
};
/** /**
* Save secretary record to database. * Save secretary record to database.
* *

View file

@ -249,13 +249,12 @@ $(function () {
// Make all cells in current row editable. // Make all cells in current row editable.
var $tr = $(this).closest('tr'); var $tr = $(this).closest('tr');
$tr.children().trigger('edit'); $tr.children().trigger('edit');
initializeTimepicker($tr.find('.working-plan-exceptions-break-start input, .working-plan-exceptions-break-end input')); initializeTimepicker($tr.find('.working-plan-exceptions-break-start input, .working-plan-exceptions-break-end input'));
$(this).closest('tr').find('.working-plan-exceptions-break-start').focus(); $(this).closest('tr').find('.working-plan-exceptions-break-start').focus();
// Show save - cancel buttons. // Show save - cancel buttons.
var $tr = $(this).closest('tr'); $tr = $(this).closest('tr');
$tr.find('.working-plan-exceptions-edit-break, .working-plan-exceptions-delete-break').addClass('d-none'); $tr.find('.working-plan-exceptions-edit-break, .working-plan-exceptions-delete-break').addClass('d-none');
$tr.find('.working-plan-exceptions-save-break, .working-plan-exceptions-cancel-break').removeClass('d-none'); $tr.find('.working-plan-exceptions-save-break, .working-plan-exceptions-cancel-break').removeClass('d-none');
$tr.find('select,input:text').addClass('form-control input-sm') $tr.find('select,input:text').addClass('form-control input-sm')