Merge branch 'mod/tarifas_clientes' into 'main'

Mod/tarifas clientes

See merge request jjimenez/safekat!423

ci4/app/Controllers/Clientes/ClientePrecios.php

@@ -108,16 +108,18 @@ class ClientePrecios extends \App\Controllers\BaseResourceController
             $dir3 = $reqData['order']['2']['dir'] ?? $dir;
             $dir4= $reqData['order']['3']['dir'] ?? $dir;
             $dir5= $reqData['order']['4']['dir'] ?? $dir;
+
+            $searchValues = get_filter_datatables_columns($reqData);
             
             $cliente_id = $reqData['cliente_id'] ?? 0;
 
-            $resourceData = $this->model->getResource($cliente_id)
+            $resourceData = $this->model->getResource($searchValues, $cliente_id)
                 ->orderBy($order, $dir)->orderBy($order2, $dir2)->orderBy($order3, $dir3)->orderBy($order4, $dir4)->orderBy($order5, $dir5)
                 ->limit($length, $start)->get()->getResultObject();
             return $this->respond(Collection::datatable(
                 $resourceData,
-                $this->model->getResource($cliente_id)->countAllResults(),
-                $this->model->getResource($cliente_id)->countAllResults()
+                $this->model->getResource($searchValues, $cliente_id)->countAllResults(),
+                $this->model->getResource($searchValues, $cliente_id)->countAllResults()
             ));
         } else {
             return $this->failUnauthorized('Invalid request', 403);
@@ -203,21 +205,19 @@ class ClientePrecios extends \App\Controllers\BaseResourceController
                     }
                 })
                 ->on('preCreate', function ($editor, &$values) {
-                    $session = session();
                     $datetime = (new \CodeIgniter\I18n\Time("now"));
                     $editor
                         ->field('user_updated_id')
-                        ->setValue($session->id_user);
+                        ->setValue(auth()->user()->id);
                     $editor
                         ->field('updated_at')
                         ->setValue($datetime->format('Y-m-d H:i:s'));
                 })
                 ->on('preEdit', function ($editor, &$values) {
-                    $session = session();
                     $datetime = (new \CodeIgniter\I18n\Time("now"));
                     $editor
                         ->field('user_updated_id')
-                        ->setValue($session->id_user);
+                        ->setValue(auth()->user()->id);
                     $editor
                         ->field('updated_at')
                         ->setValue($datetime->format('Y-m-d H:i:s'));

ci4/app/Controllers/Language.php

@@ -21,9 +21,22 @@ class Language extends BaseController
     public function getTranslation()
     {
         $translationFile = $this->request->getPost('translationFile');
-        $locale = $this->request->getPost('locale');
-        $path = "Language/{$locale}/$translationFile.php";
-        $lang =  require APPPATH.$path;
-        return json_encode($lang);
+        $data = [];
+        if(is_array($translationFile)){
+            foreach($translationFile as $file){
+                $locale = $this->request->getPost('locale');
+                $path = "Language/{$locale}/$file.php";
+                $lang =  require APPPATH.$path;
+                $data[$file] = $lang;
+            }
+            return json_encode($data);
+        }
+        else{
+            $locale = $this->request->getPost('locale');
+            $path = "Language/{$locale}/$translationFile.php";
+            $lang =  require APPPATH.$path;
+            return json_encode($lang);
+        }
+        
     }
 }

ci4/app/Models/Clientes/ClientePreciosModel.php

@@ -14,14 +14,14 @@ class ClientePreciosModel extends \App\Models\BaseModel
     protected $useAutoIncrement = true;
 
     const SORTABLE = [
-        0 => "t1.tipo",
-        1 => "t1.tipo_maquina",
-        2 => "t1.tipo_impresion",
-        3 => "t1.tiempo_min",
-        4 => "t1.tiempo_max",
-        5 => "t1.precio_hora",
-        6 => "t1.margen",
-
+        0 => "t1.id",
+        1 => "t1.tipo",
+        2 => "t1.tipo_maquina",
+        3 => "t1.tipo_impresion",
+        4 => "t1.tiempo_min",
+        5 => "t1.tiempo_max",
+        6 => "t1.precio_hora",
+        7 => "t1.margen",
     ];
 
     protected $allowedFields = [
@@ -256,7 +256,7 @@ class ClientePreciosModel extends \App\Models\BaseModel
      *
      * @return \CodeIgniter\Database\BaseBuilder
      */
-    public function getResource($cliente_id = -1)
+    public function getResource($search = [], $cliente_id = -1)
     {
         $builder = $this->db
             ->table($this->table . " t1")
@@ -271,9 +271,20 @@ class ClientePreciosModel extends \App\Models\BaseModel
         
         $builder->where('t1.is_deleted', 0);
         $builder->where('t1.cliente_id', $cliente_id);
-        
 
-        return $builder;
+        if (empty($search))
+            return $builder;
+        else {
+            $builder->groupStart();
+            foreach ($search as $col_search) {
+                    if ($col_search[0] > 0 && $col_search[0] < 4)
+                        $builder->where(self::SORTABLE[$col_search[0]], $col_search[2]);
+                    else
+                        $builder->like(self::SORTABLE[$col_search[0]], $col_search[2]);
+            }
+            $builder->groupEnd();
+            return $builder;
+        }
     }
 
 

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

@@ -584,6 +584,7 @@
                     <table id="tableOfPrecios" class="table table-striped table-hover" style="width: 100%;">
                         <thead>
                             <tr>
+                                <th>ID</th>
                                 <th><?= lang('ClientePrecios.tipo') ?></th>
                                 <th><?= lang('ClientePrecios.tipo_maquina') ?></th>
                                 <th><?= lang('ClientePrecios.tipo_impresion') ?></th>
@@ -591,10 +592,10 @@
                                 <th><?= lang('ClientePrecios.tiempo_max') ?></th>
                                 <th><?= lang('ClientePrecios.precio_hora') ?></th>
                                 <th><?= lang('ClientePrecios.margen') ?></th>
-                                <th><?= lang('ClientePrecios.user_updated_id') ?></th>
-                                <th><?= lang('ClientePrecios.updated_at') ?></th>
-                                <th>plantilla_id</th>
-                                <th class="text-nowrap" style="min-width:100px"><?= lang('Basic.global.Action') ?></th>
+                                <th class="noFilter"><?= lang('ClientePrecios.user_updated_id') ?></th>
+                                <th class="noFilter"><?= lang('ClientePrecios.updated_at') ?></th>
+                                <th class="noFilter noVis">plantilla_id</th>
+                                <th class="text-nowrap noFilter noVis" style="min-width:100px"><?= lang('Basic.global.Action') ?></th>
                             </tr>
                         </thead>
                         <tbody>
@@ -924,7 +925,7 @@ $(document).on('click', '.btn-remove', function(e) {
             `;
     };
 
-
+/*
     const tipo_linea = [
         {label:'<?= lang('ClientePrecios.interior') ?>', value:'interior'}, 
         {label:'<?= lang('ClientePrecios.cubierta') ?>', value: 'cubierta'},
@@ -1045,6 +1046,8 @@ $(document).on('click', '.btn-remove', function(e) {
             }
         })
     })
+*/
+/*
 
 	var theTablePrecios = $('#tableOfPrecios').DataTable( {
 		serverSide: true,
@@ -1143,7 +1146,7 @@ $(document).on('click', '.btn-remove', function(e) {
             }
         } ]
     } );
-
+*/
 
     const initPrecioTemplate = <?php echo json_encode($precioTemplate);?>;
     if(initPrecioTemplate != null){
@@ -1151,7 +1154,7 @@ $(document).on('click', '.btn-remove', function(e) {
         $('#plantillas').append(newOption);
     }
     
-    
+    /*
     // Activate an inline edit on click of a table cell
     $('#tableOfPrecios').on( 'click', 'tbody span.edit', function (e) {
         editorPrecios.inline(
@@ -1165,7 +1168,7 @@ $(document).on('click', '.btn-remove', function(e) {
             } 
         );
     } );
-
+*/
     
     // Delete row
     $(document).on('click', '.btn-delete', function(e) {

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

@@ -1,6 +1,7 @@
 <?= $this->include("themes/_commonPartialsBs/datatables") ?>
 <?= $this->include("themes/_commonPartialsBs/select2bs5") ?>
 <?= $this->include("themes/_commonPartialsBs/sweetalert") ?>
+<?= $this->include('themes/_commonPartialsBs/_confirm2delete') ?>
 <?=$this->extend('themes/vuexy/main/defaultlayout') ?>
 
 <?= $this->section("content") ?>
@@ -43,5 +44,8 @@
 
 
 <?= $this->section("additionalExternalJs") ?>
+    <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/buttons/buttons.html5.min.js") ?>"></script>
+    <script src="<?= site_url("/themes/vuexy/vendor/libs/datatables-sk/plugins/buttons/buttons.print.min.js") ?>"></script>
     <script type="module" src="<?= site_url('assets/js/safekat/pages/cliente/cliente.js?'. 'token' . '='. (csrf_token() ?? "token")) ?>"></script>
 <?= $this->endSection() ?>

httpdocs/assets/js/safekat/components/ConfirmDeleteModal.js

@@ -0,0 +1,81 @@
+class ConfirmDeleteModal {
+
+    constructor(alias = "") {
+
+        this.modalId = alias !== "" ? `confirm2delete-${alias}`: 'confirm2delete';
+
+        const removeClass = alias !== "" ? `btn-remove-${alias}` : 'btn-remove';
+
+        this.btnCancelId = alias !== "" ? `btnCancelDelete-${alias}` : 'btnCancelDelete';
+        this.btnDeleteId = alias !== "" ? `btnConfirmDelete-${alias}` : 'btnConfirmDelete';
+
+        this.data = null;
+
+        this.modalHtml = `
+            <div class="modal fade" id="${this.modalId}" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="${this.modalId}Label" aria-hidden="true">
+                <div class="modal-dialog modal-dialog-centered">
+                    <div class="modal-content">
+                        <div class="modal-header">
+                            <h5 class="modal-title" id="${this.modalId}Label">¿Estás seguro de que deseas eliminar?</h5>
+                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                        </div>
+                        <div class="modal-body">
+                            Esta acción no se puede deshacer.
+                        </div>
+                        <div class="modal-footer">
+                            <button id=${this.btnCancelId} type="button" class="btn btn-default" data-bs-dismiss="modal">Cancelar</button>
+                            <a id=${this.btnDeleteId} href="javascript:void(0);" class="btn btn-danger btn-confirm ${removeClass}">Eliminar</a>
+                        </div><!--//.modal-footer -->
+                    </div><!--//.modal-content -->
+                </div><!--//.modal-dialog -->
+            </div><!--//.modal -->
+        `;
+    }
+
+    init() {
+
+        // Insertar el modal en el body del documento si no existe
+        if (!document.getElementById(this.modalId)) {
+            document.body.insertAdjacentHTML('beforeend', this.modalHtml);
+        }
+        document.getElementById(this.btnCancelId).addEventListener('click', () => {
+            const modal = new bootstrap.Modal(document.getElementById(this.modalId));
+            modal.hide();
+        });
+    }
+
+    getModalId() {
+        return '#' + this.modalId;
+    }
+
+    setData(data) {
+        this.data = data;
+    }
+
+    getData() {
+        return this.data;
+    }
+
+    // Método para mostrar el modal
+    show(callback) {
+
+        // Mostrar el modal usando Bootstrap
+        const modal = new bootstrap.Modal(document.getElementById(this.modalId));
+        modal.show();
+
+        // Configurar el evento de confirmación de eliminación
+        document.getElementById(this.btnDeleteId).addEventListener('click', () => {
+            callback(); // Llamar al callback que el usuario haya proporcionado
+            modal.hide(); // Cerrar el modal
+        });
+    }
+
+    // Método para ocultar el modal si es necesario
+    hide() {
+        const modal = new bootstrap.Modal(document.getElementById(this.modalId));
+        modal.hide();
+    }
+}
+
+
+export default ConfirmDeleteModal;

httpdocs/assets/js/safekat/components/table.js

@@ -0,0 +1,179 @@
+let Table = function (
+    domItem,
+    alias,
+    url,
+    columns,
+    data,
+    language = "es-ES") {
+
+    this.domItem = domItem;
+    this.alias = alias;
+    this.url = url;
+    this.columns = columns;
+    this.data = data;
+    this.language = language;
+
+    this.table = null;
+    this.actions = []; // Declaración inicial de actions como propiedad
+    this.deleteModal = null;
+
+    const self = this;
+
+    this.init = function ({
+        dom = '<"mt-4"><"float-end"B><"float-start"l><t><"mt-4 mb-3"p>',
+        actions = ['view', 'edit', 'delete', 'cancel'],
+        order = [[0, 'asc']],
+        buttonsExport = true,
+        buttonNewWithEditor = false,
+        editor = null,
+        booleanColumns = [],
+    } = {}) {
+
+        this.actions = actions;  
+
+        const lastColNr = this.domItem.find("tr:first th").length - 1;
+
+        let columnDefs = [];
+        if (actions.length > 0) {
+            columnDefs = [
+                {
+                    orderable: false,
+                    searchable: false,
+                    targets: [lastColNr]
+                }
+            ];
+            columns.push(
+                {
+                    'data': self.actionBtns.bind(self), // Vincular correctamente el contexto
+                    'className': 'row-edit dt-center',
+                }
+            );
+        }
+
+        let buttons = [];
+        if (buttonsExport) {
+            buttons = [
+                {
+                    extend: 'colvis',
+                    columns: ':not(.noVis)', 
+                    
+                },
+                'copy', 'csv', 'excel', 'print', {
+                    extend: 'pdfHtml5',
+                    orientation: 'landscape',
+                    pageSize: 'A4'
+                }
+            ];
+        }
+        if (buttonNewWithEditor) {
+            buttons.push(
+                {
+                    className: 'btn btn-primary me-sm-3 me-1',
+                    extend: "createInline",
+                    editor: editor,
+                    formOptions: {
+                        submitTrigger: -1,
+                        submitHtml: '<a href="javascript:void(0);"><i class="ti ti-device-floppy"></i></a>'
+                    }
+                }
+            );
+        }
+
+        // Inicialización de DataTable
+        this.table = this.domItem.DataTable({
+            processing: true,
+            serverSide: true,
+            autoWidth: true,
+            responsive: true,
+            scrollX: true,
+            stateSave: false,
+            lengthMenu: [5, 10, 25, 50, 75, 100, 250, 500, 1000, 2500],
+            order: order,
+            orderCellsTop: true,
+            fixedHeader: true,
+            dom: dom,
+            ajax: $.fn.dataTable.pipeline({
+                url: this.url,
+                method: 'POST',
+                headers: { 'X-Requested-With': 'XMLHttpRequest' },
+                data: function (d) {
+                    $.each(self.data, function (key, val) {
+                        d[val.name] = val.value;
+                    });
+                },
+                async: true,
+            }),
+            buttons: buttons,
+            columns: this.columns,
+            language: {
+                url: "/themes/vuexy/vendor/libs/datatables-sk/plugins/i18n/" + this.language + ".json"
+            },
+            columnDefs: columnDefs,
+        });
+
+        if (Array.isArray(booleanColumns) && booleanColumns.length > 0) {
+            this.table.on('draw.dt', function () {
+                for (let coln of booleanColumns) {
+                    self.table.column(coln, { page: 'current' }).nodes().each(function (cell) {
+                        cell.innerHTML = cell.innerHTML == '1' ? '<i class="ti ti-check"></i>' : '';
+                    });
+                }
+            });
+        }
+    };
+
+    this.getAlias = function () {
+        return this.alias;
+    }
+
+    this.setData = function (data) {
+        this.data = data;
+    }
+
+    this.setPageLength = function (length) {
+        this.table.page.len(length).draw();
+    }
+
+    this.setEditCallback = function (callback) {
+        this.domItem.on('click', '.btn-edit-' + this.alias, function () {
+            let id = $(this).data('id');
+            callback(id);
+        });
+    }
+
+    this.setDeleteCallback = function (callback) {
+        this.domItem.on('click', '.btn-delete-' + this.alias, function () {
+            let id = $(this).data('id');
+            callback(id);
+        });
+    }
+
+    this.setViewCallback = function (callback) {
+        this.domItem.on('click', '.btn-view-' + this.alias, function () {
+            let id = $(this).data('id');
+            callback(id);
+        });
+    }
+
+    this.actionBtns = function (data) {
+        let btns = ``;
+        if (this.actions.includes('view')) {
+            btns += `<span class="view"><a href="javascript:void(0);"><i class="ti ti-eye ti-sm btn-edit-${this.alias} mx-2" data-id="${data.id}"></i></a></span>`;
+        }
+        if (this.actions.includes('edit')) {
+            btns += `<span class="edit"><a href="javascript:void(0);"><i class="ti ti-pencil ti-sm btn-edit-${this.alias} mx-2" data-id="${data.id}"></i></a></span>`;
+        }
+        if (this.actions.includes('cancel')) {
+            btns += `<span class="cancel"></span>`;
+        }
+        if (this.actions.includes('delete')) {
+            btns += `<a href="javascript:void(0);"><i class="ti ti-trash ti-sm btn-delete-${this.alias} mx-2" data-id="${data.id}"></i></a>`;
+        }
+
+        return btns;
+    };
+    
+
+}
+
+export default Table;

httpdocs/assets/js/safekat/components/tableEditor.js

@@ -0,0 +1,32 @@
+let TableEditor = function (
+    table,
+    url,
+    headers,
+    idSrc,
+    fields) {
+
+
+    this.table = table;
+    this.url = url;
+    this.headers = headers;
+    this.idSrc = idSrc;
+    this.fields = fields;
+
+    this.editor = null;
+
+    this.init = function () {
+
+        this.editor = new $.fn.dataTable.Editor( {
+        ajax: {
+            url: url,
+            headers: headers,
+        },
+        table   : table,
+        idSrc:  idSrc,
+        fields: fields,
+        });
+    };
+}
+
+export default TableEditor;
+

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

@@ -1,11 +1,12 @@
 import ClassSelect from '../../components/select2.js';
+import tarifasClienteView from './tarifasCliente.js';
+import Ajax from '../../components/ajax.js';
 
 class Cliente {
 
     constructor() {
 
-        this.csrf_token = this.getToken();
-        this.csrf_hash = $('#clienteForm').find('input[name="' + this.csrf_token + '"]').val();
+        this.tarifas = new tarifasClienteView($('#tarifascliente'));
 
         this.pais =  new ClassSelect($("#paisId"), '/paises/menuitems2', "Seleccione un país", {[this.csrf_token]: this.csrf_hash});
         this.soporte = new ClassSelect($("#soporteId"), '/users/getMenuComerciales', "Seleccione un usuario", {[this.csrf_token]: this.csrf_hash}); 
@@ -14,7 +15,6 @@ 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.init();
     }
 
     init() {
@@ -30,6 +30,8 @@ class Cliente {
         this.formaPago.init();
         this.provincia.init();
         this.comunidadAutonoma.init();
+
+        this.tarifas.init();
         
         $(document).keypress(function (e) {
             var key = e.which;
@@ -49,18 +51,23 @@ class Cliente {
         });
 
     }
-
-    getToken(){
-        
-        const scriptUrl = new URL(import.meta.url);
-        const params = new URLSearchParams(scriptUrl.search);
-
-        const paramsObject = Object.fromEntries(params.entries());
-        return paramsObject.token;
-    }
 }
 
 
 document.addEventListener('DOMContentLoaded', function () {
-    new Cliente().init();
-}); 
+    
+    const locale = document.querySelector('meta[name="locale"]').getAttribute('content');
+
+    
+    
+    new Ajax('/translate/getTranslation', { locale: locale, translationFile: ['ClienteContactos', 'ClientePrecios'] }, {},
+        function(translations) {
+            window.language = JSON.parse(translations);
+            new Cliente().init();
+        },
+        function (error) {
+            console.log("Error getting translations:", error);
+        }
+    ).post();   
+}); 
+

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

@@ -0,0 +1,376 @@
+import Table from '../../components/table.js';
+import TableEditor from '../../components/tableEditor.js';
+import ConfirmDeleteModal from '../../components/ConfirmDeleteModal.js';
+import { getToken } from '../../common/common.js';
+
+
+class tarifasClienteView {
+
+    constructor(domItem) {
+
+        this.domItem = domItem;
+
+        this.csrf_token = getToken();
+        this.csrf_hash = $('#mainContainer').find('input[name="' + this.csrf_token + '"]').val();
+
+        this.clienteId = window.location.href.split("/").pop();
+        this.actions = ['edit', 'delete', 'cancel'];
+
+        this.headerSearcher();
+
+        this.tableTarifas = null;
+        this.editorTarifas = null;
+        this.confirmDeleteModal = null;
+        this.deleteModal = null;
+    }
+
+    init() {
+
+        const self = this;
+
+        this.deleteModal = new ConfirmDeleteModal('tarifascliente');
+        this.deleteModal.init();
+
+        this.#initEditor();
+
+        this.#initTable();
+
+
+        // Editar en linea la fila
+        this.tableTarifas.table.on('click', 'tbody span.edit', function (e) {
+
+            const row = $(this).closest('tr');
+    
+            // Iniciar la edición en línea para todas las celdas de la fila
+            self.editorTarifas.editor.inline(
+                self.tableTarifas.table.cells(row, '*').nodes(),
+                {
+                    cancelHtml: '<a href="javascript:void(0);"><i class="ti ti-x"></i></a>',
+                    submitHtml: '<a href="javascript:void(0);"><i class="ti ti-device-floppy"></i></a>',
+                    cancelTrigger:  row.find('span.cancel')[0], 
+                    submitTrigger:  row.find('span.edit')[0], 
+                    submit: 'allIfChanged'
+                }
+            );
+        });
+
+
+        this.tableTarifas.table.on('click', '.btn-delete-' + this.tableTarifas.getAlias(), function (e) {
+            const row = $(this).closest('tr')[0]._DT_RowIndex;
+            self.deleteModal.setData($(this).attr('data-id'));
+            self.deleteModal.show(() =>{
+                if ($.isNumeric(self.deleteModal.getData())) {
+                    self.editorTarifas.editor
+                        .create( false )
+                        .edit( self.tableTarifas.table.rows(row), false)
+                        .set( 'deleted_at', new Date().toISOString().slice(0, 19).replace('T', ' ') )
+                        .set( 'is_deleted', 1 )
+                        .submit();
+                    self.deleteModal.hide();
+                }
+            });
+        });
+    
+    }
+
+
+    #initEditor() {
+
+        const self = this;
+
+        const tipo_linea = [
+            { label: window.language.ClientePrecios.interior, value: 'interior' },
+            { label: window.language.ClientePrecios.cubierta, value: 'cubierta' },
+            { label: window.language.ClientePrecios.sobrecubierta, value: 'sobrecubierta' }
+        ];
+
+        const tipo_maquina = [
+            { label: window.language.ClientePrecios.toner, value: 'toner' },
+            { label: window.language.ClientePrecios.inkjet, value: 'inkjet' },
+        ];
+
+        const tipo_impresion = [
+            { label: window.language.ClientePrecios.negro, value: 'negro' },
+            { label: window.language.ClientePrecios.negrohq, value: 'negrohq' },
+            { label: window.language.ClientePrecios.color, value: 'color' },
+            { label: window.language.ClientePrecios.colorhq, value: 'colorhq' },
+        ];
+
+        const editorFields = [
+            {
+                name: "id",
+                type: "readonly"
+            }, {
+                name: "tipo",
+                type: "select",
+                options: tipo_linea
+            }, {
+                name: "tipo_maquina",
+                type: "select",
+                options: tipo_maquina
+            }, {
+                name: "tipo_impresion",
+                type: "select",
+                options: tipo_impresion
+            }, {
+                name: "tiempo_min"
+            }, {
+                name: "tiempo_max"
+            }, {
+                name: "precio_hora"
+            }, {
+                name: "margen"
+            }, {
+                name: "user_updated_id",
+                type: 'hidden',
+
+            }, {
+                name: "updated_at",
+                type: 'hidden',
+
+            }, {
+                name: "plantilla_id",
+                type: "hidden"
+            }, {
+                name: "cliente_id",
+                type: "hidden"
+            }, {
+                name: "deleted_at",
+                type: "hidden"
+            }, {
+                name: "is_deleted",
+                type: "hidden"
+            },
+        ];
+        this.editorTarifas = new TableEditor(
+            $('#tableOfPrecios'),
+            '/clienteprecios/datatable_editor',
+            { [this.csrf_token]: this.csrf_hash },
+            'id',
+            editorFields);
+
+        this.editorTarifas.init();
+
+        this.editorTarifas.editor.on('preSubmit', function (e, d, type) {
+            if (type === 'create') {
+                d.data[0]['cliente_id'] = self.clienteId;
+            }
+        });
+
+        this.editorTarifas.editor.on('submitSuccess', function (e, json, data, action) {
+
+            self.tableTarifas.table.clearPipeline();
+            self.tableTarifas.table.draw();
+        });
+
+
+        this.editorTarifas.editor.on('postEdit', function (e, json, data, action) {
+            self.#borrarPlantillaTarifa(self.clienteId);
+        })
+
+        this.editorTarifas.editor.on('postCreate', function (e, json, data, action) {
+            self.#borrarPlantillaTarifa(self.clienteId);
+        })
+
+        this.editorTarifas.editor.on('postCancel', function (e, json, data) {
+            // Restaurar botones de acción por fila
+            self.tableTarifas.table.rows().nodes().each(function (node) {
+                $(node).find('span.edit').removeClass('d-none');
+                $(node).find('span.cancel, span.submit').addClass('d-none');
+            });
+        });
+    }
+
+    #borrarPlantillaTarifa(id) {
+
+        const domain = window.location.origin
+        fetch(domain + "/clientes/clienteprecios/update/" + id, {
+            method: "POST",
+            body: JSON.stringify({
+                [self.csrf_token]: self.csrf_hash
+            }),
+            headers: {
+                "Content-type": "application/json; charset=UTF-8"
+            }
+        })
+    }
+
+    #initTable() {
+
+        const self = this;
+
+        const columns = [
+            { 'data': 'id' },
+            {
+                'data': 'tipo',
+                'render': function (data, type, row, meta) {
+                    if (data == 'interior')
+                        return window.language.ClientePrecios.interior;
+                    else if (data == 'cubierta')
+                        return window.language.ClientePrecios.cubierta;
+                    else if (data == 'sobrecubierta')
+                        return window.language.ClientePrecios.sobrecubierta;
+                }
+            },
+            {
+                'data': 'tipo_maquina',
+                'render': function (data, type, row, meta) {
+                    if (data == 'toner')
+                        return window.language.ClientePrecios.toner;
+                    else if (data == 'inkjet')
+                        return window.language.ClientePrecios.inkjet;
+                }
+            },
+            {
+                'data': 'tipo_impresion',
+                'render': function (data, type, row, meta) {
+                    if (data == 'negro')
+                        return window.language.ClientePrecios.negro;
+                    else if (data == 'negrohq')
+                        return window.language.ClientePrecios.negrohq;
+                    else if (data == 'color')
+                        return window.language.ClientePrecios.color;
+                    else if (data == 'colorhq')
+                        return window.language.ClientePrecios.colorhq;
+                }
+            },
+            { 'data': 'tiempo_min' },
+            { 'data': 'tiempo_max' },
+            { 'data': 'precio_hora' },
+            { 'data': 'margen' },
+            { 'data': 'user_updated' },
+            { 'data': 'updated_at' },
+            {
+                'data': 'plantilla_id',
+                'searchable': false,
+                'visible': false,
+            },
+
+        ];
+
+        this.tableTarifas = new Table(
+            $('#tableOfPrecios'),
+            'tarifasCliente',
+            '/clienteprecios/datatable',
+            columns,
+            [
+                { name: 'cliente_id', value: window.location.href.split("/").pop() },
+                { name: this.csrf_token, value: this.csrf_hash },
+            ]
+        );
+
+
+        this.tableTarifas.init({
+            actions: self.actions,
+            buttonNewWithEditor: true,
+            buttonsExport: true,
+            editor: this.editorTarifas.editor,
+        });
+
+
+        this.tableTarifas.table.on('init.dt', function () {
+            self.tableTarifas.table.page.len(50).draw();
+        });
+
+        $('button[data-bs-target="#tarifascliente"]').on('shown.bs.tab', function (event) {
+            setTimeout(() => {
+                self.tableTarifas.table.columns.adjust().draw();
+            }, 1000); // Usamos setTimeout para asegurar que se dibuje después del renderizado
+        });
+
+    }
+
+    
+
+    headerSearcher() {
+
+        const self = this;
+
+        $('#tableOfPrecios thead tr').clone(false).appendTo('#tableOfPrecios thead');
+        $('#tableOfPrecios thead tr:eq(1) th').each(function (i) {
+
+            if (!$(this).hasClass("noFilter")) {
+
+                if (i == 1) {
+
+                    // Agregar un selector en la segunda columna
+                    $(this).html('<select class="form-control" style="min-width:100px;max-width:120px;font-size:0.8rem !important;"></select>');
+
+                    // Agregar opciones al selector
+                    var selector = $('select', this);
+                    selector.append('<option value="">Todos</option>'); // Opción vacía
+                    selector.append('<option value="interior">Interior</option>');
+                    selector.append('<option value="cubierta">Cubierta</option>');
+                    selector.append('<option value="sobrecubierta">Sobrecubierta</option>');
+
+                    selector.on('change', function () {
+                        var val = $.fn.dataTable.util.escapeRegex(
+                            $(this).val()
+                        );
+                        self.tableTarifas.table.column(i).search(val).draw();
+                    });
+
+                }
+
+                else if (i == 2) {
+                    // Agregar un selector en la tercera columna
+                    $(this).html('<select class="form-control" style="min-width:100px;max-width:120px;font-size:0.8rem !important;"></select>');
+
+                    // Agregar opciones al selector
+                    var selector = $('select', this);
+                    selector.append('<option value="">Todos</option>'); // Opción vacía
+                    selector.append('<option value="toner">Toner</option>');
+                    selector.append('<option value="inkjet">Inkjet</option>');
+
+                    selector.on('change', function () {
+                        var val = $.fn.dataTable.util.escapeRegex(
+                            $(this).val()
+                        );
+                        self.tableTarifas.table.column(i).search(val).draw();
+                    });
+                }
+
+                else if (i == 3) {
+                    // Agregar un selector en la cuarta columna
+                    $(this).html('<select class="form-control" style="min-width:100px;max-width:120px;font-size:0.8rem !important;"></select>');
+
+                    // Agregar opciones al selector
+                    var selector = $('select', this);
+                    selector.append('<option value="">Todos</option>'); // Opción vacía
+                    selector.append('<option value="negro">' + window.language.ClientePrecios.negro + '</option>');
+                    selector.append('<option value="color">' + window.language.ClientePrecios.color + '</option>');
+                    selector.append('<option value="negrohq">' + window.language.ClientePrecios.negrohq + '</option>');
+                    selector.append('<option value="colorhq">' + window.language.ClientePrecios.colorhq + '</option>');
+
+                    selector.on('change', function () {
+                        var val = $.fn.dataTable.util.escapeRegex(
+                            $(this).val()
+                        );
+                        self.tableTarifas.table.column(i).search(val).draw();
+                    });
+                }
+                else {
+                    $(this).html('<input type="text" class="form-control " style="min-width:100px;max-width:120px;font-size:0.8rem !important;"  />');
+
+                    $('input', this).on('change clear', function () {
+                        if (self.tableTarifas.table.column(i).search() !== this.value) {
+                            self.tableTarifas.table
+                                .column(i)
+                                .search(this.value)
+                                .draw();
+                        }
+                    });
+                }
+            }
+            else {
+                $(this).html('<span></span>');
+            }
+        });
+
+
+    }
+}
+
+
+
+export default tarifasClienteView;