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:
Arman
2023-03-03 12:56:30 +01:00
parent 75866c69d8
commit 24bab9b938
11 changed files with 125 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package-lock.json
Generated
+4 -4
View File
@@ -9,7 +9,7 @@
"version": "0.0.1",
"dependencies": {
"@analytics/google-analytics": "^1.0.5",
"@appwrite.io/pink": "^0.0.4",
"@appwrite.io/pink": "^0.0.6-rc.1",
"@aw-labs/appwrite-console": "^13.1.0",
"@popperjs/core": "^2.11.6",
"@sentry/svelte": "^7.36.0",
@@ -146,9 +146,9 @@
"integrity": "sha512-1Yw7u/COtxx06BfwlI+kVhsa/upKYzmCNrT4c8QDeCY2KMYlnijkUjtHiPU08HxyTIVB5j6d75O0YWVIHwQS8g=="
},
"node_modules/@appwrite.io/pink": {
"version": "0.0.4",
"resolved": "https://registry.npmjs.org/@appwrite.io/pink/-/pink-0.0.4.tgz",
"integrity": "sha512-pCXxBqSikG5PpBb2y84tTRH6cAMUYbROlQN8LuGoY2J+vTWMT+HQ7+RAAwRWU1Dlle4FgOFFCKmqU95g6X2a6g==",
"version": "0.0.6-rc.1",
"resolved": "https://registry.npmjs.org/@appwrite.io/pink/-/pink-0.0.6-rc.1.tgz",
"integrity": "sha512-5HM094Ie/tYHQIz5T2ydN03bO/dbR59lHHP2UPP3lheUsY6DBEZGP6Haqedwt/n8odTdIG5Rtrcq0eS6/+G7BA==",
"dependencies": {
"@appwrite.io/pink-icons": "*",
"normalize.css": "^8.0.1",
package.json
+1 -1
View File
@@ -20,7 +20,7 @@
},
"dependencies": {
"@analytics/google-analytics": "^1.0.5",
"@appwrite.io/pink": "^0.0.4",
"@appwrite.io/pink": "^0.0.6-rc.1",
"@aw-labs/appwrite-console": "^13.1.0",
"@popperjs/core": "^2.11.6",
"@sentry/svelte": "^7.36.0",
src/lib/components/customId.svelte
+2 -1
View File
@@ -6,6 +6,7 @@
export let show = false;
export let name: string;
export let id: string;
export let autofocus = true;
$: if (!show) {
id = null;
@@ -27,7 +28,7 @@
</svelte:fragment>
<svelte:fragment slot="content">
<div class="form">
<InputId bind:value={id} />
<InputId bind:value={id} {autofocus} />
</div>
</svelte:fragment>
</InnerModal>
src/lib/components/viewSelector.svelte
+25 -21
View File
@@ -26,7 +26,7 @@
<Button secondary on:click={() => (showSelectColumns = true)}>
<span class="icon-view-board" />
<span class="text">Columns</span>
<span class="text">{selectedColumnsNumber}</span>
<span class="inline-tag">{selectedColumnsNumber}</span>
</Button>
<svelte:fragment slot="list">
{#each columns as column}
@@ -40,23 +40,27 @@
</DropList>
{/if}
<ul class="buttons-list">
<li class="buttons-list-item">
<Button
text
disabled={$prefs.preferredView === 'list'}
on:click={() => prefs.updatePrefs({ ...$prefs, preferredView: 'list' })}>
<span class="icon-view-list" />
</Button>
</li>
<li class="buttons-list-item">
<Button
text
disabled={$prefs.preferredView === 'grid'}
on:click={() => {
prefs.updatePrefs({ ...$prefs, preferredView: 'grid' });
}}>
<span class="icon-view-grid" />
</Button>
</li>
</ul>
<div class="icon-toggle">
<ul class="icon-toggle-list">
<li class="icon-toggle-item">
<button
class="icon-toggle-button"
aria-label="List View"
type="button"
class:is-selected={$prefs.preferredView === 'list'}
on:click={() => prefs.updatePrefs({ ...$prefs, preferredView: 'list' })}>
<span class="icon-view-list" aria-hidden="true" />
</button>
</li>
<li class="icon-toggle-item">
<button
class="icon-toggle-button"
aria-label="Grid View"
type="button"
class:is-selected={$prefs.preferredView === 'grid'}
on:click={() => prefs.updatePrefs({ ...$prefs, preferredView: 'grid' })}>
<span class="icon-view-grid" aria-hidden="true" />
</button>
</li>
</ul>
</div>
src/lib/constants.ts
+1
View File
@@ -15,6 +15,7 @@ export enum Dependencies {
TEAMS = 'dependency:teams',
MEMBERSHIPS = 'dependency:memberships',
DATABASE = 'dependency:database',
DATABASES = 'dependency:databases',
COLLECTION = 'dependency:collection',
DOCUMENT = 'dependency:document',
DOCUMENTS = 'dependency:documents',
src/lib/elements/forms/inputId.svelte
+1 -1
View File
@@ -3,11 +3,11 @@
import { FormItem } from '.';
export let value = '';
export let autofocus = true;
let element: HTMLInputElement;
let icon = 'info';
const pattern = String.raw`^[a-zA-Z0-9][a-zA-Z0-9._-]*$`;
const autofocus = true;
onMount(() => {
if (element && autofocus) {
src/lib/layout/navigation.svelte
+75 -67
View File
@@ -9,74 +9,82 @@
<div class="side-nav">
{#if project}
<div class="side-nav-main">
<section class="drop-section">
<ul class="drop-list">
<li class="drop-list-item">
<a
class="drop-button"
class:is-selected={$page.url.pathname.startsWith(`${path}/overview`)}
on:click={() => trackEvent('click_menu_overview')}
href={path}>
<span class="icon-chart-bar" aria-hidden="true" />
<span class="text">Overview</span>
</a>
</li>
<li class="drop-list-item">
<a
class="drop-button"
class:is-selected={$page.url.pathname.startsWith(`${path}/auth`)}
on:click={() => trackEvent('click_menu_auth')}
href={`${path}/auth`}>
<span class="icon-user-group" aria-hidden="true" />
<span class="text">Auth</span>
</a>
</li>
<li class="drop-list-item">
<a
class="drop-button"
class:is-selected={$page.url.pathname.startsWith(`${path}/databases`)}
on:click={() => trackEvent('click_menu_databases')}
href={`${path}/databases`}>
<span class="icon-database" aria-hidden="true" />
<span class="text">Databases</span>
</a>
</li>
<li class="drop-list-item">
<a
class="drop-button"
class:is-selected={$page.url.pathname.startsWith(`${path}/functions`)}
on:click={() => trackEvent('click_menu_functions')}
href={`${path}/functions`}>
<span class="icon-lightning-bolt" aria-hidden="true" />
<span class="text">Functions</span>
</a>
</li>
<li class="drop-list-item">
<a
class="drop-button"
class:is-selected={$page.url.pathname.startsWith(`${path}/storage`)}
on:click={() => trackEvent('click_menu_storage')}
href={`${path}/storage`}>
<span class="icon-folder" aria-hidden="true" />
<span class="text">Storage</span>
</a>
</li>
</ul>
</section>
</div>
<div class="side-nav-level-1" class:is-narrow={false}>
<div class="side-nav-main">
<section class="drop-section">
<ul class="drop-list">
<li class="drop-list-item">
<a
class="drop-button"
class:is-selected={$page.url.pathname.startsWith(
`${path}/overview`
)}
on:click={() => trackEvent('click_menu_overview')}
href={path}>
<span class="icon-chart-bar" aria-hidden="true" />
<span class="text">Overview</span>
</a>
</li>
<li class="drop-list-item">
<a
class="drop-button"
class:is-selected={$page.url.pathname.startsWith(`${path}/auth`)}
on:click={() => trackEvent('click_menu_auth')}
href={`${path}/auth`}>
<span class="icon-user-group" aria-hidden="true" />
<span class="text">Auth</span>
</a>
</li>
<li class="drop-list-item">
<a
class="drop-button"
class:is-selected={$page.url.pathname.startsWith(
`${path}/databases`
)}
on:click={() => trackEvent('click_menu_databases')}
href={`${path}/databases`}>
<span class="icon-database" aria-hidden="true" />
<span class="text">Databases</span>
</a>
</li>
<li class="drop-list-item">
<a
class="drop-button"
class:is-selected={$page.url.pathname.startsWith(
`${path}/functions`
)}
on:click={() => trackEvent('click_menu_functions')}
href={`${path}/functions`}>
<span class="icon-lightning-bolt" aria-hidden="true" />
<span class="text">Functions</span>
</a>
</li>
<li class="drop-list-item">
<a
class="drop-button"
class:is-selected={$page.url.pathname.startsWith(`${path}/storage`)}
on:click={() => trackEvent('click_menu_storage')}
href={`${path}/storage`}>
<span class="icon-folder" aria-hidden="true" />
<span class="text">Storage</span>
</a>
</li>
</ul>
</section>
</div>
<div class="side-nav-bottom">
<section class="drop-section">
<a
class="drop-button"
href={`${path}/settings`}
on:click={() => trackEvent('click_menu_settings')}
class:is-selected={$page.url.pathname.startsWith(`${path}/settings`)}>
<span class="icon-cog" aria-hidden="true" />
<span class="text">Settings</span>
</a>
</section>
<div class="side-nav-bottom">
<section class="drop-section">
<a
class="drop-button"
href={`${path}/settings`}
on:click={() => trackEvent('click_menu_settings')}
class:is-selected={$page.url.pathname.startsWith(`${path}/settings`)}>
<span class="icon-cog" aria-hidden="true" />
<span class="text">Settings</span>
</a>
</section>
</div>
</div>
{/if}
</div>
src/routes/console/project-[project]/databases/[[page]]/+page.svelte
+8 -1
View File
@@ -1,6 +1,6 @@
<script lang="ts">
import { page } from '$app/stores';
import { goto } from '$app/navigation';
import { goto, invalidate } from '$app/navigation';
import { Button } from '$lib/elements/forms';
import { Empty, Heading, ViewSelector } from '$lib/components';
import { Container } from '$lib/layout';
@@ -11,6 +11,7 @@
import GridView from './gridView.svelte';
import TableView from './tableView.svelte';
import { prefs } from '$lib/stores/user';
import { Dependencies } from '$lib/constants';
export let data: PageData;
const project = $page.params.project;
@@ -27,6 +28,12 @@
showCreate = false;
await goto(`${base}/console/project-${project}/databases/database-${event.detail.$id}`);
}
$: prefs.subscribe((prefs) => {
if (prefs?.preferredView) {
invalidate(Dependencies.DATABASES);
}
});
</script>
<Container>
src/routes/console/project-[project]/databases/[[page]]/+page.ts
+6 -3
View File
@@ -1,18 +1,21 @@
import { Query } from '@aw-labs/appwrite-console';
import { sdkForProject } from '$lib/stores/sdk';
import { pageToOffset } from '$lib/helpers/load';
import { CARD_LIMIT } from '$lib/constants';
import { CARD_LIMIT, Dependencies } from '$lib/constants';
import type { PageLoad } from './$types';
import { customPageLimit } from '$lib/stores/layout';
import { get } from 'svelte/store';
import { prefs } from '$lib/stores/user';
export const load: PageLoad = async ({ params, parent }) => {
export const load: PageLoad = async ({ params, parent, depends }) => {
await parent();
depends(Dependencies.DATABASES);
const page = Number(params.page);
const limit = get(prefs)?.prefferedView === 'list' ? get(customPageLimit) : CARD_LIMIT;
const limit = get(prefs)?.preferredView === 'list' ? get(customPageLimit) : CARD_LIMIT;
const offset = pageToOffset(page, limit);
console.log(offset);
return {
offset,
src/routes/console/project-[project]/databases/create.svelte
+1 -1
View File
@@ -58,7 +58,7 @@
</span></Pill>
</div>
{:else}
<CustomId bind:show={showCustomId} name="Database" bind:id />
<CustomId bind:show={showCustomId} name="Database" bind:id autofocus={false} />
{/if}
</FormList>
<svelte:fragment slot="footer">
src/routes/console/project-[project]/databases/database-[database]/create.svelte
+1 -1
View File
@@ -65,7 +65,7 @@
</span></Pill>
</div>
{:else}
<CustomId bind:show={showCustomId} name="Collection" bind:id />
<CustomId bind:show={showCustomId} name="Collection" bind:id autofocus={false} />
{/if}
</FormList>
<svelte:fragment slot="footer">