FIX: Fetch by state

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

@@ -257,7 +257,6 @@
                 date: null,
                 ufs: null
             }
-
             columnNames = []
             reservations = []
 
@@ -294,10 +293,9 @@
                     return this
                 }
             }
-
             columnsData() {
                 return this.reservations.map(reservation => {
-                    const date = new Date(Date.parse(reservation.fecha) + 24 * 60 * 60 * 1000)
+                    const date = new Date(Date.parse(reservation.date) + 24 * 60 * 60 * 1000)
                     return {
                         id: reservation.id,
                         unidades: reservation.summary,
@@ -309,7 +307,6 @@
                     }
                 })
             }
-
             draw() {
                 if (this.reservations.length === 0) {
                     this.empty()
@@ -332,8 +329,9 @@
                     tbody.appendChild(tr)
                 })
                 this.show()
-            }
 
+                this.watch()
+            }
             drawActions(id) {
                 return `
                     <td class="right aligned">
@@ -345,7 +343,23 @@
                         </button>
                     </td>`
             }
-
+            watch() {
+                if (Object.keys(this.actions).length === 0) {
+                    return
+                }
+                const actionNames = Object.keys(this.actions)
+                const tbody = this.component.querySelector('tbody')
+                const trs = tbody.querySelectorAll('tr')
+                trs.forEach(tr => {
+                    actionNames.forEach(actionName => {
+                        const button = tr.querySelector(`button.${actionName}`)
+                        if (!button) {
+                            return
+                        }
+                        button.addEventListener('click', this.actions[actionName].bind(this))
+                    })
+                })
+            }
             empty() {
                 const tbody = this.component.querySelector('tbody')
                 tbody.innerHTML = ''
@@ -356,14 +370,38 @@
 
                 this.show()
             }
-
             show() {
                 this.component.style.display = this.display.reservations
             }
-
             hide() {
                 this.component.style.display = 'none'
             }
+            send = {
+                get(url) {
+                    return APIClient.fetch(url).then(response => response.json()).then(json => {
+                        if (json.success) {
+                            window.location.reload()
+                        }
+                    })
+                },
+                post(url, body) {
+                    const method = 'post'
+                    return APIClient.fetch(url, {method, body}).then(response => response.json()).then(json => {
+                        if (json.success) {
+                            window.location.reload()
+                        }
+                    })
+                },
+                delete(url) {
+                    const method = 'delete'
+                    return APIClient.fetch(url, {method}).then(response => response.json()).then(json => {
+                        if (json.success) {
+                            window.location.reload()
+                        }
+                    })
+                }
+            }
+            actions = {}
         }
 
         class ActiveReservations extends Reservations {
@@ -378,7 +416,6 @@
                     return row
                 })
             }
-
             drawActions(id) {
                 return `
                     <td class="right aligned">
@@ -390,12 +427,44 @@
                         </button>
                     </td>`
             }
+            actions = {
+                edit: event => {
+                    event.preventDefault()
+                    const id = event.currentTarget.dataset.id
+                    reservations.components.modals.edit.load(id)
+                    return false
+                },
+                remove: event => {
+                    event.preventDefault()
+                    const id = event.currentTarget.dataset.id
+                    const url = `{{ $urls->api }}/ventas/reservation/${id}/remove`
+                    this.send.delete(url)
+                    return false
+                }
+            }
         }
 
         class PendingReservations extends Reservations {
             constructor({component_id, formatters = {date, ufs}}) {
                 super({component_id, formatters})
             }
+
+            actions = {
+                approve: event => {
+                    event.preventDefault()
+                    const id = event.currentTarget.dataset.id
+                    const url = `{{ $urls->api }}/ventas/reservation/${id}/approve`
+                    this.send.get(url)
+                    return false
+                },
+                reject: event => {
+                    event.preventDefault()
+                    const id = event.currentTarget.dataset.id
+                    const url = `{{ $urls->api }}/ventas/reservation/${id}/reject`
+                    this.send.get(url)
+                    return false
+                }
+            }
         }
 
         class RejectedReservations extends Reservations {
@@ -411,10 +480,10 @@
                     return data[idx]
                 })
             }
-
             drawActions(id) {
                 return ''
             }
+            watch() {}
         }
 
         const reservations = {