From 07f2580d1fd3b9d7d25677ba065f92818749660a Mon Sep 17 00:00:00 2001 From: tglide <26071571+TGlide@users.noreply.github.com> Date: Thu, 16 Feb 2023 21:08:32 +0000 Subject: [PATCH 01/21] fix: fix auth services alert message & abstract oauth update function --- .../project-[project]/auth/appleOAuth.svelte | 44 +++++----------- .../project-[project]/auth/auth0OAuth.svelte | 38 ++++---------- .../auth/authentikOAuth.svelte | 38 ++++---------- .../project-[project]/auth/gitlabOAuth.svelte | 38 ++++---------- .../project-[project]/auth/mainOAuth.svelte | 38 ++++---------- .../auth/microsoftOAuth.svelte | 38 ++++---------- .../project-[project]/auth/oktaOAuth.svelte | 48 +++++------------ .../project-[project]/auth/updateOAuth.ts | 51 +++++++++++++++++++ 8 files changed, 122 insertions(+), 211 deletions(-) create mode 100644 src/routes/console/project-[project]/auth/updateOAuth.ts diff --git a/src/routes/console/project-[project]/auth/appleOAuth.svelte b/src/routes/console/project-[project]/auth/appleOAuth.svelte index d741025cc..681e3a06e 100644 --- a/src/routes/console/project-[project]/auth/appleOAuth.svelte +++ b/src/routes/console/project-[project]/auth/appleOAuth.svelte @@ -1,14 +1,13 @@ diff --git a/src/routes/console/project-[project]/auth/microsoftOAuth.svelte b/src/routes/console/project-[project]/auth/microsoftOAuth.svelte index 41dc6f1b2..8b0f4a376 100644 --- a/src/routes/console/project-[project]/auth/microsoftOAuth.svelte +++ b/src/routes/console/project-[project]/auth/microsoftOAuth.svelte @@ -1,14 +1,11 @@ @@ -25,13 +28,18 @@ let client = Client() Before sending any API calls to your new Appwrite project, make sure your device or emulator has network access to your Appwrite project's hostname or IP address.

-
- - For self-hosted solutions - When connecting to a locally hosted Appwrite project from an emulator or a mobile device, - you should use the private IP of the device running your Appwrite project as the hostname - of the endpoint instead of localhost. You can also use a service like ngrok to proxy the - Appwrite server. - -
+ {#if !dismissedAlert} +
+ (dismissedAlert = true)}> + For self-hosted solutions + When connecting to a locally hosted Appwrite project from an emulator or a mobile device, + you should use the private IP of the device running your Appwrite project as the hostname + of the endpoint instead of localhost. You can also use a service like ngrok to proxy + the Appwrite server. + +
+ {/if} diff --git a/src/routes/console/project-[project]/overview/platforms/wizard/flutter/step3.svelte b/src/routes/console/project-[project]/overview/platforms/wizard/flutter/step3.svelte index 6f46f657d..cac8f77ef 100644 --- a/src/routes/console/project-[project]/overview/platforms/wizard/flutter/step3.svelte +++ b/src/routes/console/project-[project]/overview/platforms/wizard/flutter/step3.svelte @@ -2,6 +2,7 @@ import { Alert, Code } from '$lib/components'; import { WizardStep } from '$lib/layout'; import { sdkForProject } from '$lib/stores/sdk'; + import { Mode, MODE } from '$lib/system'; const { endpoint, project } = sdkForProject.client.config; const code = `import 'package:appwrite/appwrite.dart'; @@ -11,6 +12,8 @@ client .setEndpoint('${endpoint}') .setProject('${project}') .setSelfSigned(status: true); // For self signed certificates, only use for development`; + + let dismissedAlert = false; @@ -26,13 +29,18 @@ client Before sending any API calls to your new Appwrite project, make sure your device or emulator has network access to your Appwrite project's hostname or IP address.

-
- - For self-hosted solutions - When connecting to a locally hosted Appwrite project from an emulator or a mobile device, - you should use the private IP of the device running your Appwrite project as the hostname - of the endpoint instead of localhost. You can also use a service like ngrok to proxy the - Appwrite server. - -
+ {#if !dismissedAlert} +
+ (dismissedAlert = true)}> + For self-hosted solutions + When connecting to a locally hosted Appwrite project from an emulator or a mobile device, + you should use the private IP of the device running your Appwrite project as the hostname + of the endpoint instead of localhost. You can also use a service like ngrok to proxy + the Appwrite server. + +
+ {/if} From 2e198c72625bb949977832be11f9d7e8c90fcc4e Mon Sep 17 00:00:00 2001 From: tglide <26071571+TGlide@users.noreply.github.com> Date: Mon, 27 Feb 2023 10:09:38 +0000 Subject: [PATCH 03/21] refactor: change variable names --- .../overview/platforms/wizard/apple/step3.svelte | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/routes/console/project-[project]/overview/platforms/wizard/apple/step3.svelte b/src/routes/console/project-[project]/overview/platforms/wizard/apple/step3.svelte index d66e95903..167bc53e8 100644 --- a/src/routes/console/project-[project]/overview/platforms/wizard/apple/step3.svelte +++ b/src/routes/console/project-[project]/overview/platforms/wizard/apple/step3.svelte @@ -12,7 +12,7 @@ let client = Client() .setProject("${project}") .setSelfSigned(status: true) // For self signed certificates, only use for development`; - let dismissedAlert = false; + let showAlert = true; @@ -28,12 +28,12 @@ let client = Client() Before sending any API calls to your new Appwrite project, make sure your device or emulator has network access to your Appwrite project's hostname or IP address.

