From 2fde5c3e25cf87cd199376807e218450a7e4cfca Mon Sep 17 00:00:00 2001
From: Steven Nguyen <stnguyen90@users.noreply.github.com>
Date: Mon, 16 Jun 2025 16:41:28 -0700
Subject: [PATCH] fix: prevent disappearing documents table when switching
 collections

When switching collections, the $attributes store doesn't update right away so $attributes is for the old collection, but $columns is for the new collection so attr ends up being undefined leading to the error:

TypeError: Cannot read properties of undefined (reading 'type')

Checking attr first prevents the exception from occuring, giving enough time for $attributes to update and the table to render correctly.
---
 .../collection-[collection]/table.svelte      | 150 +++++++++---------
 1 file changed, 76 insertions(+), 74 deletions(-)

diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/table.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/table.svelte
index d85591a86..42bccd017 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/table.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/table.svelte
@@ -205,86 +205,88 @@
 
             {#each $columns as { id } (id)}
                 {@const attr = $attributes.find((n) => n.key === id)}
-                <Table.Cell column={id} {root}>
-                    {#if isRelationship(attr)}
-                        {@const args = displayNames?.[attr.relatedCollection] ?? ['$id']}
-                        {#if !isRelationshipToMany(attr)}
-                            {#if document[id]}
-                                {@const related = document[id]}
-                                <Link.Button
-                                    variant="muted"
-                                    on:click={(e) => {
-                                        e.preventDefault();
-                                        e.stopPropagation();
-                                        goto(
-                                            `${base}/project-${page.params.region}-${page.params.project}/databases/database-${databaseId}/collection-${attr.relatedCollection}/document-${related.$id}`
-                                        );
-                                    }}>
-                                    {#each args as arg, i}
-                                        {#if arg !== undefined}
-                                            {#if i}
-                                                &nbsp;|
+                {#if attr}
+                    <Table.Cell column={id} {root}>
+                        {#if isRelationship(attr)}
+                            {@const args = displayNames?.[attr.relatedCollection] ?? ['$id']}
+                            {#if !isRelationshipToMany(attr)}
+                                {#if document[id]}
+                                    {@const related = document[id]}
+                                    <Link.Button
+                                        variant="muted"
+                                        on:click={(e) => {
+                                            e.preventDefault();
+                                            e.stopPropagation();
+                                            goto(
+                                                `${base}/project-${page.params.region}-${page.params.project}/databases/database-${databaseId}/collection-${attr.relatedCollection}/document-${related.$id}`
+                                            );
+                                        }}>
+                                        {#each args as arg, i}
+                                            {#if arg !== undefined}
+                                                {#if i}
+                                                    &nbsp;|
+                                                {/if}
+                                                <span class="text" data-private>
+                                                    {related?.[arg]}
+                                                </span>
                                             {/if}
-                                            <span class="text" data-private>
-                                                {related?.[arg]}
-                                            </span>
-                                        {/if}
-                                    {/each}
-                                </Link.Button>
+                                        {/each}
+                                    </Link.Button>
+                                {:else}
+                                    <span class="text">n/a</span>
+                                {/if}
                             {:else}
-                                <span class="text">n/a</span>
+                                {@const itemsNum = document[id]?.length}
+                                <Button.Button
+                                    variant="extra-compact"
+                                    disabled={!itemsNum}
+                                    badge={itemsNum ?? 0}
+                                    on:click={(e) => {
+                                        e.stopPropagation();
+                                        e.preventDefault();
+                                        relationshipData = document[id];
+                                        showRelationships = true;
+                                        selectedRelationship = attr;
+                                    }}>
+                                    Items
+                                </Button.Button>
                             {/if}
                         {:else}
-                            {@const itemsNum = document[id]?.length}
-                            <Button.Button
-                                variant="extra-compact"
-                                disabled={!itemsNum}
-                                badge={itemsNum ?? 0}
-                                on:click={(e) => {
-                                    e.stopPropagation();
-                                    e.preventDefault();
-                                    relationshipData = document[id];
-                                    showRelationships = true;
-                                    selectedRelationship = attr;
-                                }}>
-                                Items
-                            </Button.Button>
-                        {/if}
-                    {:else}
-                        {@const datetime = document[id]}
-                        {@const formatted = formatColumn(document[id])}
-                        {@const isDatetimeAttribute = attr.type === 'datetime'}
-                        {#if isDatetimeAttribute}
-                            <DualTimeView time={datetime}>
-                                <span slot="title">Timestamp</span>
-                                {toLocaleDateTime(datetime, true)}
-                            </DualTimeView>
-                        {:else if isString(attr) && attr.encrypt && showEncrypt}
-                            <button on:click={(e) => e.preventDefault()}>
-                                <InteractiveText
-                                    copy={false}
-                                    variant="secret"
-                                    isVisible={false}
-                                    text={formatted.value} />
-                            </button>
-                        {:else if formatted.truncated}
-                            <Tooltip placement="bottom" disabled={!formatted.truncated}>
+                            {@const datetime = document[id]}
+                            {@const formatted = formatColumn(document[id])}
+                            {@const isDatetimeAttribute = attr.type === 'datetime'}
+                            {#if isDatetimeAttribute}
+                                <DualTimeView time={datetime}>
+                                    <span slot="title">Timestamp</span>
+                                    {toLocaleDateTime(datetime, true)}
+                                </DualTimeView>
+                            {:else if isString(attr) && attr.encrypt && showEncrypt}
+                                <button on:click={(e) => e.preventDefault()}>
+                                    <InteractiveText
+                                        copy={false}
+                                        variant="secret"
+                                        isVisible={false}
+                                        text={formatted.value} />
+                                </button>
+                            {:else if formatted.truncated}
+                                <Tooltip placement="bottom" disabled={!formatted.truncated}>
+                                    <Typography.Text truncate>{formatted.value}</Typography.Text>
+                                    <span
+                                        let:showing
+                                        slot="tooltip"
+                                        style:white-space="pre-wrap"
+                                        style:word-break="break-all">
+                                        {#if showing}
+                                            {formatted.whole}
+                                        {/if}
+                                    </span>
+                                </Tooltip>
+                            {:else}
                                 <Typography.Text truncate>{formatted.value}</Typography.Text>
-                                <span
-                                    let:showing
-                                    slot="tooltip"
-                                    style:white-space="pre-wrap"
-                                    style:word-break="break-all">
-                                    {#if showing}
-                                        {formatted.whole}
-                                    {/if}
-                                </span>
-                            </Tooltip>
-                        {:else}
-                            <Typography.Text truncate>{formatted.value}</Typography.Text>
+                            {/if}
                         {/if}
-                    {/if}
-                </Table.Cell>
+                    </Table.Cell>
+                {/if}
             {/each}
             <Table.Cell column="$created" {root}>
                 <DualTimeView time={document.$createdAt} />