jjimenez/safekat
1
0
Fork 0
mirror of https://git.imnavajas.es/jjimenez/safekat.git synced 2025-07-25 22:52:08 +00:00
Code Issues Packages Projects Releases Wiki Activity

add datatable ot filters

Browse Source
This commit is contained in:
amazuecos
2025-05-10 09:23:59 +02:00
parent 43ae427137
commit 90a47aa6bb
2 changed files with 81 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
ci4/app/Views/themes/vuexy/components/tables/ot_table.php
View File

@ -4,7 +4,7 @@
<thead> <thead>
<tr> <tr>
<th></th> <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.pedido_id') ?></th>
<th><?= lang('Produccion.datatable.fecha_encuadernacion') ?></th> <th><?= lang('Produccion.datatable.fecha_encuadernacion') ?></th>
<th><?= lang('Produccion.datatable.cliente') ?></th> <th><?= lang('Produccion.datatable.cliente') ?></th>
@ -16,6 +16,20 @@
<th><?= lang('Produccion.datatable.progreso') ?></th> <th><?= lang('Produccion.datatable.progreso') ?></th>
<th class="text-nowrap"><?= lang('Basic.global.Action') ?></th> <th class="text-nowrap"><?= lang('Basic.global.Action') ?></th>
</tr> </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> </thead>
<tbody> <tbody>

126
httpdocs/assets/js/safekat/components/datatables/otDatatable.js
View File

