Format Pagination component code for consistency
- 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:
@@ -1,145 +1,215 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import {
|
import {
|
||||||
aniListLoggedIn,
|
aniListLoggedIn,
|
||||||
aniListWatchlist,
|
aniListWatchlist,
|
||||||
animePerPage,
|
animePerPage,
|
||||||
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
|
||||||
function changeCountPerPage(e): void {
|
)
|
||||||
GetAniListUserWatchingList(1, Number(e.target.value), MediaListSort.UpdatedTimeDesc).then((result) => {
|
ChangeWatchListPage(Number(e.target.value));
|
||||||
animePerPage.set(Number(e.target.value))
|
}
|
||||||
watchListPage.set(1)
|
|
||||||
aniListWatchlist.set(result)
|
|
||||||
aniListLoggedIn.set(true)
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
|
function changeCountPerPage(e): void {
|
||||||
|
GetAniListUserWatchingList(
|
||||||
|
1,
|
||||||
|
Number(e.target.value),
|
||||||
|
MediaListSort.UpdatedTimeDesc,
|
||||||
|
).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">
|
||||||
{#if aniListWatchListLoaded.data.Page.pageInfo.lastPage <= 12}
|
{#if aniListWatchListLoaded.data.Page.pageInfo.lastPage <= 12}
|
||||||
<nav aria-label="Page navigation" class="hidden md:block">
|
<nav aria-label="Page navigation" class="hidden md:block">
|
||||||
<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
|
||||||
Previous
|
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"
|
||||||
</button>
|
>
|
||||||
</li>
|
Previous
|
||||||
{:else}
|
</button>
|
||||||
<li>
|
</li>
|
||||||
<button on:click={() => ChangeWatchListPage(page-1)}
|
{:else}
|
||||||
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">
|
<li>
|
||||||
Previous
|
<button
|
||||||
</button>
|
on:click={() => ChangeWatchListPage(page - 1)}
|
||||||
</li>
|
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"
|
||||||
{/if}
|
>
|
||||||
{#each {length: aniListWatchListLoaded.data.Page.pageInfo.lastPage} as _, i}
|
Previous
|
||||||
{#if i + 1 === page}
|
</button>
|
||||||
<li>
|
</li>
|
||||||
<button on:click={() => ChangeWatchListPage(i+1)}
|
{/if}
|
||||||
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>
|
{#each { length: aniListWatchListLoaded.data.Page.pageInfo.lastPage } as _, i}
|
||||||
</li>
|
{#if i + 1 === page}
|
||||||
{:else}
|
<li>
|
||||||
<li>
|
<button
|
||||||
<button on:click={() => ChangeWatchListPage(i+1)}
|
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>
|
class="flex items-center justify-center px-4 h-10 leading-tight border bg-gray-100 border-gray-700 bg-gray-700 text-white"
|
||||||
</li>
|
>{i + 1}</button
|
||||||
{/if}
|
>
|
||||||
{/each}
|
</li>
|
||||||
{#if page === aniListWatchListLoaded.data.Page.pageInfo.lastPage}
|
{:else}
|
||||||
<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">
|
on:click={() => ChangeWatchListPage(i + 1)}
|
||||||
Next
|
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"
|
||||||
</button>
|
>{i + 1}</button
|
||||||
</li>
|
>
|
||||||
{:else}
|
</li>
|
||||||
<li>
|
{/if}
|
||||||
<button on:click={() => ChangeWatchListPage(page+1)}
|
{/each}
|
||||||
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">
|
{#if page === aniListWatchListLoaded.data.Page.pageInfo.lastPage}
|
||||||
Next
|
<li>
|
||||||
</button>
|
<button
|
||||||
</li>
|
disabled
|
||||||
{/if}
|
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"
|
||||||
</ul>
|
>
|
||||||
</nav>
|
Next
|
||||||
{/if}
|
</button>
|
||||||
<div class="flex mt-5">
|
</li>
|
||||||
<div class="w-20 mx-auto">
|
{:else}
|
||||||
<select bind:value={perPage} on:change={(e) => changeCountPerPage(e)} id="countPerPage"
|
<li>
|
||||||
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">
|
<button
|
||||||
{#each perPageOptions as option}
|
on:click={() => ChangeWatchListPage(page + 1)}
|
||||||
<option value={option}>
|
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"
|
||||||
{option}
|
>
|
||||||
</option>
|
Next
|
||||||
{/each}
|
</button>
|
||||||
</select>
|
</li>
|
||||||
</div>
|
{/if}
|
||||||
|
</ul>
|
||||||
<div>
|
</nav>
|
||||||
<div>Total Anime: {aniListWatchListLoaded.data.Page.pageInfo.total}</div>
|
{/if}
|
||||||
{#if aniListWatchListLoaded.data.Page.pageInfo.lastPage <= 12}
|
<div class="flex mt-5">
|
||||||
<div class="md:hidden">Page: {page} of {aniListWatchListLoaded.data.Page.pageInfo.lastPage}</div>
|
<div class="w-20 mx-auto">
|
||||||
{:else}
|
<select
|
||||||
<div>Page: {page} of {aniListWatchListLoaded.data.Page.pageInfo.lastPage}</div>
|
bind:value={perPage}
|
||||||
{/if}
|
on:change={(e) => changeCountPerPage(e)}
|
||||||
</div>
|
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"
|
||||||
<div class="max-w-xs mx-auto">
|
>
|
||||||
<div class="relative flex items-center max-w-[11rem]">
|
{#each perPageOptions as option}
|
||||||
<button type="button" id="decrement-button" on:click={() => ChangeWatchListPage(page-1)}
|
<option value={option}>
|
||||||
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">
|
{option}
|
||||||
<svg class="w-3 h-3 text-white" aria-hidden="true"
|
</option>
|
||||||
xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 2">
|
{/each}
|
||||||
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
</select>
|
||||||
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="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">
|
|
||||||
<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>
|
||||||
</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="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"
|
||||||
|
>
|
||||||
|
<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="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"
|
||||||
|
>
|
||||||
|
<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>
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user