Skip to content

Commit ca20825

Browse files
committed
fix: column selector bug.
1 parent f451cb3 commit ca20825

File tree

7 files changed

+87
-50
lines changed

7 files changed

+87
-50
lines changed

src/lib/components/columnSelector.svelte

Lines changed: 40 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -31,49 +31,62 @@
3131
}
3232
};
3333
34-
onMount(async () => {
34+
const saveColumnPreferences = () => {
35+
const shownColumns = $columns.filter((n) => n.hide !== true).map((n) => n.id);
36+
37+
if (isCustomCollection) {
38+
preferences.setCustomCollectionColumns(page.params.collection, shownColumns);
39+
} else {
40+
preferences.setColumns(shownColumns);
41+
}
42+
};
43+
44+
onMount(() => {
3545
if (isCustomCollection) {
36-
const prefs = preferences.getCustomCollectionColumns(page.params.collection);
37-
columns.set(
38-
$columns.map((column) => {
39-
column.hide = prefs?.includes(column.id) ?? false;
46+
const shownColumns = preferences.getCustomCollectionColumns(page.params.collection);
47+
48+
columns.update((columns) => {
49+
return columns.map((column) => {
50+
column.hide = !shownColumns.includes(column.id);
4051
return column;
41-
})
42-
);
52+
});
53+
});
4354
} else {
4455
const prefs = preferences.get(page.route);
4556
46-
// Override the shown columns only if a preference was set
47-
if (prefs?.columns) {
48-
columns.set(
49-
$columns.map((column) => {
50-
column.hide = prefs.columns?.includes(column.id) ?? false;
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);
5161
return column;
52-
})
53-
);
62+
});
63+
});
5464
}
5565
}
5666
57-
columns.subscribe((ctx) => {
58-
const columns = ctx.filter((n) => n.hide === true).map((n) => n.id);
59-
60-
if (isCustomCollection) {
61-
preferences.setCustomCollectionColumns(columns);
62-
} else {
63-
preferences.setColumns(columns);
64-
}
65-
});
66-
6767
calcMaxHeight();
6868
});
6969
7070
let selectedColumnsNumber = $derived(
7171
$columns.reduce((acc, column) => {
72-
if (column.hide === true) return acc;
72+
if (column.hide) return acc;
7373
7474
return ++acc;
7575
}, 0)
7676
);
77+
78+
function toggleColumn(column: Column) {
79+
columns.update((cols) =>
80+
cols.map((col) => {
81+
if (col.id === column.id) {
82+
col.hide = !column.hide;
83+
}
84+
return col;
85+
})
86+
);
87+
88+
saveColumnPreferences();
89+
}
7790
</script>
7891

