oficial/app/resources/views/inmobiliarias/proveedores.blade.php

@extends('layout.base')

@section('page_content')
    <div class="ui container">
        <table class="ui table">
            <thead>
            <tr>
                <th>Nombre</th>
                <th>Contacto</th>
                <th class="right aligned">
                    <button class="ui tertiary green icon button" id="add_button">
                        <i class="plus icon"></i>
                    </button>
                </th>
            </tr>
            </thead>
            <tbody id="proveedores">
            @foreach ($proveedores as $proveedor)
                <tr>
                    <td>{{$proveedor->nombre}}</td>
                    <td>{{$proveedor->contacto->nombreCompleto()}}</td>
                    <td class="right aligned">
                        <button class="ui tertiary icon button" data-proveedor="{{$proveedor->rut}}">
                            <i class="edit icon"></i>
                        </button>
                        <button class="ui tertiary red icon button" data-proveedor="{{$proveedor->rut}}">
                            <i class="remove icon"></i>
                        </button>
                    </td>
                </tr>
            @endforeach
            </tbody>
        </table>
    </div>

    @include('inmobiliarias.proveedores.add_modal')
@endsection

@include('layout.body.scripts.rut')

@push('page_scripts')
    <script>
        const proveedores = {
            ids: {
                buttons: {
                    add: '',
                    edit: '',
                    remove: ''
                },
                add: {
                    form: '',
                    rut: '',
                    dv: '',
                    nombre: '',
                    razon: '',
                    contacto: {
                        rut: '',
                        dv: '',
                        nombre: '',
                        apellido_paterno: '',
                        apellido_materno: '',
                        email: '',
                        telefono: ''
                    }
                },
                proveedores: ''
            },
            data: JSON.parse('{!! json_encode($proveedores) !!}'),
            edit() {
            },
            remove() {
                return {
                    proveedor: rut => {
                        const url = `{{$urls->api}}/inmobiliarias/proveedor/${rut}/delete`
                        const method = 'delete'
                        APIClient.fetch(url, {method})
                            .then(response => (response) ? response.json() : null)
                            .then(data => {
                                if (data.success) {
                                    window.location.reload()
                                }
                            })

                    }
                }
            },
            draw() {
                return {
                    proveedores: () => {
                        $(this.ids.proveedores).empty()
                        this.data.forEach(proveedor => {
                            $(this.ids.proveedores).append(`
                            <tr>
                                <td>${proveedor.nombre}</td>
                                <td>${proveedor.contacto.nombreCompleto}</td>
                                <td class="right aligned">
                                    <button class="ui icon button" data-proveedor="${proveedor.rut}">
                                        <i class="edit icon"></i>
                                    </button>
                                    <button class="ui red icon button" data-proveedor="${proveedor.rut}">
                                        <i class="remove icon"></i>
                                    </button>
                                </td>
                            </tr>
                            `)
                        })
                        $(this.ids.buttons.remove).click((e) => {
                            this.remove().proveedor($(e.target).data('proveedor'))
                        })
                    }
                }
            },
            formatters() {
                return {
                    rut: value => {
                        return Rut.format(value)
                    },
                    telefono: value => {
                        const phone = value.replace(/[^0-9]/g, '')
                        if (phone.length <= 1) {
                            return phone
                        }
                        return phone.replace(/(\d{2})(\d{3})(\d{4})/, '$1 $2 $3')
                    }
                }
            },
            setup(ids) {
                this.ids = ids
                const addModal = new AddModal(this.ids.add, this.formatters())
                $(this.ids.buttons.add).click(() => {
                    addModal.show()
                })
                $(this.ids.buttons.remove).click((e) => {
                    this.remove().proveedor(e.currentTarget.parentNode.dataset.proveedor)
                })
            }
        }
        $(document).ready(() => {
            proveedores.setup({
                buttons: {
                    add: '#add_button',
                    edit: '.edit',
                    remove: '.remove'
                },
                add: {
                    modal: '#add_modal',
                    form: 'add_form',
                    rut: '#rut',
                    digito: '#dv',
                    nombre: '#nombre',
                    razon: '#razon',
                    contacto: {
                        rut: '#rut_contacto',
                        digito: '#dv_contacto',
                        nombres: '#nombre_contacto',
                        apellido_paterno: '#apellido_paterno_contacto',
                        apellido_materno: '#apellido_materno_contacto',
                        email: '#email_contacto',
                        telefono: '#telefono_contacto'
                    }
                },
                proveedores: '#proveedores'
            })
        })
    </script>
@endpush