Cartolas
This commit is contained in:
@ -0,0 +1,402 @@
|
||||
@extends('layout.base')
|
||||
|
||||
@section('page_content')
|
||||
<div class="ui container">
|
||||
<h1 class="ui header">Asignar Centros de Costos</h1>
|
||||
<form class="ui form" id="asignar_form">
|
||||
<div class="ui grid">
|
||||
<div class="fourteen wide column">
|
||||
<div class="fields">
|
||||
<div class="five wide field">
|
||||
<label>Inmobiliaria</label>
|
||||
<div class="ui selection search dropdown" id="inmobiliaria">
|
||||
<input type="hidden" name="inmobiliaria"/>
|
||||
<i class="dropdown icon"></i>
|
||||
<div class="default text">Inmobiliaria</div>
|
||||
<div class="menu">
|
||||
@foreach ($inmobiliarias as $inmobiliaria)
|
||||
<div class="item" data-value="{{$inmobiliaria->rut}}">{{$inmobiliaria->razon}}</div>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="two wide field">
|
||||
<label>Banco</label>
|
||||
<div class="ui selection search dropdown" id="banco">
|
||||
<input type="hidden" name="banco"/>
|
||||
<i class="dropdown icon"></i>
|
||||
<div class="default text">Banco</div>
|
||||
<div class="menu"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>Mes</label>
|
||||
<div class="ui calendar" id="mes">
|
||||
<div class="ui icon input">
|
||||
<i class="calendar icon"></i>
|
||||
<input type="text" name="mes"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="file">Cartola</label>
|
||||
<input type="file" name="file" id="file" class="ui invisible file input" />
|
||||
<label for="file" class="ui icon button">
|
||||
<i class="file icon"></i>
|
||||
Cargar
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="two wide middle aligned column">
|
||||
<button class="ui icon button">
|
||||
Procesar
|
||||
<i class="sync icon"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
<div class="ui two columns grid">
|
||||
<div class="column">
|
||||
<button class="ui icon button" id="export_button">
|
||||
<i class="file excel icon"></i>
|
||||
Exportar
|
||||
</button>
|
||||
</div>
|
||||
<div class="right aligned column">
|
||||
<div class="ui inline active loader" id="loader"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ui fluid container">
|
||||
<table class="ui table" id="tabla_movimientos">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Fecha</th>
|
||||
<th>Glosa</th>
|
||||
<th>Documento</th>
|
||||
<th class="right aligned">Cargo</th>
|
||||
<th class="right aligned">Abono</th>
|
||||
<th class="right aligned">Saldo</th>
|
||||
<th>Centro de Costo</th>
|
||||
<th>Detalle</th>
|
||||
<th>Orden</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="movimientos"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
@include('layout.head.styles.datatables')
|
||||
@include('layout.body.scripts.datatables')
|
||||
|
||||
@push('page_scripts')
|
||||
<script>
|
||||
const cartola = {
|
||||
ids: {
|
||||
table: {
|
||||
base: '',
|
||||
body: ''
|
||||
},
|
||||
form: {
|
||||
base: '',
|
||||
inmobiliaria: '',
|
||||
banco: '',
|
||||
mes: '',
|
||||
},
|
||||
button: '',
|
||||
loader: '',
|
||||
},
|
||||
data: {
|
||||
inmobiliaria: {
|
||||
rut: 0,
|
||||
razon: ''
|
||||
},
|
||||
banco: {
|
||||
id: 0,
|
||||
nombre: ''
|
||||
},
|
||||
mes: '',
|
||||
movimientos: [],
|
||||
centrosCostos: {
|
||||
ingresos: JSON.parse('{!! json_encode(array_values(array_map(function(\Incoviba\Model\CentroCosto $centroCosto) {
|
||||
return [
|
||||
'id' => $centroCosto->id,
|
||||
'descripcion' => $centroCosto->descripcion
|
||||
];
|
||||
}, array_filter($centrosCostos, function(\Incoviba\Model\CentroCosto $centroCosto) {
|
||||
return $centroCosto->tipoCentro->descripcion === 'Ingreso';
|
||||
})))) !!}'),
|
||||
egresos: JSON.parse('{!! json_encode(array_values(array_map(function(\Incoviba\Model\CentroCosto $centroCosto) {
|
||||
return [
|
||||
'id' => $centroCosto->id,
|
||||
'descripcion' => $centroCosto->descripcion
|
||||
];
|
||||
}, array_filter($centrosCostos, function(\Incoviba\Model\CentroCosto $centroCosto) {
|
||||
return $centroCosto->tipoCentro->descripcion === 'Egreso';
|
||||
})))) !!}'),
|
||||
}
|
||||
},
|
||||
get() {
|
||||
return {
|
||||
bancos: inmobiliaria_rut => {
|
||||
const url = '{{$urls->api}}/inmobiliaria/' + inmobiliaria_rut + '/cuentas'
|
||||
$(this.ids.loader).show()
|
||||
return fetchAPI(url).then(response => {
|
||||
$(this.ids.loader).hide()
|
||||
if (!response) {
|
||||
return
|
||||
}
|
||||
return response.json().then(json => {
|
||||
if (json.cuentas.length === 0) {
|
||||
return
|
||||
}
|
||||
$(this.ids.form.banco).dropdown('change values', json.cuentas.map(cuenta => {
|
||||
return {value: cuenta.banco.id, text: cuenta.banco.nombre, name: cuenta.banco.nombre}
|
||||
})).dropdown('refresh')
|
||||
})
|
||||
})
|
||||
},
|
||||
firstDate: inmobiliaria_rut => {
|
||||
const url = '{{$urls->api}}/inmobiliaria/' + inmobiliaria_rut + '/proyectos'
|
||||
$(this.ids.loader).show()
|
||||
return fetchAPI(url).then(response => {
|
||||
$(this.ids.loader).hide()
|
||||
if (!response) {
|
||||
return
|
||||
}
|
||||
return response.json().then(json => {
|
||||
if (json.proyectos.length === 0) {
|
||||
return
|
||||
}
|
||||
const min = json.proyectos.reduce((min, proyecto) => {
|
||||
const date = new Date(proyecto.current_estado.fecha.date)
|
||||
if (min > date.getTime()) {
|
||||
return date.getTime()
|
||||
}
|
||||
return min
|
||||
}, (new Date()).getTime())
|
||||
$(this.ids.form.mes).calendar('set minDate', new Date(min))
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
parse() {
|
||||
return {
|
||||
cartola: event => {
|
||||
event.preventDefault()
|
||||
const body = new FormData(document.getElementById('asignar_form'))
|
||||
body.set('mes', $('#mes').calendar('get date').toISOString())
|
||||
const url = '{{$urls->api}}/contabilidad/cartolas/procesar'
|
||||
$(this.ids.loader).show()
|
||||
fetchAPI(url, {method: 'post', body}).then(response => {
|
||||
$(this.ids.loader).hide()
|
||||
if (!response) {
|
||||
return
|
||||
}
|
||||
return response.json().then(json => {
|
||||
if (json.movimientos.length === 0) {
|
||||
return
|
||||
}
|
||||
this.data.movimientos = []
|
||||
json.movimientos.forEach((row, idx) => {
|
||||
const fecha = new Date(row.fecha)
|
||||
fecha.setDate(fecha.getDate() + 1)
|
||||
this.data.movimientos[idx] = {
|
||||
fecha: fecha,
|
||||
glosa: row['descripción'],
|
||||
documento: row['número de documentos'],
|
||||
cargo: row.cargos,
|
||||
abono: row.abonos,
|
||||
saldo: row.saldos
|
||||
}
|
||||
})
|
||||
this.draw().cartola()
|
||||
})
|
||||
})
|
||||
return false
|
||||
}
|
||||
}
|
||||
},
|
||||
export() {
|
||||
return {
|
||||
cartola: event => {
|
||||
const url = '{{$urls->api}}/contabilidad/cartola/exportar'
|
||||
const body = new FormData()
|
||||
body.set('inmobiliaria', $(this.ids.form.inmobiliaria).dropdown('get value'))
|
||||
body.set('banco', $(this.ids.form.banco).dropdown('get value'))
|
||||
body.set('mes', $(this.ids.form.mes).calendar('get date').toISOString())
|
||||
const movimientos = this.data.movimientos.map((movimiento, idx) => {
|
||||
const temp = structuredClone(movimiento)
|
||||
temp.fecha = movimiento.fecha.toISOString()
|
||||
let centro = $(".centro[data-index='" + (idx+1) + "']").dropdown('get value')
|
||||
if (centro.length === 0) {
|
||||
centro = ''
|
||||
}
|
||||
temp.centro_costo = centro
|
||||
let detalle = $("[name='detalle" + (idx+1) + "']").val()
|
||||
if (typeof detalle === 'undefined') {
|
||||
detalle = ''
|
||||
}
|
||||
temp.detalle = detalle
|
||||
return temp
|
||||
})
|
||||
body.set('movimientos', JSON.stringify(movimientos))
|
||||
$(this.ids.loader).show()
|
||||
fetchAPI(url, {method: 'post', body}).then(response => {
|
||||
$(this.ids.loader).hide()
|
||||
if (!response) {
|
||||
return
|
||||
}
|
||||
response.json().then(json => {
|
||||
if (json.filename === '') {
|
||||
return
|
||||
}
|
||||
const anchor = document.createElement('a')
|
||||
anchor.href = ['/uploads/', json.filename].join('/')
|
||||
anchor.download = 'Cartola ' + this.data.banco.nombre + ' - ' + this.data.inmobiliaria.razon + ' - ' + this.data.mes + '.xlsx'
|
||||
document.body.appendChild(anchor)
|
||||
anchor.click()
|
||||
anchor.remove()
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
draw() {
|
||||
return {
|
||||
cartola: () => {
|
||||
const table = $(this.ids.table.base)
|
||||
table.DataTable().clear()
|
||||
table.DataTable().destroy()
|
||||
const tbody = $(this.ids.table.body)
|
||||
tbody.html('')
|
||||
const dateFormatter = new Intl.DateTimeFormat('es-CL', {
|
||||
year: 'numeric',
|
||||
month: 'numeric',
|
||||
day: 'numeric'
|
||||
})
|
||||
const numberFormatter = new Intl.NumberFormat('es-CL', {minimumFractionDigits: 0, maximumFractionDigits: 0})
|
||||
this.data.movimientos.forEach((row, idx) => {
|
||||
tbody.append(
|
||||
$('<tr></tr>').append(
|
||||
$('<td></td>').html(dateFormatter.format(row.fecha))
|
||||
).append(
|
||||
$('<td></td>').html(row.glosa)
|
||||
).append(
|
||||
$('<td></td>').html(row.documento)
|
||||
).append(
|
||||
$('<td></td>').addClass('right aligned').html(row.cargo === 0 ? '' : numberFormatter.format(row.cargo))
|
||||
).append(
|
||||
$('<td></td>').addClass('right aligned').html(row.abono === 0 ? '' : numberFormatter.format(row.abono))
|
||||
).append(
|
||||
$('<td></td>').addClass('right aligned').html(row.saldo === 0 ? '' : numberFormatter.format(row.saldo))
|
||||
).append(
|
||||
$('<td></td>').append(this.draw().centrosDropdown(idx + 1, row.cargo === 0))
|
||||
).append(
|
||||
$('<td></td>').append(
|
||||
$('<div></div>').addClass('ui fluid input').append(
|
||||
$('<input />').attr('type', 'text').attr('name', 'detalle' + (idx + 1))
|
||||
)
|
||||
)
|
||||
).append(
|
||||
$('<td></td>').html(idx + 1)
|
||||
)
|
||||
)
|
||||
})
|
||||
table.DataTable({
|
||||
pageLength: 100,
|
||||
order: [[8, 'asc']],
|
||||
columnDefs: [
|
||||
{
|
||||
targets: [1, 2, 3, 4, 5],
|
||||
width: '10%'
|
||||
},
|
||||
{
|
||||
targets: [1],
|
||||
width: '20%'
|
||||
},
|
||||
{
|
||||
targets: [8],
|
||||
visible: false
|
||||
}
|
||||
],
|
||||
})
|
||||
},
|
||||
centrosDropdown: (idx, ingreso=true) => {
|
||||
const menu = $('<div></div>').addClass('menu')
|
||||
let centros = this.data.centrosCostos.ingresos
|
||||
if (!ingreso) {
|
||||
centros = this.data.centrosCostos.egresos
|
||||
}
|
||||
centros.forEach(centro => {
|
||||
menu.append(
|
||||
$('<div></div>').addClass('item').attr('data-value', centro.id).html(centro.id + ' - ' + centro.descripcion)
|
||||
)
|
||||
})
|
||||
return $('<div></div>').addClass('ui selection search dropdown centro').attr('data-index', idx).append(
|
||||
$('<input />').attr('type', 'hidden').attr('name', 'centro' + idx)
|
||||
).append(
|
||||
$('<i></i>').addClass('dropdown icon')
|
||||
).append(
|
||||
$('<div></div>').addClass('default text').html('Centro de Costos')
|
||||
).append(menu).dropdown()
|
||||
}
|
||||
}
|
||||
},
|
||||
setup({ids}) {
|
||||
this.ids = ids
|
||||
$(this.ids.form.inmobiliaria).dropdown({
|
||||
fireOnInit: true,
|
||||
onChange: (value, text, $choice) => {
|
||||
this.data.inmobiliaria.rut = value
|
||||
this.data.inmobiliaria.razon = text
|
||||
this.get().bancos(value)
|
||||
this.get().firstDate(value)
|
||||
},
|
||||
})
|
||||
$(this.ids.form.banco).dropdown({
|
||||
fireOnInit: true,
|
||||
onChange: (value, text, $choice) => {
|
||||
this.data.banco.id = value
|
||||
this.data.banco.nombre = text
|
||||
}
|
||||
})
|
||||
$(this.ids.loader).hide()
|
||||
|
||||
calendar_date_options['type'] = 'month'
|
||||
const lastMonth = new Date()
|
||||
lastMonth.setDate(0)
|
||||
calendar_date_options['maxDate'] = lastMonth
|
||||
calendar_date_options['onChange'] = (date, text, mode) => {
|
||||
this.data.mes = text
|
||||
}
|
||||
$(this.ids.form.mes).calendar(calendar_date_options)
|
||||
$(this.ids.form.base).submit(this.parse().cartola)
|
||||
$(this.ids.table.base).DataTable()
|
||||
|
||||
$(this.ids.button).click(this.export().cartola)
|
||||
}
|
||||
}
|
||||
$(document).ready(() => {
|
||||
cartola.setup({
|
||||
ids: {
|
||||
table: {
|
||||
base: '#tabla_movimientos',
|
||||
body: '#movimientos'
|
||||
},
|
||||
form: {
|
||||
base: '#asignar_form',
|
||||
inmobiliaria: '#inmobiliaria',
|
||||
banco: '#banco',
|
||||
mes: '#mes',
|
||||
},
|
||||
button: '#export_button',
|
||||
loader: '#loader'
|
||||
}
|
||||
})
|
||||
})
|
||||
</script>
|
||||
@endpush
|
||||
Reference in New Issue
Block a user