Vistas
This commit is contained in:
Juan Pablo Vial
83
app/resources/views/ventas/escrituras/abono/cuotas.blade.php
Normal file
83
app/resources/views/ventas/escrituras/abono/cuotas.blade.php
Normal file
@ -0,0 +1,83 @@
|
|||||||
|
@extends('ventas.base')
|
||||||
|
|
||||||
|
@section('venta_subtitle')
|
||||||
|
Cuotas - Abono a Escritura
|
||||||
|
@endsection
|
||||||
|
|
||||||
|
@section('venta_content')
|
||||||
|
<table class="ui table">
|
||||||
|
<thead>
|
||||||
|
<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">
|
||||||
|
<button class="ui green icon button" id="add_button">
|
||||||
|
<i class="plus icon"></i>
|
||||||
|
</button>
|
||||||
|
</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="right aligned">
|
||||||
|
<button class="ui 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}}">
|
||||||
|
<i class="remove icon"></i>
|
||||||
|
</button>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
@endforeach
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
|
||||||
|
@include('ventas.escrituras.abono.cuotas.add_modal')
|
||||||
|
@include('ventas.escrituras.abono.cuotas.edit_modal')
|
||||||
|
@endsection
|
||||||
|
|
||||||
|
@push('page_scripts')
|
||||||
|
<script>
|
||||||
|
$(document).ready(function () {
|
||||||
|
const addModal = new AddModal({
|
||||||
|
modal: '#add_cuota_modal',
|
||||||
|
form: '#add_cuota_form',
|
||||||
|
fecha: '#add_fecha',
|
||||||
|
})
|
||||||
|
const editModal = new EditModal({
|
||||||
|
table: 'cuotas',
|
||||||
|
modal: '#edit_cuota_modal',
|
||||||
|
form: '#edit_cuota_form',
|
||||||
|
fecha: '#edit_fecha',
|
||||||
|
estado: '#edit_estado'
|
||||||
|
})
|
||||||
|
|
||||||
|
document.getElementById('add_button').addEventListener('click', clickEvent => {
|
||||||
|
addModal.draw()
|
||||||
|
})
|
||||||
|
Array.from(document.getElementsByClassName('edit_button')).forEach(button => {
|
||||||
|
button.addEventListener('click', clickEvent => {
|
||||||
|
const id = $(clickEvent.currentTarget).data('id')
|
||||||
|
editModal.getData({cuota_id: id})
|
||||||
|
})
|
||||||
|
})
|
||||||
|
Array.from(document.getElementsByClassName('remove_button')).forEach(button => {
|
||||||
|
button.addEventListener('click', clickEvent => {
|
||||||
|
const id = $(clickEvent.currentTarget).data('id')
|
||||||
|
const url = `{{$urls->api}}/venta/{{$venta->id}}/cuota/${id}`
|
||||||
|
const method = 'delete'
|
||||||
|
console.debug(url)
|
||||||
|
})
|
||||||
|
})
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
@endpush
|
||||||
@ -0,0 +1,94 @@
|
|||||||
|
<div class="ui modal" id="add_cuota_modal">
|
||||||
|
<div class="header">
|
||||||
|
Agregar Cuota
|
||||||
|
</div>
|
||||||
|
<div class="content">
|
||||||
|
<form class="ui form" id="add_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="add_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>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
<div class="actions">
|
||||||
|
<div class="ui negative button">
|
||||||
|
Cancelar
|
||||||
|
</div>
|
||||||
|
<div class="ui positive right labeled icon button">
|
||||||
|
Agregar
|
||||||
|
<i class="add icon"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
@push('page_scripts')
|
||||||
|
<script>
|
||||||
|
class AddModal {
|
||||||
|
props
|
||||||
|
|
||||||
|
constructor(props) {
|
||||||
|
this.setup(props)
|
||||||
|
}
|
||||||
|
draw() {
|
||||||
|
$(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'))
|
||||||
|
const url = `{{$urls->api}}/venta/{{$venta->id}}/escritura/cuotas/add`
|
||||||
|
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()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
$(this.props.form).submit(event => {
|
||||||
|
event.preventDefault()
|
||||||
|
this.save()
|
||||||
|
return false
|
||||||
|
})
|
||||||
|
$(this.props.fecha).calendar(calendar_date_options)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
@endpush
|
||||||
@ -0,0 +1,138 @@
|
|||||||
|
<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
|
||||||
@ -14,6 +14,7 @@
|
|||||||
<p>Crédito {{$format->ufs($venta->formaPago()->credito->pago->valor())}}</p>
|
<p>Crédito {{$format->ufs($venta->formaPago()->credito->pago->valor())}}</p>
|
||||||
@endif
|
@endif
|
||||||
</div>
|
</div>
|
||||||
|
<a href="{{$urls->base}}/venta/{{$venta->id}}/escritura/cuotas" class="ui small green button"><i class="plus icon"></i> Agregar Cuotas</a>
|
||||||
<form class="ui form" id="add_form">
|
<form class="ui form" id="add_form">
|
||||||
<div class="three wide field">
|
<div class="three wide field">
|
||||||
<label for="fecha">Fecha</label>
|
<label for="fecha">Fecha</label>
|
||||||
|
|||||||
Reference in New Issue
Block a user