- {#if !dismissedAlert} + {#if showAlert}
(dismissedAlert = true)}> + on:dismiss={() => (showAlert = false)}> For self-hosted solutions When connecting to a locally hosted Appwrite project from an emulator or a mobile device, you should use the private IP of the device running your Appwrite project as the hostname From 25247b0b8e92a49711dd7be9e58c9f8818959fba Mon Sep 17 00:00:00 2001 From: tglide <26071571+TGlide@users.noreply.github.com> Date: Mon, 27 Feb 2023 11:53:39 +0000 Subject: [PATCH 04/21] refactor: change auth update message --- .../console/project-[project]/auth/settings/+page.svelte | 4 +--- src/routes/console/project-[project]/auth/updateOAuth.ts | 2 +- 2 files changed, 2 insertions(+), 4 deletions(-) diff --git a/src/routes/console/project-[project]/auth/settings/+page.svelte b/src/routes/console/project-[project]/auth/settings/+page.svelte index 78786f524..f9f7a8f28 100644 --- a/src/routes/console/project-[project]/auth/settings/+page.svelte +++ b/src/routes/console/project-[project]/auth/settings/+page.svelte @@ -25,9 +25,7 @@ await sdkForConsole.projects.updateAuthStatus(projectId, box.method, box.value); addNotification({ type: 'success', - message: `${box.label} authentication has been ${ - box.value ? 'enabled' : 'disabled' - }` + message: `${box.label} authentication has been updated` }); trackEvent(Submit.AuthStatusUpdate, { method: box.method, diff --git a/src/routes/console/project-[project]/auth/updateOAuth.ts b/src/routes/console/project-[project]/auth/updateOAuth.ts index 39b5a50e1..284d73a51 100644 --- a/src/routes/console/project-[project]/auth/updateOAuth.ts +++ b/src/routes/console/project-[project]/auth/updateOAuth.ts @@ -35,7 +35,7 @@ export async function updateOAuth({ ); addNotification({ type: 'success', - message: `${provider.name} authentication has been ${enabled ? 'enabled' : 'disabled'}` + message: `${provider.name} authentication has been updated` }); trackEvent(Submit.ProviderUpdate, { provider, From b9132761510e1e68fe8f05515f9b7a82167a8d5d Mon Sep 17 00:00:00 2001 From: tglide <26071571+TGlide@users.noreply.github.com> Date: Wed, 1 Mar 2023 20:14:19 +0000 Subject: [PATCH 05/21] refactor: change variable names --- .../overview/platforms/wizard/flutter/step3.svelte | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/routes/console/project-[project]/overview/platforms/wizard/flutter/step3.svelte b/src/routes/console/project-[project]/overview/platforms/wizard/flutter/step3.svelte index cac8f77ef..ef97d30cb 100644 --- a/src/routes/console/project-[project]/overview/platforms/wizard/flutter/step3.svelte +++ b/src/routes/console/project-[project]/overview/platforms/wizard/flutter/step3.svelte @@ -13,7 +13,7 @@ client .setProject('${project}') .setSelfSigned(status: true); // For self signed certificates, only use for development`; - let dismissedAlert = false; + let showAlert = true; @@ -29,12 +29,12 @@ client Before sending any API calls to your new Appwrite project, make sure your device or emulator has network access to your Appwrite project's hostname or IP address.

- {#if !dismissedAlert} + {#if showAlert}
(dismissedAlert = true)}> + on:dismiss={() => (showAlert = false)}> For self-hosted solutions When connecting to a locally hosted Appwrite project from an emulator or a mobile device, you should use the private IP of the device running your Appwrite project as the hostname From 74329a0bb75bd866303b9dc1be37ac1220c4f592 Mon Sep 17 00:00:00 2001 From: Torsten Dittmann Date: Mon, 20 Mar 2023 15:53:03 +0100 Subject: [PATCH 06/21] feat: query params on users --- src/lib/components/pagination.svelte | 92 ++++++++++--------- src/lib/components/searchQuery.svelte | 18 ++-- .../auth/{[[page]] => }/+page.svelte | 4 +- .../auth/{[[page]] => }/+page.ts | 6 +- 4 files changed, 66 insertions(+), 54 deletions(-) rename src/routes/console/project-[project]/auth/{[[page]] => }/+page.svelte (98%) rename src/routes/console/project-[project]/auth/{[[page]] => }/+page.ts (75%) diff --git a/src/lib/components/pagination.svelte b/src/lib/components/pagination.svelte index 166bdf03e..b857c8b97 100644 --- a/src/lib/components/pagination.svelte +++ b/src/lib/components/pagination.svelte @@ -1,5 +1,5 @@ {#if totalPages > 1} - {@const search = $page.url.search} - + {#key $pageStore.url} + + {/key} {:else}
diff --git a/src/routes/console/project-[project]/functions/function-[function]/[[page]]/+page.ts b/src/routes/console/project-[project]/functions/function-[function]/+page.ts similarity index 82% rename from src/routes/console/project-[project]/functions/function-[function]/[[page]]/+page.ts rename to src/routes/console/project-[project]/functions/function-[function]/+page.ts index bb1bc9a54..423b096d9 100644 --- a/src/routes/console/project-[project]/functions/function-[function]/[[page]]/+page.ts +++ b/src/routes/console/project-[project]/functions/function-[function]/+page.ts @@ -4,9 +4,9 @@ import { pageToOffset } from '$lib/helpers/load'; import { Dependencies, PAGE_LIMIT } from '$lib/constants'; import type { PageLoad } from './$types'; -export const load: PageLoad = async ({ params, depends }) => { +export const load: PageLoad = async ({ params, depends, url }) => { depends(Dependencies.DEPLOYMENTS); - const page = Number(params.page); + const page = Number(url.searchParams.get('page')); const offset = pageToOffset(page, PAGE_LIMIT); return { diff --git a/src/routes/console/project-[project]/functions/function-[function]/executions/[[page]]/+page.svelte b/src/routes/console/project-[project]/functions/function-[function]/executions/+page.svelte similarity index 92% rename from src/routes/console/project-[project]/functions/function-[function]/executions/[[page]]/+page.svelte rename to src/routes/console/project-[project]/functions/function-[function]/executions/+page.svelte index 6267e7c2e..a011ffb3c 100644 --- a/src/routes/console/project-[project]/functions/function-[function]/executions/[[page]]/+page.svelte +++ b/src/routes/console/project-[project]/functions/function-[function]/executions/+page.svelte @@ -1,6 +1,5 @@ + +
+ +

{name} per page. Total results: {sum}

+
diff --git a/src/lib/elements/forms/inputSelect.svelte b/src/lib/elements/forms/inputSelect.svelte index 5bfe2220a..ff49b8f80 100644 --- a/src/lib/elements/forms/inputSelect.svelte +++ b/src/lib/elements/forms/inputSelect.svelte @@ -52,7 +52,8 @@ {disabled} bind:this={element} bind:value - on:invalid={handleInvalid}> + on:invalid={handleInvalid} + on:change> {#if placeholder} {/if} diff --git a/src/lib/helpers/load.ts b/src/lib/helpers/load.ts index dc7b0c9e7..89349b187 100644 --- a/src/lib/helpers/load.ts +++ b/src/lib/helpers/load.ts @@ -1,7 +1,26 @@ +import { preferences } from '$lib/stores/preferences'; +import type { Page } from '@sveltejs/kit'; + export function pageToOffset(page: number, limit: number): number { return page ? page * limit - limit : 0; } +export function getPage(url: URL): number { + return Number(url.searchParams.get('page')); +} + +export function getLimit(url: URL, route: Page['route'], fallback: number): number { + return Number(url.searchParams.get('limit') ?? preferences.get(route).limit ?? fallback); +} + +export function getView(url: URL, route: Page['route'], fallback: 'table' | 'grid'): string { + return url.searchParams.get('view') ?? preferences.get(route).view ?? fallback; +} + +export function getSearch(url: URL): string | undefined { + return url.searchParams.get('search') ?? undefined; +} + type TabElement = { href: string; title: string; hasChildren?: boolean }; export function isTabSelected( diff --git a/src/lib/layout/activity.svelte b/src/lib/layout/activity.svelte index 41bd711ed..8afec6a43 100644 --- a/src/lib/layout/activity.svelte +++ b/src/lib/layout/activity.svelte @@ -1,5 +1,5 @@ @@ -65,8 +65,8 @@
-

Total results: {logs.total}

- + +
{:else} diff --git a/src/lib/stores/preferences.ts b/src/lib/stores/preferences.ts new file mode 100644 index 000000000..29982ab78 --- /dev/null +++ b/src/lib/stores/preferences.ts @@ -0,0 +1,68 @@ +import { browser } from '$app/environment'; +import { page } from '$app/stores'; +import type { Page } from '@sveltejs/kit'; +import { get, writable } from 'svelte/store'; +import { sdk } from './sdk'; + +type Preferences = { + limit?: number; + view?: 'table' | 'grid'; +}; +type PreferencesStore = { + [key: string]: { + [key: string]: Preferences; + }; +}; + +function createPreferences() { + const { subscribe, set, update } = writable({}); + if (browser) { + set(JSON.parse(globalThis.localStorage.getItem('preferences') ?? '{}')); + } + return { + subscribe, + get: (route: Page['route']): Preferences => { + let preferences: PreferencesStore; + subscribe((n) => (preferences = n))(); + + return ( + preferences[sdk.forProject.client.config.project]?.[route.id] ?? { + limit: null, + view: null + } + ); + }, + setLimit: (limit: Preferences['limit']) => + update((n) => { + const path = get(page).route.id; + const project = sdk.forProject.client.config.project; + if (!n[project]?.[path]) { + n[project] ??= {}; + n[project][path] ??= {}; + } + + n[project][path].limit = limit; + + return n; + }), + setView: (view: Preferences['view']) => + update((n) => { + const path = get(page).route.id; + const project = sdk.forProject.client.config.project; + if (!n[project]?.[path]) { + n[project] ??= {}; + n[project][path] ??= {}; + } + + n[project][path].view = view; + + return n; + }) + }; +} + +export const preferences = createPreferences(); + +if (browser) { + preferences.subscribe((n) => globalThis.localStorage.setItem('preferences', JSON.stringify(n))); +} diff --git a/src/routes/console/account/activity/+page.svelte b/src/routes/console/account/activity/+page.svelte index c4c7521f1..d3939555d 100644 --- a/src/routes/console/account/activity/+page.svelte +++ b/src/routes/console/account/activity/+page.svelte @@ -5,4 +5,4 @@ export let data: PageData; - + diff --git a/src/routes/console/account/activity/+page.ts b/src/routes/console/account/activity/+page.ts index 13a06a80b..8b6fb15c3 100644 --- a/src/routes/console/account/activity/+page.ts +++ b/src/routes/console/account/activity/+page.ts @@ -1,12 +1,12 @@ import { Query } from '@aw-labs/appwrite-console'; import { sdk } from '$lib/stores/sdk'; -import { pageToOffset } from '$lib/helpers/load'; +import { getLimit, getPage, pageToOffset } from '$lib/helpers/load'; import { PAGE_LIMIT } from '$lib/constants'; import type { PageLoad } from './$types'; -export const load: PageLoad = async ({ url }) => { - const page = Number(url.searchParams.get('page')); - const limit = Number(url.searchParams.get('limit') ?? PAGE_LIMIT); +export const load: PageLoad = async ({ url, route }) => { + const page = getPage(url); + const limit = getLimit(url, route, PAGE_LIMIT); const offset = pageToOffset(page, limit); return { diff --git a/src/routes/console/account/organizations/+page.svelte b/src/routes/console/account/organizations/+page.svelte index c01ac1e9f..99c580f9b 100644 --- a/src/routes/console/account/organizations/+page.svelte +++ b/src/routes/console/account/organizations/+page.svelte @@ -6,7 +6,8 @@ Pagination, AvatarGroup, CardContainer, - Heading + Heading, + Limit } from '$lib/components'; import { Button } from '$lib/elements/forms'; import { Container } from '$lib/layout'; @@ -66,7 +67,7 @@ {/if}
-

Total results: {data.organizations.total}

+
diff --git a/src/routes/console/account/organizations/+page.ts b/src/routes/console/account/organizations/+page.ts index 90de71ddd..d80bc5036 100644 --- a/src/routes/console/account/organizations/+page.ts +++ b/src/routes/console/account/organizations/+page.ts @@ -1,12 +1,12 @@ import { Query } from '@aw-labs/appwrite-console'; import { sdk } from '$lib/stores/sdk'; -import { pageToOffset } from '$lib/helpers/load'; +import { getLimit, getPage, pageToOffset } from '$lib/helpers/load'; import { CARD_LIMIT } from '$lib/constants'; import type { PageLoad } from './$types'; -export const load: PageLoad = async ({ url }) => { - const page = Number(url.searchParams.get('page')); - const limit = Number(url.searchParams.get('limit') ?? CARD_LIMIT); +export const load: PageLoad = async ({ url, route }) => { + const page = getPage(url); + const limit = getLimit(url, route, CARD_LIMIT); const offset = pageToOffset(page, limit); return { diff --git a/src/routes/console/organization-[organization]/+page.svelte b/src/routes/console/organization-[organization]/+page.svelte index 2a0ee8fbf..888056de7 100644 --- a/src/routes/console/organization-[organization]/+page.svelte +++ b/src/routes/console/organization-[organization]/+page.svelte @@ -1,7 +1,7 @@ @@ -110,7 +111,7 @@
-

Total results: {data.users.total}

+
{:else if data.search} diff --git a/src/routes/console/project-[project]/auth/+page.ts b/src/routes/console/project-[project]/auth/+page.ts index 0fca0d67f..badf0ca4e 100644 --- a/src/routes/console/project-[project]/auth/+page.ts +++ b/src/routes/console/project-[project]/auth/+page.ts @@ -1,14 +1,14 @@ import { Query } from '@aw-labs/appwrite-console'; import { sdk } from '$lib/stores/sdk'; -import { pageToOffset } from '$lib/helpers/load'; +import { getLimit, getPage, getSearch, pageToOffset } from '$lib/helpers/load'; import { PAGE_LIMIT } from '$lib/constants'; import type { PageLoad } from './$types'; -export const load: PageLoad = async ({ url }) => { - const page = Number(url.searchParams.get('page')); - const limit = Number(url.searchParams.get('limit') ?? PAGE_LIMIT); +export const load: PageLoad = async ({ url, route }) => { + const page = getPage(url); + const search = getSearch(url); + const limit = getLimit(url, route, PAGE_LIMIT); const offset = pageToOffset(page, limit); - const search = url.searchParams.get('search') ?? undefined; return { offset, diff --git a/src/routes/console/project-[project]/auth/teams/+page.svelte b/src/routes/console/project-[project]/auth/teams/+page.svelte index 3b00a547b..bc0e643a3 100644 --- a/src/routes/console/project-[project]/auth/teams/+page.svelte +++ b/src/routes/console/project-[project]/auth/teams/+page.svelte @@ -10,7 +10,14 @@ TableCell } from '$lib/elements/table'; import { Button } from '$lib/elements/forms'; - import { Empty, EmptySearch, AvatarInitials, Pagination, SearchQuery } from '$lib/components'; + import { + Empty, + EmptySearch, + AvatarInitials, + Pagination, + SearchQuery, + Limit + } from '$lib/components'; import Create from '../createTeam.svelte'; import { goto } from '$app/navigation'; import { toLocaleDateTime } from '$lib/helpers/date'; @@ -62,7 +69,7 @@
-

Total results: {data.teams.total}

+
{:else if data.search} diff --git a/src/routes/console/project-[project]/auth/teams/+page.ts b/src/routes/console/project-[project]/auth/teams/+page.ts index 7b222a0cc..42b4f5c1c 100644 --- a/src/routes/console/project-[project]/auth/teams/+page.ts +++ b/src/routes/console/project-[project]/auth/teams/+page.ts @@ -1,14 +1,14 @@ import { Query } from '@aw-labs/appwrite-console'; import { sdk } from '$lib/stores/sdk'; -import { pageToOffset } from '$lib/helpers/load'; +import { getLimit, getPage, getSearch, pageToOffset } from '$lib/helpers/load'; import { PAGE_LIMIT } from '$lib/constants'; import type { PageLoad } from './$types'; -export const load: PageLoad = async ({ url }) => { - const page = Number(url.searchParams.get('page')); - const limit = Number(url.searchParams.get('limit') ?? PAGE_LIMIT); +export const load: PageLoad = async ({ url, route }) => { + const page = getPage(url); + const search = getSearch(url); + const limit = getLimit(url, route, PAGE_LIMIT); const offset = pageToOffset(page, limit); - const search = url.searchParams.get('search') ?? undefined; return { offset, diff --git a/src/routes/console/project-[project]/auth/teams/team-[team]/activity/+page.svelte b/src/routes/console/project-[project]/auth/teams/team-[team]/activity/+page.svelte index 4870c8b9b..f805a79f0 100644 --- a/src/routes/console/project-[project]/auth/teams/team-[team]/activity/+page.svelte +++ b/src/routes/console/project-[project]/auth/teams/team-[team]/activity/+page.svelte @@ -5,4 +5,4 @@ export let data: PageData; - + diff --git a/src/routes/console/project-[project]/auth/teams/team-[team]/activity/+page.ts b/src/routes/console/project-[project]/auth/teams/team-[team]/activity/+page.ts index 173bd4d99..ea9009d74 100644 --- a/src/routes/console/project-[project]/auth/teams/team-[team]/activity/+page.ts +++ b/src/routes/console/project-[project]/auth/teams/team-[team]/activity/+page.ts @@ -1,16 +1,17 @@ import { Query } from '@aw-labs/appwrite-console'; import { sdk } from '$lib/stores/sdk'; -import { pageToOffset } from '$lib/helpers/load'; +import { getLimit, getPage, pageToOffset } from '$lib/helpers/load'; import { PAGE_LIMIT } from '$lib/constants'; import type { PageLoad } from './$types'; -export const load: PageLoad = async ({ params, url }) => { - const page = Number(url.searchParams.get('page')); - const limit = Number(url.searchParams.get('limit') ?? PAGE_LIMIT); +export const load: PageLoad = async ({ params, url, route }) => { + const page = getPage(url); + const limit = getLimit(url, route, PAGE_LIMIT); const offset = pageToOffset(page, limit); return { offset, + limit, logs: await sdk.forProject.teams.listLogs(params.team, [ Query.limit(limit), Query.offset(offset) diff --git a/src/routes/console/project-[project]/auth/teams/team-[team]/members/+page.svelte b/src/routes/console/project-[project]/auth/teams/team-[team]/members/+page.svelte index 8fd62a499..f7518114c 100644 --- a/src/routes/console/project-[project]/auth/teams/team-[team]/members/+page.svelte +++ b/src/routes/console/project-[project]/auth/teams/team-[team]/members/+page.svelte @@ -1,6 +1,13 @@ - + diff --git a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/activity/+page.ts b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/activity/+page.ts index b5c397870..3fb3a619d 100644 --- a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/activity/+page.ts +++ b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/activity/+page.ts @@ -1,12 +1,12 @@ import { Query } from '@aw-labs/appwrite-console'; import { sdk } from '$lib/stores/sdk'; -import { pageToOffset } from '$lib/helpers/load'; +import { getLimit, getPage, pageToOffset } from '$lib/helpers/load'; import { PAGE_LIMIT } from '$lib/constants'; import type { PageLoad } from './$types'; -export const load: PageLoad = async ({ params, url }) => { - const page = Number(url.searchParams.get('page')); - const limit = Number(url.searchParams.get('limit') ?? PAGE_LIMIT); +export const load: PageLoad = async ({ params, url, route }) => { + const page = getPage(url); + const limit = getLimit(url, route, PAGE_LIMIT); const offset = pageToOffset(page, limit); return { diff --git a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/document-[document]/activity/+page.svelte b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/document-[document]/activity/+page.svelte index 4870c8b9b..f805a79f0 100644 --- a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/document-[document]/activity/+page.svelte +++ b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/document-[document]/activity/+page.svelte @@ -5,4 +5,4 @@ export let data: PageData; - + diff --git a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/document-[document]/activity/+page.ts b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/document-[document]/activity/+page.ts index d24d5e5e9..d11900203 100644 --- a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/document-[document]/activity/+page.ts +++ b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/document-[document]/activity/+page.ts @@ -1,12 +1,12 @@ import { Query } from '@aw-labs/appwrite-console'; import { sdk } from '$lib/stores/sdk'; -import { pageToOffset } from '$lib/helpers/load'; +import { getLimit, getPage, pageToOffset } from '$lib/helpers/load'; import { PAGE_LIMIT } from '$lib/constants'; import type { PageLoad } from './$types'; -export const load: PageLoad = async ({ params, url }) => { - const page = Number(url.searchParams.get('page')); - const limit = Number(url.searchParams.get('limit') ?? PAGE_LIMIT); +export const load: PageLoad = async ({ params, url, route }) => { + const page = getPage(url); + const limit = getLimit(url, route, PAGE_LIMIT); const offset = pageToOffset(page, limit); return { diff --git a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/subNavigation.svelte b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/subNavigation.svelte index c576a7e65..e8f306a60 100644 --- a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/subNavigation.svelte +++ b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/subNavigation.svelte @@ -2,7 +2,7 @@ import { base } from '$app/paths'; import { page } from '$app/stores'; import { showCreate } from '../store'; - import type { PageData } from './[[page]]/$types'; + import type { PageData } from './$types'; $: data = $page.data as PageData; $: project = $page.params.project; diff --git a/src/routes/console/project-[project]/functions/+page.svelte b/src/routes/console/project-[project]/functions/+page.svelte index a7f9f7a6f..1a26cb9ba 100644 --- a/src/routes/console/project-[project]/functions/+page.svelte +++ b/src/routes/console/project-[project]/functions/+page.svelte @@ -1,7 +1,15 @@ diff --git a/src/lib/components/viewSelector.svelte b/src/lib/components/viewSelector.svelte new file mode 100644 index 000000000..500e40a03 --- /dev/null +++ b/src/lib/components/viewSelector.svelte @@ -0,0 +1,129 @@ + + + + +{#if !hideColumns && view === View.Table} + {#if $columns?.length} + + + + {#each $columns as column} + + {/each} + + + {/if} +{/if} + +{#if !hideView} +
+ +
+{/if} diff --git a/src/lib/helpers/load.ts b/src/lib/helpers/load.ts index 89349b187..6478fcd9f 100644 --- a/src/lib/helpers/load.ts +++ b/src/lib/helpers/load.ts @@ -13,8 +13,19 @@ export function getLimit(url: URL, route: Page['route'], fallback: number): numb return Number(url.searchParams.get('limit') ?? preferences.get(route).limit ?? fallback); } -export function getView(url: URL, route: Page['route'], fallback: 'table' | 'grid'): string { - return url.searchParams.get('view') ?? preferences.get(route).view ?? fallback; +export enum View { + Table = 'table', + Grid = 'grid' +} + +export function getView(url: URL, route: Page['route'], fallback: View): View { + return (url.searchParams.get('view') ?? preferences.get(route).view) === View.Grid + ? View.Grid + : View.Table ?? fallback; +} + +export function getColumns(route: Page['route'], fallback: string[]): string[] { + return preferences.get(route).columns ?? fallback; } export function getSearch(url: URL): string | undefined { diff --git a/src/lib/stores/preferences.ts b/src/lib/stores/preferences.ts index 29982ab78..f1184c7e2 100644 --- a/src/lib/stores/preferences.ts +++ b/src/lib/stores/preferences.ts @@ -1,16 +1,22 @@ import { browser } from '$app/environment'; import { page } from '$app/stores'; +import type { View } from '$lib/helpers/load'; import type { Page } from '@sveltejs/kit'; import { get, writable } from 'svelte/store'; import { sdk } from './sdk'; type Preferences = { limit?: number; - view?: 'table' | 'grid'; + view?: View; + columns?: string[]; }; + type PreferencesStore = { [key: string]: { [key: string]: Preferences; + collections?: { + [key: string]: Preferences['columns']; + }; }; }; @@ -28,10 +34,20 @@ function createPreferences() { return ( preferences[sdk.forProject.client.config.project]?.[route.id] ?? { limit: null, - view: null + view: null, + columns: null } ); }, + getCustomCollectionColumns: (collectionId: string): Preferences['columns'] => { + let preferences: PreferencesStore; + subscribe((n) => (preferences = n))(); + + return ( + preferences[sdk.forProject.client.config.project]?.collections?.[collectionId] ?? + null + ); + }, setLimit: (limit: Preferences['limit']) => update((n) => { const path = get(page).route.id; @@ -56,6 +72,33 @@ function createPreferences() { n[project][path].view = view; + return n; + }), + setColumns: (columns: Preferences['columns']) => + update((n) => { + const path = get(page).route.id; + const project = sdk.forProject.client.config.project; + if (!n[project]?.[path]) { + n[project] ??= {}; + n[project][path] ??= {}; + } + + n[project][path].columns = columns; + + return n; + }), + setCustomCollectionColumns: (columns: Preferences['columns']) => + update((n) => { + const current = get(page); + const project = sdk.forProject.client.config.project; + const collection = current.params.collection; + if (!n[project]?.collections?.[collection]) { + n[project] ??= {}; + n[project].collections ??= {}; + } + + n[project].collections[collection] = columns; + return n; }) }; diff --git a/src/routes/console/organization-[organization]/members/+page.svelte b/src/routes/console/organization-[organization]/members/+page.svelte index 03e2564b9..e59e4acd1 100644 --- a/src/routes/console/organization-[organization]/members/+page.svelte +++ b/src/routes/console/organization-[organization]/members/+page.svelte @@ -112,7 +112,7 @@
- +
{/if} diff --git a/src/routes/console/project-[project]/auth/+page.svelte b/src/routes/console/project-[project]/auth/+page.svelte index 03a6e865b..82708e6fb 100644 --- a/src/routes/console/project-[project]/auth/+page.svelte +++ b/src/routes/console/project-[project]/auth/+page.svelte @@ -112,7 +112,7 @@
- +
{:else if data.search} diff --git a/src/routes/console/project-[project]/databases/+page.svelte b/src/routes/console/project-[project]/databases/+page.svelte index 410810c7a..34348305b 100644 --- a/src/routes/console/project-[project]/databases/+page.svelte +++ b/src/routes/console/project-[project]/databases/+page.svelte @@ -2,21 +2,15 @@ import { page } from '$app/stores'; import { goto } from '$app/navigation'; import { Button } from '$lib/elements/forms'; - import { - Empty, - Copy, - GridItem1, - CardContainer, - Heading, - Pagination, - Limit - } from '$lib/components'; - import { Pill } from '$lib/elements'; + import { Empty, Heading, Pagination, Limit, ViewSelector } from '$lib/components'; import { Container } from '$lib/layout'; import { base } from '$app/paths'; import Create from './create.svelte'; + import Grid from './grid.svelte'; + import Table from './table.svelte'; import type { Models } from '@aw-labs/appwrite-console'; import type { PageData } from './$types'; + import { columns } from './store'; export let data: PageData; @@ -33,30 +27,22 @@
Databases - +
+ + + +
{#if data.databases.total} - (showCreate = true)} - event="database"> - {#each data.databases.databases as database} - - {database.name} - - - Database ID - - - {/each} - -

Create a new database

- - + {#if data.view === 'grid'} + + {:else} + + {/if}
diff --git a/src/routes/console/project-[project]/databases/+page.ts b/src/routes/console/project-[project]/databases/+page.ts index bf09fb764..e83bc2cac 100644 --- a/src/routes/console/project-[project]/databases/+page.ts +++ b/src/routes/console/project-[project]/databases/+page.ts @@ -1,5 +1,5 @@ import { CARD_LIMIT } from '$lib/constants'; -import { getLimit, getPage, pageToOffset } from '$lib/helpers/load'; +import { getLimit, getPage, getView, pageToOffset, View } from '$lib/helpers/load'; import { sdk } from '$lib/stores/sdk'; import { Query } from '@aw-labs/appwrite-console'; import type { PageLoad } from './$types'; @@ -7,11 +7,13 @@ import type { PageLoad } from './$types'; export const load: PageLoad = async ({ url, route }) => { const page = getPage(url); const limit = getLimit(url, route, CARD_LIMIT); + const view = getView(url, route, View.Grid); const offset = pageToOffset(page, limit); return { offset, limit, + view, databases: await sdk.forProject.databases.list([ Query.limit(limit), Query.offset(offset), diff --git a/src/routes/console/project-[project]/databases/database-[database]/+page.svelte b/src/routes/console/project-[project]/databases/database-[database]/+page.svelte index 39a870245..769595469 100644 --- a/src/routes/console/project-[project]/databases/database-[database]/+page.svelte +++ b/src/routes/console/project-[project]/databases/database-[database]/+page.svelte @@ -1,67 +1,36 @@
Collections +
+ - + +
{#if data.collections.total} - ($showCreate = true)}> - {#each data.collections.collections as collection} - - {collection.name} - - {#if !collection.enabled} - disabled - {/if} - - - Collection ID - - - {/each} - -

Create a new collection

- - + {#if data.view === 'grid'} + + {:else} +
+ {/if}
-

Total results: {data.collections.total}

diff --git a/src/routes/console/project-[project]/databases/database-[database]/+page.ts b/src/routes/console/project-[project]/databases/database-[database]/+page.ts index 15d204777..3d646166b 100644 --- a/src/routes/console/project-[project]/databases/database-[database]/+page.ts +++ b/src/routes/console/project-[project]/databases/database-[database]/+page.ts @@ -1,17 +1,19 @@ import { Query } from '@aw-labs/appwrite-console'; import { sdk } from '$lib/stores/sdk'; -import { getLimit, getPage, pageToOffset } from '$lib/helpers/load'; +import { getLimit, getPage, getView, pageToOffset, View } from '$lib/helpers/load'; import { CARD_LIMIT } from '$lib/constants'; import type { PageLoad } from './$types'; export const load: PageLoad = async ({ params, url, route }) => { const page = getPage(url); const limit = getLimit(url, route, CARD_LIMIT); + const view = getView(url, route, View.Grid); const offset = pageToOffset(page, limit); return { offset, limit, + view, collections: await sdk.forProject.databases.listCollections(params.database, [ Query.limit(limit), Query.offset(offset), diff --git a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/+page.svelte b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/+page.svelte index 71bec4e4d..1656253ac 100644 --- a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/+page.svelte +++ b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/+page.svelte @@ -1,128 +1,53 @@
Documents - - +
+ + +
{#if $collection?.attributes?.length} {#if data.documents.total} - - - Document ID - {#each columns as column} - {column.title} - {/each} - - - {#each data.documents.documents as document} - - - - - - - - {#each columns as column} - {@const formatted = formatColumn(document[column.key])} - -
- {formatted.value} -
- - {/each} - - {/each} - - +
diff --git a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/+page.ts b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/+page.ts index fb491e86b..e5adcafdf 100644 --- a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/+page.ts +++ b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/+page.ts @@ -1,5 +1,5 @@ import { Dependencies, PAGE_LIMIT } from '$lib/constants'; -import { getLimit, getPage, pageToOffset } from '$lib/helpers/load'; +import { getLimit, getPage, getView, pageToOffset, View } from '$lib/helpers/load'; import { sdk } from '$lib/stores/sdk'; import { Query } from '@aw-labs/appwrite-console'; import type { PageLoad } from './$types'; @@ -8,11 +8,13 @@ export const load: PageLoad = async ({ params, depends, url, route }) => { depends(Dependencies.DOCUMENTS); const page = getPage(url); const limit = getLimit(url, route, PAGE_LIMIT); + const view = getView(url, route, View.Grid); const offset = pageToOffset(page, limit); return { offset, limit, + view, documents: await sdk.forProject.databases.listDocuments( params.database, params.collection, diff --git a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/store.ts b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/store.ts index 65c00bd63..5c00adeea 100644 --- a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/store.ts +++ b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/store.ts @@ -1,6 +1,7 @@ import { page } from '$app/stores'; +import type { Column } from '$lib/components/viewSelector.svelte'; import type { Models } from '@aw-labs/appwrite-console'; -import { derived } from 'svelte/store'; +import { derived, writable } from 'svelte/store'; export type Attributes = | Models.AttributeBoolean @@ -22,3 +23,4 @@ export const attributes = derived( ($page) => $page.data.collection.attributes as Attributes[] ); export const indexes = derived(page, ($page) => $page.data.collection.indexes as Models.Index[]); +export const columns = writable([]); diff --git a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/subNavigation.svelte b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/subNavigation.svelte index e8f306a60..efb46a2e4 100644 --- a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/subNavigation.svelte +++ b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/subNavigation.svelte @@ -31,7 +31,7 @@ {#if data?.allCollections?.total}
+ + {#each $columns as column} + {#if column.show} + {column.title} + {/if} + {/each} + + + {#each data.collections.collections as collection} + + {#each $columns as column} + {#if column.show} + {#if column.id === '$id'} + {#key $columns} + + + + + + + {/key} + {:else if column.id === 'name'} + + {collection.name} + + {:else} + + {toLocaleDateTime(collection[column.id])} + + {/if} + {/if} + {/each} + + {/each} + +
diff --git a/src/routes/console/project-[project]/databases/grid.svelte b/src/routes/console/project-[project]/databases/grid.svelte new file mode 100644 index 000000000..1efa0fbed --- /dev/null +++ b/src/routes/console/project-[project]/databases/grid.svelte @@ -0,0 +1,25 @@ + + + (showCreate = true)} event="database"> + {#each data.databases.databases as database} + + {database.name} + + + Database ID + + + {/each} + +

Create a new database

+ + diff --git a/src/routes/console/project-[project]/databases/store.ts b/src/routes/console/project-[project]/databases/store.ts new file mode 100644 index 000000000..d0435fc06 --- /dev/null +++ b/src/routes/console/project-[project]/databases/store.ts @@ -0,0 +1,9 @@ +import type { Column } from '$lib/components/viewSelector.svelte'; +import { writable } from 'svelte/store'; + +export const columns = writable([ + { id: '$id', title: 'Database ID', show: true, width: 50 }, + { id: 'name', title: 'Name', show: true, width: 120 }, + { id: '$createdAt', title: 'Created', show: true, width: 120 }, + { id: '$updatedAt', title: 'Updated', show: true, width: 120 } +]); diff --git a/src/routes/console/project-[project]/databases/table.svelte b/src/routes/console/project-[project]/databases/table.svelte new file mode 100644 index 000000000..ffbc21e78 --- /dev/null +++ b/src/routes/console/project-[project]/databases/table.svelte @@ -0,0 +1,62 @@ + + + + + {#each $columns as column} + {#if column.show} + {column.title} + {/if} + {/each} + + + {#each data.databases.databases as database} + + {#each $columns as column} + {#if column.show} + {#if column.id === '$id'} + {#key $columns} + + + + + + + {/key} + {:else if column.id === 'name'} + + {database.name} + + {:else} + + {toLocaleDateTime(database[column.id])} + + {/if} + {/if} + {/each} + + {/each} + +
From 80e6783740697bdde8a573ee003a1f97eea76927 Mon Sep 17 00:00:00 2001 From: Torsten Dittmann Date: Thu, 23 Mar 2023 16:17:27 +0100 Subject: [PATCH 14/21] fix: table --- package.json | 1 - .../database-[database]/collection-[collection]/table.svelte | 4 ++-- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/package.json b/package.json index 03e8982b0..63f6d764e 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,5 @@ { "name": "@appwrite/console", - "version": "0.0.1", "engines": { "node": ">=16" }, diff --git a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/table.svelte b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/table.svelte index ebbbc12e5..14b20e189 100644 --- a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/table.svelte +++ b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/table.svelte @@ -61,7 +61,7 @@ - Document ID + Document ID {#each $columns.filter((n) => n.show) as column} {#if column.show} {column.title} @@ -72,7 +72,7 @@ {#each data.documents.documents as document} - +