Skip to content

Commit 51f2c9d

Browse files
ItzNotABugItzNotABug
authored
Merge pull request #2076 from appwrite/fix-preferences
2 parents 11c324d + 50936da commit 51f2c9d

File tree

7 files changed

+112
-75
lines changed

7 files changed

+112
-75
lines changed

‎src/lib/components/columnSelector.svelte

Lines changed: 17 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@
2020
2121
let maxHeight = $state('none');
2222
let containerRef = $state<HTMLElement>(null);
23+
const collectionId = $derived(page.params.collection);
2324
2425
const calcMaxHeight = () => {
2526
if (containerRef) {
@@ -32,35 +33,35 @@
3233
};
3334
3435
const saveColumnPreferences = () => {
35-
const shownColumns = $columns.filter((n) => n.hide !== true).map((n) => n.id);
36+
const shownColumns = $columns.filter((n) => n.hide === true).map((n) => n.id);
3637
3738
if (isCustomCollection) {
38-
preferences.setCustomCollectionColumns(page.params.collection, shownColumns);
39+
preferences.setCustomCollectionColumns(collectionId, shownColumns);
3940
} else {
4041
preferences.setColumns(shownColumns);
4142
}
4243
};
4344
4445
onMount(() => {
4546
if (isCustomCollection) {
46-
const shownColumns = preferences.getCustomCollectionColumns(page.params.collection);
47+
const shownColumns = preferences.getCustomCollectionColumns(collectionId);
4748
48-
columns.update((columns) => {
49-
return columns.map((column) => {
50-
column.hide = !shownColumns.includes(column.id);
49+
columns.update((n) =>
50+
n.map((column) => {
51+
column.hide = shownColumns?.includes(column.id) ?? false;
5152
return column;
52-
});
53-
});
53+
})
54+
);
5455
} else {
5556
const prefs = preferences.get(page.route);
5657
57-
if (prefs?.columns && prefs.columns.length > 0) {
58-
columns.update((cols) => {
59-
return cols.map((column) => {
60-
column.hide = !prefs.columns.includes(column.id);
58+
if (prefs?.columns) {
59+
columns.update((n) =>
60+
n.map((column) => {
61+
column.hide = prefs.columns?.includes(column.id) ?? false;
6162
return column;
62-
});
63-
});
63+
})
64+
);
6465
}
6566
}
6667
@@ -79,7 +80,7 @@
7980
columns.update((cols) =>
8081
cols.map((col) => {
8182
if (col.id === column.id) {
82-
col.hide = !column.hide;
83+
column.hide = !column.hide;
8384
}
8485
return col;
8586
})
@@ -90,6 +91,7 @@
9091
</script>
9192

9293
<svelte:window on:resize={calcMaxHeight} />
94+
9395
{#if $columns?.length}
9496
<Popover let:toggle placement="bottom-end" padding="none">
9597
{@render children(toggle, selectedColumnsNumber)}

‎src/lib/stores/preferences.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -176,7 +176,7 @@ function createPreferences() {
176176
names: TeamPreferences['names']
177177
) => {
178178
let teamPrefs: Models.Preferences;
179-
update((n) => {
179+
await updateAndSync((n) => {
180180
if (!n?.displayNames) {
181181
n ??= {};
182182
n.displayNames ??= {};

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

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -34,12 +34,13 @@
3434
const filterColumns = writable<Column[]>([]);
3535
3636
$: selected = preferences.getCustomCollectionColumns(page.params.collection);
37+
3738
$: columns.set(
3839
$collection.attributes.map((attribute) => ({
3940
id: attribute.key,
4041
title: attribute.key,
4142
type: attribute.type as ColumnType,
42-
hide: !selected?.includes(attribute.key),
43+
hide: !!selected?.includes(attribute.key),
4344
array: attribute?.array,
4445
format: 'format' in attribute && attribute?.format === 'enum' ? attribute.format : null,
4546
elements: 'elements' in attribute ? attribute.elements : null
@@ -50,7 +51,7 @@
5051
...['$id', '$createdAt', '$updatedAt'].map((id) => ({
5152
id,
5253
title: id,
53-
hide: false,
54+
show: true,
5455
type: (id === '$id' ? 'string' : 'datetime') as ColumnType
5556
}))
5657
]);

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

Lines changed: 23 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -116,9 +116,29 @@
116116
$: totalCount = relatedList?.length ?? 0;
117117
118118
$: options =
119-
documentList?.documents?.map((n) => {
120-
const data = displayNames.filter((name) => name !== '$id').map((name) => n?.[name]);
121-
return { value: n.$id, label: n.$id, data };
119+
documentList?.documents?.map((document) => {
120+
const names = displayNames.filter((name) => name !== '$id');
121+
const values = names
122+
.map((name) => document?.[name])
123+
// always supposed to be a string but just being a bit safe here
124+
.filter((value) => value != null && typeof value === 'string' && value !== '');
125+
126+
const displayValues = !editing
127+
? values
128+
: // on non edit routes like create, there's enough space!
129+
values.map((value) => (value.length > 5 ? value.slice(0, 5) + '...' : value));
130+
131+
const label = !values.length
132+
? document.$id
133+
: // values are in `$id (a | b)` format
134+
// previously used to have a `$id a | b`.
135+
`${document.$id} (${displayValues.join(' | ')})`;
136+
137+
return {
138+
label,
139+
value: document.$id,
140+
data: names.map((name) => document?.[name])
141+
};
122142
}) ?? [];
123143
124144
$: hasItems = totalCount > 0;

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -22,15 +22,15 @@
2222
data = null;
2323
selectedRelationship = null;
2424
}
25+
26+
$: tableColumns = [{ id: '$id', width: 200 }, ...args.map((id) => ({ id }))];
2527
</script>
2628

2729
<Modal bind:show title={selectedRelationship?.key} hideFooter>
2830
{#if data?.length}
2931
<Paginator items={data} {limit}>
3032
{#snippet children(paginatedItems: typeof data)}
31-
<Table.Root
32-
let:root
33-
columns={[{ id: '$id', width: 150 }, ...args.map((id) => ({ id }))]}>
33+
<Table.Root let:root columns={tableColumns}>
3434
<svelte:fragment slot="header" let:root>
3535
<Table.Header.Cell column="$id" {root}>Document ID</Table.Header.Cell>
3636
{#if args?.length}

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

Lines changed: 61 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -15,12 +15,24 @@
1515
import { organization } from '$lib/stores/organization';
1616
1717
const collectionId = page.params.collection;
18-
let names: string[] = [...(preferences.getDisplayNames()?.[collectionId] ?? [])];
18+
19+
function getDisplayNames() {
20+
return [...(preferences.getDisplayNames()?.[collectionId] ?? [])].filter(
21+
(name) => name !== '$id'
22+
); // edge case with `$id`? got saved during tests!
23+
}
24+
25+
let names: string[] = $state(getDisplayNames());
1926
2027
async function updateDisplayName() {
2128
try {
22-
await preferences.setDisplayNames($organization.$id, collectionId, names);
23-
names = [...(preferences.getDisplayNames()?.[collectionId] ?? [])];
29+
// $state makes proxy,
30+
// structuredClone doesn't work
31+
const regularArray = [...names];
32+
33+
await preferences.setDisplayNames($organization.$id, collectionId, regularArray);
34+
names = getDisplayNames();
35+
2436
await invalidate(Dependencies.TEAM);
2537
addNotification({
2638
message: 'Display names has been updated',
@@ -36,23 +48,32 @@
3648
}
3749
}
3850
39-
$: options = ($attributes as Models.AttributeString[])
40-
.filter(
41-
(attr) =>
42-
attr.type === 'string' && !attr?.array && !names?.some((name) => name === attr.key)
43-
)
44-
.map((attr) => {
45-
return {
51+
function getValidAttributes() {
52+
return ($attributes as Models.AttributeString[]).filter(
53+
(attr) => attr.type === 'string' && !attr?.array
54+
);
55+
}
56+
57+
function getOptions(index: number) {
58+
const current = names?.[index];
59+
return getValidAttributes()
60+
.filter((attr) => !names?.includes(attr.key) || attr.key === current)
61+
.map((attr) => ({
4662
value: attr.key,
4763
label: attr.key
48-
};
49-
});
64+
}));
65+
}
5066
51-
$: addAttributeDisabled = names?.length >= 5 || (names?.length && !names[names?.length - 1]);
67+
const addAttributeDisabled = $derived(
68+
names?.length >= 5 || (names?.length && !names[names?.length - 1])
69+
);
5270
53-
$: updateBtnDisabled =
71+
const updateBtnDisabled = $derived(
5472
!symmetricDifference(names, preferences.getDisplayNames()?.[collectionId] ?? [])?.length ||
55-
(names?.length && !last(names));
73+
(names?.length && !last(names))
74+
);
75+
76+
const hasExhaustedOptions = $derived(getValidAttributes().length === names?.length);
5677
</script>
5778

5879
<Form onSubmit={updateDisplayName}>
@@ -72,38 +93,45 @@
7293
</span>
7394
</Layout.Stack>
7495
{#if names?.length}
75-
{#each names as name, i}
96+
{#each names as name, index}
7697
<Layout.Stack direction="row" gap="xxs">
98+
{@const options = getOptions(index)}
99+
{@const disabled =
100+
(!!names[index] && names.length > index + 1) || hasExhaustedOptions}
77101
<InputSelect
78102
id={name}
79-
placeholder="Select attribute"
80-
bind:value={names[i]}
81-
disabled={!!names[i] && names.length > i + 1}
82-
{options} />
103+
{options}
104+
{disabled}
105+
bind:value={names[index]}
106+
placeholder="Select attribute" />
83107
<Button
84108
icon
85109
extraCompact
86110
on:click={() => {
87-
names.splice(i, 1);
111+
names.splice(index, 1);
88112
names = names;
89113
}}>
90114
<Icon icon={IconX} />
91115
</Button>
92116
</Layout.Stack>
93117
{/each}
94118
{/if}
95-
<div>
96-
<Button
97-
compact
98-
disabled={addAttributeDisabled}
99-
on:click={() => {
100-
names[names.length] = null;
101-
names = names;
102-
}}>
103-
<Icon icon={IconPlus} slot="start" size="s" />
104-
Add attribute
105-
</Button>
106-
</div>
119+
120+
<!-- show only when options don't have all the attributes -->
121+
{#if !hasExhaustedOptions}
122+
<div>
123+
<Button
124+
compact
125+
disabled={addAttributeDisabled}
126+
on:click={() => {
127+
names[names.length] = null;
128+
names = names;
129+
}}>
130+
<Icon icon={IconPlus} slot="start" size="s" />
131+
Add attribute
132+
</Button>
133+
</div>
134+
{/if}
107135
</Layout.Stack>
108136
</svelte:fragment>
109137

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

Lines changed: 4 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
import { preferences } from '$lib/stores/preferences';
1111
import { sdk } from '$lib/stores/sdk';
1212
import type { Models } from '@appwrite.io/console';
13-
import { afterUpdate, onMount } from 'svelte';
13+
import { onMount } from 'svelte';
1414
import type { PageData } from './$types';
1515
import {
1616
isRelationship,
@@ -38,30 +38,16 @@
3838
3939
const databaseId = page.params.database;
4040
const collectionId = page.params.collection;
41+
42+
let displayNames = {};
4143
let showRelationships = false;
4244
let selectedRelationship: Models.AttributeRelationship = null;
4345
let relationshipData: Partial<Models.Document>[];
44-
let displayNames = {};
4546
4647
onMount(async () => {
4748
displayNames = preferences.getDisplayNames();
48-
updateMaxWidth();
4949
});
5050
51-
afterUpdate(() => updateMaxWidth());
52-
53-
function updateMaxWidth() {
54-
const tableCells = Array.from(document.querySelectorAll('.less-width-truncated'));
55-
56-
const visibleColumnsCount = $columns.filter((col) => !col.hide).length;
57-
const newMaxWidth = Math.max(50 - (visibleColumnsCount - 1) * 5, 25);
58-
59-
tableCells.forEach((cell) => {
60-
const cellItem = cell as HTMLElement;
61-
cellItem.style.maxWidth = `${newMaxWidth}vw`;
62-
});
63-
}
64-
6551
function formatArray(array: unknown[]) {
6652
if (array.length === 0) return '[ ]';
6753
@@ -108,7 +94,7 @@
10894
id: attribute.key,
10995
title: attribute.key,
11096
type: attribute.type as ColumnType,
111-
hide: !selected?.includes(attribute.key),
97+
hide: !!selected?.includes(attribute.key),
11298
array: attribute?.array,
11399
width: { min: 168 },
114100
format:

0 commit comments

Comments
 (0)