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>
<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">
<form class="mb-4">
<div class="input-group">

View File

@ -55,7 +55,7 @@
<i class="fas fa-search"></i>
</button>
<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>
</div>
</div>

View File

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

View File

@ -35,7 +35,7 @@
/**
* Event: Filter Categories Cancel Button "Click"
*/
$('#filter-categories .clear').on('click', function () {
$('#categories').on('click', '#filter-categories .clear', function () {
$('#filter-categories .key').val('');
instance.filter('');
instance.resetForm();
@ -43,13 +43,15 @@
/**
* 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();
$('.selected').removeClass('selected');
instance.resetForm();
instance.filter(key);
return false;
});
/**
@ -57,7 +59,7 @@
*
* 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')) {
$('#filter-categories .results').css('color', '#AAA');
return; // exit because we are on edit mode
@ -78,7 +80,7 @@
/**
* Event: Add Category Button "Click"
*/
$('#add-category').on('click', function () {
$('#categories').on('click', '#add-category', function () {
instance.resetForm();
$('#categories .add-edit-delete-group').hide();
$('#categories .save-cancel-group').show();
@ -90,7 +92,7 @@
/**
* Event: Edit Category Button "Click"
*/
$('#edit-category').on('click', function () {
$('#categories').on('click', '#edit-category', function () {
$('#categories .add-edit-delete-group').hide();
$('#categories .save-cancel-group').show();
$('#categories .record-details').find('input, select, textarea').prop('disabled', false);
@ -101,7 +103,7 @@
/**
* Event: Delete Category Button "Click"
*/
$('#delete-category').on('click', function () {
$('#categories').on('click', '#delete-category', function () {
var categoryId = $('#category-id').val();
var buttons = [
@ -127,7 +129,7 @@
/**
* Event: Categories Save Button "Click"
*/
$('#save-category').on('click', function () {
$('#categories').on('click', '#save-category', function () {
var category = {
name: $('#category-name').val(),
description: $('#category-description').val()
@ -147,7 +149,7 @@
/**
* Event: Cancel Category Button "Click"
*/
$('#cancel-category').on('click', function () {
$('#categories').on('click', '#cancel-category', function () {
var id = $('#category-id').val();
instance.resetForm();
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.
*
@ -179,7 +196,7 @@
$('#filter-categories .results').empty();
response.forEach(function(category) {
response.forEach(function (category) {
$('#filter-categories .results')
.append(this.getFilterHtml(category))
.append($('<hr/>'));

View File

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

View File

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

View File

@ -51,6 +51,7 @@ window.BackendServices = window.BackendServices || {};
helper = servicesHelper;
helper.resetForm();
helper.filter('');
helper.bindEventHandlers();
if (defaultEventHandlers) {
bindEventHandlers();
@ -69,6 +70,10 @@ window.BackendServices = window.BackendServices || {};
* Changes the displayed tab.
*/
$('a[data-toggle="tab"]').on('shown.bs.tab', function () {
if (helper) {
helper.unbindEventHandlers();
}
if ($(this).attr('href') === '#services') {
helper = servicesHelper;
} else if ($(this).attr('href') === '#categories') {
@ -77,16 +82,14 @@ window.BackendServices = window.BackendServices || {};
helper.resetForm();
helper.filter('');
helper.bindEventHandlers();
$('.filter-key').val('');
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.
*/

View File

@ -33,18 +33,18 @@
*
* @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();
$('#filter-services .selected').removeClass('selected');
instance.resetForm();
instance.filter(key);
return false;
});
/**
* Event: Filter Service Cancel Button "Click"
*/
$('#filter-services .clear').on('click', function () {
$('#services').on('click', '#filter-services .clear', function () {
$('#filter-services .key').val('');
instance.filter('');
instance.resetForm();
@ -55,7 +55,7 @@
*
* 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')) {
$('#filter-services .results').css('color', '#AAA');
return; // exit because we are on edit mode
@ -93,7 +93,7 @@
/**
* Event: Add New Service Button "Click"
*/
$('#add-service').on('click', function () {
$('#services').on('click', '#add-service', function () {
instance.resetForm();
$('#services .add-edit-delete-group').hide();
$('#services .save-cancel-group').show();
@ -118,7 +118,7 @@
*
* Cancel add or edit of a service record.
*/
$('#cancel-service').on('click', function () {
$('#services').on('click', '#cancel-service', function () {
var id = $('#service-id').val();
instance.resetForm();
if (id !== '') {
@ -129,7 +129,7 @@
/**
* Event: Save Service Button "Click"
*/
$('#save-service').on('click', function () {
$('#services').on('click', '#save-service', function () {
var service = {
name: $('#service-name').val(),
duration: $('#service-duration').val(),
@ -161,7 +161,7 @@
/**
* Event: Edit Service Button "Click"
*/
$('#edit-service').on('click', function () {
$('#services').on('click', '#edit-service', function () {
$('#services .add-edit-delete-group').hide();
$('#services .save-cancel-group').show();
$('#services .record-details')
@ -174,7 +174,7 @@
/**
* Event: Delete Service Button "Click"
*/
$('#delete-service').on('click', function () {
$('#services').on('click', '#delete-service', function () {
var serviceId = $('#service-id').val();
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.
*
@ -290,6 +305,7 @@
.find('input, select, textarea')
.val('')
.prop('disabled', true);
$('#services .record-details h3 a').remove();
$('#services .add-edit-delete-group').show();
$('#services .save-cancel-group').hide();
@ -347,7 +363,7 @@
response.forEach(function (service, index) {
$('#filter-services .results')
.append(ServicesHelper.prototype.getFilterHtml(service))
.append( $('<hr/>'))
.append($('<hr/>'))
});
if (response.length === 0) {

View File

@ -129,11 +129,15 @@ window.BackendUsers = window.BackendUsers || {};
*
* 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) {
return; // Do not proceed if this was the sub navigation.
}
if (helper) {
helper.unbindEventHandlers();
}
if ($(this).attr('href') === '#admins') {
helper = new AdminsHelper();
} else if ($(this).attr('href') === '#providers') {

View File

@ -33,13 +33,15 @@
* Event: Filter Admins Form "Submit"
*
* 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();
$('#filter-admins .selected').removeClass('selected');
this.resetForm();
this.filter(key);
return false;
}.bind(this));
/**
@ -180,6 +182,21 @@
}.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.
*

View File

@ -35,13 +35,15 @@
* Event: Filter Providers Form "Submit"
*
* 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();
$('.selected').removeClass('selected');
this.resetForm();
this.filter(key);
return false;
}.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.
*

View File

@ -35,13 +35,15 @@
* Event: Filter Secretaries Form "Submit"
*
* 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();
$('#filter-secretaries .selected').removeClass('selected');
this.resetForm();
this.filter(key);
return false;
}.bind(this));
/**
@ -194,6 +196,21 @@
}.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.
*

View File

@ -249,13 +249,12 @@ $(function () {
// Make all cells in current row editable.
var $tr = $(this).closest('tr');
$tr.children().trigger('edit');
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();
// 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-save-break, .working-plan-exceptions-cancel-break').removeClass('d-none');
$tr.find('select,input:text').addClass('form-control input-sm')