From 30418468e80f30f41a8c254bb13e100e769b746a Mon Sep 17 00:00:00 2001
From: Alex Tselegidis <alextselegidis@gmail.com>
Date: Fri, 7 Jan 2022 09:23:21 +0100
Subject: [PATCH] Convert the admins page to the new js module structure.

---
 application/controllers/Admins.php       |  11 +-
 application/views/pages/admins.php       |  35 +-
 assets/js/http/account_http_client.js    |   4 +-
 assets/js/http/admins_http_client.js     |  12 +
 assets/js/pages/admins.js                | 439 +++++++++++++++++++++
 assets/js/pages/backend_admins.js        | 107 -----
 assets/js/pages/backend_admins_helper.js | 475 -----------------------
 7 files changed, 472 insertions(+), 611 deletions(-)
 create mode 100644 assets/js/pages/admins.js
 delete mode 100644 assets/js/pages/backend_admins.js
 delete mode 100644 assets/js/pages/backend_admins_helper.js

diff --git a/application/controllers/Admins.php b/application/controllers/Admins.php
index c153b5e9..4e99f363 100644
--- a/application/controllers/Admins.php
+++ b/application/controllers/Admins.php
@@ -52,6 +52,13 @@ class Admins extends EA_Controller {
 
         $role_slug = session('role_slug');
 
+        script_vars([
+            'timezones' => $this->timezones->to_array(),
+            'user_id' => $user_id,
+            'role_slug' => $role_slug,
+            'min_password_length' => MIN_PASSWORD_LENGTH,
+        ]);
+        
         html_vars([
             'page_title' => lang('admins'),
             'active_menu' => PRIV_USERS,
@@ -100,7 +107,7 @@ class Admins extends EA_Controller {
     {
         try
         {
-            $admin = json_decode(request('admin'), TRUE);
+            $admin = request('admin');
 
             if (cannot('add', PRIV_USERS))
             {
@@ -127,7 +134,7 @@ class Admins extends EA_Controller {
     {
         try
         {
-            $admin = json_decode(request('admin'), TRUE);
+            $admin = request('admin');
 
             if (cannot('edit', PRIV_USERS))
             {
diff --git a/application/views/pages/admins.php b/application/views/pages/admins.php
index ef9460b1..0c74795e 100755
--- a/application/views/pages/admins.php
+++ b/application/views/pages/admins.php
@@ -189,9 +189,9 @@
 
                     <br>
 
-                    <div class="custom-control custom-switch">
-                        <input type="checkbox" class="custom-control-input" id="admin-notifications">
-                        <label class="custom-form-label" for="admin-notifications">
+                    <div class="form-check form-switch me-4">
+                        <input class="form-check-input" type="checkbox" id="admin-notifications">
+                        <label class="form-check-label" for="admin-notifications">
                             <?= lang('receive_notifications') ?>
                         </label>
                     </div>
@@ -205,29 +205,12 @@
 
 <?php section('scripts') ?>
 
-<script src="<?= asset_url('assets/js/pages/backend_admins_helper.js') ?>"></script>
-<script src="<?= asset_url('assets/js/pages/backend_admins.js') ?>"></script>
-<script>
-    var GlobalVariables = {
-        csrfToken: <?= json_encode($this->security->get_csrf_hash()) ?>,
-        baseUrl: <?= json_encode(config('base_url')) ?>,
-        dateFormat: <?= json_encode(setting('date_format')) ?>,
-        timeFormat: <?= json_encode(setting('time_format')) ?>,
-        firstWeekday: <?= json_encode(setting('first_weekday')); ?>,
-        timezones: <?= json_encode($timezones) ?>,
-        user: {
-            id: <?= session('user_id') ?>,
-            email: <?= json_encode(session('user_email')) ?>,
-            timezone: <?= json_encode(session('timezone')) ?>,
-            role_slug: <?= json_encode(session('role_slug')) ?>,
-            privileges: <?= json_encode($privileges) ?>
-        }
-    };
-
-    $(function () {
-        BackendAdmins.initialize(true);
-    });
-</script>
+<script src="<?= asset_url('assets/js/utils/message.js') ?>"></script>
+<script src="<?= asset_url('assets/js/utils/validation.js') ?>"></script>
+<script src="<?= asset_url('assets/js/utils/url.js') ?>"></script>
+<script src="<?= asset_url('assets/js/http/account_http_client.js') ?>"></script>
+<script src="<?= asset_url('assets/js/http/admins_http_client.js') ?>"></script>
+<script src="<?= asset_url('assets/js/pages/admins.js') ?>"></script>
 
 <?php section('scripts') ?>
 
diff --git a/assets/js/http/account_http_client.js b/assets/js/http/account_http_client.js
index 3ff9d464..bb7f65ff 100644
--- a/assets/js/http/account_http_client.js
+++ b/assets/js/http/account_http_client.js
@@ -31,15 +31,17 @@ App.Http.Account = (function () {
     /**
      * Validate username.
      *
+     * @param {Number} userId
      * @param {String} username
      *
      * @return {Object}
      */
-    function validateUsername(username) {
+    function validateUsername(userId, username) {
         const url = App.Utils.Url.siteUrl('account/validate_username');
 
         const data = {
             csrf_token: App.Vars.csrf_token,
+            user_id: userId,
             username
         };
 
diff --git a/assets/js/http/admins_http_client.js b/assets/js/http/admins_http_client.js
index 0daa4f48..2455f90a 100644
--- a/assets/js/http/admins_http_client.js
+++ b/assets/js/http/admins_http_client.js
@@ -10,6 +10,17 @@
  * ---------------------------------------------------------------------------- */
 
 App.Http.Admins = (function () {
+    /**
+     * Save (create or update) a admin.
+     *
+     * @param {Object} admin
+     *
+     * @return {Object}
+     */
+    function save(admin) {
+        return admin.id ? update(admin) : create(admin);
+    }
+
     /**
      * Create an admin.
      *
@@ -107,6 +118,7 @@ App.Http.Admins = (function () {
     }
 
     return {
+        save,
         create,
         update,
         destroy,
diff --git a/assets/js/pages/admins.js b/assets/js/pages/admins.js
new file mode 100644
index 00000000..ea5ab92b
--- /dev/null
+++ b/assets/js/pages/admins.js
@@ -0,0 +1,439 @@
+/* ----------------------------------------------------------------------------
+ * Easy!Appointments - Open Source Web Scheduler
+ *
+ * @package     EasyAppointments
+ * @author      A.Tselegidis <alextselegidis@gmail.com>
+ * @copyright   Copyright (c) Alex Tselegidis
+ * @license     https://opensource.org/licenses/GPL-3.0 - GPLv3
+ * @link        https://easyappointments.org
+ * @since       v1.0.0
+ * ---------------------------------------------------------------------------- */
+
+/**
+ * Admins page module.
+ *
+ * This module contains the methods that are used in the admins page.
+ */
+App.Pages.Admins = (function () {
+    const $admins = $('#admins');
+    let filterResults = {};
+    let filterLimit = 20;
+
+    /**
+     * Bind the event handlers for the backend/users "Admins" tab.
+     */
+    function bindEventHandlers() {
+        /**
+         * Event: Admin Username "Blur"
+         *
+         * When the admin leaves the username input field we will need to check if the username
+         * is not taken by another record in the system.
+         */
+        $admins.on('blur', '#admin-username', function () {
+            const $input = $(this);
+
+            if ($input.prop('readonly') === true || $input.val() === '') {
+                return;
+            }
+
+            const adminId = $input.parents().eq(2).find('.record-id').val();
+
+            if (!adminId) {
+                return;
+            }
+
+            const username = $input.val();
+
+            App.Http.Account.validateUsername(adminId, username).done((response) => {
+                if (response.is_valid === 'false') {
+                    $input.addClass('is-invalid');
+                    $input.attr('already-exists', 'true');
+                    $input.parents().eq(3).find('.form-message').text(App.Lang.username_already_exists);
+                    $input.parents().eq(3).find('.form-message').show();
+                } else {
+                    $input.removeClass('is-invalid');
+                    $input.attr('already-exists', 'false');
+                    if ($input.parents().eq(3).find('.form-message').text() === App.Lang.username_already_exists) {
+                        $input.parents().eq(3).find('.form-message').hide();
+                    }
+                }
+            });
+        });
+
+        /**
+         * 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 (event) {
+            event.preventDefault();
+            const key = $('#filter-admins .key').val();
+            $('#filter-admins .selected').removeClass('selected');
+            resetForm();
+            filter(key);
+        });
+
+        /**
+         * Event: Filter Admin Row "Click"
+         *
+         * Display the selected admin data to the user.
+         */
+        $admins.on('click', '.admin-row', function (event) {
+            if ($('#filter-admins .filter').prop('disabled')) {
+                $('#filter-admins .results').css('color', '#AAA');
+                return; // exit because we are currently on edit mode
+            }
+
+            const adminId = $(event.currentTarget).attr('data-id');
+
+            const admin = filterResults.find(function (filterResult) {
+                return Number(filterResult.id) === Number(adminId);
+            });
+
+            display(admin);
+            $('#filter-admins .selected').removeClass('selected');
+            $(event.currentTarget).addClass('selected');
+            $('#edit-admin, #delete-admin').prop('disabled', false);
+        });
+
+        /**
+         * Event: Add New Admin Button "Click"
+         */
+        $admins.on('click', '#add-admin', function () {
+            resetForm();
+            $('#admins .add-edit-delete-group').hide();
+            $('#admins .save-cancel-group').show();
+            $('#admins .record-details').find('input, textarea').prop('disabled', false);
+            $('#admins .record-details').find('select').prop('disabled', false);
+            $('#admin-password, #admin-password-confirm').addClass('required');
+            $('#filter-admins button').prop('disabled', true);
+            $('#filter-admins .results').css('color', '#AAA');
+        });
+
+        /**
+         * Event: Edit Admin Button "Click"
+         */
+        $admins.on('click', '#edit-admin', function () {
+            $('#admins .add-edit-delete-group').hide();
+            $('#admins .save-cancel-group').show();
+            $('#admins .record-details').find('input, textarea').prop('disabled', false);
+            $('#admins .record-details').find('select').prop('disabled', false);
+            $('#admin-password, #admin-password-confirm').removeClass('required');
+            $('#filter-admins button').prop('disabled', true);
+            $('#filter-admins .results').css('color', '#AAA');
+        });
+
+        /**
+         * Event: Delete Admin Button "Click"
+         */
+        $admins.on('click', '#delete-admin', function () {
+            const adminId = $('#admin-id').val();
+
+            const buttons = [
+                {
+                    text: App.Lang.cancel,
+                    click: function () {
+                        $('#message-box').dialog('close');
+                    }
+                },
+                {
+                    text: App.Lang.delete,
+                    click: function () {
+                        remove(adminId);
+                        $('#message-box').dialog('close');
+                    }
+                }
+            ];
+
+            App.Utils.Message.show(App.Lang.delete_admin, App.Lang.delete_record_prompt, buttons);
+        });
+
+        /**
+         * Event: Save Admin Button "Click"
+         */
+        $admins.on('click', '#save-admin', function () {
+            const admin = {
+                first_name: $('#admin-first-name').val(),
+                last_name: $('#admin-last-name').val(),
+                email: $('#admin-email').val(),
+                mobile_number: $('#admin-mobile-number').val(),
+                phone_number: $('#admin-phone-number').val(),
+                address: $('#admin-address').val(),
+                city: $('#admin-city').val(),
+                state: $('#admin-state').val(),
+                zip_code: $('#admin-zip-code').val(),
+                notes: $('#admin-notes').val(),
+                timezone: $('#admin-timezone').val(),
+                settings: {
+                    username: $('#admin-username').val(),
+                    notifications: Number($('#admin-notifications').prop('checked')),
+                    calendar_view: $('#admin-calendar-view').val()
+                }
+            };
+
+            // Include password if changed.
+            if ($('#admin-password').val() !== '') {
+                admin.settings.password = $('#admin-password').val();
+            }
+
+            // Include id if changed.
+            if ($('#admin-id').val() !== '') {
+                admin.id = $('#admin-id').val();
+            }
+
+            if (!validate()) {
+                return;
+            }
+
+            save(admin);
+        });
+
+        /**
+         * Event: Cancel Admin Button "Click"
+         *
+         * Cancel add or edit of an admin record.
+         */
+        $admins.on('click', '#cancel-admin', function () {
+            const id = $('#admin-id').val();
+            resetForm();
+            if (id) {
+                select(id, true);
+            }
+        });
+    }
+
+    /**
+     * Save admin record to database.
+     *
+     * @param {Object} admin Contains the admin record data. If an 'id' value is provided
+     * then the update operation is going to be executed.
+     */
+    function save(admin) {
+        App.Http.Admins.save(admin).then((response) => {
+            Backend.displayNotification(App.Lang.admin_saved);
+            resetForm();
+            $('#filter-admins .key').val('');
+            filter('', response.id, true);
+        });
+    }
+
+    /**
+     * Delete an admin record from database.
+     *
+     * @param {Number} id Record id to be deleted.
+     */
+    function remove(id) {
+        App.Http.Admins.destroy(id).then(() => {
+            Backend.displayNotification(App.Lang.admin_deleted);
+            resetForm();
+            filter($('#filter-admins .key').val());
+        });
+    }
+
+    /**
+     * Validates an admin record.
+     *
+     * @return {Boolean} Returns the validation result.
+     */
+    function validate() {
+        $('#admins .is-invalid').removeClass('is-invalid');
+
+        try {
+            // Validate required fields.
+            let missingRequired = false;
+
+            $('#admins .required').each(function (index, requiredField) {
+                if (!$(requiredField).val()) {
+                    $(requiredField).addClass('is-invalid');
+                    missingRequired = true;
+                }
+            });
+
+            if (missingRequired) {
+                throw new Error('Fields with * are  required.');
+            }
+
+            // Validate passwords.
+            if ($('#admin-password').val() !== $('#admin-password-confirm').val()) {
+                $('#admin-password, #admin-password-confirm').addClass('is-invalid');
+                throw new Error(App.Lang.passwords_mismatch);
+            }
+
+            if ($('#admin-password').val().length < App.Vars.min_password_length && $('#admin-password').val() !== '') {
+                $('#admin-password, #admin-password-confirm').addClass('is-invalid');
+                throw new Error(App.Lang.password_length_notice.replace('$number', BackendAdmins.MIN_PASSWORD_LENGTH));
+            }
+
+            // Validate user email.
+            if (!App.Utils.Validation.email($('#admin-email').val())) {
+                $('#admin-email').addClass('is-invalid');
+                throw new Error(App.Lang.invalid_email);
+            }
+
+            // Check if username exists
+            if ($('#admin-username').attr('already-exists') === 'true') {
+                $('#admin-username').addClass('is-invalid');
+                throw new Error(App.Lang.username_already_exists);
+            }
+
+            return true;
+        } catch (error) {
+            $('#admins .form-message').addClass('alert-danger').text(error.message).show();
+            return false;
+        }
+    }
+
+    /**
+     * Resets the admin form back to its initial state.
+     */
+    function resetForm() {
+        $('#filter-admins .selected').removeClass('selected');
+        $('#filter-admins button').prop('disabled', false);
+        $('#filter-admins .results').css('color', '');
+
+        $('#admins .add-edit-delete-group').show();
+        $('#admins .save-cancel-group').hide();
+        $('#admins .record-details').find('input, select, textarea').val('').prop('disabled', true);
+        $('#admins .record-details #admin-calendar-view').val('default');
+        $('#admins .record-details #admin-timezone').val('UTC');
+        $('#edit-admin, #delete-admin').prop('disabled', true);
+
+        $('#admins .is-invalid').removeClass('is-invalid');
+        $('#admins .form-message').hide();
+    }
+
+    /**
+     * Display a admin record into the admin form.
+     *
+     * @param {Object} admin Contains the admin record data.
+     */
+    function display(admin) {
+        $('#admin-id').val(admin.id);
+        $('#admin-first-name').val(admin.first_name);
+        $('#admin-last-name').val(admin.last_name);
+        $('#admin-email').val(admin.email);
+        $('#admin-mobile-number').val(admin.mobile_number);
+        $('#admin-phone-number').val(admin.phone_number);
+        $('#admin-address').val(admin.address);
+        $('#admin-city').val(admin.city);
+        $('#admin-state').val(admin.state);
+        $('#admin-zip-code').val(admin.zip_code);
+        $('#admin-notes').val(admin.notes);
+        $('#admin-timezone').val(admin.timezone);
+
+        $('#admin-username').val(admin.settings.username);
+        $('#admin-calendar-view').val(admin.settings.calendar_view);
+        $('#admin-notifications').prop('checked', Boolean(Number(admin.settings.notifications)));
+    }
+
+    /**
+     * Filters admin records by a keyword string.
+     *
+     * @param {String} keyword This string is used to filter the admin records of the database.
+     * @param {Number} [selectId] (OPTIONAL = undefined) This record id will be selected when
+     * the filter operation is finished.
+     * @param {Boolean} [show] (OPTIONAL = false) If true the selected record data are going
+     * to be displayed on the details column (requires a selected record though).
+     */
+    function filter(keyword, selectId = null, show = false) {
+        App.Http.Admins.search(keyword, filterLimit).then((response) => {
+            filterResults = response;
+
+            $('#filter-admins .results').empty();
+
+            response.forEach(function (admin) {
+                $('#filter-admins .results').append(getFilterHtml(admin)).append($('<hr/>'));
+            });
+
+            if (!response.length) {
+                $('#filter-admins .results').append(
+                    $('<em/>', {
+                        'text': App.Lang.no_records_found
+                    })
+                );
+            } else if (response.length === filterLimit) {
+                $('<button/>', {
+                    'type': 'button',
+                    'class': 'btn btn-outline-secondary w-100 load-more text-center',
+                    'text': App.Lang.load_more,
+                    'click': function () {
+                        filterLimit += 20;
+                        filter(keyword, selectId, show);
+                    }
+                }).appendTo('#filter-admins .results');
+            }
+
+            if (selectId) {
+                select(selectId, show);
+            }
+        });
+    }
+
+    /**
+     * Get an admin row html code that is going to be displayed on the filter results list.
+     *
+     * @param {Object} admin Contains the admin record data.
+     *
+     * @return {String} The html code that represents the record on the filter results list.
+     */
+    function getFilterHtml(admin) {
+        const name = admin.first_name + ' ' + admin.last_name;
+
+        let info = admin.email;
+
+        info = admin.mobile_number ? info + ', ' + admin.mobile_number : info;
+
+        info = admin.phone_number ? info + ', ' + admin.phone_number : info;
+
+        return $('<div/>', {
+            'class': 'admin-row entry',
+            'data-id': admin.id,
+            'html': [
+                $('<strong/>', {
+                    'text': name
+                }),
+                $('<br/>'),
+                $('<span/>', {
+                    'text': info
+                }),
+                $('<br/>')
+            ]
+        });
+    }
+
+    /**
+     * Select a specific record from the current filter results. If the admin 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 {Boolean} show Optional (false), if true then the method will display the record
+     * on the form.
+     */
+    function select(id, show = false) {
+        $('#filter-admins .selected').removeClass('selected');
+
+        $('#filter-admins .admin-row[data-id="' + id + '"]').addClass('selected');
+
+        if (show) {
+            const admin = filterResults.find(function (filterResult) {
+                return Number(filterResult.id) === Number(id);
+            });
+
+            display(admin);
+
+            $('#edit-admin, #delete-admin').prop('disabled', false);
+        }
+    }
+
+    function init() {
+        resetForm();
+        filter('');
+        bindEventHandlers();
+    }
+
+    document.addEventListener('DOMContentLoaded', init);
+
+    return {};
+})();
diff --git a/assets/js/pages/backend_admins.js b/assets/js/pages/backend_admins.js
deleted file mode 100644
index 57cc3907..00000000
--- a/assets/js/pages/backend_admins.js
+++ /dev/null
@@ -1,107 +0,0 @@
-/* ----------------------------------------------------------------------------
- * Easy!Appointments - Open Source Web Scheduler
- *
- * @package     EasyAppointments
- * @author      A.Tselegidis <alextselegidis@gmail.com>
- * @copyright   Copyright (c) Alex Tselegidis
- * @license     https://opensource.org/licenses/GPL-3.0 - GPLv3
- * @link        https://easyappointments.org
- * @since       v1.0.0
- * ---------------------------------------------------------------------------- */
-
-window.BackendAdmins = window.BackendAdmins || {};
-
-/**
- * Backend Admins
- *
- * This module handles the js functionality of the admins backend page. It uses three other
- * classes (defined below) in order to handle the admin, admin and secretary record types.
- *
- * @module BackendAdmins
- */
-(function (exports) {
-    'use strict';
-
-    /**
-     * Minimum Password Length
-     *
-     * @type {Number}
-     */
-    exports.MIN_PASSWORD_LENGTH = 7;
-
-    /**
-     * Contains the current tab record methods for the page.
-     *
-     * @type {AdminsHelper}
-     */
-    var helper = {};
-
-    /**
-     * Initialize the backend admins page.
-     *
-     * @param {Boolean} defaultEventHandlers (OPTIONAL) Whether to bind the default event handlers.
-     */
-    exports.initialize = function (defaultEventHandlers) {
-        defaultEventHandlers = defaultEventHandlers || true;
-
-        // Instantiate default helper object (admin).
-        helper = new AdminsHelper();
-        helper.resetForm();
-        helper.filter('');
-        helper.bindEventHandlers();
-
-        // Bind event handlers.
-        if (defaultEventHandlers) {
-            bindEventHandlers();
-        }
-    };
-
-    /**
-     * Binds the default backend admins event handlers. Do not use this method on a different
-     * page because it needs the backend admins page DOM.
-     */
-    function bindEventHandlers() {
-        /**
-         * Event: Admin Username "Blur"
-         *
-         * When the admin leaves the username input field we will need to check if the username
-         * is not taken by another record in the system.
-         */
-        $('#admin-username').focusout(function () {
-            var $input = $(this);
-
-            if ($input.prop('readonly') === true || $input.val() === '') {
-                return;
-            }
-
-            var adminId = $input.parents().eq(2).find('.record-id').val();
-
-            if (!adminId) {
-                return;
-            }
-
-            var url = GlobalVariables.baseUrl + '/index.php/backend_api/ajax_validate_username';
-
-            var data = {
-                csrf_token: GlobalVariables.csrfToken,
-                username: $input.val(),
-                user_id: adminId
-            };
-
-            $.post(url, data).done(function (response) {
-                if (response.is_valid === 'false') {
-                    $input.addClass('is-invalid');
-                    $input.attr('already-exists', 'true');
-                    $input.parents().eq(3).find('.form-message').text(App.Lang.username_already_exists);
-                    $input.parents().eq(3).find('.form-message').show();
-                } else {
-                    $input.removeClass('is-invalid');
-                    $input.attr('already-exists', 'false');
-                    if ($input.parents().eq(3).find('.form-message').text() === App.Lang.username_already_exists) {
-                        $input.parents().eq(3).find('.form-message').hide();
-                    }
-                }
-            });
-        });
-    }
-})(window.BackendAdmins);
diff --git a/assets/js/pages/backend_admins_helper.js b/assets/js/pages/backend_admins_helper.js
deleted file mode 100644
index 66e8bc32..00000000
--- a/assets/js/pages/backend_admins_helper.js
+++ /dev/null
@@ -1,475 +0,0 @@
-/* ----------------------------------------------------------------------------
- * Easy!Appointments - Open Source Web Scheduler
- *
- * @package     EasyAppointments
- * @author      A.Tselegidis <alextselegidis@gmail.com>
- * @copyright   Copyright (c) Alex Tselegidis
- * @license     https://opensource.org/licenses/GPL-3.0 - GPLv3
- * @link        https://easyappointments.org
- * @since       v1.0.0
- * ---------------------------------------------------------------------------- */
-
-(function () {
-    'use strict';
-
-    /**
-     * This class contains the Admins helper class declaration, along with the "Admins" tab
-     * event handlers. By dividing the backend/users tab functionality into separate files
-     * it is easier to maintain the code.
-     *
-     * @class AdminsHelper
-     */
-    var AdminsHelper = function () {
-        this.filterResults = []; // Store the results for later use.
-        this.filterLimit = 20;
-    };
-
-    /**
-     * Bind the event handlers for the backend/users "Admins" tab.
-     */
-    AdminsHelper.prototype.bindEventHandlers = function () {
-        /**
-         * 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 (event) {
-                event.preventDefault();
-                var key = $('#filter-admins .key').val();
-                $('#filter-admins .selected').removeClass('selected');
-                this.resetForm();
-                this.filter(key);
-            }.bind(this)
-        );
-
-        /**
-         * Event: Filter Admin Row "Click"
-         *
-         * Display the selected admin data to the user.
-         */
-        $('#admins').on(
-            'click',
-            '.admin-row',
-            function (event) {
-                if ($('#filter-admins .filter').prop('disabled')) {
-                    $('#filter-admins .results').css('color', '#AAA');
-                    return; // exit because we are currently on edit mode
-                }
-
-                var adminId = $(event.currentTarget).attr('data-id');
-
-                var admin = this.filterResults.find(function (filterResult) {
-                    return Number(filterResult.id) === Number(adminId);
-                });
-
-                this.display(admin);
-                $('#filter-admins .selected').removeClass('selected');
-                $(event.currentTarget).addClass('selected');
-                $('#edit-admin, #delete-admin').prop('disabled', false);
-            }.bind(this)
-        );
-
-        /**
-         * Event: Add New Admin Button "Click"
-         */
-        $('#admins').on(
-            'click',
-            '#add-admin',
-            function () {
-                this.resetForm();
-                $('#admins .add-edit-delete-group').hide();
-                $('#admins .save-cancel-group').show();
-                $('#admins .record-details').find('input, textarea').prop('disabled', false);
-                $('#admins .record-details').find('select').prop('disabled', false);
-                $('#admin-password, #admin-password-confirm').addClass('required');
-                $('#filter-admins button').prop('disabled', true);
-                $('#filter-admins .results').css('color', '#AAA');
-            }.bind(this)
-        );
-
-        /**
-         * Event: Edit Admin Button "Click"
-         */
-        $('#admins').on('click', '#edit-admin', function () {
-            $('#admins .add-edit-delete-group').hide();
-            $('#admins .save-cancel-group').show();
-            $('#admins .record-details').find('input, textarea').prop('disabled', false);
-            $('#admins .record-details').find('select').prop('disabled', false);
-            $('#admin-password, #admin-password-confirm').removeClass('required');
-            $('#filter-admins button').prop('disabled', true);
-            $('#filter-admins .results').css('color', '#AAA');
-        });
-
-        /**
-         * Event: Delete Admin Button "Click"
-         */
-        $('#admins').on(
-            'click',
-            '#delete-admin',
-            function () {
-                var adminId = $('#admin-id').val();
-
-                var buttons = [
-                    {
-                        text: App.Lang.cancel,
-                        click: function () {
-                            $('#message-box').dialog('close');
-                        }
-                    },
-                    {
-                        text: App.Lang.delete,
-                        click: function () {
-                            this.delete(adminId);
-                            $('#message-box').dialog('close');
-                        }.bind(this)
-                    }
-                ];
-
-                GeneralFunctions.displayMessageBox(App.Lang.delete_admin, App.Lang.delete_record_prompt, buttons);
-            }.bind(this)
-        );
-
-        /**
-         * Event: Save Admin Button "Click"
-         */
-        $('#admins').on(
-            'click',
-            '#save-admin',
-            function () {
-                var admin = {
-                    first_name: $('#admin-first-name').val(),
-                    last_name: $('#admin-last-name').val(),
-                    email: $('#admin-email').val(),
-                    mobile_number: $('#admin-mobile-number').val(),
-                    phone_number: $('#admin-phone-number').val(),
-                    address: $('#admin-address').val(),
-                    city: $('#admin-city').val(),
-                    state: $('#admin-state').val(),
-                    zip_code: $('#admin-zip-code').val(),
-                    notes: $('#admin-notes').val(),
-                    timezone: $('#admin-timezone').val(),
-                    settings: {
-                        username: $('#admin-username').val(),
-                        notifications: $('#admin-notifications').prop('checked'),
-                        calendar_view: $('#admin-calendar-view').val()
-                    }
-                };
-
-                // Include password if changed.
-                if ($('#admin-password').val() !== '') {
-                    admin.settings.password = $('#admin-password').val();
-                }
-
-                // Include id if changed.
-                if ($('#admin-id').val() !== '') {
-                    admin.id = $('#admin-id').val();
-                }
-
-                if (!this.validate()) {
-                    return;
-                }
-
-                this.save(admin);
-            }.bind(this)
-        );
-
-        /**
-         * Event: Cancel Admin Button "Click"
-         *
-         * Cancel add or edit of an admin record.
-         */
-        $('#admins').on(
-            'click',
-            '#cancel-admin',
-            function () {
-                var id = $('#admin-id').val();
-                this.resetForm();
-                if (id) {
-                    this.select(id, true);
-                }
-            }.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.
-     *
-     * @param {Object} admin Contains the admin record data. If an 'id' value is provided
-     * then the update operation is going to be executed.
-     */
-    AdminsHelper.prototype.save = function (admin) {
-        var url = GlobalVariables.baseUrl + '/index.php/backend_api/ajax_save_admin';
-
-        var data = {
-            csrf_token: GlobalVariables.csrfToken,
-            admin: JSON.stringify(admin)
-        };
-
-        $.post(url, data).done(
-            function (response) {
-                Backend.displayNotification(App.Lang.admin_saved);
-                this.resetForm();
-                $('#filter-admins .key').val('');
-                this.filter('', response.id, true);
-            }.bind(this)
-        );
-    };
-
-    /**
-     * Delete an admin record from database.
-     *
-     * @param {Number} id Record id to be deleted.
-     */
-    AdminsHelper.prototype.delete = function (id) {
-        var url = GlobalVariables.baseUrl + '/index.php/backend_api/ajax_delete_admin';
-
-        var data = {
-            csrf_token: GlobalVariables.csrfToken,
-            admin_id: id
-        };
-
-        $.post(url, data).done(
-            function (response) {
-                Backend.displayNotification(App.Lang.admin_deleted);
-                this.resetForm();
-                this.filter($('#filter-admins .key').val());
-            }.bind(this)
-        );
-    };
-
-    /**
-     * Validates an admin record.
-     *
-     * @return {Boolean} Returns the validation result.
-     */
-    AdminsHelper.prototype.validate = function () {
-        $('#admins .is-invalid').removeClass('is-invalid');
-
-        try {
-            // Validate required fields.
-            var missingRequired = false;
-
-            $('#admins .required').each(function (index, requiredField) {
-                if (!$(requiredField).val()) {
-                    $(requiredField).addClass('is-invalid');
-                    missingRequired = true;
-                }
-            });
-
-            if (missingRequired) {
-                throw new Error('Fields with * are  required.');
-            }
-
-            // Validate passwords.
-            if ($('#admin-password').val() !== $('#admin-password-confirm').val()) {
-                $('#admin-password, #admin-password-confirm').addClass('is-invalid');
-                throw new Error(App.Lang.passwords_mismatch);
-            }
-
-            if (
-                $('#admin-password').val().length < BackendAdmins.MIN_PASSWORD_LENGTH &&
-                $('#admin-password').val() !== ''
-            ) {
-                $('#admin-password, #admin-password-confirm').addClass('is-invalid');
-                throw new Error(App.Lang.password_length_notice.replace('$number', BackendAdmins.MIN_PASSWORD_LENGTH));
-            }
-
-            // Validate user email.
-            if (!GeneralFunctions.validateEmail($('#admin-email').val())) {
-                $('#admin-email').addClass('is-invalid');
-                throw new Error(App.Lang.invalid_email);
-            }
-
-            // Check if username exists
-            if ($('#admin-username').attr('already-exists') === 'true') {
-                $('#admin-username').addClass('is-invalid');
-                throw new Error(App.Lang.username_already_exists);
-            }
-
-            return true;
-        } catch (error) {
-            $('#admins .form-message').addClass('alert-danger').text(error.message).show();
-            return false;
-        }
-    };
-
-    /**
-     * Resets the admin form back to its initial state.
-     */
-    AdminsHelper.prototype.resetForm = function () {
-        $('#filter-admins .selected').removeClass('selected');
-        $('#filter-admins button').prop('disabled', false);
-        $('#filter-admins .results').css('color', '');
-
-        $('#admins .add-edit-delete-group').show();
-        $('#admins .save-cancel-group').hide();
-        $('#admins .record-details').find('input, select, textarea').val('').prop('disabled', true);
-        $('#admins .record-details #admin-calendar-view').val('default');
-        $('#admins .record-details #admin-timezone').val('UTC');
-        $('#edit-admin, #delete-admin').prop('disabled', true);
-
-        $('#admins .is-invalid').removeClass('is-invalid');
-        $('#admins .form-message').hide();
-    };
-
-    /**
-     * Display a admin record into the admin form.
-     *
-     * @param {Object} admin Contains the admin record data.
-     */
-    AdminsHelper.prototype.display = function (admin) {
-        $('#admin-id').val(admin.id);
-        $('#admin-first-name').val(admin.first_name);
-        $('#admin-last-name').val(admin.last_name);
-        $('#admin-email').val(admin.email);
-        $('#admin-mobile-number').val(admin.mobile_number);
-        $('#admin-phone-number').val(admin.phone_number);
-        $('#admin-address').val(admin.address);
-        $('#admin-city').val(admin.city);
-        $('#admin-state').val(admin.state);
-        $('#admin-zip-code').val(admin.zip_code);
-        $('#admin-notes').val(admin.notes);
-        $('#admin-timezone').val(admin.timezone);
-
-        $('#admin-username').val(admin.settings.username);
-        $('#admin-calendar-view').val(admin.settings.calendar_view);
-        $('#admin-notifications').prop('checked', Boolean(Number(admin.settings.notifications)));
-    };
-
-    /**
-     * Filters admin records depending a keyword string.
-     *
-     * @param {String} keyword This string is used to filter the admin records of the database.
-     * @param {Number} selectId (OPTIONAL = undefined) This record id will be selected when
-     * the filter operation is finished.
-     * @param {Boolean} display (OPTIONAL = false) If true the selected record data are going
-     * to be displayed on the details column (requires a selected record though).
-     */
-    AdminsHelper.prototype.filter = function (keyword, selectId, display) {
-        display = display || false;
-
-        var url = GlobalVariables.baseUrl + '/index.php/admins/search';
-
-        var data = {
-            csrf_token: GlobalVariables.csrfToken,
-            keyword: keyword,
-            limit: this.filterLimit
-        };
-
-        $.post(url, data).done(
-            function (response) {
-                this.filterResults = response;
-
-                $('#filter-admins .results').empty();
-
-                response.forEach(
-                    function (admin) {
-                        $('#filter-admins .results').append(this.getFilterHtml(admin)).append($('<hr/>'));
-                    }.bind(this)
-                );
-
-                if (!response.length) {
-                    $('#filter-admins .results').append(
-                        $('<em/>', {
-                            'text': App.Lang.no_records_found
-                        })
-                    );
-                } else if (response.length === this.filterLimit) {
-                    $('<button/>', {
-                        'type': 'button',
-                        'class': 'btn btn-outline-secondary w-100 load-more text-center',
-                        'text': App.Lang.load_more,
-                        'click': function () {
-                            this.filterLimit += 20;
-                            this.filter(keyword, selectId, display);
-                        }.bind(this)
-                    }).appendTo('#filter-admins .results');
-                }
-
-                if (selectId) {
-                    this.select(selectId, display);
-                }
-            }.bind(this)
-        );
-    };
-
-    /**
-     * Get an admin row html code that is going to be displayed on the filter results list.
-     *
-     * @param {Object} admin Contains the admin record data.
-     *
-     * @return {String} The html code that represents the record on the filter results list.
-     */
-    AdminsHelper.prototype.getFilterHtml = function (admin) {
-        var name = admin.first_name + ' ' + admin.last_name;
-
-        var info = admin.email;
-
-        info = admin.mobile_number ? info + ', ' + admin.mobile_number : info;
-
-        info = admin.phone_number ? info + ', ' + admin.phone_number : info;
-
-        return $('<div/>', {
-            'class': 'admin-row entry',
-            'data-id': admin.id,
-            'html': [
-                $('<strong/>', {
-                    'text': name
-                }),
-                $('<br/>'),
-                $('<span/>', {
-                    'text': info
-                }),
-                $('<br/>')
-            ]
-        });
-    };
-
-    /**
-     * Select a specific record from the current filter results. If the admin 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 {Boolean} display Optional (false), if true then the method will display the record
-     * on the form.
-     */
-    AdminsHelper.prototype.select = function (id, display) {
-        display = display || false;
-
-        $('#filter-admins .selected').removeClass('selected');
-
-        $('#filter-admins .admin-row[data-id="' + id + '"]').addClass('selected');
-
-        if (display) {
-            var admin = this.filterResults.find(function (filterResult) {
-                return Number(filterResult.id) === Number(id);
-            });
-
-            this.display(admin);
-
-            $('#edit-admin, #delete-admin').prop('disabled', false);
-        }
-    };
-
-    window.AdminsHelper = AdminsHelper;
-})();