trabajando en editar plantillas

This commit is contained in:
2024-12-04 12:34:10 +01:00
parent 3fb37af0f8
commit a7cda851f0
15 changed files with 1024 additions and 520 deletions

View File

@ -4,6 +4,8 @@ let Table = function (
url,
columns,
data,
row_id = "DT_RowId",
language = "es-ES") {
this.domItem = domItem;
@ -11,6 +13,7 @@ let Table = function (
this.url = url;
this.columns = columns;
this.data = data;
this.row_id = row_id;
this.language = language;
this.table = null;
@ -24,6 +27,7 @@ let Table = function (
actions = ['view', 'edit', 'delete', 'cancel'],
order = [[0, 'asc']],
buttonsExport = true,
colVisibility = true,
buttonNewWithEditor = false,
editor = null,
booleanColumns = [],
@ -53,11 +57,6 @@ let Table = function (
let buttons = [];
if (buttonsExport) {
buttons = [
{
extend: 'colvis',
columns: ':not(.noVis)',
},
'copy', 'csv', 'excel', 'print', {
extend: 'pdfHtml5',
orientation: 'landscape',
@ -65,6 +64,13 @@ let Table = function (
}
];
}
if(colVisibility){
buttons.unshift({
extend: 'colvis',
columns: ':not(.noVis)',
})
}
if (buttonNewWithEditor) {
buttons.push(
{
@ -91,6 +97,7 @@ let Table = function (
order: order,
orderCellsTop: true,
fixedHeader: true,
rowId: row_id,
dom: dom,
ajax: $.fn.dataTable.pipeline({
url: this.url,

View File

@ -1,6 +1,6 @@
let TableEditor = function (
table,
url,
url = "",
headers,
idSrc,
fields) {
@ -16,15 +16,26 @@ let TableEditor = function (
this.init = function () {
this.editor = new $.fn.dataTable.Editor( {
ajax: {
url: url,
headers: headers,
},
table : table,
idSrc: idSrc,
fields: fields,
});
if (url == "") {
this.editor = new $.fn.dataTable.Editor({
table: table,
idSrc: idSrc,
fields: fields,
});
}
else {
this.editor = new $.fn.dataTable.Editor({
ajax: {
url: url,
headers: headers,
},
table: table,
idSrc: idSrc,
fields: fields,
});
}
};
}

View File

@ -213,14 +213,14 @@ class tarifasClienteView {
popErrorAlert(window.language.ClientePrecios.errors.error_nombre_template, 'error-nombre')
}
else {
new Ajax('/clientes/clienteplantillaprecios/add',
new Ajax('/clientes/clienteplantillaprecios/add',
{
'from_client_data': 1,
'cliente_id': this.clienteId,
'nombre': this.convertToTemplate.getNombrePlantilla(),
[this.csrf_token]: this.csrf_hash
},
{},
},
{},
(response) => {
if (response.id) {
@ -228,7 +228,7 @@ class tarifasClienteView {
this.selectorPlantilla.setOption(response.id, this.convertToTemplate.getNombrePlantilla());
this.selectorPlantilla.onChange(this.#changePlantilla.bind(this));
}
},
},
(error) => {
console.log(error);
}
@ -267,6 +267,28 @@ class tarifasClienteView {
#changePlantilla() {
self = this;
const data = $('#plantillas').select2('data');
if (data.length > 0) {
const id = data[0].id;
new Ajax(
'/clienteprecios/changeplantilla',
{
'cliente_id': self.clienteId,
'plantilla_id': id,
[this.csrf_token]: this.csrf_hash
},
{},
() => {
self.tableTarifas.table.clearPipeline();
self.tableTarifas.table.draw();
},
(error) => {
console.log(error);
}
).post();
}
}

View File

@ -0,0 +1,433 @@
import Table from '../../components/table.js';
import TableEditor from '../../components/tableEditor.js';
import ConfirmDeleteModal from '../../components/ConfirmDeleteModal.js';
import Ajax from '../../components/ajax.js';
import { getToken } from '../../common/common.js';
class PlantillasTarifasClienteForm {
constructor() {
this.domItem = $('.card-body');
this.plantillaId = window.location.href.split("/").pop();
this.csrf_token = getToken();
this.csrf_hash = $('#mainContainer').find('input[name="' + this.csrf_token + '"]').val();
this.tablePlantilla = null;
this.deleteModal = null;
this.localEditor = null;
this.ajaxEditor = null;
this.changedRows = [];
}
init() {
const self = this;
this.headerSearcher();
this.deleteModal = new ConfirmDeleteModal('plantillasTarifasCliente');
this.deleteModal.init();
this.#initTable();
this.#initEditor();
// Editar en linea la fila
this.tablePlantilla.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.localEditor.editor.inline(
self.tablePlantilla.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'
}
);
});
}
#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"
},
];
this.localEditor = new TableEditor(
$('#tableOfPlantillasPreciosLineas'),
'',
{},
'id',
editorFields);
this.localEditor.init();
this.ajaxEditor = new TableEditor(
$('#tableOfPlantillasPreciosLineas'),
'/clienteplantillaprecioslineas/datatable_editor',
{ [this.csrf_token]: this.csrf_hash },
'id',
editorFields);
this.ajaxEditor.init();
this.localEditor.editor.on('postEdit', function (e, json, data) {
/*console.log(self.tablePlantilla.table.row(0).data());
self.tablePlantilla.table.rows().every( function ( rowIdx ) {
var rowData = this.data();
if(rowData.id == data.id){
self.tablePlantilla.table.row(rowIdx).data({
id: data.id,
tipo: 'interior', // 'interior', 'cubierta', etc.
tipo_maquina: 'toner', // 'toner', 'inkjet'
tipo_impresion: 'negro', // 'negro', 'color', etc.
tiempo_min: 0,
tiempo_max: 1,
precio_hora: 1,
margen: 100,
user_updated: 'yo',
updated_at: '200000'
}).draw(false);
}
})
//self.tablePlantilla.table.row(0).data(data2).draw(false);
/*self.tablePlantilla.table.row(0).data({
id: 1,
tipo: 'interior', // 'interior', 'cubierta', etc.
tipo_maquina: 'toner', // 'toner', 'inkjet'
tipo_impresion: 'negro', // 'negro', 'color', etc.
tiempo_min: 0,
tiempo_max: 1,
precio_hora: 1,
margen: 100,
user_updated: 'yo',
updated_at: '200000'
}).draw(false);*/
let row = self.tablePlantilla.table.row('#' + data.id);
if (row.length) {
console.log('Data:', data)
let rowData = row.data();
console.log('Datos de la fila:', rowData);
// Actualizar los datos de la fila
self.tablePlantilla.table.row('#' + data.id).data({
id: data.id,
tipo: data.tipo,
tipo_maquina: data.tipo_maquina,
tipo_impresion: data.tipo_impresion,
tiempo_min: data.tiempo_min,
tiempo_max: data.tiempo_max,
precio_hora: data.precio_hora,
margen: "150",
user_updated_id: data.user_updated_id,
user_updated: data.user_updated,
updated_at: data.updated_at
}).draw(true); // Usar invalidate() si es necesario
rowData = row.data();
console.log('Datos de la fila actualizados:', rowData);
} else {
console.warn('No se encontró la fila con ID row_' + data.id);
}
/*
if (row.length > 0) {
self.tablePlantilla.table.row(row[0]).data({
id: data.id,
tipo: data.tipo, // 'interior', 'cubierta', etc.
tipo_maquina: data.tipo_maquina, // 'toner', 'inkjet'
tipo_impresion: data.tipo_impresion, // 'negro', 'color', etc.
tiempo_min: data.tiempo_min,
tiempo_max: data.tiempo_max,
precio_hora: data.precio_hora,
margen: data.margen,
user_updated: data.user_updated,
updated_at: data.updated_at
}).invalidate().draw(false);
console.log('---');
console.log(self.tablePlantilla.table.row(row[0]).data())
}*/
// check if this id exists
if (!self.changedRows.includes(data.id))
self.changedRows.push(data.id);
});
/*
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.tablePlantilla.table.clearPipeline();
self.tablePlantilla.table.draw();
});
this.editorTarifas.editor.on('postEdit', function (e, json, data, action) {
self.#borrarPlantillaTarifa(self.clienteId);
self.selectorPlantilla.offChange();
self.selectorPlantilla.setOption(0, 'Personalizado');
self.selectorPlantilla.onChange(self.#changePlantilla.bind(this));
})
this.editorTarifas.editor.on('postCreate', function (e, json, data, action) {
self.#borrarPlantillaTarifa(self.clienteId);
self.selectorPlantilla.offChange();
self.selectorPlantilla.setOption(0, 'Personalizado');
self.selectorPlantilla.onChange(self.#changePlantilla.bind(this));
})
this.editorTarifas.editor.on('postCancel', function (e, json, data) {
// Restaurar botones de acción por fila
self.tablePlantilla.table.rows().nodes().each(function (node) {
$(node).find('span.edit').removeClass('d-none');
$(node).find('span.cancel, span.submit').addClass('d-none');
});
});*/
}
#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' },
];
const actions = ['edit', 'delete', 'cancel'];
this.tablePlantilla = new Table(
$('#tableOfPlantillasPreciosLineas'),
'plantillaTarifasCliente',
'/clienteplantillaprecioslineas/datatable',
columns,
[
{ name: 'plantilla_id', value: this.plantillaId }
],'id'
);
this.tablePlantilla.init({
actions: actions,
colVisibility: false,
buttonsExport: true,
});
this.tablePlantilla.table.on('init.dt', function () {
self.tablePlantilla.table.page.len(50).draw();
});
}
headerSearcher() {
const self = this;
$('#tableOfPlantillasPreciosLineas thead tr').clone(false).appendTo('#tableOfPlantillasPreciosLineas thead');
$('#tableOfPlantillasPreciosLineas 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.tablePlantilla.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.tablePlantilla.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.tablePlantilla.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.tablePlantilla.table.column(i).search() !== this.value) {
self.tablePlantilla.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: ['ClientePrecios'] }, {},
function (translations) {
window.language = JSON.parse(translations);
new PlantillasTarifasClienteForm().init();
},
function (error) {
console.log("Error getting translations:", error);
}
).post();
});

View File

@ -0,0 +1,153 @@
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 PlantillasTarifasClienteList {
constructor() {
this.domItem = $('.card-body');
this.csrf_token = getToken();
this.csrf_hash = $('#mainContainer').find('input[name="' + this.csrf_token + '"]').val();
this.tablePlantillas = 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.tablePlantillas.table.on('click', '.btn-edit-' + this.tablePlantillas.getAlias(), function (e) {
const dataId = $(this).attr('data-id');
if (!Number.isNaN(Number(dataId))) {
window.location.href = '/clienteplantillaprecios/edit/' + dataId;
}
});
// Eliminar la fila
this.tablePlantillas.table.on('click', '.btn-delete-' + this.tablePlantillas.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(
'/clienteplantillaprecios/delete/' + dataId,
{
},
{},
(data, textStatus, jqXHR) => {
self.tablePlantillas.table.clearPipeline();
self.tablePlantillas.table.row($(row)).invalidate().draw();
// Se borran las lineas asociadas
new Ajax(
"/clientes/clienteplantillaprecios/update/" + dataId,
{
[this.csrf_token]: this.csrf_hash
},
{},
() => { },
(error) => {
console.log(error);
}).post();
popSuccessAlert(data.msg ?? jqXHR.statusText);
},
(error) => {
console.log(error);
}
).get();
self.deleteModal.hide();
}
});
});
}
#initTable() {
const self = this;
const columns = [
{ 'data': 'id' },
{ 'data': 'nombre' },
];
const actions = ['edit', 'delete'];
this.tablePlantillas = new Table(
$('#tableOfClienteplantillaprecios'),
'plantillasTarifasCliente',
'/clienteplantillaprecios/datatable',
columns,
[]
);
this.tablePlantillas.init({
actions: actions,
colVisibility: false,
buttonsExport: true,
});
this.tablePlantillas.table.on('init.dt', function () {
self.tablePlantillas.table.page.len(50).draw();
});
}
headerSearcher() {
const self = this;
$('#tableOfClienteplantillaprecios thead tr').clone(false).appendTo('#tableOfClienteplantillaprecios thead');
$('#tableOfClienteplantillaprecios thead tr:eq(1) th').each(function (i) {
if (!$(this).hasClass("noFilter")) {
$(this).html('<input type="text" class="form-control " style="min-width:100px;max-width:500px;font-size:0.8rem !important;" />');
$('input', this).on('change clear', function () {
if (self.tablePlantillas.table.column(i).search() !== this.value) {
self.tablePlantillas.table
.column(i)
.search(this.value)
.draw();
}
});
}
else {
$(this).html('<span></span>');
}
});
}
}
document.addEventListener('DOMContentLoaded', function () {
new PlantillasTarifasClienteList().init();
});