Mostrar colores y posibilidad de eliminar movimientos obsoletos

app/resources/views/contabilidad/cartolas/import.blade.php

@@ -42,6 +42,7 @@
                 <th>RUT</th>
                 <th>Nombres</th>
                 <th class="center aligned">Identificador</th>
+                <th></th>
             </tr>
         </thead>
         <tbody>
@@ -179,9 +180,10 @@
         }
         class Movimiento {
             props
-            constructor({sociedad, fecha, glosa, cargo, abono, saldo, categoria, detalle, centro_costo, rut, nombres,
-                            identificador, relacionado, relacionadoType}) {
+            constructor({id, sociedad, fecha, glosa, cargo, abono, saldo, categoria, detalle, centro_costo, rut, nombres,
+                            identificador, relacionado, relacionadoType, nuevo = false, obsoleto = false}) {
                 this.props = {
+                    id,
                     sociedad,
                     fecha,
                     glosa,
@@ -195,7 +197,9 @@
                     nombres,
                     identificador,
                     relacionado,
-                    relacionadoType
+                    relacionadoType,
+                    nuevo,
+                    obsoleto
                 }
             }
             draw({formatters}) {
@@ -210,8 +214,17 @@
                         nombre = this.props.nombres
                     }
                 }
+                let edit = ''
+                let color = ''
+                if (this.props.nuevo) {
+                    color = ' class="green"'
+                }
+                if (this.props.obsoleto) {
+                    color = ' class="red"'
+                    edit = `<button class="ui tertiary red icon button remove_movimiento" data-id="${this.props.id}"><i class="remove icon"></i></button>`
+                }
                 return [
-                    '<tr>',
+                    `<tr${color}>`,
                         `<td>${this.props.sociedad.sigla}</td>`,
                         `<td>${formatters.date.format(fecha)}</td>`,
                         `<td>${this.props.glosa}</td>`,
@@ -224,6 +237,7 @@
                         `<td>${this.props.rut ?? ''}</td>`,
                         `<td>${nombre}</td>`,
                         `<td class="center aligned">${this.props.identificador ?? ''}</td>`,
+                        `<td class="right aligned">${edit}</td>`,
                     '</tr>'
                 ].join("\n")
             }
@@ -250,6 +264,22 @@
                     }
                 }
             },
+            remove() {
+                return {
+                    movimiento: id => {
+                        const url = `{{$urls->api}}/contabilidad/movimiento/${id}`
+                        const method = 'delete'
+                        APIClient.fetch(url, {method}).then(response => {
+                            if (!response.status) {
+                                return
+                            }
+                            const index = this.data.movimientos.findIndex(movimiento => movimiento.id === response.movimiento.id)
+                            this.data.movimientos.splice(index, 1)
+                            this.draw().movimientos()
+                        })
+                    }
+                }
+            },
             draw() {
                 return {
                     form: () => {
@@ -269,6 +299,12 @@
                             tbody.append(movimiento.draw({formatters: this.formatters}))
                         })
                         table.show()
+                        Object.values(document.getElementsByClassName('remove_movimiento')).forEach(element => {
+                            element.addEventListener('click', clickEvent => {
+                                const id = clickEvent.currentTarget.dataset['id']
+                                this.remove().movimiento(id)
+                            })
+                        })
                     }
                 }
             },
@@ -293,7 +329,7 @@
                             })
                         })
 
-                        fetchAPI(url, {method, body}).then(response => {
+                        APIClient.fetch(url, {method, body}).then(response => {
                             if (!response) {
                                 return
                             }