sk-20 : add form files to presupuesto admin

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',

ci4/app/Views/themes/vuexy/components/dropzone.php

@@ -0,0 +1,42 @@
+<div class="accordion accordion-bordered mt-3" id="accordionPresupuestoFiles">
+    <div class="card accordion-item">
+        <h2 class="accordion-header" id="headingPresupuestoFiles">
+            <button type="button" class="accordion-button collapsed" data-bs-toggle="collapse"
+                data-bs-target="#accordionPresupuestoFilesTip" aria-expanded="false"
+                aria-controls="accordionPresupuestoFilesTip">
+                <h3><?= lang("Presupuestos.files") ?></h3>
+            </button>
+        </h2>
+        <div id="accordionPresupuestoFilesTip" class="accordion-collapse collapse"
+            data-bs-parent="#accordionPresupuestoFiles">
+            <div class="accordion-body">
+                <div class="col-12">
+                    <div class="dropzone needsclick" id="<?= $id ?>" data-id="<?= $modelId ?>">
+                        <div class="dz-message needsclick">
+                            Arrastre aquí los ficheros o haga click
+                        </div>
+                        <div class="fallback">
+                            <input name="file" type="file" />
+                        </div>
+                    </div>
+                </div>
+                <div class="col-md-12 gap-2">
+                    <button id="<?= $id ?>_btnUploadFiles" class="btn mt-3 btn-primary btn-submit waves-effect waves-light ml-2 ">
+                        <span class="align-middle d-sm-inline-block d-none me-sm-1"><?= lang('App.global_upload_files') ?></span>
+                        <i class="ti ti-upload ti-xs"></i>
+                    </button>
+                    <button id="<?= $id ?>_btnSubmitFiles" class="btn mt-3 btn-success btn-submit waves-effect waves-light ml-2">
+                        <span class="align-middle d-sm-inline-block d-none me-sm-1"><?= lang('App.global_save_file') ?></span>
+                        <i class="ti ti-device-floppy ti-xs"></i>
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+<?= $this->section('css') ?>
+<link rel="stylesheet" href="<?= site_url('themes/vuexy/vendor/libs/dropzone/dropzone.css') ?>" />
+<?= $this->endSection() ?>
+<?= $this->section('additionalExternalJs') ?>
+<script src="<?= site_url("themes/vuexy/vendor/libs/dropzone/dropzone.js") ?>"></script>
+<?= $this->endSection() ?>

ci4/app/Views/themes/vuexy/form/presupuestos/admin/viewPresupuestoadminForm.php

@@ -41,8 +41,10 @@
                 <?= view("themes/vuexy/form/presupuestos/admin/_datosEnvios") ?>
                 <?= view("themes/vuexy/form/presupuestos/admin/_comentariosItems") ?>
                 <?= view("themes/vuexy/components/chat_internal_presupuesto",data:["modelId" => $presupuestoId,"type" => "presupuesto"]) ?>
+                <?= view("themes/vuexy/components/dropzone",data: ['id' => 'dropzone-presupuesto-admin-files','modelId' => $presupuestoId]) ?>
                 <?= view("themes/vuexy/form/presupuestos/admin/_resumenPresupuestoItems") ?>
                 <?= view("themes/vuexy/form/presupuestos/admin/_tiradasAlternativasItems") ?>
+
             <?php else: ?> 
                 <input type="hidden" name="total_presupuesto" id="total_presupuesto" class="form-control"
                        value="0.0"></input>
@@ -225,6 +227,8 @@
     <link rel="stylesheet" href="<?= site_url('themes/vuexy/vendor/css/pages/app-chat.css') ?>">
     <link rel="stylesheet" href="<?= site_url('themes/vuexy/css/sk-datatables.css') ?>">
     <link rel="stylesheet" href="<?= site_url('themes/vuexy/css/presupuestoCliente.css') ?>">
+    <link rel="stylesheet" href="<?= site_url('themes/vuexy/vendor/libs/sweetalert2/sweetalert2.css') ?>" />
+
 <?= $this->endSection() ?>
 
 <?= $this->section('additionalExternalJs') ?>
@@ -234,6 +238,7 @@
     <script src="<?= site_url("themes/vuexy/vendor/libs/datatables-sk/plugins/buttons/buttons.print.min.js") ?>"></script>
     <script src="<?= site_url("themes/vuexy/vendor/libs/datatables-sk/plugins/select/dataTables.select.min.js") ?>"></script>
     <script src="<?= site_url('themes/vuexy/js/datatables-editor/dataTables.editor.min.js') ?>"></script>
+    <script src="<?= site_url('themes/vuexy/vendor/libs/sweetalert2/sweetalert2.js') ?>"></script>
     <script src="<?= site_url('themes/vuexy/vendor/libs/autosize/autosize.js') ?>"></script>
 <?php if (str_contains($formAction, 'edit')): ?>
     <script src="<?= site_url('themes/vuexy/vendor/libs/two/two.js') ?>"></script>

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