fix: order on update.

2026-06-06 19:27:48 +00:00 · 2025-07-26 18:01:14 +05:30
parent f2cffb5247
commit c35582f6ce
3 changed files with 60 additions and 11 deletions
@@ -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) {
@@ -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;
+        });
+    }
 </script>

 <Popover let:toggle padding="none" placement="bottom-start" portal>
    {@render children(toggle)}

    <svelte:fragment slot="tooltip" let:hide>
-        {@const menuItems = type === 'header' ? headerMenuItems : rowMenuItems}
+        {@const menuItems = cleanMenu(type === 'header' ? headerMenuItems : rowMenuItems)}

        <ActionMenu.Root width="180px">
            {#each menuItems as item, index (index)}
@@ -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}
                    <SheetOptions
                        type="header"
+                        columnId={column.id}
                        column={$attributes.find((attr) => attr.key === column.id)}
-                        onSelect={(option) => onSelectSheetOption(option, 'header')}>
+                        onSelect={(option, columnId) =>
+                            onSelectSheetOption(option, columnId, 'header')}>
                        {#snippet children(toggle)}
                            <Spreadsheet.Header.Cell
                                {root}
@@ -523,7 +534,8 @@
                            <SheetOptions
                                type="row"
                                column={$attributes.find((attr) => attr.key === columnId)}
-                                onSelect={(option) => onSelectSheetOption(option, 'row', document)}>
+                                onSelect={(option) =>
+                                    onSelectSheetOption(option, 'row', null, document)}>
                                {#snippet children(toggle)}
                                    <Button.Button icon variant="extra-compact" on:click={toggle}>
                                        <Icon