implementado pestaña clientes en usuarios

httpdocs/assets/js/safekat/pages/cliente/cliente.js

@@ -1,5 +1,7 @@
 import ClassSelect from '../../components/select2.js';
 import tarifasClienteView from './tarifasCliente.js';
+import ClienteUsuarios from './clienteUsuarios.js';
+
 import Ajax from '../../components/ajax.js';
 
 class Cliente {
@@ -15,6 +17,8 @@ class Cliente {
         this.provincia = new ClassSelect($("#provinciaId"), '/provincias/menuitems2', "Seleccione una provincia", {[this.csrf_token]: this.csrf_hash});
         this.comunidadAutonoma = new ClassSelect($("#comunidadAutonomaId"), '/comunidades-autonomas/menuitems2', "Seleccione una comunidad autónoma", {[this.csrf_token]: this.csrf_hash});
 
+        this.clienteUsuarios = new ClienteUsuarios($('#usuarios'));
+
     }
 
     init() {
@@ -32,6 +36,7 @@ class Cliente {
         this.comunidadAutonoma.init();
 
         this.tarifas.init();
+        this.clienteUsuarios.init();
         
         $(document).keypress(function (e) {
             var key = e.which;

httpdocs/assets/js/safekat/pages/cliente/clienteUsuarios.js

@@ -0,0 +1,115 @@
+import Table from '../../components/table.js';
+import ConfirmDeleteModal from '../../components/ConfirmDeleteModal.js';
+import Ajax from '../../components/ajax.js';
+import ClassSelect from '../../components/select2.js';
+
+class ClienteUsuarios {
+
+    constructor(domItem) {
+
+        this.domItem = domItem;
+        this.table = null;
+        this.deleteModal = null;
+
+        this.usersSelect = new ClassSelect($('#usuariosDisponibles'), '/clienteusuarios/getusers', "");
+        this.userAdd = this.domItem.find('#addUserToClient');
+
+        this.clienteId = window.location.href.split("/").pop();
+    }
+
+    init() {
+
+        const self = this;
+
+        this.#initTable();
+        this.usersSelect.init();
+
+        this.deleteModal = new ConfirmDeleteModal('clienteUsuarios');
+        this.deleteModal.init();
+
+        // Eliminar la fila
+        this.table.table.on('click', '.btn-delete-' + this.table.getAlias(), function (e) {
+            const row = $(this).closest('tr')[0]._DT_RowIndex;
+            const dataId = $(this).attr('data-id');
+            self.deleteModal.setData($(this).attr('data-id'));
+            self.deleteModal.show(() => {
+
+                if (!Number.isNaN(Number(self.deleteModal.getData()))) {
+
+                    new Ajax(
+                        '/clienteusuarios/delete/' + dataId,
+                        {
+
+                        },
+                        {},
+                        (data, textStatus, jqXHR) => {
+
+                            self.table.table.clearPipeline();
+                            self.table.table.row($(row)).invalidate().draw();
+
+                            popSuccessAlert(data.msg ?? jqXHR.statusText);
+                        },
+                        (error) => {
+                            console.log(error);
+                        }
+
+                    ).get();
+                    self.deleteModal.hide();
+                }
+            });
+        });
+
+        this.userAdd.on('click', function (e) {
+            e.preventDefault();
+            const userId = self.usersSelect.getVal();
+            if (userId != "") {
+                new Ajax(
+                    '/clienteusuarios/adduser',
+                    {
+                        cliente_id: self.clienteId,
+                        user_id: userId,
+                    },
+                    {},
+                    (data, textStatus, jqXHR) => {
+                        self.table.table.clearPipeline();
+                        self.table.table.draw();
+                        popSuccessAlert(data.msg ?? jqXHR.statusText);
+                    },
+                    (error) => {
+                        console.log(error);
+                    }
+
+                ).post();
+            }
+        });
+    }
+
+    #initTable() {
+
+        const columns = [
+            { 'data': 'id' },
+            { 'data': 'nombre' },
+            { 'data': 'apellidos' },
+            { 'data': 'email' },
+        ];
+
+        const actions = ['delete'];
+
+        this.table = new Table(
+            $('#tableOfClienteUsuarios'),
+            'clienteUsuarios',
+            '/clienteusuarios/datatable',
+            columns,
+            [{ name: 'id_cliente', value: this.clienteId },]
+        );
+
+
+        this.table.init({
+            actions: actions,
+            colVisibility: false,
+            buttonsExport: false,
+        });
+    }
+}
+
+export default ClienteUsuarios;