From c35582f6cebe643bfb445feb6bb8c49050136103 Mon Sep 17 00:00:00 2001 From: Darshan Date: Sat, 26 Jul 2025 18:01:14 +0530 Subject: [PATCH] fix: order on update. --- .../attributes/edit.svelte | 17 ++++++++- .../sheetOptions.svelte | 38 +++++++++++++++---- .../spreadsheet.svelte | 16 +++++++- 3 files changed, 60 insertions(+), 11 deletions(-) diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/edit.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/edit.svelte index 0ce1e1401..4535e79cf 100644 --- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/edit.svelte +++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/edit.svelte @@ -8,10 +8,11 @@ import { Button, InputText } from '$lib/elements/forms'; import deepEqual from 'deep-equal'; import { addNotification } from '$lib/stores/notifications'; - import { type Attributes, databaseColumnSheetOptions } from '../store'; + import { type Attributes, columnsOrder, databaseColumnSheetOptions } from '../store'; import { attributeOptions, type Option } from './store'; import { onMount } from 'svelte'; import { Layout } from '@appwrite.io/pink-svelte'; + import { preferences } from '$lib/stores/preferences'; export let isModal = true; export let showEdit = false; @@ -60,6 +61,20 @@ }); showEdit = false; + const oldKey = originalKey; + const newKey = selectedAttribute.key; + + if (oldKey !== newKey && $columnsOrder.includes(oldKey)) { + const updatedOrder = $columnsOrder.map((id) => (id === oldKey ? newKey : id)); + columnsOrder.set(updatedOrder); + + await preferences.saveColumnOrder( + page.data.organization.$id ?? page.data.project.teamId, + page.params.collection, + updatedOrder + ); + } + trackEvent(Submit.AttributeUpdate); if (!isModal) { diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/sheetOptions.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/sheetOptions.svelte index 6a074575d..4ebc0ecaa 100644 --- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/sheetOptions.svelte +++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/sheetOptions.svelte @@ -74,13 +74,15 @@ let { column, + columnId = null, children, onSelect, type }: { column: Attributes; + columnId?: string; type: 'header' | 'row'; - onSelect: (option: HeaderCellAction | RowCellAction) => void; + onSelect: (option: HeaderCellAction | RowCellAction, columnId: string) => void; children: Snippet<[toggle: (event: Event) => void]>; } = $props(); @@ -90,32 +92,52 @@ if (action === 'column-left') { $databaseColumnSheetOptions.direction = { - neighbour: column?.key, + neighbour: columnId, to: 'left' }; } else if (action === 'column-right') { $databaseColumnSheetOptions.direction = { - neighbour: column?.key, + neighbour: columnId, to: 'right' }; } - onSelect(action); + onSelect(action, columnId); } - function shouldShow(item: MenuItem) { - if (item.action === 'sort-asc' || item.action === 'sort-desc') { - return internalColumns.includes(column?.key); + function shouldShow(item: MenuItem): boolean { + const isSystemColumn = internalColumns.includes(columnId); + + if (type === 'header') { + if (['delete', 'update', 'duplicate-header'].includes(item.action) && isSystemColumn) { + return false; + } } + return true; } + + function cleanMenu(items: MenuItem[]): MenuItem[] { + const visible = items.filter((item) => item.divider || shouldShow(item)); + + return visible.filter((item, i, arr) => { + const prev = arr[i - 1]; + const next = arr[i + 1]; + + if (item.divider) { + return prev && !prev.divider && next && !next.divider; + } + + return true; + }); + } {@render children(toggle)} - {@const menuItems = type === 'header' ? headerMenuItems : rowMenuItems} + {@const menuItems = cleanMenu(type === 'header' ? headerMenuItems : rowMenuItems)} {#each menuItems as item, index (index)} diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/spreadsheet.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/spreadsheet.svelte index 20eae3114..b41eea823 100644 --- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/spreadsheet.svelte +++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/spreadsheet.svelte @@ -358,6 +358,7 @@ async function onSelectSheetOption( action: HeaderCellAction | RowCellAction, + columnId: string, type: 'header' | 'row', document: Models.Document | null = null ) { @@ -380,6 +381,14 @@ if (action === 'delete') { showColumnDelete = true; } + + if (action === 'sort-asc') { + sortState.set({ column: columnId, direction: 'asc' }); + await sort([Query.orderAsc(columnId)]); + } else if (action === 'sort-desc') { + sortState.set({ column: columnId, direction: 'desc' }); + await sort([Query.orderDesc(columnId)]); + } } else if (type === 'row') { if (action === 'update') { $databaseRowSheetOptions.show = true; @@ -469,8 +478,10 @@ {:else} attr.key === column.id)} - onSelect={(option) => onSelectSheetOption(option, 'header')}> + onSelect={(option, columnId) => + onSelectSheetOption(option, columnId, 'header')}> {#snippet children(toggle)} attr.key === columnId)} - onSelect={(option) => onSelectSheetOption(option, 'row', document)}> + onSelect={(option) => + onSelectSheetOption(option, 'row', null, document)}> {#snippet children(toggle)}