Merge branch 'mod/client_list' into 'main'

cambiada lista de clientes a nuevo formato

See merge request jjimenez/safekat!437

ci4/app/Controllers/Clientes/Cliente.php

@@ -250,11 +250,20 @@ class Cliente extends \App\Controllers\BaseResourceController
             $start = $reqData['start'] ?? 0;
             $length = $reqData['length'] ?? 5;
             $search = $reqData['search']['value'];
-            $requestedOrder = $reqData['order']['0']['column'] ?? 1;
-            $order = ClienteModel::SORTABLE[$requestedOrder > 0 ? $requestedOrder : 1];
-            $dir = $reqData['order']['0']['dir'] ?? 'asc';
+            $searchValues = get_filter_datatables_columns($reqData);
+            $requestedOrder = $reqData['order'] ?? [];
 
-            $resourceData = $this->model->getResource($search)->orderBy($order, $dir)->limit($length, $start)->get()->getResultObject();
+            $resourceData = $this->model->getResource($searchValues);
+            foreach ($requestedOrder as $order) {
+                $column = $order['column'] ?? 0;
+                $dir = $order['dir'] ?? 'asc';
+                $orderColumn = ClienteModel::SORTABLE[$column] ?? null;
+                if ($orderColumn) {
+                    $resourceData->orderBy($orderColumn, $dir);
+                }
+            }
+            $resourceData = $resourceData->limit($length, $start)->get()->getResultObject();
+            
             foreach ($resourceData as $item) :
                 if (isset($item->direccion) && strlen($item->direccion) > 100) :
                     $item->direccion = character_limiter($item->direccion, 100);
@@ -273,7 +282,7 @@ class Cliente extends \App\Controllers\BaseResourceController
             return $this->respond(Collection::datatable(
                 $resourceData,
                 $this->model->getResource()->countAllResults(),
-                $this->model->getResource($search)->countAllResults()
+                $this->model->getResource($searchValues)->countAllResults()
             ));
         } else {
             return $this->failUnauthorized('Invalid request', 403);

ci4/app/Models/Clientes/ClienteModel.php

@@ -14,13 +14,14 @@ class ClienteModel extends \App\Models\BaseModel
     protected $useAutoIncrement = true;
 
     const SORTABLE = [
-        0 => "t1.nombre",
-        1 => "t1.alias",
-        2 => "t1.cif",
-        3 => "t1.email",
-        4 => "t1.comercial_id",
-        5 => "t1.forma_pago_id",
-        6 => "t1.vencimiento",
+        0 => "t1.id",
+        1 => "t1.nombre",
+        2 => "t1.alias",
+        3 => "t1.cif",
+        4 => "t1.email",
+        5 => "t1.comercial_id",
+        6 => "t1.forma_pago_id",
+        7 => "t1.vencimiento",
     ];
 
     protected $allowedFields = [
@@ -63,7 +64,7 @@ class ClienteModel extends \App\Models\BaseModel
     ];
     protected $returnType = "App\Entities\Clientes\ClienteEntity";
 
-    protected $deletedField  = 'deleted_at';
+    protected $deletedField = 'deleted_at';
 
     public static $labelField = "nombre";
 
@@ -245,7 +246,7 @@ class ClienteModel extends \App\Models\BaseModel
             "required" => "Clientes.validation.vencimiento.required",
         ],
     ];
