From 19220ab985c8fda0e4141615bec283b74ed1155f Mon Sep 17 00:00:00 2001 From: amazuecos Date: Thu, 23 Jan 2025 20:25:28 +0100 Subject: [PATCH 1/2] sk-20 : add form files to presupuesto admin --- ci4/app/Language/es/Presupuestos.php | 2 +- .../themes/vuexy/components/dropzone.php | 42 ++++++ .../admin/viewPresupuestoadminForm.php | 5 + .../components/forms/fileUploadDropzone.js | 142 ++++++++++++++++++ .../presupuestoAdmin/presupuestoAdminEdit.js | 10 ++ 5 files changed, 200 insertions(+), 1 deletion(-) create mode 100644 ci4/app/Views/themes/vuexy/components/dropzone.php create mode 100644 httpdocs/assets/js/safekat/components/forms/fileUploadDropzone.js diff --git a/ci4/app/Language/es/Presupuestos.php b/ci4/app/Language/es/Presupuestos.php index 2a55273b..2fcd8d66 100755 --- a/ci4/app/Language/es/Presupuestos.php +++ b/ci4/app/Language/es/Presupuestos.php @@ -330,7 +330,7 @@ return [ 'actualizacionSolapasCubierta' => 'El tamaño de las solapas de la cubierta se ha actualizado debido a que supera el máximo permitido (este valor depende del ancho del libro y del número de páginas).', 'actualizacionSolapasSobrecubierta' => 'El tamaño de las solapas de la sobrecubierta se ha actualizado debido a que supera el máximo permitido (este valor depende del ancho del libro y del número de páginas).', - + 'files' => 'Documentos', 'titulos' => [ 'libroFresadoTapaDura' => 'Rústica Fresado tapa dura', 'libroFresadoTapaBlanda' => 'Rústica Fresado tapa blanda', diff --git a/ci4/app/Views/themes/vuexy/components/dropzone.php b/ci4/app/Views/themes/vuexy/components/dropzone.php new file mode 100644 index 00000000..b6a4348e --- /dev/null +++ b/ci4/app/Views/themes/vuexy/components/dropzone.php @@ -0,0 +1,42 @@ +
+
+

+ +

+
+
+
+
+
+ Arrastre aquí los ficheros o haga click +
+
+ +
+
+
+
+ + +
+
+
+
+
+section('css') ?> + +endSection() ?> +section('additionalExternalJs') ?> + +endSection() ?> \ No newline at end of file diff --git a/ci4/app/Views/themes/vuexy/form/presupuestos/admin/viewPresupuestoadminForm.php b/ci4/app/Views/themes/vuexy/form/presupuestos/admin/viewPresupuestoadminForm.php index d974ceb6..83775def 100644 --- a/ci4/app/Views/themes/vuexy/form/presupuestos/admin/viewPresupuestoadminForm.php +++ b/ci4/app/Views/themes/vuexy/form/presupuestos/admin/viewPresupuestoadminForm.php @@ -41,8 +41,10 @@ $presupuestoId,"type" => "presupuesto"]) ?> + 'dropzone-presupuesto-admin-files','modelId' => $presupuestoId]) ?> + @@ -225,6 +227,8 @@ + + endSection() ?> section('additionalExternalJs') ?> @@ -234,6 +238,7 @@ + diff --git a/httpdocs/assets/js/safekat/components/forms/fileUploadDropzone.js b/httpdocs/assets/js/safekat/components/forms/fileUploadDropzone.js new file mode 100644 index 00000000..2099793a --- /dev/null +++ b/httpdocs/assets/js/safekat/components/forms/fileUploadDropzone.js @@ -0,0 +1,142 @@ + +import Ajax from '../ajax.js'; +import { alertSuccessMessage } from '../alerts/sweetAlert.js' + +const PREVIEW_TEMPLATE = ` +
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+`; +class FileUploadDropzone { + + + constructor({ domElement, nameId = "presupuesto_id", getUri = null, postUri = null }) { + Dropzone.autoDiscover = false; + this.domElement = domElement + this.jqElement = $(domElement) + this.modelId = this.jqElement.data('id') + this.btnSelectFiles = $(`#${domElement.replace('#', '')}_btnUploadFiles`) + this.btnSubmitFile = $(`#${domElement.replace('#', '')}_btnSubmitFiles`) + this.dataPost = {} + this.nameId = nameId; + this.getUri = getUri + this.postUri = postUri + this.dataPost[nameId] = this.modelId; + + } + init() { + this.btnSubmitFile.on('click', this._handleUploadFiles.bind(this)) + this.btnSelectFiles.on('click', () => { + this.jqElement.trigger('click') + }) + + this.dropzone = new Dropzone(this.domElement, { + url: this.postUri, + addRemoveLinks: true, + previewTemplate: PREVIEW_TEMPLATE, + paramName: "file", + uploadMultiple: true, + parallelUploads: 4, // Ajusta este número al máximo número de archivos que esperas subir a la vez + maxFiles: 5, // Ajusta este número al máximo número de archivos que esperas subir a la vez + autoProcessQueue: true, + dictRemoveFile: "Eliminar", + acceptedFiles: 'image/*, application/pdf', + maxFilesize: 5e+7, // Bytes + init: this._handleGetFiles.bind(this) + }); + } + + _getDropzoneFilesFormData() { + var files = this.dropzone.files; + + var formData = new FormData(); + var oldFiles = []; + var counter = 0; + for (var i = 0; i < files.length; i++) { + + if (files[i].upload) { + var file = files[i]; + formData.append('file[' + counter + ']', file); + counter += 1; + } + else { + oldFiles.push(files[i].name); + } + } + formData.append('oldFiles', JSON.stringify(oldFiles)); + + formData.append(this.nameId, this.modelId); + return formData; + } + _handleUploadFiles() { + let ajax = new Ajax(this.postUri, + this._getDropzoneFilesFormData(), + null, + this._handleUploadFilesSuccess.bind(this), + null) + ajax.ajaxForm("POST"); + + } + _handleUploadFilesSuccess(response) { + alertSuccessMessage(response?.message ?? "Archivos subidos correctamente"); + } + _handleUploadFilesError(errors) { } + + _handleGetFiles() { + + const ajax = new Ajax( + this.getUri, + this.dataPost, + null, + this._handelGetFilesSuccess.bind(this), + null, + + ) + ajax.post() + } + _handelGetFilesSuccess(response) { + const files = JSON.parse(response) + this.dropZoneUpdateFiles(files) + } + + dropZoneUpdateFiles(files) { + this.dropzone.on("addedfile", function (file) { + if (file.hash) { + var viewButton = Dropzone.createElement("Ver"); + file.previewElement.appendChild(viewButton); + // Listen to the view button click event + viewButton.addEventListener("click", function (e) { + window.open(window.location.protocol + "//" + window.location.host + "/sistema/intranet/presupuestos/" + file.hash, '_blank'); + }); + } + }); + files.forEach(file => { + this.dropZoneAddFile(file) + }); + + } + dropZoneAddFile(mockFile) { + this.dropzone.files.push(mockFile); // add to files array + this.dropzone.emit("addedfile", mockFile); + this.dropzone.emit("thumbnail", mockFile, window.location.host + "/sistema/intranet/presupuestos/" + mockFile.hash); + this.dropzone.emit("complete", mockFile); + this.dropzone.options.success.call(this.dropzone, mockFile); + + } + +} + +export default FileUploadDropzone; \ No newline at end of file diff --git a/httpdocs/assets/js/safekat/pages/presupuestoAdmin/presupuestoAdminEdit.js b/httpdocs/assets/js/safekat/pages/presupuestoAdmin/presupuestoAdminEdit.js index c2414539..e6844648 100644 --- a/httpdocs/assets/js/safekat/pages/presupuestoAdmin/presupuestoAdminEdit.js +++ b/httpdocs/assets/js/safekat/pages/presupuestoAdmin/presupuestoAdminEdit.js @@ -10,6 +10,7 @@ import Servicios from './sections/servicios.js'; import Envios from './sections/envios.js'; import TiradasAlernativas from './sections/tiradasAlternativas.js'; import Resumen from './sections/resumen.js'; +import FileUploadDropzone from '../../components/forms/fileUploadDropzone.js'; class PresupuestoAdminEdit { @@ -50,6 +51,13 @@ class PresupuestoAdminEdit { this.guardar = $('#saveForm'); this.calcularPresupuesto = false; + this.configUploadDropzone = { + domElement: '#dropzone-presupuesto-admin-files', + nameId: "presupuesto_id", + getUri: '/presupuestos/presupuestocliente/get_files', + postUri: '/presupuestos/presupuestocliente/upload_files' + } + this.fileUploadDropzone = new FileUploadDropzone(this.configUploadDropzone) } init() { @@ -116,6 +124,8 @@ class PresupuestoAdminEdit { $('#lomo_cubierta').on('change', this.datosLibro.changeAnchoSolapasCubierta); $('#lomo_sobrecubierta').on('change', this.datosLibro.changeAnchoSolapasSobrecubierta); + this.fileUploadDropzone.init() + } From bf49d601cff2398fb1de0a5e76c13ef018d3e2ec Mon Sep 17 00:00:00 2001 From: amazuecos Date: Tue, 28 Jan 2025 20:27:15 +0100 Subject: [PATCH 2/2] fix dropzone when presupuesto is borrador --- ci4/app/Language/es/Presupuestos.php | 2 +- .../themes/vuexy/components/dropzone.php | 1 + .../admin/viewPresupuestoadminForm.php | 4 +- .../safekat/components/alerts/sweetAlert.js | 3 +- .../components/forms/fileUploadDropzone.js | 77 +++++++++++-------- .../presupuestoAdmin/presupuestoAdminEdit.js | 8 +- 6 files changed, 59 insertions(+), 36 deletions(-) diff --git a/ci4/app/Language/es/Presupuestos.php b/ci4/app/Language/es/Presupuestos.php index 868494dc..18e5f56b 100755 --- a/ci4/app/Language/es/Presupuestos.php +++ b/ci4/app/Language/es/Presupuestos.php @@ -332,7 +332,7 @@ return [ 'actualizacionSolapasCubierta' => 'El tamaño de las solapas de la cubierta se ha actualizado debido a que supera el máximo permitido (este valor depende del ancho del libro y del número de páginas).', 'actualizacionSolapasSobrecubierta' => 'El tamaño de las solapas de la sobrecubierta se ha actualizado debido a que supera el máximo permitido (este valor depende del ancho del libro y del número de páginas).', - 'files' => 'Documentos', + 'files' => 'Ficheros', 'titulos' => [ 'libroFresadoTapaDura' => 'Rústica Fresado tapa dura', 'libroFresadoTapaBlanda' => 'Rústica Fresado tapa blanda', diff --git a/ci4/app/Views/themes/vuexy/components/dropzone.php b/ci4/app/Views/themes/vuexy/components/dropzone.php index b6a4348e..886d4d24 100644 --- a/ci4/app/Views/themes/vuexy/components/dropzone.php +++ b/ci4/app/Views/themes/vuexy/components/dropzone.php @@ -12,6 +12,7 @@
+
Arrastre aquí los ficheros o haga click
diff --git a/ci4/app/Views/themes/vuexy/form/presupuestos/admin/viewPresupuestoadminForm.php b/ci4/app/Views/themes/vuexy/form/presupuestos/admin/viewPresupuestoadminForm.php index 83775def..5d95c2f2 100644 --- a/ci4/app/Views/themes/vuexy/form/presupuestos/admin/viewPresupuestoadminForm.php +++ b/ci4/app/Views/themes/vuexy/form/presupuestos/admin/viewPresupuestoadminForm.php @@ -41,7 +41,9 @@ $presupuestoId,"type" => "presupuesto"]) ?> - 'dropzone-presupuesto-admin-files','modelId' => $presupuestoId]) ?> + estado_id == 2) : ?> + 'dropzone-presupuesto-admin-files','modelId' => $presupuestoId]) ?> + diff --git a/httpdocs/assets/js/safekat/components/alerts/sweetAlert.js b/httpdocs/assets/js/safekat/components/alerts/sweetAlert.js index 338c1d60..fec7c8c7 100644 --- a/httpdocs/assets/js/safekat/components/alerts/sweetAlert.js +++ b/httpdocs/assets/js/safekat/components/alerts/sweetAlert.js @@ -25,6 +25,7 @@ export const alertSuccessMessage = (title,type="primary") => { showConfirmButton : false, title: title, text: title, - icon: "success" + icon: "success", + timer : 2000 }) } \ No newline at end of file diff --git a/httpdocs/assets/js/safekat/components/forms/fileUploadDropzone.js b/httpdocs/assets/js/safekat/components/forms/fileUploadDropzone.js index 2099793a..172c7933 100644 --- a/httpdocs/assets/js/safekat/components/forms/fileUploadDropzone.js +++ b/httpdocs/assets/js/safekat/components/forms/fileUploadDropzone.js @@ -38,25 +38,37 @@ class FileUploadDropzone { } init() { - this.btnSubmitFile.on('click', this._handleUploadFiles.bind(this)) - this.btnSelectFiles.on('click', () => { - this.jqElement.trigger('click') - }) + if (this.jqElement.length > 0) { + this.btnSubmitFile.on('click', this._handleUploadFiles.bind(this)) + this.btnSelectFiles.on('click', () => { + this.jqElement.trigger('click') + }) - this.dropzone = new Dropzone(this.domElement, { - url: this.postUri, - addRemoveLinks: true, - previewTemplate: PREVIEW_TEMPLATE, - paramName: "file", - uploadMultiple: true, - parallelUploads: 4, // Ajusta este número al máximo número de archivos que esperas subir a la vez - maxFiles: 5, // Ajusta este número al máximo número de archivos que esperas subir a la vez - autoProcessQueue: true, - dictRemoveFile: "Eliminar", - acceptedFiles: 'image/*, application/pdf', - maxFilesize: 5e+7, // Bytes - init: this._handleGetFiles.bind(this) - }); + this.dropzone = new Dropzone(this.domElement, { + url: this.postUri, + addRemoveLinks: true, + previewTemplate: PREVIEW_TEMPLATE, + paramName: "file", + uploadMultiple: true, + parallelUploads: 4, // Ajusta este número al máximo número de archivos que esperas subir a la vez + maxFiles: 5, // Ajusta este número al máximo número de archivos que esperas subir a la vez + autoProcessQueue: true, + dictRemoveFile: "Eliminar", + acceptedFiles: 'image/*, application/pdf', + maxFilesize: 5e+7, // Bytes + init: this._handleGetFiles.bind(this) + }); + this.dropzone.on("addedfile", function (file) { + if (file.hash) { + var viewButton = Dropzone.createElement("Ver"); + file.previewElement.appendChild(viewButton); + // Listen to the view button click event + viewButton.addEventListener("click", function (e) { + window.open(window.location.protocol + "//" + window.location.host + "/sistema/intranet/presupuestos/" + file.hash, '_blank'); + }); + } + }); + } } _getDropzoneFilesFormData() { @@ -82,6 +94,7 @@ class FileUploadDropzone { return formData; } _handleUploadFiles() { + $("#loader").modal('show') let ajax = new Ajax(this.postUri, this._getDropzoneFilesFormData(), null, @@ -91,12 +104,13 @@ class FileUploadDropzone { } _handleUploadFilesSuccess(response) { + this.dropZoneClean() + this._handleGetFiles() alertSuccessMessage(response?.message ?? "Archivos subidos correctamente"); } _handleUploadFilesError(errors) { } _handleGetFiles() { - const ajax = new Ajax( this.getUri, this.dataPost, @@ -108,26 +122,27 @@ class FileUploadDropzone { ajax.post() } _handelGetFilesSuccess(response) { - const files = JSON.parse(response) - this.dropZoneUpdateFiles(files) + try { + $("#loader").modal('hide') + const files = JSON.parse(response) + this.dropZoneUpdateFiles(files) + } catch (error) { + $("#loader").modal('hide') + } } dropZoneUpdateFiles(files) { - this.dropzone.on("addedfile", function (file) { - if (file.hash) { - var viewButton = Dropzone.createElement("Ver"); - file.previewElement.appendChild(viewButton); - // Listen to the view button click event - viewButton.addEventListener("click", function (e) { - window.open(window.location.protocol + "//" + window.location.host + "/sistema/intranet/presupuestos/" + file.hash, '_blank'); - }); - } - }); + files.forEach(file => { this.dropZoneAddFile(file) }); } + dropZoneClean() { + this.dropzone.files.forEach(file => { + this.dropzone.removeFile(file); + }) + } dropZoneAddFile(mockFile) { this.dropzone.files.push(mockFile); // add to files array this.dropzone.emit("addedfile", mockFile); diff --git a/httpdocs/assets/js/safekat/pages/presupuestoAdmin/presupuestoAdminEdit.js b/httpdocs/assets/js/safekat/pages/presupuestoAdmin/presupuestoAdminEdit.js index 0b09983d..5cf763c8 100644 --- a/httpdocs/assets/js/safekat/pages/presupuestoAdmin/presupuestoAdminEdit.js +++ b/httpdocs/assets/js/safekat/pages/presupuestoAdmin/presupuestoAdminEdit.js @@ -61,7 +61,9 @@ class PresupuestoAdminEdit { getUri: '/presupuestos/presupuestocliente/get_files', postUri: '/presupuestos/presupuestocliente/upload_files' } - this.fileUploadDropzone = new FileUploadDropzone(this.configUploadDropzone) + if ($(this.configUploadDropzone.domElement).length > 0) { + this.fileUploadDropzone = new FileUploadDropzone(this.configUploadDropzone) + } } init() { @@ -128,7 +130,9 @@ class PresupuestoAdminEdit { $('#lomo_cubierta').on('change', this.datosLibro.changeAnchoSolapasCubierta); $('#lomo_sobrecubierta').on('change', this.datosLibro.changeAnchoSolapasSobrecubierta); - this.fileUploadDropzone.init() + if ($(this.configUploadDropzone.domElement).length > 0) { + this.fileUploadDropzone.init() + } }