add datatable ot filters

ci4/app/Views/themes/vuexy/components/tables/ot_table.php

@@ -4,7 +4,7 @@
         <thead>
             <tr>
                 <th></th>
-                <th><?= lang('Produccion.datatable.ot_id') ?></th>
+                <th class="w-10"><?= lang('Produccion.datatable.ot_id') ?></th>
                 <th><?= lang('Produccion.datatable.pedido_id') ?></th>
                 <th><?= lang('Produccion.datatable.fecha_encuadernacion') ?></th>
                 <th><?= lang('Produccion.datatable.cliente') ?></th>
@@ -16,6 +16,20 @@
                 <th><?= lang('Produccion.datatable.progreso') ?></th>
                 <th class="text-nowrap"><?= lang('Basic.global.Action') ?></th>
             </tr>
+            <tr>
+                <th></th>
+                <th><input type="text" class="form-control ot-filter" name="id"></th>
+                <th><input type="text" class="form-control ot-filter" name="pedido_id"></th>
+                <th><input type="text" class="form-control ot-filter" name="fecha_encuadernado_at"></th>
+                <th><input type="text" class="form-control ot-filter" name="cliente_nombre"></th>
+                <th><input type="text" class="form-control ot-filter" name="presupuesto_titulo"></th>
+                <th><input type="text" class="form-control ot-filter" name="ubicacion_nombre"></th>
+                <th><input type="text" class="form-control ot-filter" name="total_tirada"></th>
+                <th><input type="text" class="form-control ot-filter" name="tipo_presupuesto_impresion"></th>
+                <th></th>
+                <th></th>
+                <th></th>
+            </tr>
         </thead>
         <tbody>
 

httpdocs/assets/js/safekat/components/datatables/otDatatable.js

