Subir cartolas procesadas
This commit is contained in:
Juan Pablo Vial
300
app/resources/views/contabilidad/cartolas/import.blade.php
Normal file
300
app/resources/views/contabilidad/cartolas/import.blade.php
Normal file
@ -0,0 +1,300 @@
|
||||
@extends('layout.base')
|
||||
|
||||
@section('page_content')
|
||||
<div class="ui container">
|
||||
<h1 class="ui header">
|
||||
Importar Cartola Diaria
|
||||
</h1>
|
||||
<div class="ui grid">
|
||||
<div class="right aligned sixteen wide column">
|
||||
<button class="ui green icon button" id="add_button">
|
||||
Agregar
|
||||
<i class="plus icon"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<form class="ui form" id="cartola_form">
|
||||
</form>
|
||||
<div class="ui two columns grid">
|
||||
<div class="column">
|
||||
<button class="ui icon button" id="process_button">
|
||||
<i class="file excel icon"></i>
|
||||
Procesar
|
||||
</button>
|
||||
</div>
|
||||
<div class="right aligned column">
|
||||
<div class="ui inline active loader" id="loader"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<table class="ui celled table" id="movimientos" style="display: none;">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Fecha</th>
|
||||
<th>Glosa</th>
|
||||
<th class="right aligned">Cargo</th>
|
||||
<th class="right aligned">Abono</th>
|
||||
<th class="right aligned">Saldo</th>
|
||||
<th class="center aligned">Centro de Costo</th>
|
||||
<th>Categoría</th>
|
||||
<th>Detalle</th>
|
||||
<th>RUT</th>
|
||||
<th>Nombres</th>
|
||||
<th class="center aligned">Identificador</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
</tbody>
|
||||
</table>
|
||||
@endsection
|
||||
|
||||
@push('page_scripts')
|
||||
<script>
|
||||
class Cartola {
|
||||
props
|
||||
ids
|
||||
constructor({index, ids}) {
|
||||
this.props = {
|
||||
index
|
||||
}
|
||||
this.ids = ids
|
||||
}
|
||||
get sociedad() {
|
||||
return $(`#${this.ids.sociedad}${this.props.index}`).dropdown('get value')
|
||||
}
|
||||
get banco() {
|
||||
return $(`#${this.ids.banco}${this.props.index}`).dropdown('get value')
|
||||
}
|
||||
get file() {
|
||||
return $(`#archivo${this.props.index}`)[0].files[0]
|
||||
}
|
||||
get data() {
|
||||
return {
|
||||
sociedad_rut: this.sociedad,
|
||||
banco_id: this.banco,
|
||||
file: this.file,
|
||||
index: this.props.index
|
||||
}
|
||||
}
|
||||
draw({sociedades, bancos}) {
|
||||
const output = [
|
||||
`<div class="fields" data-idx="${this.props.index}">`,
|
||||
'<div class="six wide field">',
|
||||
'<label>Sociedad</label>',
|
||||
`<div class="ui search selection dropdown" id="${this.ids.sociedad}${this.props.index}">`,
|
||||
`<input type="hidden" name="sociedad_rut${this.props.index}" />`,
|
||||
'<i class="dropdown icon"></i>',
|
||||
'<div class="default text">Sociedad</div>',
|
||||
'<div class="menu">',
|
||||
...sociedades.map(sociedad => {
|
||||
return [
|
||||
`<div class="item" data-value="${sociedad.rut}">${sociedad.razon}</div>`
|
||||
].join("\n")
|
||||
}),
|
||||
'</div>',
|
||||
'</div>',
|
||||
'</div>',
|
||||
'<div class="two wide field">',
|
||||
'<label>Banco</label>',
|
||||
`<div class="ui search selection dropdown" id="${this.ids.banco}${this.props.index}">`,
|
||||
`<input type="hidden" name="banco_id${this.props.index}" />`,
|
||||
'<i class="dropdown icon"></i>',
|
||||
'<div class="default text">Banco</div>',
|
||||
'<div class="menu">',
|
||||
...bancos.map(banco => {
|
||||
return [
|
||||
`<div class="item" data-value="${banco.id}">${banco.nombre}</div>`
|
||||
].join("\n")
|
||||
}),
|
||||
'</div>',
|
||||
'</div>',
|
||||
'</div>',
|
||||
'<div class="six wide field">',
|
||||
'<label>Archivo</label>',
|
||||
'<div class="ui file action input">',
|
||||
`<input type="file" name="archivo${this.props.index}" id="archivo${this.props.index}" />`,
|
||||
'<div class="ui icon button" id="archivo_button">',
|
||||
'<i class="file icon"></i>',
|
||||
'Seleccionar',
|
||||
'</div>',
|
||||
'</div>',
|
||||
'</div>',
|
||||
]
|
||||
if (this.props.index > 1) {
|
||||
output.push(...[
|
||||
'<div class="field">',
|
||||
'<label> </label>',
|
||||
`<button class="ui red icon button remove" data-idx="${this.props.index}">`,
|
||||
'<i class="trash icon"></i>',
|
||||
'</button>',
|
||||
'</div>',
|
||||
])
|
||||
}
|
||||
output.push('</div>')
|
||||
return output.join("\n")
|
||||
}
|
||||
activate() {
|
||||
$(`#${this.ids.sociedad}${this.props.index}`).dropdown()
|
||||
$(`#${this.ids.banco}${this.props.index}`).dropdown()
|
||||
if (this.props.index > 1) {
|
||||
$(`.${this.ids.buttons.remove}[data-idx="${this.props.index}"]`).click(clickEvent => {
|
||||
const index = $(clickEvent.currentTarget).data('idx')
|
||||
this.remove(index)
|
||||
})
|
||||
}
|
||||
}
|
||||
remove(idx) {
|
||||
$(`.fields[data-idx=${idx}]`).remove()
|
||||
cartolas.data.cartolas = cartolas.data.cartolas.filter(cartola => cartola.props.index !== idx)
|
||||
cartolas.draw().form()
|
||||
}
|
||||
}
|
||||
class Movimiento {
|
||||
props
|
||||
constructor({fecha, glosa, cargo, abono, saldo, categoria, detalle, centro_costo, rut, nombres, identificador}) {
|
||||
this.props = {
|
||||
fecha,
|
||||
glosa,
|
||||
cargo,
|
||||
abono,
|
||||
saldo,
|
||||
categoria,
|
||||
detalle,
|
||||
centro_costo,
|
||||
rut,
|
||||
nombres,
|
||||
identificador
|
||||
}
|
||||
}
|
||||
draw({formatters}) {
|
||||
const fecha = new Date(this.props.fecha)
|
||||
return [
|
||||
'<tr>',
|
||||
`<td>${formatters.date.format(fecha)}</td>`,
|
||||
`<td>${this.props.glosa}</td>`,
|
||||
`<td class="right aligned">${formatters.number.format(this.props.cargo ?? 0)}</td>`,
|
||||
`<td class="right aligned">${formatters.number.format(this.props.abono ?? 0)}</td>`,
|
||||
`<td class="right aligned">${formatters.number.format(this.props.saldo)}</td>`,
|
||||
`<td class="center aligned">${this.props.centro_costo ?? ''}</td>`,
|
||||
`<td>${this.props.categoria ?? ''}</td>`,
|
||||
`<td>${this.props.detalle ?? ''}</td>`,
|
||||
`<td>${this.props.rut ?? ''}</td>`,
|
||||
`<td>${this.props.nombres ?? ''}</td>`,
|
||||
`<td class="center aligned">${this.props.identificador ?? ''}</td>`,
|
||||
'</tr>'
|
||||
].join("\n")
|
||||
}
|
||||
}
|
||||
const cartolas = {
|
||||
ids: {},
|
||||
data: {
|
||||
sociedades: {!! json_encode($inmobiliarias) !!},
|
||||
bancos: {!! json_encode($bancos) !!},
|
||||
cartolas: [],
|
||||
movimientos: [],
|
||||
},
|
||||
formatters: {
|
||||
number: new Intl.NumberFormat('es-CL', {minimumFractionDigits: 0, maximumFractionDigits: 0}),
|
||||
date: new Intl.DateTimeFormat('es-CL', {dateStyle: 'short', timeStyle: 'short'})
|
||||
},
|
||||
add() {
|
||||
return {
|
||||
cartola: () => {
|
||||
const idx = cartolas.data.cartolas.length + 1
|
||||
const cartola = new Cartola({index: idx, ids: cartolas.ids.cartolas})
|
||||
cartolas.data.cartolas.push(cartola)
|
||||
cartolas.draw().form()
|
||||
}
|
||||
}
|
||||
},
|
||||
draw() {
|
||||
return {
|
||||
form: () => {
|
||||
const form = $(this.ids.form)
|
||||
form.empty()
|
||||
form.append(`<input type="hidden" name="cartolas" value="${this.data.cartolas.length}" />`)
|
||||
this.data.cartolas.forEach(cartola => {
|
||||
form.append(cartola.draw({sociedades: this.data.sociedades, bancos: this.data.bancos}))
|
||||
cartola.activate()
|
||||
})
|
||||
},
|
||||
movimientos: () => {
|
||||
const table = $(this.ids.movimientos)
|
||||
const tbody = table.find('tbody')
|
||||
tbody.empty()
|
||||
this.data.movimientos.forEach(movimiento => {
|
||||
tbody.append(movimiento.draw({formatters: this.formatters}))
|
||||
})
|
||||
table.show()
|
||||
}
|
||||
}
|
||||
},
|
||||
import() {
|
||||
return {
|
||||
cartolas: () => {
|
||||
const url = '{{$urls->api}}/contabilidad/cartolas/importar'
|
||||
const method = 'post'
|
||||
const body = new FormData()
|
||||
this.data.cartolas.forEach(cartola => {
|
||||
Object.entries(cartola.data).forEach(([key, value]) => {
|
||||
body.append(key, value)
|
||||
})
|
||||
})
|
||||
|
||||
fetchAPI(url, {method, body}).then(response => {
|
||||
if (!response) {
|
||||
return
|
||||
}
|
||||
return response.json().then(data => {
|
||||
this.data.movimientos = data.movimientos.map(movimiento => new Movimiento(movimiento))
|
||||
this.draw().movimientos()
|
||||
})
|
||||
}).catch(error => {
|
||||
const table = $(this.ids.movimientos)
|
||||
const tbody = table.find('tbody')
|
||||
tbody.empty()
|
||||
table.hide()
|
||||
}).finally(() => {
|
||||
$(this.ids.loader).hide()
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
setup(ids) {
|
||||
this.ids = ids
|
||||
this.add().cartola()
|
||||
$(this.ids.buttons.add).click(() => {
|
||||
this.add().cartola()
|
||||
})
|
||||
$(this.ids.loader).hide()
|
||||
$(this.ids.form).submit(submitEvent => {
|
||||
submitEvent.preventDefault()
|
||||
$(this.ids.loader).show()
|
||||
this.import().cartolas()
|
||||
return false
|
||||
})
|
||||
$(this.ids.buttons.process).click(() => {
|
||||
$(this.ids.form).submit()
|
||||
})
|
||||
}
|
||||
}
|
||||
$(document).ready(() => {
|
||||
cartolas.setup({
|
||||
form: '#cartola_form',
|
||||
buttons: {
|
||||
add: '#add_button',
|
||||
process: '#process_button'
|
||||
},
|
||||
movimientos: '#movimientos',
|
||||
loader: '#loader',
|
||||
cartolas: {
|
||||
sociedad: 'sociedad',
|
||||
banco: 'banco',
|
||||
buttons: {
|
||||
remove: 'remove'
|
||||
}
|
||||
}
|
||||
})
|
||||
})
|
||||
</script>
|
||||
@endpush
|
||||
Reference in New Issue
Block a user