Backend users and services page would register the tab content events again and again
This commit is contained in:
parent
334fee3727
commit
e92902f332
13 changed files with 150 additions and 55 deletions
|
@ -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">
|
||||
|
|
|
@ -66,7 +66,7 @@
|
|||
<div class="input-group">
|
||||
<input type="text" class="key form-control">
|
||||
|
||||
<span class="input-group-addon">
|
||||
<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>
|
||||
|
@ -75,7 +75,7 @@
|
|||
<i class="fas fa-redo-alt"></i>
|
||||
</button>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
|
|
|
@ -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/>'));
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -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 = [
|
||||
{
|
||||
|
|
|
@ -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.
|
||||
*/
|
||||
|
|
|
@ -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) {
|
||||
|
|
|
@ -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') {
|
||||
|
|
|
@ -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.
|
||||
*
|
||||
|
|
|
@ -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.
|
||||
*
|
||||
|
|
|
@ -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.
|
||||
*
|
||||
|
|
|
@ -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')
|
||||
|
|
Loading…
Reference in a new issue