Listado de brokers

2025-03-06 20:34:43 -03:00
parent 18dd8c4ec0
commit c7ee440e03
6 changed files with 226 additions and 0 deletions
--- a/app/resources/views/proyectos/brokers.blade.php
+++ b/app/resources/views/proyectos/brokers.blade.php
@ -0,0 +1,119 @@
+@extends('proyectos.brokers.base')
+
+@section('brokers_content')
+    @include('proyectos.brokers.proyectos')
+    <div id="brokers"></div>
+@endsection
+
+@push('page_scripts')
+    <script>
+        const brokers = {
+            data: {
+                contracts: {},
+                project_id: null
+            },
+            formatters: {
+                date: new Intl.DateTimeFormat('es-CL', {dateStyle: 'medium'}),
+                percent: new Intl.NumberFormat('es-CL', {style: 'percent', minimumFractionDigits: 2, maximumFractionDigits: 2})
+            },
+            draw() {
+                return {
+                    brokers: project_id => {
+                        $('#projects').hide()
+                        const div = document.getElementById('brokers')
+                        const table = document.createElement('table')
+                        table.classList.add('ui', 'table')
+                        table.innerHTML = [
+                            "<thead>",
+                            "<tr>",
+                            "<th>Operador</th>",
+                            "<th>Comisión</th>",
+                            "<th>Fecha Inicio</th>",
+                            "<th class='right aligned'><button class='ui small tertiary green icon button' id='add_button'><i class='plus icon'></i></button></th>",
+                            "</tr>",
+                            "</thead>"].join('')
+                        const tbody = document.createElement('tbody')
+                        brokers.data.contracts[project_id].forEach(contract => {
+                            const dateParts = contract.current.date.split('-')
+                            const date = new Date([dateParts[0], parseInt(dateParts[1]) - 1, dateParts[2]].join('-'))
+                            date.setMonth(date.getMonth() + 1)
+                            tbody.insertAdjacentHTML('beforeend', [
+                                "<tr>",
+                                `<td>${contract.broker.name}</td>`,
+                                `<td>${brokers.formatters.percent.format(contract.commission)}</td>`,
+                                `<td>${brokers.formatters.date.format(date)}</td>`,
+                                `<td class="right aligned"><button class="ui small tertiary red icon button remove_button" data-id="${contract.id}"><i class="remove icon"></i></button></td>`,
+                                "</tr>"].join(''))
+                        })
+                        table.append(tbody)
+                        div.innerHTML = ''
+                        div.append(table)
+                        $('#brokers').show()
+
+                    }
+                }
+            },
+            get() {
+                return {
+                    contracts: project_id => {
+                        brokers.actions().startSpinner()
+                        brokers.data.project_id = project_id
+                        const url = `{{$urls->api}}/proyecto/${project_id}/brokers`
+                        APIClient.fetch(url).then(response => {
+                            if (!response.ok) {
+                                return
+                            }
+                            return response.json().then(json => {
+                                brokers.data.contracts[json.proyecto_id] = json.contracts
+                                const promises = []
+                                json.contracts.forEach(contract => {
+                                    promises.push(brokers.get().broker(contract.broker_rut).then(broker => {
+                                        brokers.data.contracts[json.proyecto_id].find(contract => contract.broker_rut === broker.rut).broker = broker
+                                    }))
+                                })
+                                Promise.all(promises).then(() => {
+                                    brokers.draw().brokers(json.proyecto_id)
+                                })
+                            })
+                        }).finally(() => {
+                            brokers.actions().stopSpinner()
+                        })
+                    },
+                    broker: broker_rut => {
+                        const url = `{{$urls->api}}/proyectos/broker/${broker_rut}`
+                        return APIClient.fetch(url).then(response => {
+                            if (!response.ok) {
+                                return
+                            }
+                            return response.json().then(json => {
+                                return json.broker
+                            })
+                        })
+                    }
+                }
+            },
+            actions() {
+                return {
+                    startSpinner: () => {
+                        $('#refresh_button').addClass('loading')
+                    },
+                    stopSpinner: () => {
+                        $('#refresh_button').removeClass('loading')
+                    },
+                    refresh: () => {
+                        brokers.get().contracts(brokers.data.project_id)
+                    },
+                    up: () => {
+                        $('#brokers').hide()
+                        $('#projects').show()
+                        brokers.data.project_id = null
+                        document.getElementById('brokers').innerHTML = ''
+                    }
+                }
+            }
+        }
+        $(document).ready(() => {
+            $('#brokers').hide()
+        })
+    </script>
+@endpush