Comment whe rejecting or canceling reservation

app/resources/views/ventas/reservations.blade.php

@@ -102,6 +102,7 @@
     </div>
 
     @include('ventas.reservations.modal.add')
+    @include('ventas.reservations.modal.comment')
 @endsection
 
 @push('page_styles')
@@ -376,6 +377,9 @@
             hide() {
                 this.component.style.display = 'none'
             }
+            find(id) {
+                return this.reservations.find(reservation => reservation.id === parseInt(id))
+            }
             send = {
                 get(url) {
                     return APIClient.fetch(url).then(response => response.json()).then(json => {
@@ -392,14 +396,6 @@
                         }
                     })
                 },
-                delete(url) {
-                    const method = 'delete'
-                    return APIClient.fetch(url, {method}).then(response => response.json()).then(json => {
-                        if (json.success) {
-                            window.location.reload()
-                        }
-                    })
-                }
             }
             actions = {}
         }
@@ -436,9 +432,12 @@
                 },
                 remove: event => {
                     event.preventDefault()
-                    const id = event.currentTarget.dataset.id
+                    const reservation_id = event.currentTarget.dataset.id
-                    const url = `{{ $urls->api }}/ventas/reservation/${id}/remove`
+                    const url = `{{ $urls->api }}/ventas/reservation/${reservation_id}/remove`
-                    this.send.delete(url)
+                    const method = 'delete'
+                    const action = 'Cancelar'
+                    const reservation_data = this.find(reservation_id)
+                    reservations.components.modals.comment.show({reservation_id, action, url, method, reservation_data})
                     return false
                 }
             }
@@ -459,9 +458,12 @@
                 },
                 reject: event => {
                     event.preventDefault()
-                    const id = event.currentTarget.dataset.id
+                    const reservation_id = event.currentTarget.dataset.id
-                    const url = `{{ $urls->api }}/ventas/reservation/${id}/reject`
+                    const url = `{{ $urls->api }}/ventas/reservation/${reservation_id}/reject`
-                    this.send.get(url)
+                    const method = 'delete'
+                    const action = 'Rechazar'
+                    const reservation_data = this.find(reservation_id)
+                    reservations.components.modals.comment.show({reservation_id, action, url, method, reservation_data})
                     return false
                 }
             }
@@ -505,7 +507,8 @@
                     rejected: null
                 },
                 modals: {
-                    add: null
+                    add: null,
+                    comment: null,
                 }
             },
             display: {
@@ -645,6 +648,7 @@
                 this.show.projects()
 
                 this.components.modals.add = new AddReservationModal(configuration.ids.projects)
+                this.components.modals.comment = new CommentModal()
 
                 const project_id = {{ $project_id ?? 'null' }};
                 if (project_id !== null) {

app/resources/views/ventas/reservations/modal/comment.blade.php

@@ -0,0 +1,157 @@
+<div class="ui modal" id="comment_modal">
+    <div class="header">
+        Comentar Cierre y <span id="comment_action"></span>
+    </div>
+    <div class="content">
+        <form class="ui form" id="comment_form">
+            <input type="hidden" name="reservation_id" id="comment_reservation_id" />
+            <input type="hidden" name="user_id" id="comment_user_id" />
+            <table class="ui collapsing table">
+                <tbody>
+                <tr>
+                    <td>Unidades</td>
+                    <td id="comment_units"></td>
+                </tr>
+                <tr>
+                    <td>Cliente</td>
+                    <td id="comment_client"></td>
+                </tr>
+                <tr>
+                    <td>Fecha</td>
+                    <td id="comment_date"></td>
+                </tr>
+                </tbody>
+            </table>
+            <div class="field">
+                <label>Comentario</label>
+                <textarea name="comment"></textarea>
+            </div>
+        </form>
+    </div>
+    <div class="actions">
+        <div class="ui cancel button">
+            Cancelar
+        </div>
+        <div class="ui green ok button">
+            Comentar y Guardar
+        </div>
+    </div>
+</div>
+
+@push('page_scripts')
+<script>
+    class CommentModal {
+        ids = {
+            modal: 'comment_modal',
+            action: 'comment_action',
+            form: 'comment_form',
+            reservation_id: 'comment_reservation_id',
+            user_id: 'comment_user_id',
+            units: 'comment_units',
+            client: 'comment_client',
+            date: 'comment_date',
+        }
+        components = {
+            $modal: null,
+            action: null,
+            form: null,
+            reservation: null,
+            user: null,
+            units: null,
+            client: null,
+            date: null,
+            comment: null,
+        }
+        data = {
+            reservation_id: null,
+            url: '',
+            action: '',
+            method: 'delete',
+            reservation_data: {
+                units: '',
+                client: '',
+                date: '',
+            }
+        }
+        constructor() {
+            this.ids = {
+                modal: 'comment_modal',
+                action: 'comment_action',
+                form: 'comment_form',
+                reservation_id: 'comment_reservation_id',
+                user_id: 'comment_user_id',
+                units: 'comment_units',
+                client: 'comment_client',
+                date: 'comment_date',
+            }
+            this.setup()
+        }
+
+        show({reservation_id, reservation_data, url, action, method}) {
+            this.data.reservation_id = reservation_id
+            this.data.url = url
+            this.data.action = action
+            this.data.method = method
+
+            this.components.action.innerHTML = action
+
+            const date = new Date(Date.parse(reservation_data.date) + 24 * 60 * 60 * 1000)
+            const formatter = new Intl.DateTimeFormat('es-CL', {dateStyle: 'medium'})
+
+            this.data.reservation_data = {
+                units: reservation_data.summary,
+                client: reservation_data.buyer.nombreCompleto,
+                date: formatter.format(date),
+            }
+
+            this.components.reservation.value = this.data.reservation_id
+            this.components.units.innerHTML = this.data.reservation_data.units
+            this.components.client.innerHTML = this.data.reservation_data.client
+            this.components.date.innerHTML = this.data.reservation_data.date
+            this.components.$modal.modal('show')
+        }
+        hide() {
+            this.components.$modal.modal('hide')
+        }
+
+        submit() {
+            const url = this.data.url
+            const method = this.data.method
+            const body = new FormData(this.components.form)
+
+            return APIClient.fetch(url, {method, body}).then(response => response.json()).then(json => {
+                if (json.success) {
+                    window.location.reload()
+                }
+            })
+        }
+
+        setup() {
+            this.components = {
+                $modal: $(`#${this.ids.modal}`),
+                action: document.getElementById(this.ids.action),
+                form: document.getElementById(this.ids.form),
+                reservation: document.getElementById(this.ids.reservation_id),
+                user: document.getElementById(this.ids.user_id),
+                units: document.getElementById(this.ids.units),
+                client: document.getElementById(this.ids.client),
+                date: document.getElementById(this.ids.date),
+                comment: null,
+            }
+            this.components.comment = this.components.form.querySelector('textarea[name="comment"]')
+            this.components.user.value = '{{ $user->id }}'
+
+            this.components.$modal.modal({
+                onApprove: $element => {
+                    this.submit()
+                }
+            })
+            this.components.form.addEventListener('submit', event => {
+                event.preventDefault()
+                this.submit()
+                return false
+            })
+        }
+    }
+</script>
+@endpush