Files
oficial/app/resources/views/proyectos/brokers/add_modal.blade.php
Juan Pablo Vial 5055d2703c Broker Contact
2025-03-07 17:11:59 -03:00

111 lines
4.2 KiB
PHP

<div class="ui modal" id="add_broker_modal">
<div class="header">
Agregar Operador
</div>
<div class="content">
<form class="ui form" id="add_broker_form">
<div class="fields">
<div class="field">
<label>RUT</label>
<div class="ui right labeled input">
<input type="text" name="rut" placeholder="RUT" required />
<div class="ui basic label">-<span id="digit"></span></div>
</div>
</div>
</div>
<div class="fields">
<div class="field">
<label>Nombre</label>
<input type="text" name="name" placeholder="Nombre" required />
</div>
<div class="field">
<label>Razón Social</label>
<input type="text" name="legal_name" placeholder="Razón Social" required />
</div>
</div>
<div class="fields">
<div class="field">
<label>Contacto</label>
<input type="text" name="contact" placeholder="Contacto" />
</div>
</div>
<div class="fields">
<div class="field">
<label>Correo</label>
<input type="email" name="email" placeholder="Correo" />
</div>
<div class="field">
<label>Teléfono</label>
<input type="text" name="phone" placeholder="Teléfono" />
</div>
</div>
</form>
</div>
<div class="actions">
<div class="ui deny button">
Cancelar
</div>
<div class="ui positive right labeled icon button">
Agregar
<i class="checkmark icon"></i>
</div>
</div>
</div>
@include('layout.body.scripts.rut')
@push('page_scripts')
<script>
class AddModal
{
ids
handler
constructor(handler)
{
this.handler = handler
this.ids = {
modal: handler.ids.modals.add,
form: handler.ids.forms.add.base,
digit: handler.ids.forms.add.digit
}
$(`#${this.ids.modal}`).modal({
onApprove: () => {
const form = document.getElementById(this.ids.form)
const data = {
rut: form.querySelector('[name="rut"]').value,
digit: Rut.digitoVerificador(form.querySelector('[name="rut"]').value),
name: form.querySelector('[name="name"]').value,
legal_name: form.querySelector('[name="legal_name"]').value,
contact: form.querySelector('[name="contact"]').value || '',
email: form.querySelector('[name="email"]').value || '',
phone: form.querySelector('[name="phone"]').value || ''
}
this.handler.execute().add(data)
}
})
const value = document.querySelector(`#${this.ids.form} input[name="rut"]`).value
this.update().digit(value)
this.watch().rut()
}
update() {
return {
digit: value => {
if (value.length > 3) {
document.getElementById(this.ids.digit).textContent = Rut.digitoVerificador(value)
}
}
}
}
watch() {
return {
rut: () => {
document.querySelector(`#${this.ids.form} input[name="rut"]`).addEventListener('input', event => {
const value = event.currentTarget.value
this.update().digit(value)
})
}
}
}
}
</script>
@endpush