Skip to content

Commit 2fde5c3

Browse files
stnguyen90stnguyen90
committed
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.
1 parent 2b4a495 commit 2fde5c3

File tree

1 file changed

+75
-73
lines changed
  • src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]

1 file changed

+75
-73
lines changed

‎src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/table.svelte

Lines changed: 75 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -205,86 +205,88 @@
205205

206206
{#each $columns as { id } (id)}
207207
{@const attr = $attributes.find((n) => n.key === id)}
208-
<Table.Cell column={id} {root}>
209-
{#if isRelationship(attr)}
210-
{@const args = displayNames?.[attr.relatedCollection] ?? ['$id']}
211-
{#if !isRelationshipToMany(attr)}
212-
{#if document[id]}
213-
{@const related = document[id]}
214-
<Link.Button
215-
variant="muted"
208+
{#if attr}
209+
<Table.Cell column={id} {root}>
210+
{#if isRelationship(attr)}
211+
{@const args = displayNames?.[attr.relatedCollection] ?? ['$id']}
212+
{#if !isRelationshipToMany(attr)}
213+
{#if document[id]}
214+
{@const related = document[id]}
215+
<Link.Button
216+
variant="muted"
217+
on:click={(e) => {
218+
e.preventDefault();
219+
e.stopPropagation();
220+
goto(
221+
`${base}/project-${page.params.region}-${page.params.project}/databases/database-${databaseId}/collection-${attr.relatedCollection}/document-${related.$id}`
222+
);
223+
}}>
224+
{#each args as arg, i}
225+
{#if arg !== undefined}
226+
{#if i}
227+
&nbsp;|
228+
{/if}
229+
<span class="text" data-private>
230+
{related?.[arg]}
231+
</span>
232+
{/if}
233+
{/each}
234+
</Link.Button>
235+
{:else}
236+
<span class="text">n/a</span>
237+
{/if}
238+
{:else}
239+
{@const itemsNum = document[id]?.length}
240+
<Button.Button
241+
variant="extra-compact"
242+
disabled={!itemsNum}
243+
badge={itemsNum ?? 0}
216244
on:click={(e) => {
217-
e.preventDefault();
218245
e.stopPropagation();
219-
goto(
220-
`${base}/project-${page.params.region}-${page.params.project}/databases/database-${databaseId}/collection-${attr.relatedCollection}/document-${related.$id}`
221-
);
246+
e.preventDefault();
247+
relationshipData = document[id];
248+
showRelationships = true;
249+
selectedRelationship = attr;
222250
}}>
223-
{#each args as arg, i}
224-
{#if arg !== undefined}
225-
{#if i}
226-
&nbsp;|
227-
{/if}
228-
<span class="text" data-private>
229-
{related?.[arg]}
230-
</span>
231-
{/if}
232-
{/each}
233-
</Link.Button>
234-
{:else}
235-
<span class="text">n/a</span>
251+
Items
252+
</Button.Button>
236253
{/if}
237254
{:else}
238-
{@const itemsNum = document[id]?.length}
239-
<Button.Button
240-
variant="extra-compact"
241-
disabled={!itemsNum}
242-
badge={itemsNum ?? 0}
243-
on:click={(e) => {
244-
e.stopPropagation();
245-
e.preventDefault();
246-
relationshipData = document[id];
247-
showRelationships = true;
248-
selectedRelationship = attr;
249-
}}>
250-
Items
251-
</Button.Button>
252-
{/if}
253-
{:else}
254-
{@const datetime = document[id]}
255-
{@const formatted = formatColumn(document[id])}
256-
{@const isDatetimeAttribute = attr.type === 'datetime'}
257-
{#if isDatetimeAttribute}
258-
<DualTimeView time={datetime}>
259-
<span slot="title">Timestamp</span>
260-
{toLocaleDateTime(datetime, true)}
261-
</DualTimeView>
262-
{:else if isString(attr) && attr.encrypt && showEncrypt}
263-
<button on:click={(e) => e.preventDefault()}>
264-
<InteractiveText
265-
copy={false}
266-
variant="secret"
267-
isVisible={false}
268-
text={formatted.value} />
269-
</button>
270-
{:else if formatted.truncated}
271-
<Tooltip placement="bottom" disabled={!formatted.truncated}>
255+
{@const datetime = document[id]}
256+
{@const formatted = formatColumn(document[id])}
257+
{@const isDatetimeAttribute = attr.type === 'datetime'}
258+
{#if isDatetimeAttribute}
259+
<DualTimeView time={datetime}>
260+
<span slot="title">Timestamp</span>
261+
{toLocaleDateTime(datetime, true)}
262+
</DualTimeView>
263+
{:else if isString(attr) && attr.encrypt && showEncrypt}
264+
<button on:click={(e) => e.preventDefault()}>
265+
<InteractiveText
266+
copy={false}
267+
variant="secret"
268+
isVisible={false}
269+
text={formatted.value} />
270+
</button>
271+
{:else if formatted.truncated}
272+
<Tooltip placement="bottom" disabled={!formatted.truncated}>
273+
<Typography.Text truncate>{formatted.value}</Typography.Text>
274+
<span
275+
let:showing
276+
slot="tooltip"
277+
style:white-space="pre-wrap"
278+
style:word-break="break-all">
279+
{#if showing}
280+
{formatted.whole}
281+
{/if}
282+
</span>
283+
</Tooltip>
284+
{:else}
272285
<Typography.Text truncate>{formatted.value}</Typography.Text>
273-
<span
274-
let:showing
275-
slot="tooltip"
276-
style:white-space="pre-wrap"
277-
style:word-break="break-all">
278-
{#if showing}
279-
{formatted.whole}
280-
{/if}
281-
</span>
282-
</Tooltip>
283-
{:else}
284-
<Typography.Text truncate>{formatted.value}</Typography.Text>
286+
{/if}
285287
{/if}
286-
{/if}
287-
</Table.Cell>
288+
</Table.Cell>
289+
{/if}
288290
{/each}
289291
<Table.Cell column="$created" {root}>
290292
<DualTimeView time={document.$createdAt} />

0 commit comments

Comments
 (0)