sk-20 : add form files to presupuesto admin

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 = `
+<div class="dz-preview dz-file-preview">
+    <div class="dz-details">
+        <div class="dz-thumbnail">
+            <!---<img data-dz-thumbnail>
+            <span class="dz-nopreview">No preview</span> --->
+            <div class="dz-success-mark"></div>
+            <div class="dz-error-mark"></div>
+            <div class="dz-error-message"><span data-dz-errormessage></span></div>
+            <div class="progress">
+            <div class="progress-bar progress-bar-primary" role="progressbar" aria-valuemin="0" aria-valuemax="100" data-dz-uploadprogress></div>
+            </div>
+        </div>
+        <div class="dz-filename" data-dz-name></div>
+        <div class="dz-size" data-dz-size></div>
+    </div>
+</div>
+`;
+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("<span class='dz-remove'>Ver</span>");
+                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;

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()
+
     }