forked from TDTP/admin_transporte_frontend
146 lines
4.3 KiB
Svelte
146 lines
4.3 KiB
Svelte
<script>
|
|
import { Link } from 'svelte-navigator'
|
|
import Paginate from '$/components/Paginate.svelte'
|
|
import PageTitle from '$/components/PageTitle.svelte'
|
|
import { getComunas, getComuna, createComuna, updateComuna, deleteComuna } from '$/services/comunas'
|
|
import Modal from '$/components/Modal.svelte';
|
|
import FormComuna from './Form.svelte';
|
|
|
|
let comuna = null
|
|
let es_nuevo = true
|
|
let comunas = { count: 0, results: [] }
|
|
let page = 1
|
|
let loading = false;
|
|
const limit = 15
|
|
|
|
$: onPage(page)
|
|
|
|
async function onPage(page) {
|
|
try {
|
|
loading = true
|
|
const offset = (page - 1) * limit;
|
|
comunas = await getComunas({ offset, limit, ordering: 'id_region' })
|
|
} catch(error) {
|
|
alert(error.detail || error)
|
|
} finally {
|
|
loading = false
|
|
}
|
|
}
|
|
|
|
function onNuevo() {
|
|
comuna = {}
|
|
es_nuevo = true
|
|
}
|
|
|
|
async function onEditar({ id_comuna }) {
|
|
try {
|
|
loading = true
|
|
comuna = await getComuna(id_comuna)
|
|
es_nuevo = false
|
|
} catch (error) {
|
|
alert(error.detail || error)
|
|
} finally {
|
|
loading = false
|
|
}
|
|
}
|
|
|
|
async function onSave() {
|
|
try {
|
|
if (es_nuevo) {
|
|
await createComuna(comuna)
|
|
} else {
|
|
await updateComuna(comuna)
|
|
}
|
|
alert('Comuna guardada con exito')
|
|
comuna = null; // se cierra el modal
|
|
onPage(page) // refresco la tabla de registros
|
|
} catch (error) {
|
|
alert(error.detail || error)
|
|
}
|
|
}
|
|
|
|
async function onDelete() {
|
|
try {
|
|
if (!confirm(`Desea eliminar la comuna [${comuna.nombre_comuna}]?`)) return;
|
|
await deleteComuna(comuna.id_comuna)
|
|
alert('Comuna eliminada con exito')
|
|
comuna = null; // se cierra el modal
|
|
onPage(page) // refresco la tabla de registros
|
|
} catch (error) {
|
|
alert(error.detail || error)
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<PageTitle {loading}>Comunas</PageTitle>
|
|
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<div class="mb-3 d-flex">
|
|
<button class="btn btn-primary me-3"
|
|
on:click|preventDefault={onNuevo}>
|
|
<i class="bi bi-plus-lg"></i> Nuevo
|
|
</button>
|
|
<div class="m-auto"></div>
|
|
<Link to='/' class="btn btn-outline-secondary">Volver</Link>
|
|
</div>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="table-responsive">
|
|
<table class="table table-bordered">
|
|
<thead>
|
|
<tr class="table-light">
|
|
<th>ID</th>
|
|
<th>Nombre</th>
|
|
<th>Región</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{#each comunas.results as row}
|
|
<tr>
|
|
<td><a class="d-block" href={"#"} on:click|preventDefault={() => onEditar(row)}>{row.id_comuna}</a></td>
|
|
<td>{row.nombre_comuna}</td>
|
|
<td>{row.id_region}</td>
|
|
</tr>
|
|
{/each}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
<div class="card-footer d-flex">
|
|
<a href={"#"} class="btn btn-outline-secondary me-3"
|
|
on:click|preventDefault={() => onPage(page)}>
|
|
<i class="bi bi-arrow-repeat"></i>
|
|
</a>
|
|
<Paginate
|
|
offset={(page - 1) * limit}
|
|
{limit}
|
|
count={comunas.count}
|
|
on:page={ev => page = ev.detail}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
{#if !!comuna}
|
|
<form action="" on:submit|preventDefault={onSave}>
|
|
<Modal title="Comuna"
|
|
on:close={() => comuna = null}
|
|
>
|
|
<FormComuna bind:form={comuna} {es_nuevo} />
|
|
|
|
<svelte:fragment slot="buttons">
|
|
<button type="submit" class="btn btn-primary">Guardar</button>
|
|
{#if !es_nuevo}
|
|
<button class="btn btn-danger" on:click|preventDefault={onDelete}>Eliminar</button>
|
|
{/if}
|
|
</svelte:fragment>
|
|
</Modal>
|
|
</form>
|
|
{/if}
|
|
|
|
<style>
|
|
.table-responsive {
|
|
max-height: calc(100vh - 300px);
|
|
}
|
|
</style> |