gopherhole/client/src/components/LogPager.svelte

<script lang="ts">
    import {
        Input,
        Pagination,
        PaginationItem,
        PaginationLink,
    } from "sveltestrap";

    const pageSizes = [25, 50, 100, 250];
    const pagerElementsCount = 10;

    export let page: number = 0;
    export let pages: number = 0;
    export let total: number = 0;
    export let pageSize: number = 50;

    $: pageIndex = page + 1;
    $: pageCount = pages === 0 ? 1 : pages;
    $: pageSizeLabel = pageSize + "";

    let pagesList = [];
    $: {
        pagesList = [];
        for (
            let i = Math.max(page - pagerElementsCount, 0);
            i < Math.min(pages, page + pagerElementsCount);
            i++
        ) {
            pagesList.push(i);
        }
    }

    const handlePageSizeChange = ({ target: { value } }) =>
        (pageSize = Number(value));

    const handlePageChange = (p) => (e) => {
        e.preventDefault();
        page = p;
        console.debug(`changing to page ${page}`);
    };
</script>

<section class="flex flex-row my-2 justify-between items-center">
    <p>Page {pageIndex}/{pageCount}</p>
    <div>
        <Pagination size="sm">
            <PaginationItem disabled={pageIndex === 1}>
                <PaginationLink first href="#" on:click={handlePageChange(0)} />
            </PaginationItem>
            <PaginationItem disabled={pageIndex === 1}>
                <PaginationLink
                    previous
                    href="#"
                    on:click={handlePageChange(page - 1)}
                />
            </PaginationItem>
            {#each pagesList as p}
                <PaginationItem active={pageIndex - 1 === p}>
                    <PaginationLink on:click={handlePageChange(p)} href="#"
                        >{p + 1}</PaginationLink
                    >
                </PaginationItem>
            {/each}
            <PaginationItem disabled={pageIndex === pageCount}>
                <PaginationLink
                    next
                    href="#"
                    on:click={handlePageChange(page + 1)}
                />
            </PaginationItem>
            <PaginationItem disabled={pageIndex === pageCount}>
                <PaginationLink
                    last
                    href="#"
                    on:click={handlePageChange(pageCount)}
                />
            </PaginationItem>
        </Pagination>
    </div>
    <div class="mx-2 flex flex-row items-center">
        Showing&nbsp;
        <Input
            type="select"
            name="page-size"
            bsSize="sm"
            id="page-size-selector"
            value={pageSizeLabel}
            on:change={handlePageSizeChange}
        >
            {#each pageSizes as pg}
                <option selected={pageSize === Number(pg)}>{pg}</option>
            {/each}
        </Input>
        <p class="m-0">&nbsp;of {total}</p>
    </div>
</section>

<style lang="postcss">
    p {
        margin: 0;
        flex: 0 0 auto;
    }

    div {
        flex: 0 0 auto;
    }
</style>