Añadido datatables editor

ci4/app/Views/themes/backend/vuexy/form/clientes/cliente/_clienteFormItems.php

@@ -495,7 +495,7 @@
                             <th><?= lang('ClienteContactos.cargo') ?></th>
                             <th><?= lang('ClienteContactos.telefono') ?></th>
                             <th><?= lang('ClienteContactos.email') ?></th>
-                            <th></th>
+                            <th class="text-nowrap"><?= lang('Basic.global.Action') ?></th>
                         </tr>
                         </thead>
                         <tbody>
@@ -663,12 +663,110 @@
 
     const actionBtns = function(data) {
         return `
-                    <span class="edit"><i class="ti ti-pencil ti-sm btn-edit mx-2" data-id="${data.id}"></i></span>
+                    <span class="edit"><a href="javascript:void(0);"><i class="ti ti-pencil ti-sm btn-edit mx-2" data-id="${data.id}"></i></a></span>
+                    <a href="javascript:void(0);"><i class="ti ti-trash ti-sm btn-delete mx-2" data-id="${data.id}" data-bs-toggle="modal" data-bs-target="#confirm2delete"></i></a>
                     <span class="cancel"></span>
-                    <span class="remove"><i class="ti ti-trash ti-sm btn-delete mx-2" data-id="${data.id}"></i></span>
                 `;
     };
 
+    editor = new $.fn.dataTable.Editor( {
+        ajax: {
+            url: "<?= route_to('editorOfClienteContactos') ?>",
+            headers: {
+                <?= csrf_token() ?? "token" ?> : <?= csrf_token() ?>v,
+            },
+        },
+        table   : "#tableOfClienteContactos",
+        idSrc:  'id',
+        fields: [ {
+                name: "nombre"
+            }, {
+                name: "apellidos"
+            }, {
+                name: "cargo"
+            }, {
+                name: "telefono"
+            }, {
+                name: "email"
+            }, {
+                "name": "cliente_id",
+                "type": "hidden"
+            },{
+                "name": "deleted_at",
+                "type": "hidden"
+            },{
+                "name": "is_deleted",
+                "type": "hidden"
+            },
+        ]
+    } );
+
+    editor.on( 'preSubmit', function ( e, d, type ) {
+        if ( type === 'create'){
+            d.data[0]['cliente_id'] = id;
+        }
+        else if(type === 'edit' ) {
+            for (v in d.data){
+                d.data[v]['cliente_id'] = id;
+            }
+        }
+    });
+
+
+    editor.on( 'postSubmit', function ( e, json, data, action ) {
+
+        yeniden(json.<?= csrf_token() ?>);
+    });
+
+    editor.on( 'submitSuccess', function ( e, json, data, action ) {
+
+        theTable.clearPipeline();
+        theTable.draw();
+    });
+
+    // Activate an inline edit on click of a table cell
+    $('#tableOfClienteContactos').on( 'click', 'tbody span.edit', function (e) {
+        editor.inline(
+            theTable.cells(this.parentNode.parentNode, '*').nodes(),
+            {
+                cancelHtml: '<a href="javascript:void(0);"><i class="ti ti-x"></i></a>',
+                cancelTrigger: 'span.cancel',
+                submitHtml: '<a href="javascript:void(0);"><i class="ti ti-device-floppy"></i></a>',
+                submitTrigger: 'span.edit',
+                submit: 'allIfChanged'
+            }
+        );
+    } );
+
+
+    // Delete row
+    $('#tableOfClienteContactos').on( 'click', 'tbody span.remove', function (e) {
+
+        Swal.fire({
+            title: '<?= lang('Basic.global.sweet.sureToDeleteTitle', [mb_strtolower(lang('Basic.global.sweet.line'))]) ?>',
+            text: '<?= lang('Basic.global.sweet.sureToDeleteText') ?>',
+            icon: 'warning',
+            showCancelButton: true,
+            confirmButtonColor: '#3085d6',
+            confirmButtonText: '<?= lang('Basic.global.sweet.deleteConfirmationButton') ?>',
+            cancelButtonText: '<?= lang('Basic.global.Cancel') ?>',
+            cancelButtonColor: '#d33'
+        })
+        .then((result) => {
+            const dataId = $(this).data('id');
+            const row = $(this).closest('tr');
+            if (result.value) {
+                editor
+                    .create( false )
+                    .edit( this.parentNode, false)
+                    .set( 'deleted_at', new Date().toISOString().slice(0, 19).replace('T', ' ') )
+                    .set( 'is_deleted', 1 )
+                    .submit();
+
+            }
+        });
+    });
+
 	var theTable = $('#tableOfClienteContactos').DataTable( {
 		serverSide: true,
         processing: true,
@@ -717,7 +815,7 @@
         language: {
             url: "//cdn.datatables.net/plug-ins/1.13.4/i18n/<?= config('Basics')->i18n ?>.json"
         },
-        /*buttons: [ {
+        buttons: [ {
             className: 'btn btn-primary float-end me-sm-3 me-1',
             extend: "createInline",
             editor: editor,
@@ -725,7 +823,7 @@
                 submitTrigger: -1,
                 submitHtml: '<i class="ti ti-device-floppy"/>'
             }
-        } ]*/
+        } ]
     } );
 
 
@@ -733,6 +831,7 @@
 
 <?=$this->section('css') ?>
     <link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.2.3/css/buttons.bootstrap5.min.css">
+    <link rel="stylesheet" href="<?= site_url('themes/vuexy/css/datatables-editor/editor.dataTables.min.css') ?>">
 <?=$this->endSection() ?>
 
 <?= $this->section('additionalExternalJs') ?>