Anitrack/frontend/src/helperComponents/Pagination.svelte

<script lang="ts">
  import {
    aniListLoggedIn,
    aniListSort,
    aniListWatchlist,
    animePerPage,
    watchListPage,
  } from "../helperModules/GlobalVariablesAndHelperFunctions.svelte";

  import type { AniListCurrentUserWatchList } from "../anilist/types/AniListCurrentUserWatchListType";
  import { GetAniListUserWatchingList } from "../../wailsjs/go/main/App";

  let aniListWatchListLoaded: AniListCurrentUserWatchList;
  let page: number;
  let perPage: number;
  let sort: string;

  watchListPage.subscribe((value) => (page = value));
  animePerPage.subscribe((value) => (perPage = value));
  aniListWatchlist.subscribe((value) => (aniListWatchListLoaded = value));
  aniListSort.subscribe((value) => (sort = value));

  const perPageOptions = [10, 20, 50];

  function ChangeWatchListPage(newPage: number) {
    GetAniListUserWatchingList(newPage, perPage, sort).then((result) => {
      watchListPage.set(newPage);
      aniListWatchlist.set(result);
      aniListLoggedIn.set(true);
    });
  }

  function changePage(
    e: KeyboardEvent & { currentTarget: HTMLInputElement },
  ): void {
    if (
      (e.key === "Enter" || e.key === "Tab") &&
      Number(e.currentTarget.value) !== page
    )
      ChangeWatchListPage(Number(e.currentTarget.value));
  }

  function changeCountPerPage(
    e: Event & { currentTarget: HTMLSelectElement },
  ): void {
    GetAniListUserWatchingList(1, Number(e.currentTarget.value), sort).then(
      (result) => {
        animePerPage.set(Number(e.currentTarget.value));
        watchListPage.set(1);
        aniListWatchlist.set(result);
        aniListLoggedIn.set(true);
      },
    );
  }
</script>

