Cartola Diaria Manual
This commit is contained in:
Juan Pablo Vial
@ -15,47 +15,6 @@
|
||||
</div>
|
||||
<form class="ui form" id="cartola_form">
|
||||
<input type="hidden" id="fields" name="fields" value="0" />
|
||||
{{--<div class="fields">
|
||||
<div class="six wide field">
|
||||
<label for="inmobiliaria">Sociedad</label>
|
||||
<div class="ui search selection dropdown" id="inmobiliaria">
|
||||
<input type="hidden" name="inmobiliaria_rut" />
|
||||
<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_id"/>
|
||||
<i class="dropdown icon"></i>
|
||||
<div class="default text">Banco</div>
|
||||
<div class="menu"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="four wide field">
|
||||
<label for="fecha">Fecha</label>
|
||||
<div class="ui calendar" id="fecha">
|
||||
<div class="ui left icon input">
|
||||
<i class="calendar icon"></i>
|
||||
<input type="text" name="fecha" />
|
||||
</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>--}}
|
||||
</form>
|
||||
<div class="ui two columns grid">
|
||||
<div class="column">
|
||||
@ -99,6 +58,61 @@
|
||||
<tbody id="movimientos"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="ui modal" id="manual_modal">
|
||||
<div class="content">
|
||||
<div class="header">
|
||||
Movimientos |
|
||||
<span id="modal_inmobiliaria"></span> |
|
||||
<span id="modal_cuenta"></span> |
|
||||
<span id="modal_fecha"></span>
|
||||
</div>
|
||||
<div class="ui one column grid">
|
||||
<div class="right aligned column">
|
||||
<button class="ui green icon button" id="add_manual">
|
||||
<i class="plus icon"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<form class="ui form" id="modal_form">
|
||||
<input type="hidden" name="movimientos" value="[1]" />
|
||||
<div id="modal_movimientos">
|
||||
<div class="fields" data-movimiento="1">
|
||||
<div class="field">
|
||||
<label>Glosa</label>
|
||||
<input type="text" name="glosa1" />
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>Cargo</label>
|
||||
<div class="ui left labeled input">
|
||||
<div class="ui basic label">$</div>
|
||||
<input type="text" name="cargo1" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>Abono</label>
|
||||
<div class="ui left labeled input">
|
||||
<div class="ui basic label">$</div>
|
||||
<input type="text" name="abono1" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>Saldo</label>
|
||||
<div class="ui left labeled input">
|
||||
<div class="ui basic label">$</div>
|
||||
<input type="text" name="saldo1" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="field"></div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
<div class="actions">
|
||||
<button class="ui approve button">
|
||||
Procesar
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
@include('layout.head.styles.datatables')
|
||||
@ -173,27 +187,27 @@
|
||||
}
|
||||
draw() {
|
||||
return {
|
||||
form: (form, inmobiliarias, first = false) => {
|
||||
const fields = $('<div></div>').addClass('fields cartola').attr('data-cartola', this.idx)
|
||||
const inmobiliarias_menu = $('<div></div>').addClass('menu')
|
||||
form: ($form, inmobiliarias, first = false) => {
|
||||
const $fields = $('<div></div>').addClass('fields cartola').attr('data-cartola', this.idx)
|
||||
const $inmobiliarias_menu = $('<div></div>').addClass('menu')
|
||||
inmobiliarias.forEach(inmobiliaria => {
|
||||
inmobiliarias_menu.append(
|
||||
$inmobiliarias_menu.append(
|
||||
$('<div></div>').addClass('item').attr('data-value', inmobiliaria.rut).html(inmobiliaria.razon)
|
||||
)
|
||||
})
|
||||
const inmobiliarias_dropdown = $('<div></div>').addClass('ui search selection dropdown').attr('id', 'inmobiliaria' + this.idx).append(
|
||||
const $inmobiliarias_dropdown = $('<div></div>').addClass('ui search selection dropdown').attr('id', 'inmobiliaria' + this.idx).append(
|
||||
$('<input />').attr('type', 'hidden')//.attr('name', 'inmobiliaria_rut' + this.idx)
|
||||
).append(
|
||||
$('<i></i>').addClass('dropdown icon')
|
||||
).append(
|
||||
$('<div></div>').addClass('default text').html('Inmobiliaria')
|
||||
).append(inmobiliarias_menu)
|
||||
fields.append(
|
||||
).append($inmobiliarias_menu)
|
||||
$fields.append(
|
||||
$('<div></div>').addClass('six wide field').append(
|
||||
$('<label></label>').attr('for', 'inmobiliaria' + this.idx).html('Sociedad')
|
||||
).append(inmobiliarias_dropdown)
|
||||
).append($inmobiliarias_dropdown)
|
||||
)
|
||||
const cuentas_dropdown = $('<div></div>').addClass('ui search selection dropdown').attr('id', 'cuenta' + this.idx).append(
|
||||
const $cuentas_dropdown = $('<div></div>').addClass('ui search selection dropdown').attr('id', 'cuenta' + this.idx).append(
|
||||
$('<input />').attr('type', 'hidden').attr('name', 'cuenta_id' + this.idx)
|
||||
).append(
|
||||
$('<i></i>').addClass('dropdown icon')
|
||||
@ -202,35 +216,47 @@
|
||||
).append(
|
||||
$('<div></div>').addClass('menu')
|
||||
)
|
||||
fields.append(
|
||||
$fields.append(
|
||||
$('<div></div>').addClass('four wide field').append(
|
||||
$('<label></label>').html('Banco - Cuenta')
|
||||
).append(cuentas_dropdown)
|
||||
).append($cuentas_dropdown)
|
||||
)
|
||||
const fecha_calendar = $('<div></div>').addClass('ui calendar').attr('id', 'fecha' + this.idx).append(
|
||||
const $fecha_calendar = $('<div></div>').addClass('ui calendar').attr('id', 'fecha' + this.idx).append(
|
||||
$('<div></div>').addClass('ui left icon input').append(
|
||||
$('<i></i>').addClass('calendar icon')
|
||||
).append(
|
||||
$('<input />').attr('type', 'text')
|
||||
)
|
||||
)
|
||||
fields.append(
|
||||
$fields.append(
|
||||
$('<div></div>').addClass('three wide field').append(
|
||||
$('<label></label>').attr('for', 'fecha' + this.idx).html('Fecha')
|
||||
).append(fecha_calendar)
|
||||
).append($fecha_calendar)
|
||||
)
|
||||
const file_field = $('<div></div>').addClass('field').append(
|
||||
$('<label></label>').attr('for', 'file' + this.idx).html('Cartola')
|
||||
).append(
|
||||
$('<input />').addClass('ui invisible file input').attr('type', 'file').attr('name', 'file' + this.idx).attr('id', 'file' + this.idx)
|
||||
).append(
|
||||
$('<label></label>').addClass('ui icon button').attr('for', 'file' + this.idx).append(
|
||||
$('<i></i>').addClass('file icon')
|
||||
).append('Cargar')
|
||||
$fields.append(
|
||||
$('<div></div>').addClass('field').append(
|
||||
$('<label></label>').html('Cartola')
|
||||
).append(
|
||||
$('<input />').addClass('ui invisible file input').attr('type', 'file').attr('name', 'file' + this.idx).attr('id', 'file' + this.idx)
|
||||
).append(
|
||||
$('<label></label>').addClass('ui icon button').attr('for', 'file' + this.idx).append(
|
||||
$('<i></i>').addClass('file icon')
|
||||
).append('Cargar')
|
||||
)
|
||||
)
|
||||
fields.append(file_field)
|
||||
const $manual_checkbox = $('<div></div>').addClass('ui invisible checkbox').append(
|
||||
$('<input />').attr('type', 'checkbox').attr('name', 'manual' + this.idx).attr('id', 'manual' + this.idx)
|
||||
).append(
|
||||
$('<label></label>').addClass('image').attr('for', 'manual' + this.idx).append(
|
||||
$('<i></i>').addClass('large orange keyboard icon')
|
||||
)
|
||||
)
|
||||
|
||||
$fields.append($('<div></div>').addClass('field').append(
|
||||
$('<label></label>').html('Manual')
|
||||
).append($manual_checkbox))
|
||||
if (!first) {
|
||||
fields.append(
|
||||
$fields.append(
|
||||
$('<div></div>').addClass('field').append(
|
||||
$('<label></label>').html('Eliminar')
|
||||
).append(
|
||||
@ -243,25 +269,7 @@
|
||||
)
|
||||
)
|
||||
}
|
||||
form.append(fields)
|
||||
|
||||
inmobiliarias_dropdown.dropdown({
|
||||
fireOnInit: true,
|
||||
onChange: (value, text, $choice) => {
|
||||
this.inmobiliaria.rut = value
|
||||
this.inmobiliaria.razon = text
|
||||
this.get().bancos(value).then(() => {
|
||||
cuentas_dropdown.dropdown('change values', this.bancos)
|
||||
})
|
||||
},
|
||||
})
|
||||
cuentas_dropdown.dropdown({
|
||||
fireOnInit: true,
|
||||
onChange: (value, text, $choice) => {
|
||||
this.cuenta.id = value
|
||||
this.cuenta.descripcion = text
|
||||
}
|
||||
})
|
||||
$form.append($fields)
|
||||
|
||||
const cdo = JSON.parse(JSON.stringify(calendar_date_options))
|
||||
cdo['initialDate'] = new Date()
|
||||
@ -270,10 +278,48 @@
|
||||
this.fecha = date
|
||||
}
|
||||
this.fecha = cdo['initialDate']
|
||||
fecha_calendar.calendar(cdo)
|
||||
|
||||
$inmobiliarias_dropdown.dropdown({
|
||||
fireOnInit: true,
|
||||
onChange: (value, text, $choice) => {
|
||||
this.inmobiliaria.rut = value
|
||||
this.inmobiliaria.razon = text
|
||||
this.get().bancos(value).then(() => {
|
||||
$cuentas_dropdown.dropdown('change values', this.bancos)
|
||||
})
|
||||
},
|
||||
})
|
||||
$cuentas_dropdown.dropdown({
|
||||
fireOnInit: true,
|
||||
onChange: (value, text, $choice) => {
|
||||
this.cuenta.id = value
|
||||
this.cuenta.descripcion = text
|
||||
}
|
||||
})
|
||||
$fecha_calendar.calendar(cdo)
|
||||
$manual_checkbox.change(event => {
|
||||
const $element = $(event.currentTarget)
|
||||
const status = $element.checkbox('is checked')
|
||||
const $field = $element.parent().parent()
|
||||
const $file = $field.find('#file' + this.idx).parent()
|
||||
if (status) {
|
||||
$file.find('input').attr('type', 'hidden')
|
||||
$file.hide()
|
||||
|
||||
manual.data.inmobiliaria = $inmobiliarias_dropdown.dropdown('get text')
|
||||
manual.data.cuenta = $cuentas_dropdown.dropdown('get text')
|
||||
const fecha = $fecha_calendar.calendar('get date')
|
||||
manual.data.fecha = [fecha.getDate(), (fecha.getMonth()+1).toString().padStart(2, '0'), fecha.getFullYear()].join('-')
|
||||
manual.data.field = this.idx
|
||||
manual.$modal.modal('show')
|
||||
return
|
||||
}
|
||||
$file.find('input').attr('type', 'file')
|
||||
$file.show()
|
||||
})
|
||||
},
|
||||
diferencia: (tbody, dateFormatter, numberFormatter) => {
|
||||
tbody.append(
|
||||
diferencia: ($tbody, dateFormatter, numberFormatter) => {
|
||||
$tbody.append(
|
||||
$('<tr></tr>').append(
|
||||
$('<td></td>').html(this.inmobiliaria.razon)
|
||||
).append(
|
||||
@ -289,9 +335,9 @@
|
||||
)
|
||||
)
|
||||
},
|
||||
cartola: (tbody, dateFormatter, numberFormatter) => {
|
||||
cartola: ($tbody, dateFormatter, numberFormatter) => {
|
||||
this.movimientos.forEach((row, idx) => {
|
||||
tbody.append(
|
||||
$tbody.append(
|
||||
$('<tr></tr>').append(
|
||||
$('<td></td>').html(this.inmobiliaria.razon)
|
||||
).append(
|
||||
@ -402,9 +448,9 @@
|
||||
Object.values(this.ids.table).forEach(id => $(id).find('tbody').html(''))
|
||||
},
|
||||
diferencia: () => {
|
||||
const table = $(this.ids.table.diferencia)
|
||||
const tbody = table.find('tbody')
|
||||
tbody.html('')
|
||||
const $table = $(this.ids.table.diferencia)
|
||||
const $tbody = $table.find('tbody')
|
||||
$tbody.html('')
|
||||
const dateFormatter = new Intl.DateTimeFormat('es-CL', {
|
||||
year: 'numeric',
|
||||
month: 'numeric',
|
||||
@ -412,15 +458,15 @@
|
||||
})
|
||||
const numberFormatter = new Intl.NumberFormat('es-CL', {minimumFractionDigits: 0, maximumFractionDigits: 0})
|
||||
this.data.cartolas.forEach(cartola => {
|
||||
cartola.draw().diferencia(tbody, dateFormatter, numberFormatter)
|
||||
cartola.draw().diferencia($tbody, dateFormatter, numberFormatter)
|
||||
})
|
||||
},
|
||||
cartola: () => {
|
||||
const table = $(this.ids.table.base)
|
||||
table.DataTable().clear()
|
||||
table.DataTable().destroy()
|
||||
const tbody = $(this.ids.table.body)
|
||||
tbody.html('')
|
||||
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',
|
||||
@ -428,9 +474,9 @@
|
||||
})
|
||||
const numberFormatter = new Intl.NumberFormat('es-CL', {minimumFractionDigits: 0, maximumFractionDigits: 0})
|
||||
this.data.cartolas.forEach(cartola => {
|
||||
cartola.draw().cartola(tbody, dateFormatter, numberFormatter)
|
||||
cartola.draw().cartola($tbody, dateFormatter, numberFormatter)
|
||||
})
|
||||
table.DataTable(this.dataTableConfig)
|
||||
$table.DataTable(this.dataTableConfig)
|
||||
},
|
||||
}
|
||||
},
|
||||
@ -445,7 +491,7 @@
|
||||
diaria.loader().show()
|
||||
fetchAPI(url, {method: 'post', body}).then(response => {
|
||||
diaria.loader().hide()
|
||||
this.draw().empty()
|
||||
this.draw().empty()
|
||||
if (!response) {
|
||||
return
|
||||
}
|
||||
@ -455,6 +501,7 @@
|
||||
}
|
||||
Object.entries(json.cartolas).forEach(entry => {
|
||||
const cartolaIdx = this.data.cartolas.findIndex(cartola => cartola.idx === parseInt(entry[0]))
|
||||
this.data.cartolas[cartolaIdx].movimientos = []
|
||||
entry[1].movimientos.forEach((row, idx) => {
|
||||
const fecha = new Date(row.fecha)
|
||||
fecha.setDate(fecha.getDate() + 1)
|
||||
@ -498,6 +545,170 @@
|
||||
this.cartolas().add()
|
||||
}
|
||||
}
|
||||
const manual = {
|
||||
ids: {},
|
||||
$modal: null,
|
||||
data: {
|
||||
inmobiliaria: '',
|
||||
cuenta: '',
|
||||
fecha: '',
|
||||
field: 0,
|
||||
movimientos: [
|
||||
{idx: 1}
|
||||
]
|
||||
},
|
||||
get movimientosIdx() {
|
||||
const $movimientosIdx = $(this.ids.form).find("[name='movimientos']")
|
||||
return JSON.parse($movimientosIdx.val())
|
||||
},
|
||||
set movimientosIdx(list) {
|
||||
const $movimientosIdx = $(this.ids.form).find("[name='movimientos']")
|
||||
$movimientosIdx.val(JSON.stringify(list))
|
||||
},
|
||||
update() {
|
||||
return {
|
||||
file: movimientos => {
|
||||
const $file = $("[name='file" + this.data.field + "']")
|
||||
$file.val(JSON.stringify(movimientos))
|
||||
}
|
||||
}
|
||||
},
|
||||
parse() {
|
||||
return {
|
||||
movimientos: () => {
|
||||
const $fields = $(this.ids.movimientos).find('.fields')
|
||||
const movimientos = []
|
||||
$fields.each((i, fields) => {
|
||||
const idx = $(fields).data('movimiento')
|
||||
const inputs = [
|
||||
'glosa',
|
||||
'cargo',
|
||||
'abono',
|
||||
'saldo'
|
||||
]
|
||||
const data = {}
|
||||
inputs.forEach(name => {
|
||||
data[name] = $(fields).find("[name='"+name+idx+"']").val()
|
||||
if (name !== 'glosa') {
|
||||
data[name] = parseInt(data[name]) || 0
|
||||
}
|
||||
})
|
||||
|
||||
movimientos.push(data)
|
||||
})
|
||||
this.update().file(movimientos)
|
||||
}
|
||||
}
|
||||
},
|
||||
movimiento() {
|
||||
return {
|
||||
add: () => {
|
||||
const idx = this.data.movimientos.reduce((prev, movimiento) => Math.max(prev, movimiento.idx), 0) + 1
|
||||
const movimiento = {
|
||||
idx
|
||||
}
|
||||
this.data.movimientos.push(movimiento)
|
||||
const movimientosidx = this.movimientosIdx
|
||||
movimientosidx.push(idx)
|
||||
this.movimientosIdx = movimientosidx
|
||||
this.draw().movimiento(idx)
|
||||
},
|
||||
remove: idx => {
|
||||
const movimientosIdx = this.movimientosIdx
|
||||
const i = movimientosIdx.findIndex(n => n === idx)
|
||||
movimientosIdx.splice(i, 1)
|
||||
const movimientoIdx = this.data.movimientos.findIndex(movimiento => movimiento.idx === idx)
|
||||
this.data.movimientos.splice(movimientoIdx, 1)
|
||||
$(this.ids.movimientos).find("[data-idx='"+idx+"']").parent().parent().remove()
|
||||
this.movimientosIdx = movimientosIdx
|
||||
}
|
||||
}
|
||||
},
|
||||
draw() {
|
||||
return {
|
||||
movimiento: idx => {
|
||||
$(this.ids.movimientos).append(
|
||||
$('<div></div>').addClass('fields').attr('data-movimiento', idx).append(
|
||||
$('<div></div>').addClass('field').append(
|
||||
$('<label></label>').html('Glosa')
|
||||
).append(
|
||||
$('<input />').attr('type', 'text').attr('name', 'glosa' + idx)
|
||||
)
|
||||
).append(
|
||||
$('<div></div>').addClass('field').append(
|
||||
$('<label></label>').html('Cargo')
|
||||
).append(
|
||||
$('<div></div>').addClass('ui left labeled input').append(
|
||||
$('<div></div>').addClass('ui basic label').html('$')
|
||||
).append(
|
||||
$('<input />').attr('type', 'text').attr('name', 'cargo' + idx)
|
||||
)
|
||||
)
|
||||
).append(
|
||||
$('<div></div>').addClass('field').append(
|
||||
$('<label></label>').html('Abono')
|
||||
).append(
|
||||
$('<div></div>').addClass('ui left labeled input').append(
|
||||
$('<div></div>').addClass('ui basic label').html('$')
|
||||
).append(
|
||||
$('<input />').attr('type', 'text').attr('name', 'abono' + idx)
|
||||
)
|
||||
)
|
||||
).append(
|
||||
$('<div></div>').addClass('field').append(
|
||||
$('<label></label>').html('Saldo')
|
||||
).append(
|
||||
$('<div></div>').addClass('ui left labeled input').append(
|
||||
$('<div></div>').addClass('ui basic label').html('$')
|
||||
).append(
|
||||
$('<input />').attr('type', 'text').attr('name', 'saldo' + idx)
|
||||
)
|
||||
)
|
||||
).append(
|
||||
$('<div></div>').addClass('field').append(
|
||||
$('<label></label>').html('Eliminar')
|
||||
).append(
|
||||
$('<button></button>').addClass('ui red icon button').attr('type', 'button').attr('data-idx', idx).append(
|
||||
$('<i></i>').addClass('remove icon')
|
||||
).click(event => {
|
||||
const idx = $(event.currentTarget).data('idx')
|
||||
manual.movimiento().remove(idx)
|
||||
})
|
||||
)
|
||||
)
|
||||
)
|
||||
}
|
||||
}
|
||||
},
|
||||
setup(ids) {
|
||||
this.ids = ids
|
||||
|
||||
$(this.ids.modal).modal({
|
||||
onShow: () => {
|
||||
$(this.ids.inmobiliaria).html(this.data.inmobiliaria)
|
||||
$(this.ids.cuenta).html(this.data.cuenta)
|
||||
$(this.ids.fecha).html(this.data.fecha)
|
||||
this.movimientos = []
|
||||
$(this.ids.form).trigger('reset')
|
||||
},
|
||||
onApprove: $element => {
|
||||
this.parse().movimientos()
|
||||
},
|
||||
onHide: $element => {
|
||||
this.parse().movimientos()
|
||||
}
|
||||
})
|
||||
this.$modal = $(this.ids.modal)
|
||||
$(this.ids.button).click(event => {
|
||||
this.movimiento().add()
|
||||
})
|
||||
$(this.ids.form).submit(event => {
|
||||
event.preventDefault()
|
||||
this.$modal.modal('hide')
|
||||
return false
|
||||
})
|
||||
}
|
||||
}
|
||||
$(document).ready(() => {
|
||||
diaria.setup({
|
||||
table: {
|
||||
@ -513,6 +724,15 @@
|
||||
},
|
||||
loader: '#loader'
|
||||
})
|
||||
manual.setup({
|
||||
modal: '#manual_modal',
|
||||
button: '#add_manual',
|
||||
inmobiliaria: '#modal_inmobiliaria',
|
||||
cuenta: '#modal_cuenta',
|
||||
fecha: '#modal_fecha',
|
||||
form: '#modal_form',
|
||||
movimientos: '#modal_movimientos'
|
||||
})
|
||||
})
|
||||
</script>
|
||||
@endpush
|
||||
|
||||
Reference in New Issue
Block a user