@@ -11,9 +11,8 @@ class OrdenTrabajoDatatable {
         this.datatableWaiting = this.item.find("#ot-datatable-waiting")
         this.datatableRevisionComerical = this.item.find("#ot-datatable-revision-com")
 
-
         this.columnIdIndex = 1;
-
+        this.tableLayout = "lrtip"
         this.datatableColumns = [
             { data: 'pdf_check', searchable: false, sortable: false, render: d => `<input class="form-check-input  pdf-check" data-id="${d}" type="checkbox">` },
             { data: 'id', searchable: true, sortable: true},
@@ -74,12 +73,8 @@ class OrdenTrabajoDatatable {
     init() {
         this.datatable = this.datatableItem.DataTable({
             processing: true,
-            layout: {
+            dom: this.tableLayout,
-                topStart: 'pageLength',
+            orderCellsTop: true,
-                topEnd: 'search',
-                bottomStart: 'info',
-                bottomEnd: 'paging'
-            },
             order: [[this.columnIdIndex, 'desc']],
             columnDefs: [
                 { className: 'dt-center', targets: '_all' },
@@ -97,16 +92,17 @@ class OrdenTrabajoDatatable {
                 $(row).css("border-right", `10px solid ${data.logo.color}`)
             }
         });
+        this.datatableItem.on("change", ".ot-filter", (event) => {
+            console.log(this.datatable.column($(event.currentTarget).attr("name")))
+            let columnIndex = this.datatableColumns.findIndex((element) => element.data == $(event.currentTarget).attr("name"))
+            this.datatable.column(columnIndex).search($(event.currentTarget).val()).draw()
+        })
     }
     initPendientes() {
         this.datatableP = this.datatablePendientesItem.DataTable({
             processing: true,
-            layout: {
+            dom: this.tableLayout,
-                topStart: 'pageLength',
+            orderCellsTop: true,
-                topEnd: 'search',
-                bottomStart: 'info',
-                bottomEnd: 'paging'
-            },
             order: [[this.columnIdIndex, 'desc']],
             columnDefs: [
                 { className: 'dt-center', targets: '_all' },
@@ -125,16 +121,17 @@ class OrdenTrabajoDatatable {
 
             }
         });
+        this.datatablePendientesItem.on("change", ".ot-filter", (event) => {
+            console.log(this.datatableP.column($(event.currentTarget).attr("name")))
+            let columnIndex = this.datatableColumns.findIndex((element) => element.data == $(event.currentTarget).attr("name"))
+            this.datatableP.column(columnIndex).search($(event.currentTarget).val()).draw()
+        })
     }
     initFerroPendiente() {
         this.datatableFP = this.datatableFerroPendienteItem.DataTable({
             processing: true,
-            layout: {
+            dom: this.tableLayout,
-                topStart: 'pageLength',
+            orderCellsTop: true,
-                topEnd: 'search',
-                bottomStart: 'info',
-                bottomEnd: 'paging'
-            },
             serverSide: true,
             pageLength: 25,
             order: [[this.columnIdIndex, 'desc']],
@@ -152,16 +149,17 @@ class OrdenTrabajoDatatable {
                 $(row).css("border-right", `20px solid ${data.logo.color}`)
             }
         });
+        this.datatableFerroPendienteItem.on("change", ".ot-filter", (event) => {
+            console.log(this.datatableFP.column($(event.currentTarget).attr("name")))
+            let columnIndex = this.datatableColumns.findIndex((element) => element.data == $(event.currentTarget).attr("name"))
+            this.datatableFP.column(columnIndex).search($(event.currentTarget).val()).draw()
+        })
     }
     initFerroOk() {
         this.datatableFO = this.datatableFerroOkItem.DataTable({
             processing: true,
-            layout: {
+            dom: this.tableLayout,
-                topStart: 'pageLength',
+            orderCellsTop: true,
-                topEnd: 'search',
-                bottomStart: 'info',
-                bottomEnd: 'paging'
-            },
             serverSide: true,
             order: [[this.columnIdIndex, 'desc']],
             columnDefs: [
@@ -179,16 +177,17 @@ class OrdenTrabajoDatatable {
                 $(row).css("border-right", `20px solid ${data.logo.color}`)
             }
         });
+        this.datatableFerroOkItem.on("change", ".ot-filter", (event) => {
+            console.log(this.datatableFO.column($(event.currentTarget).attr("name")))
+            let columnIndex = this.datatableColumns.findIndex((element) => element.data == $(event.currentTarget).attr("name"))
+            this.datatableFO.column(columnIndex).search($(event.currentTarget).val()).draw()
+        })
     }
     initNews() {
         this.datatableN = this.datatableNews.DataTable({
             processing: true,
-            layout: {
+            dom: this.tableLayout,
-                topStart: 'pageLength',
+            orderCellsTop: true,
-                topEnd: 'search',
-                bottomStart: 'info',
-                bottomEnd: 'paging'
-            },
             serverSide: true,
             order: [[this.columnIdIndex, 'desc']],
             columnDefs: [
@@ -207,17 +206,17 @@ class OrdenTrabajoDatatable {
             }
         });
         this.focusDatatable = this.datatableN
-
+        this.datatableNews.on("change", ".ot-filter", (event) => {
+            console.log(this.datatableN.column($(event.currentTarget).attr("name")))
+            let columnIndex = this.datatableColumns.findIndex((element) => element.data == $(event.currentTarget).attr("name"))
+            this.datatableN.column(columnIndex).search($(event.currentTarget).val()).draw()
+        })
     }
     initWaiting() {
         this.datatableW = this.datatableWaiting.DataTable({
             processing: true,
-            layout: {
+            dom: this.tableLayout,
-                topStart: 'pageLength',
+            orderCellsTop: true,
-                topEnd: 'search',
-                bottomStart: 'info',
-                bottomEnd: 'paging'
-            },
             serverSide: true,
             order: [[this.columnIdIndex, 'desc']],
             columnDefs: [
@@ -235,16 +234,17 @@ class OrdenTrabajoDatatable {
                 $(row).css("border-right", `20px solid ${data.logo.color}`)
             }
         });
+        this.datatableWaiting.on("change", ".ot-filter", (event) => {
+            console.log(this.datatableW.column($(event.currentTarget).attr("name")))
+            let columnIndex = this.datatableColumns.findIndex((element) => element.data == $(event.currentTarget).attr("name"))
+            this.datatableW.column(columnIndex).search($(event.currentTarget).val()).draw()
+        })
     }
     initProd() {
         this.datatableProduccion = this.datatableProd.DataTable({
             processing: true,
-            layout: {
+            dom: this.tableLayout,
-                topStart: 'pageLength',
+            orderCellsTop: true,
-                topEnd: 'search',
-                bottomStart: 'info',
-                bottomEnd: 'paging'
-            },
             serverSide: true,
             order: [[this.columnIdIndex, 'desc']],
             columnDefs: [
@@ -262,16 +262,17 @@ class OrdenTrabajoDatatable {
                 $(row).css("border-right", `20px solid ${data.logo.color}`)
             }
         });
+        this.datatableProd.on("change", ".ot-filter", (event) => {
+            console.log(this.datatableProduccion.column($(event.currentTarget).attr("name")))
+            let columnIndex = this.datatableColumns.findIndex((element) => element.data == $(event.currentTarget).attr("name"))
+            this.datatableProduccion.column(columnIndex).search($(event.currentTarget).val()).draw()
+        })
     }
     initRevisionComercial() {
         this.datatableRC = this.datatableRevisionComerical.DataTable({
             processing: true,
-            layout: {
+            dom: this.tableLayout,
-                topStart: 'pageLength',
+            orderCellsTop: true,
-                topEnd: 'search',
-                bottomStart: 'info',
-                bottomEnd: 'paging'
-            },
             serverSide: true,
             order: [[this.columnIdIndex, 'desc']],
             columnDefs: [
@@ -289,6 +290,11 @@ class OrdenTrabajoDatatable {
                 $(row).css("border-right", `20px solid ${data.logo.color}`)
             }
         });
+        this.datatableRevisionComerical.on("change", ".ot-filter", (event) => {
+            console.log(this.datatableRC.column($(event.currentTarget).attr("name")))
+            let columnIndex = this.datatableColumns.findIndex((element) => element.data == $(event.currentTarget).attr("name"))
+            this.datatableRC.column(columnIndex).search($(event.currentTarget).val()).draw()
+        })
     }
     getSelectIDs() {
         return this.focusDatatable.rows((idx, data, node) => {