<div class="mb-8">
  {#if aniListWatchListLoaded.data.Page.pageInfo.lastPage <= 12}
    <nav aria-label="Page navigation" class="hidden md:block">
      <ul class="inline-flex -space-x-px text-base h-10">
        {#if page === 1}
          <li>
            <button
              disabled
              class="flex items-center justify-center px-4 h-10 ms-0 leading-tight border border-e-0 rounded-s-lg border-gray-700 text-gray-400 cursor-default"
            >
              Previous
            </button>
          </li>
        {:else}
          <li>
            <button
              on:click={() => ChangeWatchListPage(page - 1)}
              class="flex items-center justify-center px-4 h-10 ms-0 leading-tight border border-e-0 rounded-s-lg border-gray-700 text-gray-400 hover:bg-gray-700 hover:text-white"
            >
              Previous
            </button>
          </li>
        {/if}
        {#each { length: aniListWatchListLoaded.data.Page.pageInfo.lastPage } as _, i}
          {#if i + 1 === page}
            <li>
              <button
                on:click={() => ChangeWatchListPage(i + 1)}
                class="flex items-center justify-center px-4 h-10 leading-tight border hover:bg-gray-100 border-gray-700 bg-gray-700 text-white"
                >{i + 1}</button
              >
            </li>
          {:else}
            <li>
              <button
                on:click={() => ChangeWatchListPage(i + 1)}
                class="flex items-center justify-center px-4 h-10 leading-tight border dark border-gray-700 text-gray-400 hover:bg-gray-700 hover:text-white"
                >{i + 1}</button
              >
            </li>
          {/if}
        {/each}
        {#if page === aniListWatchListLoaded.data.Page.pageInfo.lastPage}
          <li>
            <button
              disabled
              class="flex items-center justify-center px-4 h-10 leading-tight border rounded-e-lg dark border-gray-700 text-gray-400 cursor-default"
            >
              Next
            </button>
          </li>
        {:else}
          <li>
            <button
              on:click={() => ChangeWatchListPage(page + 1)}
              class="flex items-center justify-center px-4 h-10 leading-tight border rounded-e-lg dark border-gray-700 text-gray-400 hover:bg-gray-700 hover:text-white"
            >
              Next
            </button>
          </li>
        {/if}
      </ul>
    </nav>
  {/if}
  <div class="flex">
    <div class="w-20 mx-auto">
      <select
        bind:value={perPage}
        on:change={(e) => changeCountPerPage(e)}
        id="countPerPage"
        class="border text-sm rounded-lg block w-full p-2.5 bg-gray-700 border-gray-600 placeholder-gray-400 text-white focus:ring-blue-500 focus:border-blue-500"
      >
        {#each perPageOptions as option}
          <option value={option}>
            {option}
          </option>
        {/each}
      </select>
    </div>

    <div>
      <div>Total Anime: {aniListWatchListLoaded.data.Page.pageInfo.total}</div>
      {#if aniListWatchListLoaded.data.Page.pageInfo.lastPage <= 12}
        <div class="md:hidden">
          Page: {page} of {aniListWatchListLoaded.data.Page.pageInfo.lastPage}
        </div>
      {:else}
        <div>
          Page: {page} of {aniListWatchListLoaded.data.Page.pageInfo.lastPage}
        </div>
      {/if}
    </div>

    <div class="max-w-xs mx-auto">
      <div class="relative flex items-center max-w-[11rem]">
        <button
          type="button"
          id="decrement-button"
          on:click={() => ChangeWatchListPage(page - 1)}
          class={page <= 1
            ? "border-gray-600 border rounded-s-lg p-3 h-11 focus:ring-gray-700 focus:ring-2 focus:outline-none"
            : "bg-gray-700 hover:bg-gray-600 border-gray-600 border rounded-s-lg p-3 h-11 focus:ring-gray-700 focus:ring-2 focus:outline-none"}
          disabled={page <= 1}
        >
          <svg
            class="w-3 h-3 text-white"
            aria-hidden="true"
            xmlns="http://www.w3.org/2000/svg"
            fill="none"
            viewBox="0 0 18 2"
          >
            <path
              stroke="currentColor"
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M1 1h16"
            />
          </svg>
        </button>
        <input
          type="number"
          min="1"
          max={aniListWatchListLoaded.data.Page.pageInfo.lastPage}
          on:keydown={changePage}
          id="page-counter"
          class="[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none border-x-0 h-11 font-medium text-center text-sm block w-full pb-6 bg-gray-700 border-gray-600 placeholder-gray-400 text-white focus:ring-blue-500 focus:border-blue-500"
          value={page}
          required
        />
        <div
          class="absolute bottom-1 start-1/2 -translate-x-1/2 rtl:translate-x-1/2 flex items-center text-xs text-gray-400 space-x-1 rtl:space-x-reverse"
        >
          <span>Page #</span>
        </div>
        <button
          type="button"
          id="increment-button"
          on:click={() => ChangeWatchListPage(page + 1)}
          class={page >= aniListWatchListLoaded.data.Page.pageInfo.lastPage
            ? "border-gray-600 border rounded-e-lg p-3 h-11 focus:ring-gray-700 focus:ring-2 focus:outline-none"
            : "bg-gray-700 hover:bg-gray-600 border-gray-600 border rounded-e-lg p-3 h-11 focus:ring-gray-700 focus:ring-2 focus:outline-none"}
          disabled={page >= aniListWatchListLoaded.data.Page.pageInfo.lastPage}
        >
          <svg
            class="w-3 h-3 text-white"
            aria-hidden="true"
            xmlns="http://www.w3.org/2000/svg"
            fill="none"
            viewBox="0 0 18 18"
          >
            <path
              stroke="currentColor"
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M9 1v16M1 9h16"
            />
          </svg>
        </button>
      </div>
    </div>
  </div>
</div>