Import Precios

2025-08-27 19:27:18 -04:00
parent 4e4c0b7648
commit ad64ffa436
19 changed files with 1049 additions and 21 deletions
--- a/app/resources/views/ventas/precios/modal/import.blade.php
+++ b/app/resources/views/ventas/precios/modal/import.blade.php
@ -0,0 +1,120 @@
+<div class="ui modal" id="import_modal">
+    <div class="header">
+        Importar Precios
+    </div>
+    <div class="content">
+        <div class="ui form">
+            <input type="hidden" id="import_project_id" name="import_project_id" value="" />
+            <div class="three wide field">
+                <div class="ui calendar" id="import_date">
+                    <div class="ui left icon input">
+                        <i class="calendar icon"></i>
+                        <input type="text" name="fecha" />
+                    </div>
+                </div>
+            </div>
+            <input class="ui invisible file input" type="file" id="import_file" name="file" />
+            <label class="ui placeholder segment" for="import_file">
+                <div class="ui icon header">
+                    <i class="upload icon"></i>
+                    Archivo de Precios
+                </div>
+            </label>
+        </div>
+    </div>
+    <div class="actions">
+        <div class="ui red cancel icon button">
+            <i class="remove icon"></i>
+        </div>
+        <div class="ui green ok icon button">
+            <i class="checkmark icon"></i>
+            Importar
+        </div>
+</div>
+
+@push('page_scripts')
+    <script>
+        class ImportModal {
+            ids = {
+                modal: '',
+                project: '',
+                calendar: '',
+                file: ''
+            }
+            components = {
+                $modal: null,
+                form: null,
+                project: null,
+                $calendar: null,
+                file: null,
+                $file: null
+            }
+            constructor() {
+                this.ids.modal = 'import_modal'
+                this.ids.project = 'import_project_id'
+                this.ids.calendar = 'import_date'
+                this.ids.file = 'import_file'
+
+                this.setup()
+            }
+            show(project_id) {
+                this.components.project.value = project_id
+                this.components.$modal.modal('show')
+            }
+            dragDrop(event) {
+                event.preventDefault()
+
+                if (event.originalEvent.dataTransfer && event.originalEvent.dataTransfer.files.length > 0) {
+                    this.components.file.files = event.originalEvent.dataTransfer.files
+                }
+            }
+            import() {
+                const url = '{{ $urls->api }}/ventas/precios/import'
+                const method = 'post'
+                const body = new FormData()
+                body.set('project_id', this.components.project.value)
+                const date = this.components.$calendar.calendar('get date')
+                body.set('date', [date.getFullYear(), date.getMonth() + 1, date.getDate()].join('-'))
+                body.set('file', this.components.file.files[0])
+                APIClient.fetch(url, {method, body}).then(response => response.json()).then(json => {
+                    if (json.status === true) {
+                        window.location.reload()
+                        return
+                    }
+                    console.debug(json)
+                })
+            }
+            setup() {
+                this.components.$modal = $(`#${this.ids.modal}`)
+                this.components.$modal.modal({
+                    onApprove: () => {
+                        this.import()
+                    }
+                })
+                this.components.form = this.components.$modal.find('form')
+                this.components.form.submit(event => {
+                    event.preventDefault()
+                    this.import()
+                    return false
+                })
+                this.components.project = document.getElementById(this.ids.project)
+                this.components.$calendar = $(`#${this.ids.calendar}`)
+                const cdo = structuredClone(calendar_date_options)
+                cdo['maxDate'] = new Date()
+                this.components.$calendar.calendar(cdo)
+                this.components.file = document.getElementById(this.ids.file)
+                this.components.$file = $(this.components.file.parentNode.querySelector('label'))
+                this.components.$file.css('cursor', 'pointer')
+                this.components.$file.on('dragover', event => {
+                    event.preventDefault()
+                    event.stopPropagation()
+                })
+                this.components.$file.on('dragenter', event => {
+                    event.preventDefault()
+                    event.stopPropagation()
+                })
+                this.components.$file.on('drop', this.dragDrop.bind(this))
+            }
+        }
+    </script>
+@endpush