From 19220ab985c8fda0e4141615bec283b74ed1155f Mon Sep 17 00:00:00 2001 From: amazuecos Date: Thu, 23 Jan 2025 20:25:28 +0100 Subject: [PATCH] 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() + }