From b0e0074324e7f033150e56d9b82ca2e0b8a4e522 Mon Sep 17 00:00:00 2001 From: Darshan Date: Sat, 26 Jul 2025 10:59:41 +0530 Subject: [PATCH] fix: erratic bugs. --- .../collection-[collection]/+page.svelte | 26 +++++--- .../createAttribute.svelte | 62 +++++++++++++++---- .../layout/emptySheet.svelte | 59 ++++++++++-------- .../spreadsheet.svelte | 9 ++- 4 files changed, 106 insertions(+), 50 deletions(-) diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/+page.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/+page.svelte index 81182fb33..bce09211e 100644 --- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/+page.svelte +++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/+page.svelte @@ -14,7 +14,8 @@ columns, isCsvImportInProgress, showRecordsCreateSheet, - showCreateAttributeSheet + showCreateAttributeSheet, + type Attributes } from './store'; import SpreadSheet from './spreadsheet.svelte'; import { writable } from 'svelte/store'; @@ -35,10 +36,11 @@ let showImportCSV = false; const filterColumns = writable([]); - $: selected = preferences.getCustomCollectionColumns(page.params.collection); - - $: columns.set( - $collection.attributes.map((attribute) => ({ + function createColumnsFromAttributes( + attributes: Attributes[], + selected: string[] = [] + ): Column[] { + return attributes.map((attribute) => ({ id: attribute.key, title: attribute.key, type: attribute.type as ColumnType, @@ -46,10 +48,16 @@ array: attribute?.array, format: 'format' in attribute && attribute?.format === 'enum' ? attribute.format : null, elements: 'elements' in attribute ? attribute.elements : null - })) - ); + })); + } - $: filterColumns.set([...$columns.filter((column) => !column.isAction)]); + $: selected = preferences.getCustomCollectionColumns(page.params.collection); + + $: if ($collection.attributes) { + const freshColumns = createColumnsFromAttributes($collection.attributes, selected); + columns.set(freshColumns); + filterColumns.set(freshColumns.filter((column) => !column.isAction)); + } $: hasAttributes = !!$collection.attributes.length; $: hasValidAttributes = $collection?.attributes?.some((attr) => attr.status === 'available'); @@ -174,7 +182,7 @@ {:else} col.id) || []; - const neighbourIndex = currentOrder.indexOf(direction.neighbour); let newOrder: string[]; - if (neighbourIndex === -1) { - newOrder = [...currentOrder, key]; - } else { - const insertIndex = direction.to === 'left' ? neighbourIndex : neighbourIndex + 1; + if (!direction || !direction.neighbour) { + // Find the actions column position + const actionsIndex = currentOrder.indexOf('actions'); + const beforeActionsOrder = + actionsIndex !== -1 ? currentOrder.slice(0, actionsIndex) : currentOrder; + + const lastTwo = beforeActionsOrder.slice(-2); + const hasTimestampColumnsAtEnd = + lastTwo.length === 2 && + lastTwo.includes('$createdAt') && + lastTwo.includes('$updatedAt'); + + let insertIndex: number; + + if (hasTimestampColumnsAtEnd) { + insertIndex = Math.min( + currentOrder.indexOf('$createdAt'), + currentOrder.indexOf('$updatedAt') + ); + } else { + // Insert at the end, but before actions + insertIndex = actionsIndex !== -1 ? actionsIndex : currentOrder.length; + } + newOrder = [ ...currentOrder.slice(0, insertIndex), key, ...currentOrder.slice(insertIndex) ]; + } else { + const neighbourIndex = currentOrder.indexOf(direction.neighbour); + + if (neighbourIndex === -1) { + const actionsIndex = currentOrder.indexOf('actions'); + const insertIndex = actionsIndex !== -1 ? actionsIndex : currentOrder.length; + + newOrder = [ + ...currentOrder.slice(0, insertIndex), + key, + ...currentOrder.slice(insertIndex) + ]; + } else { + const insertIndex = direction.to === 'left' ? neighbourIndex : neighbourIndex + 1; + newOrder = [ + ...currentOrder.slice(0, insertIndex), + key, + ...currentOrder.slice(insertIndex) + ]; + } } preferences.saveColumnOrder( @@ -71,17 +110,16 @@ ); onColumnsReorder?.(newOrder); - return newOrder; } export async function submit() { try { await $option.create(databaseId, collectionId, key, data); + columnId = key; - if (direction) { - insertColumnInOrder(); - } + insertColumnInOrder(); + await invalidate(Dependencies.COLLECTION); addNotification({ diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/layout/emptySheet.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/layout/emptySheet.svelte index 77d166c8c..5049e383d 100644 --- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/layout/emptySheet.svelte +++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/layout/emptySheet.svelte @@ -15,24 +15,30 @@ type Mode = 'records' | 'columns' | 'indexes'; - type ColumnsMap = Record; - type Action = { text?: string; disabled?: boolean; onClick?: () => void; }; - export let mode: Mode; - export let showActions: boolean = true; - export let customColumns: Column[] = []; - export let title: string | undefined = undefined; - export let actions: - | { - primary?: Action; - random?: Action; - } - | undefined = undefined; + let { + mode, + showActions = true, + customColumns = [], + title = undefined, + actions = undefined + }: { + mode: Mode; + showActions?: boolean; + customColumns?: Column[]; + title?: string | undefined; + actions?: + | { + primary?: Action; + random?: Action; + } + | undefined; + } = $props(); function makeColumns(...middle: Column[]): Column[] { return [ @@ -66,15 +72,18 @@ ]; } - const columnsMap: ColumnsMap = { + function getCustomColumns() { + return customColumns.map((col) => ({ + ...col, + width: 180, + draggable: false, + resizable: false + })); + } + + const columnsMap: Record = $derived.by(() => ({ records: makeColumns( - // TODO: improve. - ...customColumns.map((col) => { - col.width = { min: 180 }; - col.draggable = false; - col.resizable = false; - return col; - }), + ...getCustomColumns(), { id: '$createdAt', title: 'Created', @@ -94,7 +103,6 @@ icon: IconCalendar } ), - // TODO: fixed, 3 columns columns: makeColumns( { id: 'indexed', @@ -115,7 +123,6 @@ isAction: false } ), - // TODO: fixed, 3 columns indexes: makeColumns( { id: 'type', @@ -136,9 +143,9 @@ isAction: false } ) - }; + })); - $: spreadsheetColumns = columnsMap[mode]; + const spreadsheetColumns = $derived(columnsMap[mode]);
@@ -192,7 +199,7 @@ size="s" variant="secondary" disabled={actions?.primary?.disabled} - on:click={actions?.primary?.onClick}> + onclick={actions?.primary?.onClick}> {actions?.primary?.text ?? `Create ${mode}`} @@ -203,7 +210,7 @@ size="s" variant="secondary" disabled={actions?.random?.disabled} - on:click={actions?.random?.onClick}> + onclick={actions?.random?.onClick}> {actions?.random?.text ?? `Generate random data`} Yet to be added 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 1daaca864..20eae3114 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 @@ -370,12 +370,11 @@ if (action === 'column-left' || action === 'column-right') { const { to, neighbour } = $databaseColumnSheetOptions.direction; - - $showCreateAttributeSheet.show = true; $showCreateAttributeSheet.title = `Insert column to the ${to} of ${neighbour}`; $showCreateAttributeSheet.direction = $databaseColumnSheetOptions.direction; $showCreateAttributeSheet.columns = $columns; $showCreateAttributeSheet.columnsOrder = $columnsOrder; + $showCreateAttributeSheet.show = true; } if (action === 'delete') { @@ -459,7 +458,11 @@ ($showCreateAttributeSheet.show = true)}> + on:click={() => { + $showCreateAttributeSheet.show = true; + $showCreateAttributeSheet.columns = $columns; + $showCreateAttributeSheet.columnsOrder = $columnsOrder; + }}>