@ -11,19 +11,18 @@ class OrdenTrabajoDatatable {
this.datatableWaiting = this.item.find("#ot-datatable-waiting") this.datatableWaiting = this.item.find("#ot-datatable-waiting")
this.datatableRevisionComerical = this.item.find("#ot-datatable-revision-com") this.datatableRevisionComerical = this.item.find("#ot-datatable-revision-com")
this.columnIdIndex = 1; this.columnIdIndex = 1;
this.tableLayout = "lrtip"
this.datatableColumns = [ this.datatableColumns = [
{ data: 'pdf_check', searchable: false, sortable: false, render: d => `<input class="form-check-input pdf-check" data-id="${d}" type="checkbox">` }, { 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 }, { data: 'id', searchable: true, sortable: true},
{ data: 'pedido_id', searchable: true, sortable: true }, { data: 'pedido_id', searchable: true, sortable: true },
{ data: 'fecha_encuadernado_at',name:"pedidos.fecha_encuadernado", searchable: true, sortable: true }, { data: 'fecha_encuadernado_at', name: "pedidos.fecha_encuadernado", searchable: true, sortable: true },
{ data: 'cliente_nombre', name:"clientes.nombre", searchable: true, sortable: false }, { data: 'cliente_nombre', name: "clientes.nombre", searchable: true, sortable: false },
{ data: 'presupuesto_titulo', name:"presupuestos.titulo", searchable: true, sortable: true }, { data: 'presupuesto_titulo', name: "presupuestos.titulo", searchable: true, sortable: true },
{ data: 'ubicacion_nombre', name:"ubicaciones.nombre", searchable: true, sortable: true }, { data: 'ubicacion_nombre', name: "ubicaciones.nombre", searchable: true, sortable: true },
{ data: 'total_tirada', name:"pedidos.total_tirada",searchable: true, sortable: true, render: (d) => `<span class="autonumeric">${d}</span>` }, { data: 'total_tirada', name: "pedidos.total_tirada", searchable: true, sortable: true, render: (d) => `<span class="autonumeric">${d}</span>` },
{ data: 'tipo_presupuesto_impresion', name:"tipos_presupuestos.codigo", searchable: true, sortable: true }, { data: 'tipo_presupuesto_impresion', name: "tipos_presupuestos.codigo", searchable: true, sortable: true },
{ {
data: 'logo', searchable: false, sortable: false, render: (d, t) => { data: 'logo', searchable: false, sortable: false, render: (d, t) => {
return `<div class="logo-container"> return `<div class="logo-container">
@ -33,7 +32,7 @@ class OrdenTrabajoDatatable {
} }
}, },
{ {
data: 'progreso',name:"ordenes_trabajo.progreso", searchable: false, sortable: true, render: (d, t) => { data: 'progreso', name: "ordenes_trabajo.progreso", searchable: false, sortable: true, render: (d, t) => {
return `<div class="progress border rounded-2" style="height: 1rem;"> return `<div class="progress border rounded-2" style="height: 1rem;">
<div id="ot-progress-bar" class="progress-bar" role="progressbar" style="width: ${parseInt(d)}%;" aria-valuenow="${d}" aria-valuemin="0" aria-valuemax="100">${d}%</div> <div id="ot-progress-bar" class="progress-bar" role="progressbar" style="width: ${parseInt(d)}%;" aria-valuenow="${d}" aria-valuemin="0" aria-valuemax="100">${d}%</div>
</div> </div>
@ -57,7 +56,7 @@ class OrdenTrabajoDatatable {
console.log(order) console.log(order)
this.focusDatatable = this.datatableOrder[order] this.focusDatatable = this.datatableOrder[order]
} }
events(){ events() {
this.datatableOrder = [ this.datatableOrder = [
this.datatableN, this.datatableN,
this.datatableP, this.datatableP,
@ -74,12 +73,8 @@ class OrdenTrabajoDatatable {
init() { init() {
this.datatable = this.datatableItem.DataTable({ this.datatable = this.datatableItem.DataTable({
processing: true, processing: true,
layout: { dom: this.tableLayout,
topStart: 'pageLength', orderCellsTop: true,
topEnd: 'search',
bottomStart: 'info',
bottomEnd: 'paging'
},
order: [[this.columnIdIndex, 'desc']], order: [[this.columnIdIndex, 'desc']],
columnDefs: [ columnDefs: [
{ className: 'dt-center', targets: '_all' }, { className: 'dt-center', targets: '_all' },
@ -97,16 +92,17 @@ class OrdenTrabajoDatatable {
$(row).css("border-right", `10px solid ${data.logo.color}`) $(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() { initPendientes() {
this.datatableP = this.datatablePendientesItem.DataTable({ this.datatableP = this.datatablePendientesItem.DataTable({
processing: true, processing: true,
layout: { dom: this.tableLayout,
topStart: 'pageLength', orderCellsTop: true,
topEnd: 'search',
bottomStart: 'info',
bottomEnd: 'paging'
},
order: [[this.columnIdIndex, 'desc']], order: [[this.columnIdIndex, 'desc']],
columnDefs: [ columnDefs: [
{ className: 'dt-center', targets: '_all' }, { 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() { initFerroPendiente() {
this.datatableFP = this.datatableFerroPendienteItem.DataTable({ this.datatableFP = this.datatableFerroPendienteItem.DataTable({
processing: true, processing: true,
layout: { dom: this.tableLayout,
topStart: 'pageLength', orderCellsTop: true,
topEnd: 'search',
bottomStart: 'info',
bottomEnd: 'paging'
},
serverSide: true, serverSide: true,
pageLength: 25, pageLength: 25,
order: [[this.columnIdIndex, 'desc']], order: [[this.columnIdIndex, 'desc']],
@ -152,16 +149,17 @@ class OrdenTrabajoDatatable {
$(row).css("border-right", `20px solid ${data.logo.color}`) $(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() { initFerroOk() {
this.datatableFO = this.datatableFerroOkItem.DataTable({ this.datatableFO = this.datatableFerroOkItem.DataTable({
processing: true, processing: true,
layout: { dom: this.tableLayout,
topStart: 'pageLength', orderCellsTop: true,
topEnd: 'search',
bottomStart: 'info',
bottomEnd: 'paging'
},
serverSide: true, serverSide: true,
order: [[this.columnIdIndex, 'desc']], order: [[this.columnIdIndex, 'desc']],
columnDefs: [ columnDefs: [
@ -179,16 +177,17 @@ class OrdenTrabajoDatatable {
$(row).css("border-right", `20px solid ${data.logo.color}`) $(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() { initNews() {
this.datatableN = this.datatableNews.DataTable({ this.datatableN = this.datatableNews.DataTable({
processing: true, processing: true,
layout: { dom: this.tableLayout,
topStart: 'pageLength', orderCellsTop: true,
topEnd: 'search',
bottomStart: 'info',
bottomEnd: 'paging'
},
serverSide: true, serverSide: true,
order: [[this.columnIdIndex, 'desc']], order: [[this.columnIdIndex, 'desc']],
columnDefs: [ columnDefs: [
@ -207,17 +206,17 @@ class OrdenTrabajoDatatable {
} }
}); });
this.focusDatatable = this.datatableN 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() { initWaiting() {
this.datatableW = this.datatableWaiting.DataTable({ this.datatableW = this.datatableWaiting.DataTable({
processing: true, processing: true,
layout: { dom: this.tableLayout,
topStart: 'pageLength', orderCellsTop: true,
topEnd: 'search',
bottomStart: 'info',
bottomEnd: 'paging'
},
serverSide: true, serverSide: true,
order: [[this.columnIdIndex, 'desc']], order: [[this.columnIdIndex, 'desc']],
columnDefs: [ columnDefs: [
@ -235,16 +234,17 @@ class OrdenTrabajoDatatable {
$(row).css("border-right", `20px solid ${data.logo.color}`) $(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() { initProd() {
this.datatableProduccion = this.datatableProd.DataTable({ this.datatableProduccion = this.datatableProd.DataTable({
processing: true, processing: true,
layout: { dom: this.tableLayout,
topStart: 'pageLength', orderCellsTop: true,
topEnd: 'search',
bottomStart: 'info',
bottomEnd: 'paging'
},
serverSide: true, serverSide: true,
order: [[this.columnIdIndex, 'desc']], order: [[this.columnIdIndex, 'desc']],
columnDefs: [ columnDefs: [
@ -262,16 +262,17 @@ class OrdenTrabajoDatatable {
$(row).css("border-right", `20px solid ${data.logo.color}`) $(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() { initRevisionComercial() {
this.datatableRC = this.datatableRevisionComerical.DataTable({ this.datatableRC = this.datatableRevisionComerical.DataTable({
processing: true, processing: true,
layout: { dom: this.tableLayout,
topStart: 'pageLength', orderCellsTop: true,
topEnd: 'search',
bottomStart: 'info',
bottomEnd: 'paging'
},
serverSide: true, serverSide: true,
order: [[this.columnIdIndex, 'desc']], order: [[this.columnIdIndex, 'desc']],
columnDefs: [ columnDefs: [
@ -289,6 +290,11 @@ class OrdenTrabajoDatatable {
$(row).css("border-right", `20px solid ${data.logo.color}`) $(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() { getSelectIDs() {
return this.focusDatatable.rows((idx, data, node) => { return this.focusDatatable.rows((idx, data, node) => {