-    public function findAllWithAllRelations(string $selcols = "*", int $limit = null, int $offset = 0)
+    public function findAllWithAllRelations($selcols = "*", int $limit = null, int $offset = 0)
     {
         $sql =
             "SELECT t1." .
@@ -279,35 +280,30 @@ class ClienteModel extends \App\Models\BaseModel
      *
      * @return \CodeIgniter\Database\BaseBuilder
      */
-    public function getResource(string $search = "")
+    public function getResource($search = [])
     {
         $builder = $this->db
             ->table($this->table . " t1")
             ->select(
                 "t1.id AS id, t1.nombre AS nombre, t1.alias AS alias, t1.cif AS cif, t1.email AS email, t1.vencimiento AS vencimiento, t5.first_name AS comercial, t7.nombre AS forma_pago_id"
             )
-            ->where("is_deleted", 0);;
+            ->where("is_deleted", 0);
+        ;
         $builder->join("users t5", "t1.comercial_id = t5.id", "left");
         $builder->join("formas_pago t7", "t1.forma_pago_id = t7.id", "left");
 
-
-        return empty($search)
-            ? $builder
-            : $builder
-            ->groupStart()
-            ->like("t1.nombre", $search)
-            ->orLike("t1.alias", $search)
-            ->orLike("t1.cif", $search)
-            ->orLike("t1.email", $search)
-            ->orLike("t1.soporte_id", $search)
-            ->orLike("t1.forma_pago_id", $search)
-            ->orLike("t1.vencimiento", $search)
-            ->orLike("t5.id", $search)
-            ->orLike("t5.first_name", $search)
-            ->orLike("t5.last_name", $search)
-            ->orLike("t7.id", $search)
-            ->orLike("t7.nombre", $search)
-            ->groupEnd();
+        if (empty($search))
+            return $builder;
+        else {
+            $builder->groupStart();
+            foreach ($search as $col_search) {
+                $column = self::SORTABLE[$col_search[0]];
+                $value = $col_search[2];
+                $builder->where("LOWER(CONVERT($column USING utf8)) COLLATE utf8_general_ci LIKE", "%" . strtolower($value) . "%");
+            }
+            $builder->groupEnd();
+            return $builder;
+        }
     }
 
     /*
@@ -353,7 +349,7 @@ class ClienteModel extends \App\Models\BaseModel
             ->join("pedidos", "pedidos.id = pedidos_linea.pedido_id", "left")
             ->join("facturas_pedidos_lineas", "facturas_pedidos_lineas.pedido_linea_id = pedidos_linea.id", "left")
             ->where("t1.id", $cliente_id);
-        $data =  $query->get()->getResultObject();
+        $data = $query->get()->getResultObject();
         $facturas = [];
         $presupuestos = [];
         $pedidos = [];

ci4/app/Models/UserModel.php

@@ -85,8 +85,6 @@ class UserModel extends ShieldUserModel
         $builder->join("auth_identities t2", "t1.id = t2.user_id", "left");
         $builder->where('t1.deleted_at', null)->groupBy("t1.id");
 
-
-
         if (empty($search))
             return $builder;
         else {

ci4/app/Views/themes/vuexy/form/clientes/cliente/viewClienteList.php

@@ -1,35 +1,35 @@
 <?= $this->include('themes/_commonPartialsBs/select2bs5') ?>
 <?= $this->include('themes/_commonPartialsBs/datatables') ?>
-<?= $this->include('themes/_commonPartialsBs/_confirm2delete') ?>
 <?= $this->extend('themes/vuexy/main/defaultlayout') ?>
 
-<?= $this->section('content');  ?>
+<?= $this->section('content'); ?>
 <div class="row">
     <div class="col-md-12">
         <div class="card card-info">
             <div class="card-header">
-                <h3 class="card-title"><?=lang('Clientes.clienteList') ?></h3>
-                <?=anchor(route_to('clienteAdd'), lang('Basic.global.addNew').' '.lang('Clientes.cliente'), ['class'=>'btn btn-primary float-end']); ?>
-           </div><!--//.card-header -->
+                <h3 class="card-title"><?= lang('Clientes.clienteList') ?></h3>
+                <?= anchor(route_to('clienteAdd'), lang('Basic.global.addNew') . ' ' . lang('Clientes.cliente'), ['class' => 'btn btn-primary float-end']); ?>
+            </div><!--//.card-header -->
             <div class="card-body">
-				<?= view('themes/_commonPartialsBs/_alertBoxes'); ?>
-					<table id="tableOfClientes" class="table table-striped table-hover" style="width: 100%;">
-						<thead>
-							<tr>
-								<th><?= lang('Clientes.nombre') ?></th>
-								<th><?= lang('Clientes.alias') ?></th>
-								<th><?= lang('Clientes.cif') ?></th>
-								<th><?= lang('Clientes.email') ?></th>
-								<th><?= lang('Users.comercial') ?></th>
-								<th><?= lang('FormasPago.formaDePago') ?></th>
-								<th><?= lang('Clientes.vencimiento') ?></th>
-								<th class="text-nowrap"><?= lang('Basic.global.Action') ?></th>
-							</tr>
-						</thead>
-						<tbody>
+                <?= view('themes/_commonPartialsBs/_alertBoxes'); ?>
+                <table id="tableOfClientes" class="table table-striped table-hover" style="width: 100%;">
+                    <thead>
+                        <tr>
+                            <th>ID</th>
+                            <th><?= lang('Clientes.nombre') ?></th>
+                            <th><?= lang('Clientes.alias') ?></th>
+                            <th><?= lang('Clientes.cif') ?></th>
+                            <th><?= lang('Clientes.email') ?></th>
+                            <th><?= lang('Users.comercial') ?></th>
+                            <th><?= lang('FormasPago.formaDePago') ?></th>
+                            <th><?= lang('Clientes.vencimiento') ?></th>
+                            <th class="text-nowrap noFilter" style="min-width: 80px;"><?= lang('Basic.global.Action') ?></th>
+                        </tr>
+                    </thead>
+                    <tbody>
 
-						</tbody>
-					</table>
+                    </tbody>
+                </table>
             </div><!--//.card-body -->
             <div class="card-footer">
             </div><!--//.card-footer -->
@@ -37,111 +37,28 @@
     </div><!--//.col -->
 </div><!--//.row -->
 
-<?=$this->endSection() ?>
+<?= $this->endSection() ?>
 
 
-<?=$this->section('additionalInlineJs') ?>
-    
-    const lastColNr = $('#tableOfClientes').find("tr:first th").length - 1;
-    const actionBtns = function(data) {
-        return `
-            <td class="text-right py-0 align-middle">
-                <div class="btn-group btn-group-sm">
-                    <a href="javascript:void(0);"><i class="ti ti-pencil ti-sm btn-edit mx-2" data-id="${data.id}"></i></a>
-                    <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>
-                </div>
-            </td>`;
-    };
-
-    theTable = $('#tableOfClientes').DataTable({
-        processing: true,
-        serverSide: true,
-        autoWidth: true,
-        responsive: true,
-        scrollX: true,
-        lengthMenu: [ 5, 10, 25, 50, 75, 100, 250, 500, 1000, 2500 ],
-        pageLength: 10,
-        lengthChange: true,
-        "dom": 'lfBrtip',
-        "buttons": [
-            'copy', 'csv', 'excel', 'print', {
-                extend: 'pdfHtml5',
-                orientation: 'landscape',
-                pageSize: 'A4'
-            }
-        ],
-        stateSave: true,
-        order: [[0, 'asc']],
-        language: {
-            url: "/themes/vuexy/vendor/libs/datatables-sk/plugins/i18n/es-ES.json"
-        },
-        ajax : $.fn.dataTable.pipeline( {
-            url: '<?= route_to('clienteDT') ?>',
-            method: 'POST',
-            headers: {'X-Requested-With': 'XMLHttpRequest'},
-            async: true,
-        }),
-        columnDefs: [
-            {
-                orderable: false,
-                searchable: false,
-                targets: [lastColNr]
-            }
-        ],
-        columns : [
-            { 'data': 'nombre' },
-            { 'data': 'alias' },
-            { 'data': 'cif' },
-            { 'data': 'email' },
-            { 'data': 'comercial' },
-            { 'data': 'forma_pago_id' },
-            { 'data': 'vencimiento' },
-            { 'data': actionBtns }
-        ]
-    });
-
-
-    $(document).on('click', '.btn-edit', function(e) {
-        window.location.href = `/clientes/cliente/edit/${$(this).attr('data-id')}`;
-    });
-
-    $(document).on('click', '.btn-delete', function(e) {
-        $(".btn-remove").attr('data-id', $(this).attr('data-id'));
-    });
-
-    $(document).on('click', '.btn-remove', function(e) {
-        const dataId = $(this).attr('data-id');
-        const row = $(this).closest('tr');
-        if ($.isNumeric(dataId)) {
-            $.ajax({
-                url: `/clientes/cliente/delete/${dataId}`,
-                method: 'GET',
-            }).done((data, textStatus, jqXHR) => {
-                $('#confirm2delete').modal('toggle');
-                theTable.clearPipeline();
-                theTable.row($(row)).invalidate().draw();
-                popSuccessAlert(data.msg ?? jqXHR.statusText);
-            }).fail((jqXHR, textStatus, errorThrown) => {
-                popErrorAlert(jqXHR.responseJSON.messages.error)
-            })
-        }
-    });
-    
-<?=$this->endSection() ?>
-
-
-<?=$this->section('css') ?>
-<link rel="stylesheet" href="<?= site_url("/themes/vuexy/vendor/libs/datatables-sk/plugins/buttons/buttons.bootstrap5.min.css") ?>">
-<?=$this->endSection() ?>
+<?= $this->section('css') ?>
+<link rel="stylesheet"
+    href="<?= site_url("/themes/vuexy/vendor/libs/datatables-sk/plugins/buttons/buttons.bootstrap5.min.css") ?>">
+<?= $this->endSection() ?>
 
 
 <?= $this->section('additionalExternalJs') ?>
-    <script src="<?= site_url("/themes/vuexy/vendor/libs/datatables-sk/plugins/buttons/dataTables.buttons.min.js") ?>"></script>
-    <script src="<?= site_url("/themes/vuexy/vendor/libs/datatables-sk/plugins/buttons/buttons.bootstrap5.min.js") ?>"></script>
-    <script src="<?= site_url("/themes/vuexy/vendor/libs/datatables-sk/plugins/buttons/buttons.html5.min.js") ?>"></script>
-    <script src="<?= site_url("/themes/vuexy/vendor/libs/datatables-sk/plugins/buttons/buttons.print.min.js") ?>"></script>
-    <script src="<?= site_url("/themes/vuexy/vendor/libs/datatables-sk/plugins/jszip/jszip.min.js") ?>"></script>
-    <script src="<?= site_url("/themes/vuexy/vendor/libs/datatables-sk/plugins/pdfmake/pdfmake.min.js") ?>" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
-    <script src="<?= site_url("/themes/vuexy/vendor/libs/datatables-sk/plugins/pdfmake/vfs_fonts.js") ?>"></script>
-<?=$this->endSection() ?>
+<script
+    src="<?= site_url("/themes/vuexy/vendor/libs/datatables-sk/plugins/buttons/dataTables.buttons.min.js") ?>"></script>
+<script
+    src="<?= site_url("/themes/vuexy/vendor/libs/datatables-sk/plugins/buttons/buttons.bootstrap5.min.js") ?>"></script>
+<script src="<?= site_url("/themes/vuexy/vendor/libs/datatables-sk/plugins/buttons/buttons.html5.min.js") ?>"></script>
+<script src="<?= site_url("/themes/vuexy/vendor/libs/datatables-sk/plugins/buttons/buttons.print.min.js") ?>"></script>
+<script src="<?= site_url("/themes/vuexy/vendor/libs/datatables-sk/plugins/jszip/jszip.min.js") ?>"></script>
+<script src="<?= site_url("/themes/vuexy/vendor/libs/datatables-sk/plugins/pdfmake/pdfmake.min.js") ?>"
+    crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+<script src="<?= site_url("/themes/vuexy/vendor/libs/datatables-sk/plugins/buttons/buttons.colVis.min.js") ?>"></script>
+<script src="<?= site_url("/themes/vuexy/vendor/libs/datatables-sk/plugins/pdfmake/vfs_fonts.js") ?>"></script>
 
+<script type="module" src="<?= site_url('assets/js/safekat/pages/cliente/clienteList.js') ?>"></script>
+
+<?= $this->endSection() ?>

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

@@ -0,0 +1,162 @@
+import Table from '../../components/table.js';
+import ConfirmDeleteModal from '../../components/ConfirmDeleteModal.js';
+import Ajax from '../../components/ajax.js';
+import { getToken } from '../../common/common.js';
+
+
+class ClienteList {
+
+    constructor() {
+
+        this.domItem = $('.card-body');
+
+        this.csrf_token = getToken();
+        this.csrf_hash = $('#mainContainer').find('input[name="' + this.csrf_token + '"]').val();
+
+        this.tableClientes = null;
+        this.deleteModal = null;
+    }
+
+    init() {
+
+        const self = this;
+
+        this.headerSearcher();
+
+        this.deleteModal = new ConfirmDeleteModal('plantillasTarifasCliente');
+        this.deleteModal.init();
+
+        this.#initTable();
+
+        // Editar en linea la fila
+        this.tableClientes.table.on('click', '.btn-edit-' + this.tableClientes.getAlias(), function (e) {
+
+            const dataId = $(this).attr('data-id');
+
+            if (!Number.isNaN(Number(dataId))) {
+                window.location.href = '/clientes/cliente/edit/' + dataId;
+            }
+        });
+
+        // Eliminar la fila
+        this.tableClientes.table.on('click', '.btn-delete-' + this.tableClientes.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(
+                        '/clientes/cliente/delete/' + dataId,
+                        {
+
+                        },
+                        {},
+                        (data, textStatus, jqXHR) => {
+
+                            self.tableClientes.table.clearPipeline();
+                            self.tableClientes.table.row($(row)).invalidate().draw();
+
+                            popSuccessAlert(data.msg ?? jqXHR.statusText);
+                        },
+                        (error) => {
+                            console.log(error);
+                        }
+
+                    ).get();
+                    self.deleteModal.hide();
+                }
+            });
+        });
+    }
+
+    #initTable() {
+
+        const self = this;
+
+        const columns = [
+            { 'data': 'id' },
+            { 'data': 'nombre' },
+            { 'data': 'alias' },
+            { 'data': 'cif' },
+            { 'data': 'email' },
+            { 'data': 'comercial' },
+            { 'data': 'forma_pago_id' },
+            { 'data': 'vencimiento' },
+        ];
+
+        const actions = ['edit', 'delete'];
+
+        this.tableClientes = new Table(
+            $('#tableOfClientes'),
+            'clienteList',
+            '/clientes/cliente/datatable',
+            columns,
+            []
+        );
+
+
+        this.tableClientes.init({
+            actions: actions,
+            colVisibility: true,
+            buttonsExport: true,
+        });
+
+
+        this.tableClientes.table.on('init.dt', function () {
+            self.tableClientes.table.page.len(50).draw();
+        });
+
+    }
+
+    headerSearcher() {
+
+        const self = this;
+
+        $('#tableOfClientes thead tr').clone(false).appendTo('#tableOfClientes thead');
+        $('#tableOfClientes thead tr:eq(1) th').each(function (i) {
+
+            if (!$(this).hasClass("noFilter")) {
+
+                let min_width = 100;
+                if(i == 0){
+                    min_width = 50;
+                }
+
+                $(this).html(`<input type="text" class="form-control " style="min-width:${min_width}px;max-width:500px;font-size:0.8rem !important;"  />`);
+
+                $('input', this).on('change clear', function () {
+                    if (self.tableClientes.table.column(i).search() !== this.value) {
+                        self.tableClientes.table
+                            .column(i)
+                            .search(this.value)
+                            .draw();
+                    }
+                });
+            }
+            else {
+                $(this).html('<span></span>');
+            }
+        });
+
+
+    }
+
+}
+
+document.addEventListener('DOMContentLoaded', function () {
+
+    const locale = document.querySelector('meta[name="locale"]').getAttribute('content');
+
+    new Ajax('/translate/getTranslation', { locale: locale, translationFile: ['Clientes', 'FormasPago', 'Users'] }, {},
+        function (translations) {
+            window.language = JSON.parse(translations);
+            new ClienteList().init();
+        },
+        function (error) {
+            console.log("Error getting translations:", error);
+        }
+    ).post();
+});
+

httpdocs/assets/js/safekat/pages/presupuestoCliente/resumen.js

@@ -1,4 +1,4 @@
-import previewFormas from "../preview.js";
+import previewFormas from "../../components/preview.js";
 import { capitalizeFirstLetter } from "../../common/common.js";
 
 class Resumen {