Appwrite/console
1
0
Fork 0
mirror of https://github.com/appwrite/console.git synced 2026-06-06 19:27:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: pagination small css, html & type fixes

Browse Source
This commit is contained in:
Arman
2022-05-20 13:30:26 +02:00
parent b4c082f6fa
commit 4c2be3ca4a
1 changed files with 21 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/components/pagination.svelte
+21 -23
View File
@@ -7,17 +7,15 @@
const totalPages = Math.ceil(totalItems / pageSize);
let currentPage = Math.floor(offset / pageSize + 1);
console.log(currentPage);
function handleOptionClick(page) {
function handleOptionClick(page: number) {
if (currentPage !== page) {
offset = pageSize * (page - 1);
console.log(offset);
currentPage = page;
dispatch('change');
}
}
function handleButtonPage(direction) {
function handleButtonPage(direction: string) {
if (direction === 'next' && currentPage < totalPages) {
currentPage += 1;
offset = pageSize * (currentPage - 1);
@@ -31,7 +29,7 @@
let pages = pagination(currentPage, totalPages);
function pagination(current, total) {
function pagination(current: number, total: number) {
let delta = 2,
left = current - delta,
right = current + delta + 1,
@@ -56,28 +54,28 @@
rangeWithDots.push(i);
l = i;
}
return rangeWithDots;
}
</script>
<nav class="pagination">
<span
on:click={() => handleButtonPage('prev')}
class:is-disabled={currentPage <= 1}
class="button is-text "
aria-label="prev page">
<span class="icon-cheveron-left" aria-hidden="true" />
<span class="text">Prev</span>
</span>
<ol class="pagination-list is-only-desktop">
<span
on:click={() => handleButtonPage('prev')}
class:is-disabled={currentPage <= 1}
class="button is-text "
aria-label="prev page">
<span class="icon-cheveron-left" aria-hidden="true" />
<span class="text">Prev</span>
</span>
{#each pages as page}
{#if typeof page === 'number'}
<li class="pagination-item">
<button
class="button is-text"
class="button"
on:click={() => handleOptionClick(page)}
class:is-disabled={currentPage === page}
class:is-text={currentPage !== page}
aria-label="page">
<span class="text">{page}</span>
</button>
@@ -88,13 +86,13 @@
</li>
{/if}
{/each}
<span
on:click={() => handleButtonPage('next')}
class:is-disabled={currentPage === totalPages}
class="button is-text"
aria-label="next page">
<span class="text">Next</span>
<span class="icon-cheveron-right" aria-hidden="true" />
</span>
</ol>
<span
on:click={() => handleButtonPage('next')}
class:is-disabled={currentPage === totalPages}
class="button is-text"
aria-label="next page">
<span class="text">Next</span>
<span class="icon-cheveron-right" aria-hidden="true" />
</span>
</nav>