john-okeefe/Anitrack
1
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases 17 Wiki Activity

Format Pagination component code for consistency

Browse Source 
- Update indentation from 4-space to 2-space convention throughout the component
- Reformat import statements to follow consistent spacing and alignment
- Standardize function and variable declarations with proper spacing
- Improve code readability with consistent formatting across all elements
- Clean up HTML template structure with proper indentation
- Add newline at end of file for standards compliance

This change ensures the Pagination component follows the project's code style conventions and improves maintainability through consistent formatting.
This commit is contained in:
John O'Keefe
2026-03-22 20:50:24 -04:00
parent 35e93c0ca9
commit f29d8f378e
1 changed files with 203 additions and 133 deletions
Download Patch File Download Diff File Expand all files Collapse all files

176
frontend/src/helperComponents/Pagination.svelte
View File

@@ -6,41 +6,52 @@
watchListPage, watchListPage,
} from "../helperModules/GlobalVariablesAndHelperFunctions.svelte"; } from "../helperModules/GlobalVariablesAndHelperFunctions.svelte";
import type {AniListCurrentUserWatchList} from "../anilist/types/AniListCurrentUserWatchListType" import type { AniListCurrentUserWatchList } from "../anilist/types/AniListCurrentUserWatchListType";
import { GetAniListUserWatchingList } from "../../wailsjs/go/main/App"; import { GetAniListUserWatchingList } from "../../wailsjs/go/main/App";
import { MediaListSort } from "../anilist/types/AniListTypes"; import { MediaListSort } from "../anilist/types/AniListTypes";
let aniListWatchListLoaded: AniListCurrentUserWatchList let aniListWatchListLoaded: AniListCurrentUserWatchList;
let page: number let page: number;
let perPage: number let perPage: number;
watchListPage.subscribe(value => page = value) watchListPage.subscribe((value) => (page = value));
animePerPage.subscribe(value => perPage = value) animePerPage.subscribe((value) => (perPage = value));
aniListWatchlist.subscribe((value) => aniListWatchListLoaded = value) aniListWatchlist.subscribe((value) => (aniListWatchListLoaded = value));
const perPageOptions = [10, 20, 50] const perPageOptions = [10, 20, 50];
function ChangeWatchListPage(newPage: number) { function ChangeWatchListPage(newPage: number) {
GetAniListUserWatchingList(newPage, perPage, MediaListSort.UpdatedTimeDesc).then((result) => { GetAniListUserWatchingList(
watchListPage.set(newPage) newPage,
aniListWatchlist.set(result) perPage,
aniListLoggedIn.set(true) MediaListSort.UpdatedTimeDesc,
}) ).then((result) => {
watchListPage.set(newPage);
aniListWatchlist.set(result);
aniListLoggedIn.set(true);
});
} }
function changePage(e): void { function changePage(e): void {
if ((e.key === "Enter" || e.key === "Tab") && Number(e.target.value) !== page) ChangeWatchListPage(Number(e.target.value)) if (
(e.key === "Enter" || e.key === "Tab") &&
Number(e.target.value) !== page
)
ChangeWatchListPage(Number(e.target.value));
} }
function changeCountPerPage(e): void { function changeCountPerPage(e): void {
GetAniListUserWatchingList(1, Number(e.target.value), MediaListSort.UpdatedTimeDesc).then((result) => { GetAniListUserWatchingList(
animePerPage.set(Number(e.target.value)) 1,
watchListPage.set(1) Number(e.target.value),
aniListWatchlist.set(result) MediaListSort.UpdatedTimeDesc,
aniListLoggedIn.set(true) ).then((result) => {
}) animePerPage.set(Number(e.target.value));
watchListPage.set(1);
aniListWatchlist.set(result);
aniListLoggedIn.set(true);
});
} }
</script> </script>
<div class="mb-8"> <div class="mb-8">
@@ -49,15 +60,19 @@
<ul class="inline-flex -space-x-px text-base h-10"> <ul class="inline-flex -space-x-px text-base h-10">
{#if page === 1} {#if page === 1}
<li> <li>
<button disabled <button
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"> 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 Previous
</button> </button>
</li> </li>
{:else} {:else}
<li> <li>
<button on:click={() => ChangeWatchListPage(page-1)} <button
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"> 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 Previous
</button> </button>
</li> </li>
@@ -65,27 +80,37 @@
{#each { length: aniListWatchListLoaded.data.Page.pageInfo.lastPage } as _, i} {#each { length: aniListWatchListLoaded.data.Page.pageInfo.lastPage } as _, i}
{#if i + 1 === page} {#if i + 1 === page}
<li> <li>
<button on:click={() => ChangeWatchListPage(i+1)} <button
class="flex items-center justify-center px-4 h-10 leading-tight border bg-gray-100 border-gray-700 bg-gray-700 text-white">{i + 1}</button> on:click={() => ChangeWatchListPage(i + 1)}
class="flex items-center justify-center px-4 h-10 leading-tight border bg-gray-100 border-gray-700 bg-gray-700 text-white"
>{i + 1}</button
>
</li> </li>
{:else} {:else}
<li> <li>
<button on:click={() => ChangeWatchListPage(i+1)} <button
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> 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> </li>
{/if} {/if}
{/each} {/each}
{#if page === aniListWatchListLoaded.data.Page.pageInfo.lastPage} {#if page === aniListWatchListLoaded.data.Page.pageInfo.lastPage}
<li> <li>
<button disabled <button
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"> 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 Next
</button> </button>
</li> </li>
{:else} {:else}
<li> <li>
<button on:click={() => ChangeWatchListPage(page+1)} <button
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"> 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 Next
</button> </button>
</li> </li>
@@ -95,8 +120,12 @@
{/if} {/if}
<div class="flex mt-5"> <div class="flex mt-5">
<div class="w-20 mx-auto"> <div class="w-20 mx-auto">
<select bind:value={perPage} on:change={(e) => changeCountPerPage(e)} id="countPerPage" <select
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"> 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} {#each perPageOptions as option}
<option value={option}> <option value={option}>
{option} {option}
@@ -108,38 +137,79 @@
<div> <div>
<div>Total Anime: {aniListWatchListLoaded.data.Page.pageInfo.total}</div> <div>Total Anime: {aniListWatchListLoaded.data.Page.pageInfo.total}</div>
{#if aniListWatchListLoaded.data.Page.pageInfo.lastPage <= 12} {#if aniListWatchListLoaded.data.Page.pageInfo.lastPage <= 12}
<div class="md:hidden">Page: {page} of {aniListWatchListLoaded.data.Page.pageInfo.lastPage}</div> <div class="md:hidden">
Page: {page} of {aniListWatchListLoaded.data.Page.pageInfo.lastPage}
</div>
{:else} {:else}
<div>Page: {page} of {aniListWatchListLoaded.data.Page.pageInfo.lastPage}</div> <div>
Page: {page} of {aniListWatchListLoaded.data.Page.pageInfo.lastPage}
</div>
{/if} {/if}
</div> </div>
<div class="max-w-xs mx-auto"> <div class="max-w-xs mx-auto">
<div class="relative flex items-center max-w-[11rem]"> <div class="relative flex items-center max-w-[11rem]">
<button type="button" id="decrement-button" on:click={() => ChangeWatchListPage(page-1)} <button
class="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"> type="button"
<svg class="w-3 h-3 text-white" aria-hidden="true" id="decrement-button"
xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 2"> on:click={() => ChangeWatchListPage(page - 1)}
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="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"
d="M1 1h16"/> >
<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> </svg>
</button> </button>
<input type="number" min="1" max="{aniListWatchListLoaded.data.Page.pageInfo.lastPage}" <input
on:keydown={changePage} id="page-counter" 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" 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/> value={page}
<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"> 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> <span>Page #</span>
</div> </div>
<button type="button" id="increment-button" on:click={() => ChangeWatchListPage(page+1)} <button
class="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"> type="button"
<svg class="w-3 h-3 text-white" aria-hidden="true" id="increment-button"
xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 18"> on:click={() => ChangeWatchListPage(page + 1)}
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="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"
d="M9 1v16M1 9h16"/> >
<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> </svg>
</button> </button>
</div> </div>
</div> </div>
</div> </div>
</div> </div>