ilab_transporte_frontend/src/pages/comunas/Admin.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>