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.
This commit is contained in:
Steven Nguyen
2025-06-16 16:41:28 -07:00
parent 2b4a495467
commit 2fde5c3e25
@@ -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} />