Files
oficial/app/resources/views/ventas/escrituras/abono/cuotas/edit_modal.blade.php
Juan Pablo Vial 3ff5f3f1a6 Vistas
2024-11-28 14:07:07 -03:00

139 lines
5.4 KiB
PHP

<div class="ui modal" id="edit_cuota_modal">
<div class="header">
Editar Cuota <span class="numero"></span>
</div>
<div class="content">
<form class="ui form" id="edit_cuota_form">
<input type="hidden" name="id" />
<div class="two wide field">
<label>Número</label>
<input type="text" name="numero" />
</div>
<div class="three wide field">
<label>Fecha</label>
<div class="ui calendar" id="edit_fecha">
<div class="ui icon input">
<i class="calendar icon"></i>
<input type="text" name="fecha" />
</div>
</div>
</div>
<div class="three wide field">
<label>Valor $</label>
<div class="ui left labeled input">
<div class="ui basic label">$</div>
<input type="text" name="valor" />
</div>
</div>
<div class="three wide field">
<label>Valor UF</label>
<div class="ui left labeled input">
<div class="ui basic label">UF</div>
<input type="text" name="uf" />
</div>
</div>
<div class="three wide field">
<label>Estado</label>
<div class="ui selection search dropdown" id="edit_estado">
<i class="dropdown icon"></i>
<input type="hidden" name="estado" />
<div class="default text">Estado</div>
<div class="menu">
@foreach($estados as $estado)
<div class="item" data-value="{{$estado->id}}">{{$estado->nombre}}</div>
@endforeach
</div>
</div>
</div>
</form>
</div>
<div class="actions">
<div class="ui negative button">
Cancelar
</div>
<div class="ui positive right labeled icon button">
Editar
<i class="edit icon"></i>
</div>
</div>
</div>
@push('page_scripts')
<script>
class EditModal {
props
data
constructor(props) {
this.setup(props)
this.data = null
}
getData({cuota_id}) {
const table = document.getElementById(this.props.table)
const row = table.querySelector(`row[data-id='${cuota_id}']`)
this.data = {
id: cuota_id,
numero: row.querySelector('.numero').datasets.value,
fecha: new Date(row.querySelector('.fecha').datasets.value),
valor: row.querySelector('.valor').datasets.value,
uf: row.querySelector('.valor_uf').datasets.value,
estado: row.querySelector('.estado').datasets.value
}
this.draw()
}
draw() {
const form = document.getElementById(this.props.form)
form.querySelector('input[name="id"]').value = this.data.id
form.querySelector('input[name="numero"]').value = this.data.numero
$(this.props.fecha).calendar('set date', this.data.fecha)
form.querySelector('input[name="valor"]').value = this.data.valor
form.querySelector('input[name="uf"]').value = this.data.uf
$(this.props.estado).dropdown('set selected', this.data.estado)
$(this.props.modal).find('.header .numero').text(this.data.numero)
$(this.props.modal).modal('show')
}
save() {
const form = document.getElementById(this.props.form)
const body = new FormData(form)
const fecha = $(this.props.fecha).calendar('get date')
body.set('fecha', fecha.getFullYear() + '-' + (fecha.getMonth() + 1).toString().padStart(2, '0') + '-' + fecha.getDate().toString().padStart(2, '0'))
body.set('estado', $(this.props.estado).dropdown('get value'))
const url = `{{$urls->api}}/venta/{{$venta->id}}/escritura/cuota/${this.data.id}/edit`
const method = 'post'
APIClient.fetch(url, {method, body}).then(response => {
if (!response) {
return
}
return response.json().then(json => {
if (json.success) {
window.location.reload()
}
})
})
}
setup(ids) {
this.props = ids
$(this.props.modal).modal({
onApprove: () => {
this.save()
},
onHidden: () => {
this.data = null
}
})
$(this.props.form).submit(event => {
event.preventDefault()
this.save()
return false
})
$(this.props.fecha).calendar(calendar_date_options)
$(this.props.estado).dropdown()
}
}
</script>
@endpush