Files
oficial/app/resources/views/contabilidad/centros_costos.blade.php

330 lines
15 KiB
PHP
Raw Normal View History

2024-01-09 23:35:35 -03:00
@extends('layout.base')
@section('page_content')
<div class="ui container">
<h1 class="ui header">
Centros de Costos
</h1>
<div class="ui top attached right aligned basic segment">
<button class="ui tiny green icon button" id="add_button">
Agregar
<i class="plus icon"></i>
</button>
</div>
<table class="ui table" id="centros_costos">
<thead>
<tr>
<th>Tipo de Centro</th>
<th>Categoría</th>
<th>Tipo de Cuenta</th>
<th>Cuenta Contable</th>
<th>Centro de Costo</th>
<th>Descripción</th>
<th>
</th>
</tr>
</thead>
<tbody>
@foreach ($centrosCostos as $centroCosto)
<tr data-id="{{$centroCosto->id}}">
<td data-id="{{$centroCosto->tipoCentro->id}}">{{$centroCosto->tipoCentro->descripcion}}</td>
<td data-id="{{$centroCosto->categoria->id}}">{{$centroCosto->categoria->descripcion}}</td>
<td data-id="{{$centroCosto->tipoCuenta?->id}}">{{$centroCosto->tipoCuenta?->descripcion}}</td>
<td>{{$centroCosto->cuentaContable}}</td>
<td>{{$centroCosto->id}}</td>
<td>{{$centroCosto->descripcion}}</td>
<td>
<div class="ui mini buttons">
<button class="ui icon button edit_button" data-id="{{$centroCosto->id}}">
<i class="edit icon"></i>
</button>
<button class="ui red icon button remove_button" data-id="{{$centroCosto->id}}">
<i class="remove icon"></i>
</button>
</div>
</td>
</tr>
@endforeach
</tbody>
</table>
</div>
<div class="ui modal" id="modal_add">
<div class="content">
<form class="ui form" id="add_form">
<div class="fields">
<div class="three wide field">
<label for="tipo_centro">Tipo de Centro</label>
<div class="ui selection search dropdown" id="tipo_centro">
<input type="hidden" name="tipo_centro_id" />
<i class="dropdown icon"></i>
<div class="default text">Tipo</div>
<div class="menu">
@foreach ($tiposCentros as $tipoCentro)
<div class="item" data-value="{{$tipoCentro->id}}">{{$tipoCentro->descripcion}}</div>
@endforeach
</div>
</div>
</div>
<div class="three wide field">
<label for="tipo_cuenta">Tipo de Cuenta</label>
<div class="ui selection search dropdown" id="tipo_cuenta">
<input type="hidden" name="tipo_cuenta_id" />
<i class="dropdown icon"></i>
<div class="default text">Tipo de Cuenta</div>
<div class="menu">
<div class="item" data-value="">---</div>
@foreach ($tiposCuentas as $tipoCuenta)
<div class="item" data-value="{{$tipoCuenta->id}}">{{$tipoCuenta->descripcion}}</div>
@endforeach
</div>
</div>
</div>
</div>
<div class="five wide field">
<label for="categoria">Categoría</label>
<div class="ui selection search dropdown" id="categoria">
<input type="hidden" name="categoria_id" />
<i class="dropdown icon"></i>
<div class="default text">Categoría</div>
<div class="menu">
@foreach ($categorias as $categoria)
<div class="item" data-value="{{$categoria->id}}">{{$categoria->descripcion}}</div>
@endforeach
</div>
</div>
</div>
<div class="three wide field">
<label for="cuenta_contable">Cuenta Contable</label>
<input type="text" name="cuenta_contable" id="cuenta_contable" />
</div>
<div class="two wide field">
<label for="identificador">Centro de Costo</label>
<input type="number" name="id" id="identificador" maxlength="3" />
</div>
<div class="field">
<label for="descripcion">Descripción</label>
<textarea id="descripcion" name="descripcion" class="ui textarea" rows="1" cols="10"></textarea>
</div>
</form>
</div>
<div class="actions">
<button class="ui positive icon button">
<i class="plus icon"></i>
Agregar
</button>
</div>
</div>
<div class="ui modal" id="modal_edit">
<div class="header">
Centro de Costo <span id="id"></span>
</div>
<div class="content">
<form class="ui form" id="edit_form">
<input type="hidden" name="id" id="identificador" />
<div class="fields">
<div class="three wide field">
<label for="tipo_centro">Tipo de Centro</label>
<div class="ui selection search dropdown" id="tipo_centro">
<input type="hidden" name="tipo_centro_id" />
<i class="dropdown icon"></i>
<div class="default text">Tipo</div>
<div class="menu">
@foreach ($tiposCentros as $tipoCentro)
<div class="item" data-value="{{$tipoCentro->id}}">{{$tipoCentro->descripcion}}</div>
@endforeach
</div>
</div>
</div>
<div class="three wide field">
<label for="tipo_cuenta">Tipo de Cuenta</label>
<div class="ui selection search dropdown" id="tipo_cuenta">
<input type="hidden" name="tipo_cuenta_id" />
<i class="dropdown icon"></i>
<div class="default text">Tipo de Cuenta</div>
<div class="menu">
<div class="item" data-value="">---</div>
@foreach ($tiposCuentas as $tipoCuenta)
<div class="item" data-value="{{$tipoCuenta->id}}">{{$tipoCuenta->descripcion}}</div>
@endforeach
</div>
</div>
</div>
</div>
<div class="five wide field">
<label for="categoria">Categoría</label>
<div class="ui selection search dropdown" id="categoria">
<input type="hidden" name="categoria_id" />
<i class="dropdown icon"></i>
<div class="default text">Categoría</div>
<div class="menu">
@foreach ($categorias as $categoria)
<div class="item" data-value="{{$categoria->id}}">{{$categoria->descripcion}}</div>
@endforeach
</div>
</div>
</div>
<div class="three wide field">
<label for="cuenta_contable">Cuenta Contable</label>
<input type="text" name="cuenta_contable" id="cuenta_contable" />
</div>
<div class="field">
<label for="descripcion">Descripción</label>
<textarea id="descripcion" name="descripcion" class="ui textarea" rows="1" cols="10"></textarea>
</div>
</form>
</div>
<div class="actions">
<button class="ui positive icon button">
<i class="plus icon"></i>
Editar
</button>
</div>
</div>
@endsection
@include('layout.head.styles.datatables')
@include('layout.body.scripts.datatables')
@push('page_scripts')
<script>
const centros = {
ids: {
table: '',
modals: {
add: '',
edit: ''
},
buttons: {
add: '',
edit: '',
remove: ''
},
forms: {
add: '',
edit: ''
}
},
setup: function({ids}) {
this.ids = ids
Object.keys(this.ids.modals).forEach(name => {
$(this.ids.modals[name]).modal({
onApprove: ($element) => {
this.actions()[name]()
},
onHidden: (modal) => {
document.getElementById(this.ids.forms[name]).reset()
}
})
$(this.ids.modals[name]).find('.dropdown').each((idx, item) => {
$(item).dropdown()
})
})
Object.keys(this.ids.buttons).forEach(name => {
if (name === 'remove') {
return
}
$(this.ids.buttons[name]).click(event => {
if (name === 'edit') {
const id = $(event.currentTarget).data('id')
const row = $("tr[data-id='" + id + "']")
const data = {
id,
tipo_centro_id: row.find(':nth-child(1)').data('id'),
categoria_id: row.find(':nth-child(2)').data('id'),
tipo_cuenta_id: row.find(':nth-child(3)').data('id'),
cuenta_contable: row.find(':nth-child(4)').html(),
descripcion: row.find(':nth-child(6)').html()
}
$(this.ids.modals[name]).find('#id').html(id)
const form = $('#' + this.ids.forms[name])
form.find("[name='id']").val(data.id)
form.find('#tipo_centro').dropdown('set selected', data.tipo_centro_id)
form.find('#categoria').dropdown('set selected', data.categoria_id)
form.find('#tipo_cuenta').dropdown('set selected', data.tipo_cuenta_id)
form.find('#cuenta_contable').val(data.cuenta_contable)
form.find('#descripcion').val(data.descripcion)
}
$(this.ids.modals[name]).modal('show')
})
})
$(this.ids.buttons.remove).click(event => {
const id = $(event.currentTarget).data('id')
this.actions().remove(id)
})
$(this.ids.table).dataTable({
order: [
[0, 'desc'],
[1, 'asc'],
[4, 'asc']
]
})
},
actions: function() {
return {
add: () => {
const body = new FormData(document.getElementById(this.ids.forms.add))
const url = '{{$urls->api}}/contabilidad/centros_costos/add'
fetchAPI(url, {method: 'post', body}).then(response => {
if (!response) {
return
}
response.json().then(json => {
if (json.added) {
window.location.reload()
}
})
})
},
edit: () => {
const body = new FormData(document.getElementById(this.ids.forms.edit))
const url = '{{$urls->api}}/contabilidad/centro_costo/' + body.get('id') + '/edit'
fetchAPI(url, {method: 'post', body}).then(response => {
if (!response) {
return
}
response.json().then(json => {
if (json.edited) {
window.location.reload()
}
})
})
},
remove: id => {
const url = '{{$urls->api}}/contabilidad/centro_costo/' + id
fetchAPI(url, {method: 'delete'}).then(response => {
if (!response) {
return
}
response.json().then(json => {
if (json.removed) {
window.location.reload()
}
})
})
}
}
}
}
$(document).ready(() => {
centros.setup({ids: {
table: '#centros_costos',
modals: {
add: '#modal_add',
edit: '#modal_edit'
},
buttons: {
add: '#add_button',
edit: '.edit_button',
remove: '.remove_button'
},
forms: {
add: 'add_form',
edit: 'edit_form'
}
}
})
})
</script>
@endpush