From 38383f52958b50a75149991608f0c7c1f2b1b9b7 Mon Sep 17 00:00:00 2001
From: Juan Pablo Vial <jpvial@incoviba.cl>
Date: Tue, 25 Jul 2023 20:25:28 -0400
Subject: [PATCH] Accordion

---
 .../views/ventas/cierres/list.blade.php       | 185 ++++++------------
 1 file changed, 59 insertions(+), 126 deletions(-)

diff --git a/app/resources/views/ventas/cierres/list.blade.php b/app/resources/views/ventas/cierres/list.blade.php
index 334d2bf..859ca54 100644
--- a/app/resources/views/ventas/cierres/list.blade.php
+++ b/app/resources/views/ventas/cierres/list.blade.php
@@ -8,17 +8,14 @@
 @section('page_content')
     <div class="ui container">
         <h2 class="ui header">Listado de Cierres</h2>
-        <table class="ui striped table" id="cierres">
-            <thead>
-                <tr>
-                    <th colspan="5">Proyecto</th>
-                </tr>
-            </thead>
-            <tbody></tbody>
-        </table>
+        <h4 class="ui dividing header">Proyectos</h4>
+        <div class="ui compact fluid styled accordion" id="cierres_accordion"></div>
     </div>
 @endsection
 
+@include('layout.head.styles.datatables')
+@include('layout.body.scripts.datatables')
+
 @push('page_styles')
     <style>
         .proyecto, .estado-cierres {
@@ -51,14 +48,13 @@
                 const date = new Date(this.fecha)
                 const dateFormatter = new Intl.DateTimeFormat('es-CL')
                 const estado = this.estado.titulo.charAt(0).toUpperCase() + this.estado.titulo.slice(1)
-                return $('<tr></tr>').addClass('cierre ' + this.estado.descripcion).attr('data-proyecto', this.proyecto_id).attr('data-estado', this.estado.id).append(
-                    $('<td></td>')
-                ).append(
-                    $('<td></td>').append(
+                return $('<tr></tr>').addClass('cierre ' + this.estado.descripcion)
+                    .attr('data-proyecto', this.proyecto_id).attr('data-estado', this.estado.id).append(
+                    $('<td></td>').attr('data-order', this.departamento).append(
                         $('<a></a>').attr('href', '{{$urls->base}}/ventas/cierre/' + this.id).html(this.departamento + ' (' + this.tipologia + ')')
                     )
                 ).append(
-                    $('<td></td>').html(dateFormatter.format(date))
+                    $('<td></td>').attr('data-order', this.fecha).html(dateFormatter.format(date))
                 ).append(
                     $('<td></td>').html(formatter.format(this.valor) + ' UF (' + formatter.format(this.unitario()) + ' UF/m²)')
                 ).append(
@@ -101,31 +97,35 @@
                 cierre.estado.titulo = data.estado_cierre.tipo_estado_cierre.descripcion
                 this.cierres.push(cierre)
             }
-            draw(tbody, formatter) {
-                tbody.append(
-                    $('<tr></tr>').addClass('estado-cierres ' + this.descripcion).attr('data-proyecto', this.proyecto_id).attr('data-estado', this.id).attr('data-status', 'closed').append(
-                        $('<th></th>')
-                    ).append(
-                        $('<th></th>').attr('colspan', 4).html(this.title).append(
+            draw(parent, formatter) {
+                const tbody = $('<tbody></tbody>')
+                this.cierres.forEach(cierre => {
+                    tbody.append(cierre.draw(formatter))
+                })
+                const table = $('<table></table>').addClass('ui striped table').append(
+                    $('<thead></thead>').append(
+                        $('<tr></tr>').append(
+                            $('<th></th>').html('Departamento')
+                        ).append(
+                            $('<th></th>').html('Fecha')
+                        ).append(
+                            $('<th></th>').html('Valor')
+                        ).append(
+                            $('<th></th>').html('Estado')
+                        )
+                    )
+                ).append(tbody)
+                parent.append(
+                    $('<div></div>').addClass('title ' + this.descripcion).append(
+                        $('<span></span>').addClass('ui text ' + this.descripcion.replace('positive', 'success')).html(this.title).append(
                             $('<i></i>').addClass('right caret icon')
                         ).append(' [' + this.cierres.length + '] ' + formatter.format(this.proporcion()) + '%')
                     )
+                ).append(
+                    $('<div></div>').addClass('content').append(table)
                 )
-                tbody.append(
-                    $('<tr></tr>').addClass('cierre').attr('data-proyecto', this.proyecto_id).attr('data-estado', this.id).append(
-                        $('<th></th>')
-                    ).append(
-                        $('<th></th>').html('Departamento')
-                    ).append(
-                        $('<th></th>').html('Fecha')
-                    ).append(
-                        $('<th></th>').html('Valor')
-                    ).append(
-                        $('<th></th>').html('Estado')
-                    )
-                )
-                this.cierres.forEach(cierre => {
-                    tbody.append(cierre.draw(formatter))
+                const dt = new DataTable(table, {
+                    order: [[1, 'desc'], [0, 'asc']]
                 })
             }
         }
@@ -172,23 +172,24 @@
                 }
                 this.estados.rechazado.add(data)
             }
-            draw(tbody, formatter) {
-                tbody.append(
-                    $('<tr></tr>').append(
-                        $('<td></td>').addClass('proyecto').attr('data-proyecto', this.id).attr('data-status', 'closed').attr('colspan', 5).html(this.descripcion).append(
-                            $('<i></i>').addClass('right caret icon')
-                        ).append(' [' + this.total + ']')
-                    )
-                )
+            draw(parent, formatter) {
+                const accordion = $('<div></div>').addClass('compact accordion')
                 Object.keys(this.estados).forEach(key => {
                     this.estados[key].total = this.total
-                    this.estados[key].draw(tbody, formatter)
+                    this.estados[key].draw(accordion, formatter)
                 })
+                parent.append(
+                    $('<div></div>').addClass('title').html(this.descripcion).append(
+                        $('<i></i>').addClass('dropdown icon')
+                    ).append(' [' + this.total + ']')
+                ).append(
+                    $('<div></div>').addClass('content').append(accordion)
+                )
             }
         }
         const cierres = {
             ids: {
-                table: '',
+                accordion: '',
             },
             data: {
                 proyectos: []
@@ -255,105 +256,37 @@
             draw: function() {
                 return {
                     proyectos: () => {
-                        const parent = $(this.ids.table)
+                        const accordion = $(this.ids.accordion)
+                        accordion.html('')
                         const formatter = new Intl.NumberFormat('es-CL', {minimumFractionDigits: 2, maximumFractionDigits: 2})
-                        const tbody = parent.find('tbody')
-
-                        tbody.html('')
                         this.data.proyectos.forEach(proyecto => {
-                            proyecto.draw(tbody, formatter)
+                            proyecto.draw(accordion, formatter)
                         })
-                        tbody.find('.estado-cierres, .cierre').hide()
-                        tbody.find('.proyecto').click(this.actions().proyectos().toggle)
-                        tbody.find('.estado-cierres').click(this.actions().estados().toggle)
                     },
                     loading: () => {
-                        const parent = $(this.ids.table)
-                        const tbody = parent.find('tbody')
-                        tbody.append(
-                            $('<tr></tr>').append(
-                                $('<td></td>').attr('colspan', 5).append(
-                                    $('<div></div>').addClass('ui basic segment').append(
-                                        $('<div></div>').addClass('ui active dimmer').append(
-                                            $('<div></div>').addClass('ui loader')
-                                        )
-                                    ).append(
-                                        $('<div></div>').addClass('ui fluid placeholder').append(
-                                            $('<div></div>').addClass('image')
-                                        )
-                                    )
+                        const accordion = $(this.ids.accordion)
+                        accordion.append(
+                            $('<div></div>').addClass('ui basic segment').append(
+                                $('<div></div>').addClass('ui active dimmer').append(
+                                    $('<div></div>').addClass('ui loader')
+                                )
+                            ).append(
+                                $('<div></div>').addClass('ui fluid placeholder').append(
+                                    $('<div></div>').addClass('image')
                                 )
                             )
                         )
                     }
                 }
             },
-            actions: function() {
-                return {
-                    proyectos: () => {
-                        return {
-                            open: event => {
-                                const th = $(event.currentTarget)
-                                const proyecto_id = th.data('proyecto')
-                                th.find('.icon').removeClass('right').addClass('down')
-                                $(".estado-cierres[data-proyecto='" + proyecto_id + "']").show()
-                                th.attr('data-status', 'open')
-                            },
-                            close: event => {
-                                const th = $(event.currentTarget)
-                                const proyecto_id = th.data('proyecto')
-                                th.find('.icon').removeClass('down').addClass('right')
-                                $(".estado-cierres[data-proyecto='" + proyecto_id + "']").hide()
-                                $(".cierre[data-proyecto='" + proyecto_id + "']").hide()
-                                th.attr('data-status', 'closed')
-                            },
-                            toggle: event => {
-                                const th = $(event.currentTarget)
-                                const status = th.attr('data-status')
-                                if (status === 'closed') {
-                                    return this.actions().proyectos().open(event)
-                                }
-                                return this.actions().proyectos().close(event)
-                            }
-                        }
-                    },
-                    estados: () => {
-                        return {
-                            open: event => {
-                                const tr = $(event.currentTarget)
-                                const proyecto_id = tr.data('proyecto')
-                                const estado_id = tr.data('estado')
-                                tr.find('.icon').removeClass('right').addClass('down')
-                                $(".cierre[data-proyecto='" + proyecto_id + "'][data-estado='" + estado_id + "']").show()
-                                tr.attr('data-status', 'open')
-                            },
-                            close: event => {
-                                const tr = $(event.currentTarget)
-                                const proyecto_id = tr.data('proyecto')
-                                const estado_id = tr.data('estado')
-                                tr.find('.icon').removeClass('down').addClass('right')
-                                $(".cierre[data-proyecto='" + proyecto_id + "'][data-estado='" + estado_id + "']").hide()
-                                tr.attr('data-status', 'closed')
-                            },
-                            toggle: event => {
-                                const tr = $(event.currentTarget)
-                                const status = tr.attr('data-status')
-                                if (status === 'closed') {
-                                    return this.actions().estados().open(event)
-                                }
-                                return this.actions().estados().close(event)
-                            }
-                        }
-                    }
-                }
-            },
             setup: function() {
+                $(this.ids.accordion).accordion()
                 this.get().proyectos()
             }
         }
 
         $(document).ready(() => {
-            cierres.ids.table = '#cierres'
+            cierres.ids.accordion = '#cierres_accordion'
             cierres.setup()
         })
     </script>