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

Browse Source
This commit is contained in:
Torsten Dittmann
2022-10-26 19:44:19 +02:00
parent 5a8a2d4049
commit b8b039f7ec
42 changed files with 263 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/components/emptySearch.svelte
+2 -2
View File
@@ -2,7 +2,7 @@
import { app } from '$lib/stores/app';
import Light from '$lib/images/search-light.svg';
import Dark from '$lib/images/search-dark.svg';
import Pagination from './pagination.svelte';
import PaginationInline from './paginationInline.svelte';
</script>
<article class="card u-grid u-cross-center u-width-full-line common-section">
@@ -18,5 +18,5 @@
<div class="u-flex u-margin-block-start-32 u-main-space-between">
<p class="text">Total results: 0</p>
<Pagination limit={1} offset={0} sum={0} />
<PaginationInline limit={1} offset={0} sum={0} />
</div>
src/lib/components/index.ts
+1
View File
@@ -1,5 +1,6 @@
export { default as Modal } from './modal.svelte';
export { default as Pagination } from './pagination.svelte';
export { default as PaginationInline } from './paginationInline.svelte';
export { default as Card } from './card.svelte';
export { default as CardGrid } from './cardGrid.svelte';
export { default as CardContainer } from './cardContainer.svelte';
src/lib/components/pagination.svelte
+4 -29
View File
@@ -1,38 +1,14 @@
<script lang="ts">
import { createEventDispatcher } from 'svelte';
export let sum: number;
export let limit: number;
export let offset: number;
export let path: string = '';
export let path: string;
export let hidePages = false;
const dispatch = createEventDispatcher();
$: totalPages = Math.ceil(sum / limit);
$: currentPage = Math.floor(offset / limit + 1);
$: pages = pagination(currentPage, totalPages);
function handleOptionClick(page: number) {
if (currentPage !== page) {
offset = limit * (page - 1);
currentPage = page;
dispatch('change');
}
}
function handleButtonPage(direction: string) {
if (direction === 'next' && currentPage < totalPages) {
currentPage += 1;
offset = limit * (currentPage - 1);
dispatch('change');
} else if (direction === 'prev' && currentPage > 1) {
currentPage -= 1;
offset = limit * (currentPage - 1);
dispatch('change');
}
}
function pagination(page: number, total: number) {
const pagesShown = 5;
const start = Math.max(
@@ -66,15 +42,14 @@
{#each pages as page}
{#if typeof page === 'number'}
<li class="pagination-item">
<button
type="button"
<a
href={`${path}/${page}`}
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>
</a>
</li>
{:else}
<li class="li is-text">
src/lib/components/paginationInline.svelte
+117
View File
@@ -0,0 +1,117 @@
<script lang="ts">
import { createEventDispatcher } from 'svelte';
export let sum: number;
export let limit: number;
export let offset: number;
export let hidePages = false;
const dispatch = createEventDispatcher();
$: totalPages = Math.ceil(sum / limit);
$: currentPage = Math.floor(offset / limit + 1);
$: pages = pagination(currentPage, totalPages);
function handleOptionClick(page: number) {
if (currentPage !== page) {
offset = limit * (page - 1);
currentPage = page;
dispatch('change');
}
}
function handleButtonPage(direction: string) {
if (direction === 'next' && currentPage < totalPages) {
currentPage += 1;
offset = limit * (currentPage - 1);
dispatch('change');
} else if (direction === 'prev' && currentPage > 1) {
currentPage -= 1;
offset = limit * (currentPage - 1);
dispatch('change');
}
}
function pagination(page: number, total: number) {
const pagesShown = 5;
const start = Math.max(
1,
Math.min(page - Math.floor((pagesShown - 3) / 2), total - pagesShown + 2)
);
const end = Math.min(
total,
Math.max(page + Math.floor((pagesShown - 2) / 2), pagesShown - 1)
);
return [
...(start > 2 ? [1, '...'] : start > 1 ? [1] : []),
...Array.from({ length: end + 1 - start }, (_, i) => i + start),
...(end < total - 1 ? ['...', total] : end < total ? [total] : [])
];
}
</script>
{#if totalPages > 1}
<nav class="pagination">
<button
type="button"
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>
</button>
{#if !hidePages}
<ol class="pagination-list is-only-desktop">
{#each pages as page}
{#if typeof page === 'number'}
<li class="pagination-item">
<button
type="button"
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>
</li>
{:else}
<li class="li is-text">
<span class="icon">...</span>
</li>
{/if}
{/each}
</ol>
{/if}
<button
on:click={() => handleButtonPage('next')}
class:is-disabled={currentPage === totalPages}
class="button is-text"
type="button"
aria-label="next page">
<span class="text">Next</span>
<span class="icon-cheveron-right" aria-hidden="true" />
</button>
</nav>
{:else}
<nav class="pagination">
<button type="button" class="button is-text is-disabled" aria-label="prev page">
<span class="icon-cheveron-left" aria-hidden="true" />
<span class="text">Prev</span>
</button>
{#if !hidePages}
<ol class="pagination-list is-only-desktop">
<li class="pagination-item">
<button type="button" class="button is-disabled" aria-label="page">
<span class="text">1</span>
</button>
</li>
</ol>
{/if}
<button type="button" class="button is-text is-disabled" aria-label="next page">
<span class="text">Next</span>
<span class="icon-cheveron-right" aria-hidden="true" />
</button>
</nav>
{/if}
src/lib/components/permissions/team.svelte
+2 -2
View File
@@ -3,7 +3,7 @@
import { createEventDispatcher } from 'svelte';
import { sdkForProject } from '$lib/stores/sdk';
import { Query, type Models } from '@aw-labs/appwrite-console';
import { AvatarInitials, Modal, Pagination } from '..';
import { AvatarInitials, Modal, PaginationInline } from '..';
import type { Writable } from 'svelte/store';
import type { Permission } from './permissions.svelte';
@@ -101,7 +101,7 @@
{/if}
<div class="u-flex u-margin-block-start-32 u-main-space-between">
<p class="text">Total results: {results?.total}</p>
<Pagination limit={5} bind:offset sum={results?.total} hidePages />
<PaginationInline limit={5} bind:offset sum={results?.total} hidePages />
</div>
<svelte:fragment slot="footer">
<Button submit disabled={!hasSelection}>Create</Button>
src/lib/components/permissions/user.svelte
+2 -2
View File
@@ -1,7 +1,7 @@
<script lang="ts">
import { Button, Form, InputSearch } from '$lib/elements/forms';
import { createEventDispatcher } from 'svelte';
import { AvatarInitials, Modal, Pagination } from '..';
import { AvatarInitials, Modal, PaginationInline } from '..';
import { sdkForProject } from '$lib/stores/sdk';
import { Query, type Models } from '@aw-labs/appwrite-console';
import type { Writable } from 'svelte/store';
@@ -97,7 +97,7 @@
{/if}
<div class="u-flex u-margin-block-start-32 u-main-space-between">
<p class="text">Total results: {results?.total}</p>
<Pagination limit={5} bind:offset sum={results?.total} hidePages />
<PaginationInline limit={5} bind:offset sum={results?.total} hidePages />
</div>
<svelte:fragment slot="footer">
<Button submit disabled={!hasSelection}>Create</Button>
src/routes/console/account/activity/[[page]]/+page.svelte
+7 -2
View File
@@ -1,5 +1,5 @@
<script lang="ts">
import { Empty } from '$lib/components';
import { Empty, Pagination } from '$lib/components';
import { Button } from '$lib/elements/forms';
import {
Table,
@@ -14,6 +14,7 @@
import { toLocaleDateTime } from '$lib/helpers/date';
import { sdkForConsole } from '$lib/stores/sdk';
import type { PageData } from './$types';
import { PAGE_LIMIT } from '$lib/constants';
export let data: PageData;
@@ -95,6 +96,10 @@
{/if}
<div class="u-flex u-margin-block-start-32 u-main-space-between">
<p class="text">Total results: {data.logs.total}</p>
<!-- <Pagination limit={$pageLimit} bind:offset={$offset} sum={data.logs.total} /> -->
<Pagination
limit={PAGE_LIMIT}
path="/console/account/activity"
offset={data.offset}
sum={data.logs.total} />
</div>
</Container>
src/routes/console/account/organizations/[[page]]/+page.svelte
+6 -3
View File
@@ -12,9 +12,8 @@
import { Container } from '$lib/layout';
import CreateOrganization from '../../../createOrganization.svelte';
import { sdkForConsole } from '$lib/stores/sdk';
import { cardLimit } from '$lib/stores/layout';
import type { PageData } from './$types';
import { CARD_LIMIT } from '$lib/constants';
import type { PageData } from './$types';
export let data: PageData;
@@ -73,7 +72,11 @@
{/if}
<div class="u-flex u-margin-block-start-32 u-main-space-between">
<p class="text">Total results: {data.organizations.total}</p>
<Pagination limit={$cardLimit} bind:offset={data.offset} sum={data.organizations.total} />
<Pagination
limit={CARD_LIMIT}
path="console/account/organizations"
offset={data.offset}
sum={data.organizations.total} />
</div>
</Container>
src/routes/console/account/sessions/[[page]]/+page.svelte
+1 -1
View File
@@ -117,6 +117,6 @@
{/if}
<div class="u-flex u-margin-block-start-32 u-main-space-between">
<p class="text">Total results: {data.sessions.total}</p>
<!-- <Pagination limit={$pageLimit} bind:offset={$offset} sum={data.sessions.total} /> -->
<!-- <Pagination limit={PAGE_LIMIT} offset={data.offset} sum={data.sessions.total} /> -->
</div>
</Container>
src/routes/console/organization-[organization]/[[page]]/+page.svelte
+6 -2
View File
@@ -2,7 +2,7 @@
import { goto } from '$app/navigation';
import { base } from '$app/paths';
import { Pill } from '$lib/elements';
import { GridItem1, Heading, Empty, CardContainer } from '$lib/components';
import { GridItem1, Heading, Empty, CardContainer, Pagination } from '$lib/components';
import { Button } from '$lib/elements/forms';
import { Container } from '$lib/layout';
import CreateProject from '../createProject.svelte';
@@ -102,7 +102,11 @@
{/if}
<div class="u-flex u-margin-block-start-32 u-main-space-between">
<p class="text">Total results: {data.projects.total}</p>
<!-- <Pagination limit={$cardLimit} bind:offset={$offset} sum={$projectList?.total} /> -->
<Pagination
path={`/console/organization-${$page.params.organization}`}
limit={CARD_LIMIT}
offset={data.offset}
sum={data.projects.total} />
</div>
</Container>
src/routes/console/organization-[organization]/members/[[page]]/+page.svelte
+7 -7
View File
@@ -8,7 +8,7 @@
TableCellText,
TableRow
} from '$lib/elements/table';
import { AvatarInitials, Heading } from '$lib/components';
import { AvatarInitials, Heading, Pagination } from '$lib/components';
import { Pill } from '$lib/elements';
import { Button } from '$lib/elements/forms';
import { Container } from '$lib/layout';
@@ -17,7 +17,7 @@
import { page } from '$app/stores';
import { addNotification } from '$lib/stores/notifications';
import { invalidate } from '$app/navigation';
import { Dependencies } from '$lib/constants';
import { Dependencies, PAGE_LIMIT } from '$lib/constants';
import Delete from '../../deleteMember.svelte';
import type { Models } from '@aw-labs/appwrite-console';
import type { PageData } from './$types';
@@ -110,11 +110,11 @@
</Table>
<div class="u-flex u-margin-block-start-32 u-main-space-between">
<p class="text">Total results: {data.organizationMembers.total}</p>
<!-- <Pagination
offset={0}
limit={$pageLimit}
path={`${$page.url.origin}/console/organization-${$page.params.organization}/members`}
sum={$memberList.total} /> -->
<Pagination
offset={data.offset}
limit={PAGE_LIMIT}
path={`/console/organization-${$page.params.organization}/members`}
sum={data.members.total} />
</div>
{/if}
</Container>
src/routes/console/organization-[organization]/members/[[page]]/+page.ts
+1
View File
@@ -8,6 +8,7 @@ export const load: PageLoad = async ({ params }) => {
const offset = page ? page * 5 - 5 : 0;
return {
offset,
organizationMembers: await sdkForConsole.teams.listMemberships(params.organization, [
Query.limit(PAGE_LIMIT),
Query.offset(offset)
src/routes/console/project-[project]/authentication/[[page]]/+page.svelte
+4 -4
View File
@@ -16,8 +16,8 @@
import { toLocaleDateTime } from '$lib/helpers/date';
import { Container } from '$lib/layout';
import { base } from '$app/paths';
import { pageLimit } from '$lib/stores/layout';
import { goto } from '$app/navigation';
import { PAGE_LIMIT } from '$lib/constants';
import Create from '../_createUser.svelte';
import type { Models } from '@aw-labs/appwrite-console';
import type { PageData } from './$types';
@@ -117,10 +117,10 @@
<div class="u-flex u-margin-block-start-32 u-main-space-between">
<p class="text">Total results: {data.users.total}</p>
<Pagination
limit={$pageLimit}
offset={0}
offset={data.offset}
limit={PAGE_LIMIT}
sum={data.users.total}
path={`${base}/console/project-${projectId}/authentication`} />
path={`/console/project-${projectId}/authentication`} />
</div>
{:else if search}
<EmptySearch>
src/routes/console/project-[project]/authentication/[[page]]/+page.ts
+1
View File
@@ -10,6 +10,7 @@ export const load: PageLoad = async ({ params, parent }) => {
const offset = pageToOffset(page, PAGE_LIMIT);
return {
offset,
users: await sdkForProject.users.list([
Query.limit(PAGE_LIMIT),
Query.offset(offset),
src/routes/console/project-[project]/authentication/teams/[[page]]/+page.svelte
+7 -2
View File
@@ -10,7 +10,7 @@
TableCell
} from '$lib/elements/table';
import { Button } from '$lib/elements/forms';
import { Empty, EmptySearch, Search, AvatarInitials } from '$lib/components';
import { Empty, EmptySearch, Search, AvatarInitials, Pagination } from '$lib/components';
import Create from '../../_createTeam.svelte';
import { goto } from '$app/navigation';
import { event } from '$lib/actions/analytics';
@@ -19,6 +19,7 @@
import { base } from '$app/paths';
import type { Models } from '@aw-labs/appwrite-console';
import type { PageData } from './$types';
import { PAGE_LIMIT } from '$lib/constants';
export let data: PageData;
@@ -73,7 +74,11 @@
</Table>
<div class="u-flex u-margin-block-start-32 u-main-space-between">
<p class="text">Total results: {data.teams.total}</p>
<!-- <Pagination limit={$pageLimit} bind:offset={$offset} sum={$teamsList.total} /> -->
<Pagination
limit={PAGE_LIMIT}
path={`/console/project-${$page.params.project}/authentication/teams`}
offset={data.offset}
sum={data.teams.total} />
</div>
{:else if search}
<EmptySearch>
src/routes/console/project-[project]/authentication/teams/[[page]]/+page.ts
+1
View File
@@ -10,6 +10,7 @@ export const load: PageLoad = async ({ params, parent }) => {
const offset = pageToOffset(page, PAGE_LIMIT);
return {
offset,
teams: sdkForProject.teams.list([
Query.limit(PAGE_LIMIT),
Query.offset(offset),
src/routes/console/project-[project]/authentication/teams/team-[team]/activity/[[page]]/+page.svelte
+8 -2
View File
@@ -1,5 +1,5 @@
<script lang="ts">
import { Empty } from '$lib/components';
import { Empty, Pagination } from '$lib/components';
import { Button } from '$lib/elements/forms';
import {
Table,
@@ -14,6 +14,8 @@
import { toLocaleDateTime } from '$lib/helpers/date';
import { sdkForProject } from '$lib/stores/sdk';
import type { PageData } from './$types';
import { PAGE_LIMIT } from '$lib/constants';
import { page } from '$app/stores';
export let data: PageData;
@@ -89,6 +91,10 @@
{/if}
<div class="u-flex u-margin-block-start-32 u-main-space-between">
<p class="text">Total results: {data.logs.total}</p>
<!-- <Pagination limit={$pageLimit} bind:offset={$offset} sum={data.logs.total} /> -->
<Pagination
limit={PAGE_LIMIT}
path={`/console/project-${$page.params.project}/authentication/teams/team-${$page.params.team}/activity`}
offset={data.offset}
sum={data.logs.total} />
</div>
</Container>
src/routes/console/project-[project]/authentication/teams/team-[team]/activity/[[page]]/+page.ts
+1
View File
@@ -10,6 +10,7 @@ export const load: PageLoad = async ({ params, parent }) => {
const offset = pageToOffset(page, PAGE_LIMIT);
return {
offset,
logs: sdkForProject.teams.listLogs(params.team, [
Query.limit(PAGE_LIMIT),
Query.offset(offset)
src/routes/console/project-[project]/authentication/teams/team-[team]/header.svelte
+1 -1
View File
@@ -28,7 +28,7 @@
<svelte:fragment slot="header">
<a
class="back-button"
href={`/console/project-${projectId}/authentication`}
href={`/console/project-${projectId}/authentication/teams`}
aria-label="page back">
<span class="icon-cheveron-left" aria-hidden="true" />
</a>
src/routes/console/project-[project]/authentication/teams/team-[team]/members/[[page]]/+page.svelte
+7 -3
View File
@@ -1,6 +1,6 @@
<script lang="ts">
import { page } from '$app/stores';
import { Empty, EmptySearch, Search, AvatarInitials } from '$lib/components';
import { Empty, EmptySearch, Search, AvatarInitials, Pagination } from '$lib/components';
import {
Table,
TableHeader,
@@ -18,7 +18,7 @@
import type { PageData } from './$types';
import CreateMember from '../../createMembership.svelte';
import DeleteMembership from '../../deleteMembership.svelte';
import { Dependencies } from '$lib/constants';
import { Dependencies, PAGE_LIMIT } from '$lib/constants';
export let data: PageData;
@@ -82,7 +82,11 @@
</Table>
<div class="u-flex u-margin-block-start-32 u-main-space-between">
<p class="text">Total results: {data.memberships.total}</p>
<!-- <Pagination limit={$pageLimit} bind:offset={$offset} sum={$memberships.total} /> -->
<Pagination
limit={PAGE_LIMIT}
path={`/console/project-${$page.params.project}/authentication/teams/team-${$page.params.team}/members`}
offset={data.offset}
sum={data.memberships.total} />
</div>
{:else if search}
<EmptySearch>
src/routes/console/project-[project]/authentication/teams/team-[team]/members/[[page]]/+page.ts
+1
View File
@@ -12,6 +12,7 @@ export const load: PageLoad = async ({ params, parent, depends }) => {
const offset = pageToOffset(page, PAGE_LIMIT);
return {
offset,
memberships: sdkForProject.teams.listMemberships(teamId, [
Query.limit(PAGE_LIMIT),
Query.offset(offset),
src/routes/console/project-[project]/authentication/user-[user]/+page.svelte
+1 -1
View File
@@ -174,7 +174,7 @@
let updatedPrefs = Object.fromEntries(prefs);
await sdkForProject.users.updatePrefs($user.$id, updatedPrefs);
$user.prefs = updatedPrefs;
invalidate(Dependencies.USER);
arePrefsDisabled = true;
addNotification({
src/routes/console/project-[project]/authentication/user-[user]/activity/[[page]]/+page.svelte
+8 -2
View File
@@ -1,5 +1,5 @@
<script lang="ts">
import { Empty } from '$lib/components';
import { Empty, Pagination } from '$lib/components';
import { Button } from '$lib/elements/forms';
import {
Table,
@@ -14,6 +14,8 @@
import { toLocaleDateTime } from '$lib/helpers/date';
import { sdkForProject } from '$lib/stores/sdk';
import type { PageData } from './$types';
import { PAGE_LIMIT } from '$lib/constants';
import { page } from '$app/stores';
export let data: PageData;
@@ -87,6 +89,10 @@
{/if}
<div class="u-flex u-margin-block-start-32 u-main-space-between">
<p class="text">Total results: {data.logs.total}</p>
<!-- <Pagination limit={$pageLimit} bind:offset={$offset} sum={data.logs.total} /> -->
<Pagination
limit={PAGE_LIMIT}
path={`/console/project-${$page.params.project}/authentication/user-${$page.params.user}/activity`}
offset={data.offset}
sum={data.logs.total} />
</div>
</Container>
src/routes/console/project-[project]/authentication/user-[user]/activity/[[page]]/+page.ts
+1
View File
@@ -10,6 +10,7 @@ export const load: PageLoad = async ({ params, parent }) => {
const offset = pageToOffset(page, PAGE_LIMIT);
return {
offset,
logs: await sdkForProject.account.listLogs([Query.limit(PAGE_LIMIT), Query.offset(offset)])
};
};
src/routes/console/project-[project]/authentication/user-[user]/memberships/[[page]]/+page.svelte
+1 -1
View File
@@ -78,7 +78,7 @@
{/if}
<div class="u-flex u-margin-block-start-32 u-main-space-between">
<p class="text">Total results: {data.memberships.total}</p>
<!-- <Pagination limit={$pageLimit} bind:offset={$offset} sum={data.total} /> -->
<!-- <Pagination limit={PAGE_LIMIT} bind:offset={$offset} sum={data.total} /> -->
</div>
</Container>
src/routes/console/project-[project]/authentication/user-[user]/sessions/[[page]]/+page.svelte
+1 -1
View File
@@ -95,7 +95,7 @@
{/if}
<div class="u-flex u-margin-block-start-32 u-main-space-between">
<p class="text">Total results: {data.sessions.total}</p>
<!-- <Pagination limit={$pageLimit} bind:offset={$offset} sum={data.sessions.total} /> -->
<!-- <Pagination limit={PAGE_LIMIT} bind:offset={$offset} sum={data.sessions.total} /> -->
</div>
</Container>
src/routes/console/project-[project]/databases/[[page]]/+page.svelte
+7 -2
View File
@@ -2,13 +2,14 @@
import { page } from '$app/stores';
import { goto } from '$app/navigation';
import { Button } from '$lib/elements/forms';
import { Empty, Copy, GridItem1, CardContainer, Heading } from '$lib/components';
import { Empty, Copy, GridItem1, CardContainer, Heading, Pagination } from '$lib/components';
import { Pill } from '$lib/elements';
import { Container } from '$lib/layout';
import { base } from '$app/paths';
import Create from '../_create.svelte';
import type { Models } from '@aw-labs/appwrite-console';
import type { PageData } from './$types';
import { CARD_LIMIT } from '$lib/constants';
export let data: PageData;
@@ -50,7 +51,11 @@
<div class="u-flex u-margin-block-start-32 u-main-space-between">
<p class="text">Total results: {data.databases.total}</p>
<!-- <Pagination limit={$cardLimit} bind:offset={$offset} sum={data.databases.total} /> -->
<Pagination
limit={CARD_LIMIT}
path={`/console/project-${$page.params.project}/databases`}
offset={data.offset}
sum={data.databases.total} />
</div>
{:else}
<Empty isButton single on:click={() => (showCreate = true)}>
src/routes/console/project-[project]/databases/[[page]]/+page.ts
+1
View File
@@ -10,6 +10,7 @@ export const load: PageLoad = async ({ params, parent }) => {
const offset = pageToOffset(page, PAGE_LIMIT);
return {
offset,
databases: await sdkForProject.databases.list([
Query.limit(PAGE_LIMIT),
Query.offset(offset),
src/routes/console/project-[project]/databases/database-[database]/[[page]]/+page.svelte
+7 -2
View File
@@ -2,7 +2,7 @@
import { page } from '$app/stores';
import { goto } from '$app/navigation';
import { Button } from '$lib/elements/forms';
import { Empty, Copy, GridItem1, CardContainer, Heading } from '$lib/components';
import { Empty, Copy, GridItem1, CardContainer, Heading, Pagination } from '$lib/components';
import { Pill } from '$lib/elements';
import { Container } from '$lib/layout';
import { base } from '$app/paths';
@@ -11,6 +11,7 @@
import type { PageData } from './$types';
import type { Models } from '@aw-labs/appwrite-console';
import Create from '../create.svelte';
import { CARD_LIMIT } from '$lib/constants';
export let data: PageData;
let showCreate = false;
@@ -69,7 +70,11 @@
<div class="u-flex u-margin-block-start-32 u-main-space-between">
<p class="text">Total results: {data.collections.total}</p>
<!-- <Pagination limit={$cardLimit} bind:offset={$offset} sum={data.collections.total} /> -->
<Pagination
limit={CARD_LIMIT}
path={`/console/project-${$page.params.project}/databases/database-${$page.params.database}`}
offset={data.offset}
sum={data.collections.total} />
</div>
{:else}
<Empty isButton single on:click={() => (showCreate = true)}>
src/routes/console/project-[project]/databases/database-[database]/[[page]]/+page.ts
+1
View File
@@ -10,6 +10,7 @@ export const load: PageLoad = async ({ params, parent }) => {
const offset = pageToOffset(page, PAGE_LIMIT);
return {
offset,
collections: await sdkForProject.databases.listCollections(params.database, [
Query.limit(PAGE_LIMIT),
Query.offset(offset),
src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/[[page]]/+page.svelte
+7 -2
View File
@@ -7,7 +7,7 @@
TableCellHead,
TableCell
} from '$lib/elements/table';
import { Empty, Copy, Heading } from '$lib/components';
import { Empty, Copy, Heading, Pagination } from '$lib/components';
import { Pill } from '$lib/elements';
import { Container } from '$lib/layout';
import { Button } from '$lib/elements/forms';
@@ -17,6 +17,7 @@
import type { PageData } from './$types';
import { collection } from '../store';
import { page } from '$app/stores';
import { PAGE_LIMIT } from '$lib/constants';
export let data: PageData;
@@ -75,7 +76,11 @@
<div class="u-flex common-section u-main-space-between">
<p class="text">Total results: {data.documents.total}</p>
<!-- <Pagination limit={$pageLimit} bind:offset={$offset} sum={data.documents.total} /> -->
<Pagination
limit={PAGE_LIMIT}
path={`/console/project-${$page.params.project}/databases/database-${$page.params.database}/collection-${$page.params.collection}`}
offset={data.offset}
sum={data.documents.total} />
</div>
{:else}
<Empty isButton single on:click={openWizard}>
src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/[[page]]/+page.ts
+1
View File
@@ -11,6 +11,7 @@ export const load: PageLoad = async ({ params, parent, depends }) => {
const offset = pageToOffset(page, PAGE_LIMIT);
return {
offset,
documents: await sdkForProject.databases.listDocuments(params.database, params.collection, [
Query.limit(PAGE_LIMIT),
Query.offset(offset),
src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/+page.svelte
+1 -5
View File
@@ -110,11 +110,7 @@
</TableBody>
</Table>
<div class="u-flex common-section u-main-space-between">
<!-- <p class="text">Total results: {data.attributes.total}</p>
<Pagination
limit={$pageLimit}
bind:offset={$offset}
sum={data.attributes.total} /> -->
<p class="text">Total results: {data.attributes.total}</p>
</div>
{:else}
<Empty isButton single on:click={() => (showCreate = true)}>
src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/indexes/+page.svelte
-1
View File
@@ -111,7 +111,6 @@
</Table>
<div class="u-flex u-margin-block-start-32 u-main-space-between">
<p class="text">Total results: {data.indexes.total}</p>
<!-- <Pagination limit={$pageLimit} bind:offset sum={data.indexes.total} /> -->
</div>
{:else if search}
<EmptySearch>
src/routes/console/project-[project]/functions/[[page]]/+page.svelte
+7 -2
View File
@@ -1,7 +1,7 @@
<script lang="ts">
import { page } from '$app/stores';
import { Button } from '$lib/elements/forms';
import { Empty, CardContainer, Copy, GridItem1, Heading } from '$lib/components';
import { Empty, CardContainer, Copy, GridItem1, Heading, Pagination } from '$lib/components';
import { Pill } from '$lib/elements';
import { Container } from '$lib/layout';
import { base } from '$app/paths';
@@ -12,6 +12,7 @@
import { toLocaleDateTime } from '$lib/helpers/date';
import Create from '../createFunction.svelte';
import type { PageData } from './$types';
import { CARD_LIMIT } from '$lib/constants';
export let data: PageData;
@@ -93,7 +94,11 @@
</CardContainer>
<div class="u-flex u-margin-block-start-32 u-main-space-between">
<p class="text">Total results: {data.functions.total}</p>
<!-- <Pagination limit={$cardLimit} bind:offset sum={$functionList.total} /> -->
<Pagination
limit={CARD_LIMIT}
path={`/console/project-${$page.params.project}/functions`}
offset={data.offset}
sum={data.functions.total} />
</div>
{:else}
<Empty isButton single on:click={openWizard}>
src/routes/console/project-[project]/functions/[[page]]/+page.ts
+1
View File
@@ -11,6 +11,7 @@ export const load: PageLoad = async ({ params, parent, depends }) => {
const offset = pageToOffset(page, PAGE_LIMIT);
return {
offset,
functions: await sdkForProject.functions.list([
Query.limit(PAGE_LIMIT),
Query.offset(offset),
src/routes/console/project-[project]/functions/function-[function]/[[page]]/+page.svelte
+9 -3
View File
@@ -8,7 +8,8 @@
DropListItem,
Empty,
Status,
Heading
Heading,
Pagination
} from '$lib/components';
import {
Table,
@@ -27,7 +28,7 @@
import { toLocaleDateTime } from '$lib/helpers/date';
import { log } from '$lib/stores/logs';
import { invalidate } from '$app/navigation';
import { Dependencies } from '$lib/constants';
import { Dependencies, PAGE_LIMIT } from '$lib/constants';
import type { Models } from '@aw-labs/appwrite-console';
import type { PageData } from './$types';
import Delete from '../delete.svelte';
@@ -35,6 +36,7 @@
import Activate from '../activate.svelte';
import { browser } from '$app/environment';
import { sdkForConsole } from '$lib/stores/sdk';
import { page } from '$app/stores';
export let data: PageData;
@@ -250,7 +252,11 @@
{/if}
<div class="u-flex u-margin-block-start-32 u-main-space-between">
<p class="text">Total results: {data.deployments.total}</p>
<!-- <Pagination limit={$pageLimit} bind:offset sum={$deploymentList?.total} /> -->
<Pagination
limit={PAGE_LIMIT}
path={`/console/project-${$page.params.project}/functions/function-${$page.params.function}`}
offset={data.offset}
sum={data.deployments.total} />
</div>
</Container>
src/routes/console/project-[project]/functions/function-[function]/[[page]]/+page.ts
+1
View File
@@ -11,6 +11,7 @@ export const load: PageLoad = async ({ params, parent, depends }) => {
const offset = pageToOffset(page, PAGE_LIMIT);
return {
offset,
deployments: await sdkForProject.functions.listDeployments(params.function, [
Query.limit(PAGE_LIMIT),
Query.offset(offset),
src/routes/console/project-[project]/functions/function-[function]/executions/[[page]]/+page.svelte
+8 -2
View File
@@ -2,7 +2,7 @@
import { Container } from '$lib/layout';
import { Button } from '$lib/elements/forms';
import { Pill } from '$lib/elements';
import { Copy, Empty, Status, Heading } from '$lib/components';
import { Copy, Empty, Status, Heading, Pagination } from '$lib/components';
import {
Table,
TableHeader,
@@ -17,6 +17,8 @@
import { log } from '$lib/stores/logs';
import { func } from '../../store';
import type { PageData } from './$types';
import { PAGE_LIMIT } from '$lib/constants';
import { page } from '$app/stores';
export let data: PageData;
@@ -80,6 +82,10 @@
{/if}
<div class="u-flex u-margin-block-start-32 u-main-space-between">
<p class="text">Total results: {data.executions.total}</p>
<!-- <Pagination limit={$pageLimit} bind:offset sum={$executionList?.total} /> -->
<Pagination
limit={PAGE_LIMIT}
path={`/console/project-${$page.params.project}/functions/function-${$page.params.function}/executions`}
offset={data.offset}
sum={data.executions.total} />
</div>
</Container>
src/routes/console/project-[project]/functions/function-[function]/executions/[[page]]/+page.ts
+1
View File
@@ -10,6 +10,7 @@ export const load: PageLoad = async ({ params, parent }) => {
const offset = pageToOffset(page, PAGE_LIMIT);
return {
offset,
executions: await sdkForProject.functions.listExecutions(params.function, [
Query.limit(PAGE_LIMIT),
Query.offset(offset),
src/routes/console/project-[project]/storage/[[page]]/+page.svelte
+6 -2
View File
@@ -8,9 +8,9 @@
import { Container } from '$lib/layout';
import { base } from '$app/paths';
import { tooltip } from '$lib/actions/tooltip';
import { cardLimit } from '$lib/stores/layout';
import type { Models } from '@aw-labs/appwrite-console';
import type { PageData } from './$types';
import { CARD_LIMIT } from '$lib/constants';
export let data: PageData;
let showCreate = false;
@@ -84,7 +84,11 @@
<div class="u-flex u-margin-block-start-32 u-main-space-between">
<p class="text">Total results: {data.buckets.total}</p>
<Pagination limit={$cardLimit} bind:offset={data.offset} sum={data.buckets.total} />
<Pagination
limit={CARD_LIMIT}
path={`/console/project-${$page.params.project}/storage`}
offset={data.offset}
sum={data.buckets.total} />
</div>
{:else}
<Empty isButton single on:click={() => (showCreate = true)}>
src/routes/console/project-[project]/storage/bucket-[bucket]/[[page]]/+page.svelte
+6 -3
View File
@@ -32,10 +32,9 @@
import type { Models } from '@aw-labs/appwrite-console';
import { uploader } from '$lib/stores/uploader';
import { addNotification } from '$lib/stores/notifications';
import { pageLimit } from '$lib/stores/layout';
import type { PageData } from './$types';
import { invalidate } from '$app/navigation';
import { Dependencies } from '$lib/constants';
import { Dependencies, PAGE_LIMIT } from '$lib/constants';
export let data: PageData;
@@ -175,7 +174,11 @@
</Table>
<div class="u-flex u-margin-block-start-32 u-main-space-between">
<p class="text">Total results: {data.files.total}</p>
<Pagination limit={$pageLimit} bind:offset={data.offset} sum={data.files.total} />
<Pagination
limit={PAGE_LIMIT}
path={`/console/project-${$page.params.project}/storage/bucket-${$page.params.bucket}`}
offset={data.offset}
sum={data.files.total} />
</div>
{:else if search}
<EmptySearch>