FIX: Editar cuotas

This commit is contained in:
Juan Pablo Vial
2024-11-28 19:14:14 -03:00
parent 52de72b507
commit 8028b673fb
6 changed files with 130 additions and 38 deletions

View File

@ -10,29 +10,60 @@
<tr>
<th rowspan="2">#</th>
<th rowspan="2">Fecha</th>
<th>Valor $</th>
<th>UF</th>
<th rowspan="2">Estado</th>
<th class="right aligned">
<th colspan="2">Valor</th>
<th rowspan="2" colspan="2">Estado</th>
<th class="right aligned" rowspan="2">
<button class="ui tertiary green icon button" id="add_button">
<i class="plus icon"></i>
</button>
</th>
</tr>
<tr>
<th class="right aligned">$</th>
<th class="right aligned">UF</th>
</tr>
</thead>
<tbody id="cuotas">
@foreach ($cuotas as $cuota)
<tr data-id="{{$cuota->id}}">
<td class="numero" rowspan="2" data-value="{{$cuota->numero}}">{{$cuota->numero}}</td>
<td class="fecha" rowspan="2" data-value="{{$cuota->pago->fecha->format('Y-m-d')}}">{{$cuota->pago->fecha->format('d-m-Y')}}</td>
<td class="valor" data-value="{{$cuota->pago->valor}}">{{$format->pesos($cuota->pago->valor)}}</td>
<td class="valor_uf" data-value="{{$cuota->pago->valor()}}">{{$format->ufs($cuota->pago->valor())}}</td>
<td class="estado" rowspan="2" data-value="{{$cuota->pago->currentEstado->tipoEstadoPago->id}}">{{ucwords($cuota->pago->currentEstado->tipoEstadoPago->descripcion)}}</td>
<td class="numero" data-value="{{$cuota->numero}}">{{$cuota->numero}}</td>
<td class="fecha" data-value="{{$cuota->pago->fecha->format('Y-m-d')}}">{{$cuota->pago->fecha->format('d-m-Y')}}</td>
<td class="valor right aligned" data-value="{{$cuota->pago->valor}}">{{$format->pesos($cuota->pago->valor)}}</td>
<td class="valor_uf right aligned" data-value="{{$cuota->pago->valor()}}">{{$format->ufs($cuota->pago->valor())}}</td>
<td class="estado{{$cuota->pago->currentEstado->tipoEstadoPago->descripcion === 'no pagado' ? ' warning' :
($cuota->pago->currentEstado->tipoEstadoPago->descripcion === 'abonado' ? ' positive' : '')}}" rowspan="2"
data-value="{{$cuota->pago->currentEstado->tipoEstadoPago->id}}">
{{ucwords($cuota->pago->currentEstado->tipoEstadoPago->descripcion)}}
@if (in_array($cuota->pago->currentEstado->tipoEstadoPago->descripcion, ['abonado', 'depositado']))
<br />
{{$cuota->pago->currentEstado->fecha->format('d-m-Y')}}
@endif
</td>
<td class="collapsing">
@if (in_array($cuota->pago->currentEstado->tipoEstadoPago->descripcion, ['depositado', 'no pagado']))
<form class="ui compact form avance_pago_form" data-id="{{$cuota->id}}"
data-pago="{{$cuota->pago->id}}"
data-estado="{{$cuota->pago->currentEstado->tipoEstadoPago->descripcion}}">
<div class="inline field">
<div class="ui calendar">
<div class="ui icon input">
<input type="text" name="fecha_avance_pago{{$cuota->id}}" />
<i class="calendar icon"></i>
</div>
</div>
<button class="ui tertiary green icon button accept_button" data-id="{{$cuota->id}}"><i class="check icon"></i></button>
@if ($cuota->pago->currentEstado->tipoEstadoPago->descripcion === 'depositado')
<button class="ui tertiary red icon button cancel_button" data-id="{{$cuota->id}}"><i class="remove icon"></i></button>
@endif
</div>
</form>
@endif
</td>
<td class="right aligned">
<button class="ui icon button edit_button" data-id="{{$cuota->id}}">
<button class="ui tertiary icon button edit_button" data-id="{{$cuota->id}}">
<i class="edit icon"></i>
</button>
<button class="ui red icon button remove_button" data-id="{{$cuota->id}}">
<button class="ui tertiary red icon button remove_button" data-id="{{$cuota->id}}">
<i class="remove icon"></i>
</button>
</td>
@ -78,6 +109,58 @@
console.debug(url)
})
})
Array.from(document.getElementsByClassName('avance_pago_form')).forEach(form => {
form.addEventListener('submit', submitEvent => {
submitEvent.preventDefault()
return false
})
const cdo = structuredClone(calendar_date_options)
cdo['initialDate'] = new Date()
cdo['maxDate'] = new Date()
@if ($cuota->pago->currentEstado->tipoEstadoPago->descripcion === 'depositado')
cdo['initialDate'] = new Date('{{$cuota->pago->currentEstado->fecha->format('Y-m-d')}}')
@endif
$(form).find('.ui.calendar').calendar(cdo)
})
Array.from(document.getElementsByClassName('accept_button')).forEach(button => {
button.addEventListener('click', clickEvent => {
const id = $(clickEvent.currentTarget).data('id')
const method = 'post'
const form = Array.from(document.getElementsByClassName('avance_pago_form')).filter(form => parseInt(form.dataset.id) === id)[0]
const pago = form.dataset.pago
const estado = form.dataset.estado
const newEstado = estado === 'depositado' ? 'abonar' : 'depositar'
const url = `{{$urls->api}}/ventas/pago/${pago}/${newEstado}`
const body = new FormData()
const fecha = $(form).find('.ui.calendar').calendar('get date')[0]
body.set('fecha', fecha.getFullYear() + '-' + (fecha.getMonth() + 1).toString().padStart(2, '0') + '-' + fecha.getDate().toString().padStart(2, '0'))
APIClient.fetch(url, {method, body}).then(response => {
if (response.ok) {
return response.json().then(json => {
if (json.success) {
window.location.reload()
}
})
}
})
})
})
Array.from(document.getElementsByClassName('cancel_button')).forEach(button => {
button.addEventListener('click', clickEvent => {
const id = $(clickEvent.currentTarget).data('id')
const method = 'post'
const form = Array.from(document.getElementsByClassName('avance_pago_form')).filter(form => parseInt(form.dataset.id) === id)[0]
const pago = form.dataset.pago
const url = `{{$urls->api}}/ventas/pago/${pago}/devolver`
const body = new FormData()
const fecha = $(form).find('.ui.calendar').calendar('get date')[0]
body.set('fecha', fecha.getFullYear() + '-' + (fecha.getMonth() + 1).toString().padStart(2, '0') + '-' + fecha.getDate().toString().padStart(2, '0'))
console.debug(url, body)
})
})
})
</script>
@endpush

View File

@ -25,13 +25,6 @@
<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>
</form>
</div>
<div class="actions">

View File

@ -25,13 +25,6 @@
<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">
@ -70,14 +63,14 @@
}
getData({cuota_id}) {
const table = document.getElementById(this.props.table)
const row = table.querySelector(`row[data-id='${cuota_id}']`)
const row = table.querySelector(`tr[data-id='${cuota_id}']`)
const fecha = row.querySelector('.fecha').dataset.value.split('-')
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
numero: row.querySelector('.numero').dataset.value,
fecha: new Date(fecha[0], fecha[1] - 1, fecha[2]),
valor: row.querySelector('.valor').dataset.value,
estado: row.querySelector('.estado').dataset.value
}
this.draw()
@ -88,7 +81,6 @@
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)