<script>
    import Paginate from "$/components/Paginate.svelte";
    import { getAplicaciones } from "$/services/aplicaciones";
    import ModalAplicacion from "./ModalAplicacion.svelte";

    const limit = 15;
    let page = 1;
    let offset = 0;
    let count = 0;
    let ordering = 'id_aplicacion'
    let aplicaciones = []
    let aplicacion = null

    $: onPage(page)

    async function onPage(p) {
        try {
            offset = (p - 1) * limit;
            const data = await getAplicaciones({ offset, limit, ordering })
            aplicaciones = data.results;
            count = data.count;
        } catch (error) {
            alert(error)
        }
    }

    function onEdita(item) {
        aplicacion = item;
    }

    function onNuevo() {
        aplicacion = {}
    }

    function onOrderBy(field) {
        ordering = ordering === field ? '-' + field : field;
        onPage(page)
    }
</script>

<h1 class="h3 mb-3">Aplicaciones</h1>

<div class="card">
    <div class="card-header">
        <button class="btn btn-outline-secondary" on:click|preventDefault={onNuevo}><i class="bi bi-plus-lg"></i> Nuevo</button>
    </div>
    <div class="card-body">
        <div class="table-responsive">
            <table class="table table-sm table-bordered">
                <thead>
                    <tr class="table-secondary">
                        <th style="width:5%">Nro</th>
                        <th>
                            <a href={"#"} on:click|preventDefault={() => onOrderBy('id_aplicacion')}>ID</a>
                            {#if ordering === 'id_aplicacion'}<i class="bi bi-caret-up-fill"></i>{/if}
                            {#if ordering === '-id_aplicacion'}<i class="bi bi-caret-down-fill"></i>{/if}
                        </th>
                        <th>
                            <a href={"#"} on:click|preventDefault={() => onOrderBy('app')}>Nombre</a>
                            {#if ordering === 'app'}<i class="bi bi-caret-up-fill"></i>{/if}
                            {#if ordering === '-app'}<i class="bi bi-caret-down-fill"></i>{/if}
                        </th>
                        <th>
                            <a href={"#"} on:click|preventDefault={() => onOrderBy('vigente')}>Vigente</a>
                            {#if ordering === 'vigente'}<i class="bi bi-caret-up-fill"></i>{/if}
                            {#if ordering === '-vigente'}<i class="bi bi-caret-down-fill"></i>{/if}
                        </th>
                    </tr>
                </thead>
                <tbody>
                    {#each aplicaciones as app, index}
                    <tr>
                        <td class="table-secondary">{offset + index + 1}</td>
                        <td>{app.id_aplicacion}</td>
                        <td><a href={"#"} on:click|preventDefault={() => onEdita(app)}>{app.app}</a></td>
                        <td>{app.vigente}</td>
                    </tr>
                    {/each}
                </tbody>
            </table>
        </div>
    </div>
    <div class="card-footer">
        <Paginate
            {offset}
            {limit}
            {count}
            on:page={ev => page = ev.detail}
        />
    </div>
</div>

{#if aplicacion}
    <ModalAplicacion
        {aplicacion}
        on:close={() => aplicacion = null}
        on:refresh={() => onPage(page)}
    />
{/if}