feat: replace hard coded limits with store limit

This commit is contained in:
Arman
2022-10-03 17:15:02 +02:00
parent 35293f10b5
commit 49ff69cdcf
10 changed files with 34 additions and 35 deletions
+1
View File
@@ -75,3 +75,4 @@ export function updateLayout(args: updateLayoutArguments) {
}
export const pageLimit = readable(12); // default page limit
export const cardLimit = readable(6); // default page limit
@@ -7,6 +7,7 @@
import { organizationList } from '$lib/stores/organization';
import { onMount } from 'svelte';
import { sdkForConsole } from '$lib/stores/sdk';
import { cardLimit } from '$lib/stores/layout';
onMount(async () => {
await organizationList.load();
@@ -28,7 +29,6 @@
let addOrganization = false;
let offset = 0;
const limit = 6;
</script>
<Container>
@@ -52,7 +52,7 @@
};`}>
{#each $organizationList.teams as organization, index}
{@const avatarList = getMemberships(organization.$id)}
{#if index >= offset && index < limit + offset}
{#if index >= offset && index < $cardLimit + offset}
<GridItem1 href={`${base}/console/organization-${organization.$id}`}>
<svelte:fragment slot="eyebrow"
>{organization?.total ? organization?.total : 'No'} projects</svelte:fragment>
@@ -67,7 +67,7 @@
</GridItem1>
{/if}
{/each}
{#if $organizationList?.total < limit + offset && ($organizationList?.total % 2 !== 0 || $organizationList?.total % 4 === 0)}
{#if $organizationList?.total < $cardLimit + offset && ($organizationList?.total % 2 !== 0 || $organizationList?.total % 4 === 0)}
<Empty isButton on:click={() => (addOrganization = true)}>
<p>Create a new organization</p>
</Empty>
@@ -76,7 +76,7 @@
<div class="u-flex u-margin-block-start-32 u-main-space-between">
<p class="text">Total results: {$organizationList?.total}</p>
<Pagination {limit} bind:offset sum={$organizationList?.total} />
<Pagination limit={$cardLimit} bind:offset sum={$organizationList?.total} />
</div>
{:else}
<Empty isButton single on:click={() => (addOrganization = true)}>
@@ -84,7 +84,7 @@
</Empty>
<div class="u-flex u-margin-block-start-32 u-main-space-between">
<p class="text">Total results: {$organizationList?.total}</p>
<Pagination {limit} bind:offset sum={$organizationList?.total} />
<Pagination limit={$cardLimit} bind:offset sum={$organizationList?.total} />
</div>
{/if}
</Container>
@@ -1,5 +1,5 @@
<script lang="ts">
import { updateLayout } from '$lib/stores/layout';
import { pageLimit, updateLayout } from '$lib/stores/layout';
import { onMount } from 'svelte';
import { afterNavigate } from '$app/navigation';
import {
@@ -24,7 +24,7 @@
if ($organization?.$id !== organizationId) {
await organization.load(organizationId);
}
await memberList.load(organizationId, [Query.limit(12)]);
await memberList.load(organizationId, [Query.limit($pageLimit)]);
updateLayout({
navigate: event,
title: $organization?.name,
@@ -12,6 +12,7 @@
import { page } from '$app/stores';
import CreateOrganization from '../_createOrganization.svelte';
import CreateProject from './_createProject.svelte';
import { cardLimit } from '$lib/stores/layout';
let projects: Models.Project[] = [];
$: organizationId = $page.params.organization;
@@ -22,7 +23,7 @@
async function handle() {
await projectList.load([
Query.offset(offset),
Query.limit(limit),
Query.limit($cardLimit),
Query.equal('teamId', organizationId)
]);
}
@@ -30,7 +31,6 @@
let showCreate = false;
let addOrganization = false;
let offset = 0;
const limit = 6;
const projectCreated = async (event: CustomEvent<Models.Project>) => {
await project.load(event.detail.$id);
@@ -84,7 +84,7 @@
projects.length > 3 ? '22rem' : '25rem'
};`}>
{#each $projectList.projects as project, index}
{#if index >= offset && index < limit + offset}
{#if index >= offset && index < $cardLimit + offset}
<GridItem1 href={`${base}/console/project-${project.$id}`}>
<svelte:fragment slot="eyebrow">
{project?.platforms?.length ? project?.platforms?.length : 'No'} apps
@@ -112,7 +112,7 @@
</GridItem1>
{/if}
{/each}
{#if projects.length < limit + offset && (projects.length % 2 !== 0 || projects.length % 4 === 0)}
{#if projects.length < $cardLimit + offset && (projects.length % 2 !== 0 || projects.length % 4 === 0)}
<Empty isButton on:click={() => (showCreate = true)}>
<p>Create a new project</p>
</Empty>
@@ -121,7 +121,7 @@
<div class="u-flex u-margin-block-start-32 u-main-space-between">
<p class="text">Total results: {projects.length}</p>
<Pagination {limit} bind:offset sum={projects.length} />
<Pagination limit={$cardLimit} bind:offset sum={projects.length} />
</div>
{:else}
<Empty isButton single on:click={() => (showCreate = true)}>
@@ -129,7 +129,7 @@
</Empty>
<div class="u-flex u-margin-block-start-32 u-main-space-between">
<p class="text">Total results: {projects?.length}</p>
<Pagination {limit} bind:offset sum={projects?.length} />
<Pagination limit={$cardLimit} bind:offset sum={projects?.length} />
</div>
{/if}
</Container>
@@ -20,12 +20,12 @@
import { base } from '$app/paths';
import { teamsList } from '../store';
import { Query, type Models } from '@aw-labs/appwrite-console';
import { pageLimit } from '$lib/stores/layout';
let search = '';
let showCreate = false;
let offset = 0;
const limit = 25;
const project = $page.params.project;
const getAvatar = (name: string) => sdkForProject.avatars.getInitials(name, 32, 32).toString();
const teamCreated = async (event: CustomEvent<Models.Team>) => {
@@ -34,7 +34,7 @@
$: if (search) offset = 0;
$: teamsList.load(
[Query.limit(limit), Query.offset(offset), Query.orderDesc('$createdAt')],
[Query.limit($pageLimit), Query.offset(offset), Query.orderDesc('$createdAt')],
search
);
</script>
@@ -81,7 +81,7 @@
</Table>
<div class="u-flex u-margin-block-start-32 u-main-space-between">
<p class="text">Total results: {$teamsList.total}</p>
<Pagination {limit} bind:offset sum={$teamsList.total} />
<Pagination limit={$pageLimit} bind:offset sum={$teamsList.total} />
</div>
{:else if search}
<Empty single>
@@ -97,7 +97,7 @@
</Empty>
<div class="u-flex u-margin-block-start-32 u-main-space-between">
<p class="text">Total results: {$teamsList.total}</p>
<Pagination {limit} bind:offset sum={$teamsList.total} />
<Pagination limit={$pageLimit} bind:offset sum={$teamsList.total} />
</div>
{:else}
<Empty isButton single on:click={() => (showCreate = true)}>
@@ -17,6 +17,7 @@
import DeleteMembership from '../_deleteMembership.svelte';
import DeleteAllMemberships from '../_deleteAllMemberships.svelte';
import type { Models } from '@aw-labs/appwrite-console';
import { pageLimit } from '$lib/stores/layout';
const getAvatar = (name: string) => sdkForProject.avatars.getInitials(name, 32, 32).toString();
const deleted = () => (request = sdkForProject.users.listMemberships($page.params.user));
@@ -27,8 +28,6 @@
let showDelete = false;
let showDeleteAll = false;
const limit = 25;
$: request = sdkForProject.users.listMemberships($page.params.user);
</script>
@@ -97,7 +96,7 @@
class="u-flex u-margin-block-start-32
u-main-space-between">
<p class="text">Total results: {response.total}</p>
<Pagination {limit} bind:offset sum={response.total} />
<Pagination limit={$pageLimit} bind:offset sum={response.total} />
</div>
{/await}
</Container>
@@ -9,19 +9,19 @@
import { Container } from '$lib/layout';
import { base } from '$app/paths';
import { databaseList } from './store';
import { cardLimit } from '$lib/stores/layout';
let showCreate = false;
let search = '';
let offset = 0;
const limit = 6;
const project = $page.params.project;
const handleCreate = async (event: CustomEvent<Models.Database>) => {
showCreate = false;
await goto(`${base}/console/project-${project}/databases/database/${event.detail.$id}`);
};
$: databaseList.load([Query.limit(limit), Query.offset(offset)], search);
$: databaseList.load([Query.limit($cardLimit), Query.offset(offset)], search);
</script>
<Container>
@@ -48,7 +48,7 @@
</Copy>
</GridItem1>
{/each}
{#if ($databaseList.total % 2 !== 0 || $databaseList.total % 4 === 0) && $databaseList.total - offset <= limit}
{#if ($databaseList.total % 2 !== 0 || $databaseList.total % 4 === 0) && $databaseList.total - offset <= $cardLimit}
<Empty isButton on:click={() => (showCreate = true)}>
<p>Create a new database</p>
</Empty>
@@ -57,7 +57,7 @@
<div class="u-flex u-margin-block-start-32 u-main-space-between">
<p class="text">Total results: {$databaseList.total}</p>
<Pagination {limit} bind:offset sum={$databaseList.total} />
<Pagination limit={$cardLimit} bind:offset sum={$databaseList.total} />
</div>
{:else}
<Empty isButton single on:click={() => (showCreate = true)}>
@@ -9,12 +9,12 @@
import { Container } from '$lib/layout';
import { base } from '$app/paths';
import { collections } from './store';
import { cardLimit } from '$lib/stores/layout';
let showCreate = false;
let search = '';
let offset = 0;
const limit = 6;
const project = $page.params.project;
const databaseId = $page.params.database;
const handleCreate = async (event: CustomEvent<Models.Collection>) => {
@@ -24,7 +24,7 @@
);
};
$: collections.load(databaseId, [Query.limit(limit), Query.offset(offset)], search);
$: collections.load(databaseId, [Query.limit($cardLimit), Query.offset(offset)], search);
$: if (search) offset = 0;
</script>
@@ -62,7 +62,7 @@
</Copy>
</GridItem1>
{/each}
{#if ($collections.total % 2 !== 0 || $collections.total % 4 === 0) && $collections.total - offset <= limit}
{#if ($collections.total % 2 !== 0 || $collections.total % 4 === 0) && $collections.total - offset <= $cardLimit}
<Empty isButton on:click={() => (showCreate = true)}>
<p>Create a new collection</p>
</Empty>
@@ -71,7 +71,7 @@
<div class="u-flex u-margin-block-start-32 u-main-space-between">
<p class="text">Total results: {$collections.total}</p>
<Pagination {limit} bind:offset sum={$collections.total} />
<Pagination limit={$cardLimit} bind:offset sum={$collections.total} />
</div>
{:else if search}
<Empty>
@@ -87,7 +87,7 @@
</Empty>
<div class="u-flex u-margin-block-start-32 u-main-space-between">
<p class="text">Total results: {$collections?.total}</p>
<Pagination {limit} bind:offset sum={$collections?.total} />
<Pagination limit={$cardLimit} bind:offset sum={$collections?.total} />
</div>
{:else}
<Empty isButton single on:click={() => (showCreate = true)}>
@@ -17,10 +17,10 @@
import { wizard } from '$lib/stores/wizard';
import Create from './createDocument.svelte';
import { Query } from '@aw-labs/appwrite-console';
import { pageLimit } from '$lib/stores/layout';
let offset = 0;
const limit = 5;
const projectId = $page.params.project;
const databaseId = $page.params.database;
@@ -79,7 +79,7 @@
<div class="u-flex common-section u-main-space-between">
<p class="text">Total results: {$documentList.total}</p>
<Pagination {limit} bind:offset sum={$documentList.total} />
<Pagination limit={$pageLimit} bind:offset sum={$documentList.total} />
</div>
{:else}
<Empty isButton single on:click={openWizard}>
@@ -19,6 +19,7 @@
import Create from './createIndex.svelte';
import Overview from './overviewIndex.svelte';
import type { Models } from '@aw-labs/appwrite-console';
import { pageLimit } from '$lib/stores/layout';
let showDropdown = [];
let selectedIndex: Models.Index = null;
@@ -27,8 +28,6 @@
let showDelete = false;
let search = '';
let offset: number = null;
const limit = 5;
const collectionId = $page.params.collection;
const databaseId = $page.params.database;
@@ -138,7 +137,7 @@
</Table>
<div class="u-flex u-margin-block-start-32 u-main-space-between">
<p class="text">Total results: {$indexList?.total}</p>
<Pagination {limit} bind:offset sum={$indexList?.total} />
<Pagination limit={$pageLimit} bind:offset sum={$indexList?.total} />
</div>
{:else if search}
<Empty>
@@ -154,7 +153,7 @@
</Empty>
<div class="u-flex u-margin-block-start-32 u-main-space-between">
<p class="text">Total results: {$indexList?.total}</p>
<Pagination {limit} bind:offset sum={$indexList?.total} />
<Pagination limit={$pageLimit} bind:offset sum={$indexList?.total} />
</div>
{:else if $collection.indexes?.length}
<Empty isButton single on:click={() => (showCreateIndex = true)}>