7992
<svelte:window on:resize={calcMaxHeight} />
@@ -86,15 +99,15 @@
8699
{#each $columns as column}
87100
{#if !column?.exclude}
88101
<ActionMenu.Item.Button
89-
on:click={() => (column.hide = !column.hide)}
102+
on:click={() => toggleColumn(column)}
90103
disabled={allowNoColumns
91104
? false
92105
: selectedColumnsNumber <= 1 && column.hide !== true}>
93106
<Layout.Stack direction="row" gap="s">
94107
<Selector.Checkbox
95108
checked={!column.hide}
96109
size="s"
97-
on:click={() => (column.hide = !column.hide)} />
110+
on:click={() => toggleColumn(column)} />
98111
{column.title}
99112
</Layout.Stack>
100113
</ActionMenu.Item.Button>

src/lib/stores/preferences.ts

Lines changed: 13 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ import type { Page } from '@sveltejs/kit';
44
import { get, writable } from 'svelte/store';
55
import { sdk } from './sdk';
66
import type { Models } from '@appwrite.io/console';
7-
import { organization } from './organization';
87
import { page } from '$app/state';
98
import { user } from '$lib/stores/user';
109
import deepEqual from 'deep-equal';
@@ -30,7 +29,7 @@ type PreferencesStore = {
3029
} & { hideAiDisclaimer?: boolean };
3130

3231
async function updateConsolePreferences(store: PreferencesStore): Promise<void> {
33-
const currentPreferences = get(user).prefs ?? (await sdk.forConsole.account.getPrefs());
32+
const currentPreferences = get(user)?.prefs ?? (await sdk.forConsole.account.getPrefs());
3433
if (!currentPreferences?.console || Array.isArray(currentPreferences.console)) {
3534
currentPreferences.console = {};
3635
}
@@ -79,9 +78,9 @@ function createPreferences() {
7978
let newPrefsSnapshot: PreferencesStore;
8079

8180
update((currentPrefs) => {
82-
oldPrefsSnapshot = currentPrefs;
81+
oldPrefsSnapshot = structuredClone(currentPrefs);
8382
callback(currentPrefs);
84-
newPrefsSnapshot = currentPrefs;
83+
newPrefsSnapshot = structuredClone(currentPrefs);
8584
return currentPrefs;
8685
});
8786

@@ -149,16 +148,14 @@ function createPreferences() {
149148

150149
return n;
151150
}),
152-
setCustomCollectionColumns: (columns: Preferences['columns']) =>
151+
setCustomCollectionColumns: (collectionId: string, columns: Preferences['columns']) =>
153152
updateAndSync((n) => {
154-
const collection = page.params.collection;
155-
if (!n?.collections?.[collection]) {
153+
if (!n?.collections?.[collectionId]) {
156154
n ??= {};
157155
n.collections ??= {};
158156
}
159157

160-
n.collections[collection] = columns;
161-
158+
n.collections[collectionId] = Array.from(new Set(columns));
162159
return n;
163160
}),
164161
loadTeamPrefs: async (id: string) => {
@@ -173,8 +170,11 @@ function createPreferences() {
173170
getDisplayNames: () => {
174171
return preferences?.displayNames ?? {};
175172
},
176-
setDisplayNames: async (collectionId: string, names: TeamPreferences['names']) => {
177-
const id = get(organization).$id;
173+
setDisplayNames: async (
174+
orgId: string,
175+
collectionId: string,
176+
names: TeamPreferences['names']
177+
) => {
178178
let teamPrefs: Models.Preferences;
179179
update((n) => {
180180
if (!n?.displayNames) {
@@ -187,7 +187,8 @@ function createPreferences() {
187187

188188
return n;
189189
});
190-
await sdk.forConsole.teams.updatePrefs(id, teamPrefs);
190+
191+
await sdk.forConsole.teams.updatePrefs(orgId, teamPrefs);
191192
}
192193
};
193194
}

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@
4040
id: attribute.key,
4141
title: attribute.key,
4242
type: attribute.type as ColumnType,
43-
show: selected?.includes(attribute.key) ?? true,
43+
hide: !selected?.includes(attribute.key),
4444
array: attribute?.array,
4545
format: 'format' in attribute && attribute?.format === 'enum' ? attribute.format : null,
4646
elements: 'elements' in attribute ? attribute.elements : null
@@ -51,7 +51,7 @@
5151
...['$id', '$createdAt', '$updatedAt'].map((id) => ({
5252
id,
5353
title: id,
54-
show: true,
54+
hide: false,
5555
type: (id === '$id' ? 'string' : 'datetime') as ColumnType
5656
}))
5757
]);
@@ -99,7 +99,7 @@
9999
disabled={!(hasAttributes && hasValidAttributes)}
100100
analyticsSource="database_documents" />
101101
<Layout.Stack direction="row" alignItems="center" justifyContent="flex-end">
102-
<ViewSelector view={data.view} {columns} hideView />
102+
<ViewSelector view={data.view} {columns} hideView isCustomCollection />
103103
{#if flags.showCsvImport(data)}
104104
<Button
105105
secondary

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

Lines changed: 18 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,18 +11,34 @@
1111
import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
1212
import { isRelationship } from '../document-[document]/attributes/store';
1313
import Confirm from '$lib/components/confirm.svelte';
14+
import { preferences } from '$lib/stores/preferences';
1415
1516
export let showDelete = false;
1617
export let selectedAttribute: Attributes;
1718
const databaseId = page.params.database;
18-
let checked = false;
19+
1920
let error: string;
21+
let checked = false;
22+
23+
async function updateCollectionColumns() {
24+
let selectedColumns = preferences
25+
.getCustomCollectionColumns($collection.$id)
26+
.filter((attribute) => attribute != selectedAttribute.key);
27+
28+
await Promise.all([
29+
preferences.setCustomCollectionColumns($collection.$id, selectedColumns),
30+
invalidate(Dependencies.COLLECTION)
31+
]);
32+
}
33+
2034
async function handleDelete() {
2135
try {
2236
await sdk
2337
.forProject(page.params.region, page.params.project)
2438
.databases.deleteAttribute(databaseId, $collection.$id, selectedAttribute.key);
25-
await invalidate(Dependencies.COLLECTION);
39+
40+
await updateCollectionColumns();
41+
2642
showDelete = false;
2743
addNotification({
2844
type: 'success',

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

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -24,14 +24,20 @@
2424
};
2525
let error: string;
2626
27+
async function updateCollectionColumns() {
28+
let selectedColumns = preferences.getCustomCollectionColumns(collectionId);
29+
selectedColumns.push(key ?? data?.key);
30+
await Promise.all([
31+
preferences.setCustomCollectionColumns(collectionId, selectedColumns),
32+
invalidate(Dependencies.COLLECTION)
33+
]);
34+
}
35+
2736
async function submit() {
2837
try {
2938
await $option.create(databaseId, collectionId, key, data);
39+
await updateCollectionColumns();
3040
31-
let selectedColumns = preferences.getCustomCollectionColumns(collectionId);
32-
selectedColumns.push(key ?? data?.key);
33-
preferences.setCustomCollectionColumns(selectedColumns);
34-
await invalidate(Dependencies.COLLECTION);
3541
if (!page.url.pathname.includes('attributes')) {
3642
await goto(
3743
`${base}/project-${page.params.region}-${page.params.project}/databases/database-${databaseId}/collection-${collectionId}/attributes`

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,13 +12,14 @@
1212
import { page } from '$app/state';
1313
import { Icon, Layout } from '@appwrite.io/pink-svelte';
1414
import { IconPlus, IconX } from '@appwrite.io/pink-icons-svelte';
15+
import { organization } from '$lib/stores/organization';
1516
1617
const collectionId = page.params.collection;
1718
let names: string[] = [...(preferences.getDisplayNames()?.[collectionId] ?? [])];
1819
1920
async function updateDisplayName() {
2021
try {
21-
await preferences.setDisplayNames(collectionId, names);
22+
await preferences.setDisplayNames($organization.$id, collectionId, names);
2223
names = [...(preferences.getDisplayNames()?.[collectionId] ?? [])];
2324
await invalidate(Dependencies.TEAM);
2425
addNotification({

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -108,7 +108,7 @@
108108
id: attribute.key,
109109
title: attribute.key,
110110
type: attribute.type as ColumnType,
111-
show: selected?.includes(attribute.key) ?? true,
111+
hide: !selected?.includes(attribute.key),
112112
array: attribute?.array,
113113
width: { min: 168 },
114114
format:

0 commit comments

Comments
 (0)