oficial/app/resources/views/proyectos/brokers.blade.php

@extends('proyectos.brokers.base')

@section('brokers_content')
    <table id="brokers" class="ui table">
        <thead>
        <tr>
            <th>RUT</th>
            <th>Nombre</th>
            <th>Contacto</th>
            <th>Contratos</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>
        @foreach($brokers as $broker)
            <tr>
                <td>{{$broker->rutFull()}}</td>
                <td>
                    <span
                    @if ($broker->data()?->legalName !== '')
                            data-tooltip="{{ $broker->data()?->legalName }}" data-position="right center"
                    @endif
                    >
                        {{$broker->name}}
                    </span>
                </td>
                <td>
                    <span
                    @if ($broker->data()?->representative?->email !== '' || $broker->data()?->representative?->phone !== '')
                            data-tooltip="{{ ($broker->data()?->representative?->email !== '') ? "Email: " . $broker->data()?->representative?->email : '' }}{{ ($broker->data()?->representative?->phone !== '') ? ' Teléfono: ' . $broker->data()?->representative?->phone : '' }}" data-position="right center"
                    @endif
                    >
                        {{ $broker->data()?->representative?->name }}
                    </span>
                </td>
                <td>
                    <div class="ui list">
                        @foreach($broker->contracts() as $contract)
                            <div class="item">
                                <a href="{{$urls->base}}/proyecto/{{$contract->project->id}}">{{$contract->project->descripcion}} ({{$format->percent($contract->commission, 2, true)}})</a>
                            </div>
                        @endforeach
                    </div>
                </td>
                <td class="right aligned">
                    <button class="ui small tertiary icon button edit_button" data-index="{{$broker->rut}}">
                        <i class="edit icon"></i>
                    </button>
                    <button class="ui small tertiary red icon button remove_button" data-index="{{$broker->rut}}">
                        <i class="remove icon"></i>
                    </button>
                </td>
            </tr>
        @endforeach
    </table>
    @include('proyectos.brokers.add_modal')
@endsection

@push('page_scripts')
    <script>
        const brokersHandler = {
            ids: {
                buttons: {
                    add: 'add_button',
                    edit: 'edit_button',
                    remove: 'remove_button'
                },
                modals: {
                    add: '',
                    edit: ''
                },
                forms: {
                    add: '',
                    edit: ''
                }
            },
            events() {
                return {
                    add: clickEvent => {
                        console.debug(clickEvent)
                        clickEvent.preventDefault()
                        brokersHandler.actions().add()
                    },
                    edit: clickEvent => {
                        clickEvent.preventDefault()
                        const broker_rut = clickEvent.currentTarget.dataset.index
                        brokersHandler.actions().edit(broker_rut)
                    },
                    delete: clickEvent => {
                        clickEvent.preventDefault()
                        const broker_rut = clickEvent.currentTarget.dataset.index
                        brokersHandler.actions().delete(broker_rut)
                    }
                }
            },
            buttonWatch() {
                document.getElementById(brokersHandler.ids.buttons.add).addEventListener('click', brokersHandler.events().add)
                Array.from(document.getElementsByClassName(brokersHandler.ids.buttons.edit)).forEach(button => {
                    button.addEventListener('click', brokersHandler.events().edit)
                })
                Array.from(document.getElementsByClassName(brokersHandler.ids.buttons.remove)).forEach(button => {
                    button.addEventListener('click', brokersHandler.events().delete)
                })
            },
            actions() {
                return {
                    add: () => {
                        $(`#${brokersHandler.ids.modals.add}`).modal('show')
                    },
                    edit: broker_rut => {},
                    delete: broker_rut => {
                        brokersHandler.execute().delete(broker_rut)
                    }
                }
            },
            execute() {
                return {
                    add: data => {
                        const url = '{{$urls->api}}/proyectos/brokers/add'
                        const method = 'post'
                        const body = new FormData()
                        body.append('brokers[]', JSON.stringify(data))
                        return APIClient.fetch(url, {method, body}).then(response => response.json()).then(json => {
                            if (!json.success) {
                                console.error(json.errors)
                                alert('No se pudo agregar operador.')
                                return
                            }
                            window.location.reload()
                        })
                    },
                    edit: (broker_rut, data) => {},
                    delete: broker_rut => {
                        const url = '{{$urls->api}}/proyectos/broker/' + broker_rut
                        const method = 'delete'
                        return APIClient.fetch(url, {method}).then(response => response.json()).then(json => {
                            if (!json.success) {
                                console.error(json.errors)
                                alert('No se pudo eliminar operador.')
                                return
                            }
                            window.location.reload()
                        })
                    }
                }
            },
            setup(ids) {
                brokersHandler.ids = ids
                brokersHandler.buttonWatch()
                $(`#${brokersHandler.ids.modals.add}`).modal('hide')

                new AddModal(brokersHandler)
            }
        }
        $(document).ready(() => {
            brokersHandler.setup({
                buttons: {
                    add: 'add_button',
                    edit: 'edit_button',
                    remove: 'remove_button'
                },
                modals: {
                    add: 'add_broker_modal',
                    edit: 'edit_broker_modal'
                },
                forms: {
                    add: {
                        base: 'add_broker_form',
                        digit: 'digit'
                    },
                    edit: {
                        base: 'edit_broker_form'
                    }
                }
            })
        })
    </script>
@endpush