From 6d188bd8712f63857097c754aae027d112daf3f2 Mon Sep 17 00:00:00 2001 From: Arman Date: Tue, 2 Apr 2024 16:49:45 +0200 Subject: [PATCH] fix: attriburtes racing condition between layout and page --- .../collection-[collection]/+page.svelte | 33 +++++++++++-------- .../collection-[collection]/+page.ts | 16 ++++++--- .../attributes/+page.svelte | 10 +++--- .../attributes/+page.ts | 13 ++++++++ 4 files changed, 50 insertions(+), 22 deletions(-) create mode 100644 src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/+page.ts 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 c62211449..c2fc06634 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 @@ -9,37 +9,44 @@ import { Container } from '$lib/layout'; import { preferences } from '$lib/stores/preferences'; import { wizard } from '$lib/stores/wizard'; - import type { PageData } from './$types'; import CreateAttributeDropdown from './attributes/createAttributeDropdown.svelte'; import type { Option } from './attributes/store'; import CreateAttribute from './createAttribute.svelte'; import Create from './createDocument.svelte'; - import { collection, columns } from './store'; + import { columns, type Attributes } from './store'; import Table from './table.svelte'; - export let data: PageData; + export let data; let showCreateAttribute = false; let showCreateDropdown = false; let selectedAttribute: Option['name'] = null; $: selected = preferences.getCustomCollectionColumns($page.params.collection); - $: columns.set( - $collection.attributes.map((attribute) => ({ - id: attribute.key, - title: attribute.key, - type: attribute.type as ColumnType, - show: selected?.includes(attribute.key) ?? true - })) - ); + $: setColumns(data.collection.attributes as unknown as Attributes[]); function openWizard() { wizard.start(Create); } - $: hasAttributes = !!$collection.attributes.length; + function setColumns(attr: Attributes[]) { + columns.set( + attr.map((attribute) => { + return { + id: attribute.key, + title: attribute.key, + type: attribute.type as ColumnType, + show: selected?.includes(attribute.key) ?? true + }; + }) + ); + } - $: hasValidAttributes = $collection?.attributes?.some((attr) => attr.status === 'available'); + $: hasAttributes = !!data?.collection?.attributes?.length; + + $: hasValidAttributes = data?.collection?.attributes?.some( + (attr) => (attr as unknown as Attributes).status === 'available' + ); 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 e020d69d2..cc0dcd570 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 @@ -2,15 +2,17 @@ import { Dependencies, PAGE_LIMIT } from '$lib/constants'; import { getLimit, getPage, getQuery, getView, pageToOffset, View } from '$lib/helpers/load'; import { sdk } from '$lib/stores/sdk'; import { Query } from '@appwrite.io/console'; -import type { PageLoad } from './$types'; import { queries, queryParamToMap } from '$lib/components/filters/store'; -export const load: PageLoad = async ({ params, depends, url, route }) => { +export async function load({ params, depends, url, route, parent }) { + await parent(); depends(Dependencies.DOCUMENTS); - const page = getPage(url); + depends(Dependencies.COLLECTION); + + const navigationPage = getPage(url); const limit = getLimit(url, route, PAGE_LIMIT); const view = getView(url, route, View.Grid); - const offset = pageToOffset(page, limit); + const offset = pageToOffset(navigationPage, limit); const query = getQuery(url); const paramQueries = url.searchParams.get('query'); @@ -22,6 +24,10 @@ export const load: PageLoad = async ({ params, depends, url, route }) => { limit, view, query, + collection: await sdk.forProject.databases.getCollection( + params.database, + params.collection + ), documents: await sdk.forProject.databases.listDocuments( params.database, params.collection, @@ -33,4 +39,4 @@ export const load: PageLoad = async ({ params, depends, url, route }) => { ] ) }; -}; +} diff --git a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/+page.svelte b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/+page.svelte index bd48e7807..c3c0dad7c 100644 --- a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/+page.svelte +++ b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/+page.svelte @@ -17,12 +17,14 @@ import Create from '../createAttribute.svelte'; import { isRelationship } from '../document-[document]/attributes/store'; import CreateIndex from '../indexes/createIndex.svelte'; - import { attributes, type Attributes } from '../store'; + import { type Attributes } from '../store'; import CreateAttributeDropdown from './createAttributeDropdown.svelte'; import Delete from './deleteAttribute.svelte'; import Edit from './edit.svelte'; import { attributeOptions, type Option } from './store'; + export let data; + const projectId = $page.params.project; const databaseId = $page.params.database; @@ -51,7 +53,7 @@ - {#if $attributes.length} + {#if data.attributes?.length} Key @@ -60,7 +62,7 @@ - {#each $attributes as attribute, index} + {#each data.attributes as attribute, index} {@const option = attributeOptions.find( (option) => option.type === attribute.type )} @@ -175,7 +177,7 @@
-

Total results: {$attributes.length}

+

Total results: {data.attributes.length}

{:else} (showEmptyCreateDropdown = true)}> diff --git a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/+page.ts b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/+page.ts new file mode 100644 index 000000000..74b911f22 --- /dev/null +++ b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/+page.ts @@ -0,0 +1,13 @@ +import { Dependencies } from '$lib/constants.js'; +import { sdk } from '$lib/stores/sdk.js'; +import type { Attributes } from '../store.js'; + +export async function load({ depends, params }) { + depends(Dependencies.COLLECTION); + + return { + attributes: + ((await sdk.forProject.databases.getCollection(params.database, params.collection)) + ?.attributes as unknown as Attributes[]) ?? [] + }; +}