Appwrite/console
1
0
Fork 0
mirror of https://github.com/appwrite/console.git synced 2026-04-07 19:17:46 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: display names on relationship component.

Browse Source
This commit is contained in:
Darshan
2025-07-03 17:04:34 +05:30
parent e22527f1b7
commit 94de9d9880
4 changed files with 76 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/components/columnSelector.svelte
+4 -13
View File
@@ -46,8 +46,8 @@
if (isCustomCollection) {
const shownColumns = preferences.getCustomCollectionColumns(collectionId);
columns.set(
$columns.map((column) => {
columns.update((n) =>
n.map((column) => {
column.hide = shownColumns?.includes(column.id) ?? false;
return column;
})
@@ -56,8 +56,8 @@
const prefs = preferences.get(page.route);
if (prefs?.columns) {
columns.set(
$columns.map((column) => {
columns.update((n) =>
n.map((column) => {
column.hide = prefs.columns?.includes(column.id) ?? false;
return column;
})
@@ -65,15 +65,6 @@
}
}
columns.subscribe((ctx) => {
const columns = ctx.filter((n) => n.hide === true).map((n) => n.id);
if (isCustomCollection) {
preferences.setCustomCollectionColumns(collectionId, columns);
} else {
preferences.setColumns(columns);
}
});
calcMaxHeight();
});
src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/document-[document]/attributes/relationship.svelte
+18 -3
View File
@@ -116,9 +116,24 @@
$: totalCount = relatedList?.length ?? 0;
$: options =
documentList?.documents?.map((n) => {
const data = displayNames.filter((name) => name !== '$id').map((name) => n?.[name]);
return { value: n.$id, label: n.$id, data };
documentList?.documents?.map((document) => {
const names = displayNames.filter((name) => name !== '$id');
const values = names
.map((name) => document?.[name])
// always supposed to be a string but just being a bit safe here
.filter((value) => value != null && typeof value === 'string' && value !== '');
const label = !values.length
? document.$id
: // values are in `$id (a | b)` format
// previously used to have a `$id a | b`.
`${document.$id} (${values.join(' | ')})`;
return {
label,
value: document.$id,
data: names.map((name) => document?.[name])
};
}) ?? [];
$: hasItems = totalCount > 0;
src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/relationshipsModal.svelte
+3 -3
View File
@@ -22,15 +22,15 @@
data = null;
selectedRelationship = null;
}
$: tableColumns = [{ id: '$id', width: 200 }, ...args.map((id) => ({ id }))];
</script>
<Modal bind:show title={selectedRelationship?.key} hideFooter>
{#if data?.length}
<Paginator items={data} {limit}>
{#snippet children(paginatedItems: typeof data)}
<Table.Root
let:root
columns={[{ id: '$id', width: 150 }, ...args.map((id) => ({ id }))]}>
<Table.Root let:root columns={tableColumns}>
<svelte:fragment slot="header" let:root>
<Table.Header.Cell column="$id" {root}>Document ID</Table.Header.Cell>
{#if args?.length}
src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/settings/displayName.svelte
+51 -31
View File
@@ -15,7 +15,11 @@
import { organization } from '$lib/stores/organization';
const collectionId = page.params.collection;
let names: string[] = [...(preferences.getDisplayNames()?.[collectionId] ?? [])];
let names: string[] = $state(
// edge case with `$id`? probably got saved during local tests...
[...(preferences.getDisplayNames()?.[collectionId] ?? [])].filter((name) => name !== '$id')
);
async function updateDisplayName() {
try {
@@ -36,23 +40,32 @@
}
}
$: options = ($attributes as Models.AttributeString[])
.filter(
(attr) =>
attr.type === 'string' && !attr?.array && !names?.some((name) => name === attr.key)
)
.map((attr) => {
return {
function getValidAttributes() {
return ($attributes as Models.AttributeString[]).filter(
(attr) => attr.type === 'string' && !attr?.array
);
}
function getOptions(index: number) {
const current = names?.[index];
return getValidAttributes()
.filter((attr) => !names?.includes(attr.key) || attr.key === current)
.map((attr) => ({
value: attr.key,
label: attr.key
};
});
}));
}
$: addAttributeDisabled = names?.length >= 5 || (names?.length && !names[names?.length - 1]);
const addAttributeDisabled = $derived(
names?.length >= 5 || (names?.length && !names[names?.length - 1])
);
$: updateBtnDisabled =
const updateBtnDisabled = $derived(
!symmetricDifference(names, preferences.getDisplayNames()?.[collectionId] ?? [])?.length ||
(names?.length && !last(names));
(names?.length && !last(names))
);
const hasExhaustedOptions = $derived(getValidAttributes().length === names?.length);
</script>
<Form onSubmit={updateDisplayName}>
@@ -72,19 +85,22 @@
</span>
</Layout.Stack>
{#if names?.length}
{#each names as name, i}
{#each names as name, index}
<Layout.Stack direction="row" gap="xxs">
{@const options = getOptions(index)}
{@const disabled =
(!!names[index] && names.length > index + 1) || hasExhaustedOptions}
<InputSelect
id={name}
placeholder="Select attribute"
bind:value={names[i]}
disabled={!!names[i] && names.length > i + 1}
{options} />
{options}
{disabled}
bind:value={names[index]}
placeholder="Select attribute" />
<Button
icon
extraCompact
on:click={() => {
names.splice(i, 1);
names.splice(index, 1);
names = names;
}}>
<Icon icon={IconX} />
@@ -92,18 +108,22 @@
</Layout.Stack>
{/each}
{/if}
<div>
<Button
compact
disabled={addAttributeDisabled}
on:click={() => {
names[names.length] = null;
names = names;
}}>
<Icon icon={IconPlus} slot="start" size="s" />
Add attribute
</Button>
</div>
<!-- show only when options don't have all the attributes -->
{#if !hasExhaustedOptions}
<div>
<Button
compact
disabled={addAttributeDisabled}
on:click={() => {
names[names.length] = null;
names = names;
}}>
<Icon icon={IconPlus} slot="start" size="s" />
Add attribute
</Button>
</div>
{/if}
</Layout.Stack>
</svelte:fragment>