oficial/app/resources/views/ventas/facturacion/show/propietario.blade.php

<script>
    class Propietario {
        props = {
            index: 0,
            proporcion: 0,
            rut: '',
            nombre: '',
            direccion: '',
            comuna: ''
        }

        constructor(props) {
            this.props = props
        }

        get comuna() {
            return $('#comuna_propietario'+this.props.index).dropdown('get text') ?? this.props.comuna
        }
        update() {
            return {
                proporcion: (valor) => {
                    this.props.proporcion = valor
                    facturas.venta.update().totalPropietarios()
                    facturas.draw().facturas()
                },
                rut: rut => {
                    this.props.rut = rut
                    facturas.venta.update().totalPropietarios()
                    facturas.draw().facturas()
                },
                nombre: nombre => {
                    this.props.nombre = nombre
                    facturas.venta.update().totalPropietarios()
                    facturas.draw().facturas()
                },
                direccion: direccion => {
                    this.props.direccion = direccion
                    facturas.venta.update().totalPropietarios()
                    facturas.draw().facturas()
                },
                comuna: comuna => {
                    this.props.comuna = comuna
                    facturas.venta.update().totalPropietarios()
                    facturas.draw().facturas()
                },
            }
        }
        watch() {
            return {
                propietario: () => {
                    this.watch().proporcion()
                    this.watch().rut()
                    this.watch().nombre()
                    this.watch().direccion()
                    this.watch().comuna()
                },
                proporcion: () => {
                    document.getElementById('proporcion'+this.props.index).addEventListener('input', inputEvent => {
                        const newValue = inputEvent.currentTarget.value / 100
                        if (newValue === this.props.proporcion) {
                            return
                        }
                        const saldo = facturas.venta.props.propietarios.reduce((sum, propietario) => sum + propietario.props.proporcion, 0) - this.props.proporcion
                        if (saldo + newValue > 1) {
                            return
                        }
                        this.update().proporcion(newValue)
                    })
                },
                rut: () => {
                    document.getElementById('rut'+this.props.index).addEventListener('input', inputEvent => {
                        const rut = inputEvent.currentTarget.value
                        if (rut === this.props.rut) {
                            return
                        }
                        this.update().rut(rut)
                    })
                },
                nombre: () => {
                    document.getElementById('propietario'+this.props.index).addEventListener('input', inputEvent => {
                        const nombre = inputEvent.currentTarget.value
                        if (nombre === this.props.nombre) {
                            return
                        }
                        this.update().nombre(nombre)
                    })
                },
                direccion: () => {
                    document.getElementById('direccion_propietario'+this.props.index).addEventListener('input', inputEvent => {
                        const direccion = inputEvent.currentTarget.value
                        if (direccion === this.props.direccion) {
                            return
                        }
                        this.update().direccion(direccion)
                    })
                },
                comuna: () => {
                    if ($('#comuna_propietario'+this.props.index).dropdown('get value')) {
                        return
                    }
                    $('#comuna_propietario'+this.props.index).dropdown({
                        fireOnInit: true,
                        forceSelection: true,
                        onChange: (value, text) => {
                            this.update().comuna(value)
                        }
                    })
                },
            }
        }
        draw() {
            return {
                propietario: () => {
                    const output = [`<div class="fields" data-index="${this.props.index}">`]
                    output.push(this.draw().proporcion())
                    output.push(this.draw().rut())
                    output.push(this.draw().nombre())
                    output.push('</div>')
                    output.push(`<div class="fields" data-index="${this.props.index}">`)
                    output.push('<div class="three wide field"></div>')
                    output.push(this.draw().direccion())
                    output.push(this.draw().comuna())
                    output.push('</div>')
                    return output.join("\n")
                },
                proporcion: () => {
                    return [
                        '<div class="two wide field">',
                            `<label for="proporcion${this.props.index}">Proporción Factura</label>`,
                            '<div class="ui right labeled input">',
                                `<input type="number" name="proporcion${this.props.index}" id="proporcion${this.props.index}" value="${this.props.proporcion*100}" max="100" min="0" />`,
                                '<div class="ui basic icon label">',
                                    '<i class="percent icon"></i>',
                                '</div>',
                            '</div>',
                        '</div>',
                    ].join("\n")
                },
                rut: () => {
                    return [
                        '<div class="three wide field">',
                            `<label for="rut${this.props.index}">RUT</label>`,
                            '<div class="ui input">',
                                `<input type="text" name="rut${this.props.index}" id="rut${this.props.index}" value="${this.props.rut.toUpperCase()}" />`,
                            '</div>',
                        '</div>',
                    ].join("\n")
                },
                nombre: () => {
                    return [
                        '<div class="six wide field">',
                            `<label for="propietario${this.props.index}">Propietario</label>`,
                            '<div class="ui input">',
                                `<input type="text" name="propietario${this.props.index}" id="propietario${this.props.index}" value="${this.props.nombre}" />`,
                            '</div>',
                        '</div>',
                    ].join("\n")
                },
                direccion: () => {
                    return [
                        '<div class="six wide field">',
                            `<label for="direccion_propietario${this.props.index}">Dirección</label>`,
                            '<div class="ui input">',
                                `<input type="text" name="direccion_propietario${this.props.index}" id="direccion_propietario${this.props.index}" value="${this.props.direccion}" />`,
                            '</div>',
                        '</div>',
                    ].join("\n")
                },
                comuna: () => {
                    return [
                        '<div class="three wide field">',
                            `<label for="comuna_propietario${this.props.index}">Comuna</label>`,
                            `<div class="ui search selection dropdown" id="comuna_propietario${this.props.index}">`,
                                `<input type="hidden" name="comuna_propietario${this.props.index}" value="${this.props.comuna}" />`,
                                '<i class="dropdown icon"></i>',
                                '<div class="default text">Comuna</div>',
                                '<div class="menu">',
                                    @foreach ($comunas as $comuna)
                                        '<div class="item" data-value="{{ $comuna->id }}">{{ $comuna->descripcion }}</div>',
                                    @endforeach
                                '</div>',
                            '</div>',
                        '</div>',
                    ].join("\n")
                },
            }
        }
    }
</script>