Editar cuota

This commit is contained in:
Juan Pablo Vial
2024-10-23 08:39:11 -03:00
parent fe6a01b2fb
commit 389e60980e
5 changed files with 233 additions and 4 deletions

View File

@ -4,6 +4,12 @@
Cuotas - Pie
@endsection
@push('page_scripts')
<script>
const bancos = JSON.parse('{!! json_encode($bancos) !!}')
</script>
@endpush
@section('venta_content')
@if (count($asociadas) > 0)
<div class="ui grid">
@ -60,7 +66,12 @@
@if (in_array($cuota->pago->currentEstado->tipoEstadoPago->descripcion, ['anulado', 'reemplazado']))
class="disabled"
@endif >
<td>{{$cuota->numero}}</td>
<td>
{{$cuota->numero}}
<button class="ui mini tertiary icon button edit_cuota" data-cuota="{{$cuota->pago->id}}">
<i class="edit icon"></i>
</button>
</td>
<td>{{$cuota->pago->fecha->format('d-m-Y')}}</td>
<td>{{$cuota->pago->fecha->format('Y-m-d')}}</td>
<td>{{$cuota->pago->banco->nombre}}</td>
@ -172,6 +183,8 @@
<div class="ui tiny basic right aligned segment">
* Porcentaje calculado sobre el valor de la venta
</div>
@include('ventas.pies.cuotas.edit')
@endsection
@include('layout.head.styles.datatables')
@ -186,7 +199,11 @@
const tr = $("tr[data-pago='" + pago_id + "']")
tr.find(':nth-child(6)').html(valor)
tr.find(':nth-child(7)').attr('class', color).html(estado)
if (typeof color !== 'undefined') {
tr.find(':nth-child(7)').attr('class', color).html(estado)
} else {
tr.find(':nth-child(7)').html(estado)
}
if (remove_fecha) {
tr.find(':nth-child(8)').html(fecha)
}
@ -273,6 +290,44 @@
})
})
}
function editar(id, body) {
const url = '{{$urls->api}}/ventas/pago/' + id
return fetchAPI(url, {method: 'post', body}).then(response => {
if (!response) {
return
}
return response.json().then(json => {
if (!json.editado) {
return
}
const tr = $(`tr[data-pago='${json.pago.id}']`)
tr.find(':nth-child(1)').html(json.pago.numero)
const fecha = json.pago.fecha.split(' ')[0].split('-').reverse().join('-')
tr.find(':nth-child(2)').html(fecha)
tr.find(':nth-child(3)').html(json.pago.banco.nombre)
tr.find(':nth-child(4)').html(json.pago.identificador)
const pesosFormatter = Intl.NumberFormat('es-CL', {style: 'currency', currency: 'CLP'})
tr.find(':nth-child(5)').html(pesosFormatter.format(json.pago.valor))
const ufFormatter = Intl.NumberFormat('es-CL', {minimumFractionDigits: 2, maximumFractionDigits: 2})
tr.find(':nth-child(6)').html(ufFormatter.format(json.pago.valor_uf) + ' UF')
})
})
}
const editModal = new EditModal({id: '#edit_cuota_modal', approve: ({id, data}) => {
editar(id, data)
}})
$('.edit_cuota').on('click', clickEvent => {
const id = $(clickEvent.currentTarget).data('cuota')
const tr = $(`tr[data-pago='${id}']`)
const number = tr.find(':nth-child(1)').text().split('<')[0].trim()
const fecha = tr.find(':nth-child(2)').text()
const banco_id = bancos.filter(banco => banco.nombre === tr.find(':nth-child(3)').text())[0].id
const identificador = tr.find(':nth-child(4)').text()
const valor = parseInt(tr.find(':nth-child(5)').text().replace('$', '').replaceAll('.', '').trim())
editModal.open({id, number, fecha, banco_id, identificador, valor})
})
$('.fecha_estado').calendar({
type: 'date',
formatter: {

View File

@ -0,0 +1,108 @@
<div class="ui mini 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="field">
<label>Fecha de Pago</label>
<div class="ui calendar" id="edit_fecha">
<div class="ui icon input">
<input type="text" name="fecha" />
<i class="calendar icon"></i>
</div>
</div>
</div>
<div class="field">
<label>Banco</label>
<div class="ui search selection dropdown" id="edit_banco">
<i class="dropdown icon"></i>
<input type="hidden" name="banco" />
<div class="default text">Banco</div>
<div class="menu">
@foreach($bancos as $banco)
<div class="item" data-value="{{ $banco->id }}">{{ $banco->nombre }}</div>
@endforeach
</div>
</div>
</div>
<div class="field">
<label>Identificador</label>
<input type="text" name="identificador" />
</div>
<div class="field">
<label>Valor</label>
<div class="ui labeled input">
<div class="ui label">$</div>
<input type="text" name="valor" />
</div>
</div>
</form>
</div>
<div class="actions">
<button class="ui positive approve icon button">
<i class="check icon"></i>
</button>
<button class="ui negative cancel icon button">
<i class="times icon"></i>
</button>
</div>
</div>
@push('page_scripts')
<script>
class EditModal {
id
approveCallback
data
constructor({id, approve}) {
this.id = id
this.approveCallback = approve;
$(this.id).modal({
onApprove: $element => {
return this.approve($element)
}
})
$(this.id).find('#edit_fecha').calendar(calendar_date_options)
$(this.id).find('#edit_banco').dropdown()
}
open({id, number, fecha, banco_id, identificador, valor}) {
this.data = {id, fecha: fecha.split('-').reverse().join('-'), banco: banco_id, identificador, valor}
$(this.id).find('.numero').text(number)
$(this.id).find('input[name="id"]').val(id)
const dateParts = fecha.split('-')
const date = new Date(dateParts[2], dateParts[1] - 1, dateParts[0])
$(this.id).find('#edit_fecha').calendar('set date', date)
$(this.id).find('#edit_banco').dropdown('set selected', banco_id)
$(this.id).find('input[name="identificador"]').val(identificador)
$(this.id).find('input[name="valor"]').val(valor)
$(this.id).modal('show')
}
approve($element) {
const $form = $(this.id).find('#edit_cuota_form')
const temp = new FormData(document.getElementById('edit_cuota_form'))
const date = $form.find('#edit_fecha').calendar('get date')
temp.set('fecha', date.getFullYear() + '-' + (date.getMonth() + 1).toString().padStart(2, '0') + '-' + date.getDate().toString().padStart(2, '0'))
temp.set('banco', $form.find('#edit_banco').dropdown('get value'))
temp.set('valor', temp.get('valor'))
const data = new FormData()
Object.entries(this.data).forEach(([key, value]) => {
if (key === 'id') {
return;
}
if (temp.get(key) === value.toString()) {
return;
}
data.set(key, temp.get(key))
})
return this.approveCallback({id: this.data.id, data})
}
}
</script>
@endpush