From 13b36fc3c2de1f00b9f7d97f0cd7a50c8cc47d80 Mon Sep 17 00:00:00 2001 From: Darshan Date: Thu, 14 Aug 2025 18:11:47 +0530 Subject: [PATCH 01/15] update: array empty column badge; update: colum selector <> account preferences sync, show count only after a user changed the selection; --- src/lib/components/columnSelector.svelte | 14 ++-- src/lib/components/viewSelector.svelte | 69 +++++++++++++++---- src/lib/helpers/faker.ts | 2 +- src/lib/stores/preferences.ts | 19 +++++ .../table-[table]/columns/+page.svelte | 4 +- .../table-[table]/spreadsheet.svelte | 30 ++++---- 6 files changed, 102 insertions(+), 36 deletions(-) diff --git a/src/lib/components/columnSelector.svelte b/src/lib/components/columnSelector.svelte index 6092e1eea..6037717ce 100644 --- a/src/lib/components/columnSelector.svelte +++ b/src/lib/components/columnSelector.svelte @@ -20,7 +20,8 @@ ui = 'legacy', allowNoColumns = false, showAnyway = false, - children + children, + onPreferencesUpdated = null }: { columns: Writable; isCustomTable?: boolean; @@ -28,6 +29,7 @@ ui?: 'legacy' | 'new'; showAnyway?: boolean; children: Snippet<[toggle: () => void, selectedColumnsNumber: number]>; + onPreferencesUpdated?: () => void; } = $props(); let search = $state(''); @@ -60,7 +62,9 @@ const shownColumns = $columns.filter((n) => n.hide === true).map((n) => n.id); if (isCustomTable) { - preferences.setCustomTableColumns(page.params.table, shownColumns); + preferences.setCustomTableColumns(page.params.table, shownColumns).then(() => { + onPreferencesUpdated?.(); + }); } else { preferences.setColumns(shownColumns); } @@ -211,10 +215,8 @@ >Deselect all {:else} -
- - No column named "{search}" was found - +
+ No results found
{/if} diff --git a/src/lib/components/viewSelector.svelte b/src/lib/components/viewSelector.svelte index 43fe2d773..7523c6f67 100644 --- a/src/lib/components/viewSelector.svelte +++ b/src/lib/components/viewSelector.svelte @@ -7,29 +7,72 @@ import ViewToggle from './viewToggle.svelte'; import ColumnSelector from './columnSelector.svelte'; import { isSmallViewport } from '$lib/stores/viewport'; + import { preferences } from '$lib/stores/preferences'; + import { page } from '$app/state'; + import { hash } from '$lib/helpers/string'; - export let onlyIcon = false; - export let ui: 'legacy' | 'new' = 'legacy'; - export let columns: Writable; - export let view: View; - export let isCustomTable = false; - export let hideView = false; - export let hideColumns = false; - export let allowNoColumns = false; - export let showAnyway = false; + interface Props { + onlyIcon?: boolean; + ui?: 'legacy' | 'new'; + columns: Writable; + view: View; + isCustomTable?: boolean; + hideView?: boolean; + hideColumns?: boolean; + allowNoColumns?: boolean; + showAnyway?: boolean; + } + + let { + onlyIcon = false, + ui = 'legacy', + columns, + view = $bindable(), + isCustomTable = false, + hideView = false, + hideColumns = false, + allowNoColumns = false, + showAnyway = false + }: Props = $props(); + + let showCountBadge = $state(false); + const preferenceKey = $derived(getPreferenceKey()); + + function getPreferenceKey(): string { + const tableId = page.params.table; + const organizationId = page.data.organization?.$id ?? page.data.project?.teamId; + return hash([organizationId, tableId].filter(Boolean).join('#')); + } + + function updateBadgeState() { + if (!preferences.getKey(preferenceKey, false)) { + showCountBadge = true; + preferences.setKey(preferenceKey, true); + } + } + + $effect(() => { + showCountBadge = !onlyIcon || !!preferences.getKey(preferenceKey, false); + }); {#if !hideColumns && view === View.Table} - + {#snippet children(toggle, selectedColumnsNumber)} + class={onlyIcon && !$isSmallViewport ? 'width-fix' : undefined} + badge={showCountBadge ? selectedColumnsNumber.toString() : undefined}> {/snippet} diff --git a/src/lib/helpers/faker.ts b/src/lib/helpers/faker.ts index 4ef272745..9ff49c87c 100644 --- a/src/lib/helpers/faker.ts +++ b/src/lib/helpers/faker.ts @@ -149,7 +149,7 @@ function generateSingleValue(column: Columns): string | number | boolean | null return faker.internet.url(); } } - return '' + return ''; } else { const stringAttr = column as Models.ColumnString; const maxLength = Math.min(stringAttr.size ?? 255, 1000); diff --git a/src/lib/stores/preferences.ts b/src/lib/stores/preferences.ts index 42aab1cb9..1b15f23b0 100644 --- a/src/lib/stores/preferences.ts +++ b/src/lib/stores/preferences.ts @@ -43,6 +43,9 @@ type ConsolePreferencesStore = { columnWidths?: { [key: string]: TeamPreferences['widths']; }; + miscellaneous?: { + [key: string]: string | number | boolean; + }; } & { hideAiDisclaimer?: boolean }; async function updateConsolePreferences(store: ConsolePreferencesStore): Promise { @@ -294,6 +297,22 @@ function createPreferences() { n.tableHeaderExpanded[tableId] = expanded; return n; }); + }, + + getKey(key: string, _default: T): T { + return (preferences?.miscellaneous?.[key] ?? _default) as T; + }, + + async setKey(key: string, value: string | number | boolean) { + await updateAndSync((n) => { + if (!n?.miscellaneous) { + n ??= {}; + n.miscellaneous ??= {}; + } + + n.miscellaneous[key] = value; + return n; + }); } }; } diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/+page.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/+page.svelte index 6168afc8b..6dd2d8ff7 100644 --- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/+page.svelte +++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/+page.svelte @@ -275,7 +275,9 @@ {@const minMaxSize = getMinMaxSizeForColumn(column)} {#if minMaxSize} - + {minMaxSize} {/if} diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/spreadsheet.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/spreadsheet.svelte index 6902121d2..e7f8bde93 100644 --- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/spreadsheet.svelte +++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/spreadsheet.svelte @@ -264,18 +264,14 @@ } function formatArray(array: unknown[]) { - if (array.length === 0) return '[ ]'; + if (array.length === 0) return 'Empty'; let formattedFields: string[] = []; for (const item of array) { - if (typeof item === 'string') { - formattedFields.push(`"${item}"`); - } else { - formattedFields.push(`${item}`); - } + formattedFields.push(`${item}`); } - return `[${formattedFields.join(', ')}]`; + return `${formattedFields.join(', ')}`; } function formatColumn(column: unknown) { @@ -342,9 +338,6 @@ ); } - // trigger ui update with randomized key! - spreadsheetRenderKey.set(`sorted#${Date.now()}`); - // save > navigate > restore! spreadsheetContainer.saveGridSheetScroll(); await goto(`${url.pathname}${url.search}`); @@ -532,9 +525,13 @@ Object.entries(row).filter(([key]) => !SYSTEM_KEYS.has(key)) ); - await sdk - .forProject(page.params.region, page.params.project) - .grids.updateRow(databaseId, tableId, row.$id, onlyData, row.$permissions); + await sdk.forProject(page.params.region, page.params.project).grids.updateRow({ + databaseId, + tableId, + rowId: row.$id, + data: onlyData, + permissions: row.$permissions + }); invalidate(Dependencies.ROW); trackEvent(Submit.RowUpdate); @@ -742,8 +739,8 @@ {#if row === null} {#each $tableColumns as col} @@ -838,6 +835,7 @@ {:else} {@const value = row[columnId]} {@const formatted = formatColumn(row[columnId])} + {@const isEmptyArray = formatted === 'Empty'} {@const isDatetimeAttribute = rowColumn.type === 'datetime'} {@const isEncryptedAttribute = isString(rowColumn) && rowColumn.encrypt} @@ -868,6 +866,8 @@ {:else if formatted === 'null'} + {:else if isEmptyArray} + {:else} {formatted} @@ -1087,7 +1087,7 @@ } /* TODO: not good! */ - & :global(input) { + & :global(input[type='text']) { padding-inline: 8px !important; } From ad84dd76f8d5069e67fb0edf43b3a9347e26d25d Mon Sep 17 00:00:00 2001 From: Darshan Date: Thu, 14 Aug 2025 19:06:38 +0530 Subject: [PATCH 02/15] update: font edits and fixes. --- src/lib/layout/animatedTitle.svelte | 11 +---- .../database-[database]/subNavigation.svelte | 43 ++++++++++--------- .../table-[table]/indexes/createIndex.svelte | 1 + 3 files changed, 26 insertions(+), 29 deletions(-) diff --git a/src/lib/layout/animatedTitle.svelte b/src/lib/layout/animatedTitle.svelte index 05e333d68..867c3212b 100644 --- a/src/lib/layout/animatedTitle.svelte +++ b/src/lib/layout/animatedTitle.svelte @@ -15,20 +15,13 @@ } = $props(); const buttonSize = $derived(collapsed ? 'xs' : 's'); - - const expandedSize = $derived( - $isSmallViewport ? 'var(--font-size-m)' : 'var(--font-size-xxxl)' - ); - - // const currentFontSize = $derived(collapsed ? 'var(--font-size-l)' : expandedSize); - const currentFontSize = $derived(collapsed ? 'var(--font-size-l)' : 'var(--font-size-xxxl)'); - const currentLineHeight = $derived(collapsed ? '130%' : '140%'); const currentLetterSpacing = $derived(collapsed ? '0' : '-0.144px'); + const currentFontSize = $derived(collapsed ? 'var(--font-size-l)' : 'var(--font-size-xxxl)'); - {#if href} + {#if href && !$isSmallViewport} diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/subNavigation.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/subNavigation.svelte index e8485f487..765ea3ae1 100644 --- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/subNavigation.svelte +++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/subNavigation.svelte @@ -4,7 +4,7 @@ import { showCreate } from './store'; import type { PageData } from './$types'; import { showSubNavigation } from '$lib/stores/layout'; - import { Icon, Sidebar, Navbar, Layout, Link } from '@appwrite.io/pink-svelte'; + import { Icon, Sidebar, Navbar, Layout, Link, Typography } from '@appwrite.io/pink-svelte'; import { IconChevronDown, IconDatabase, @@ -55,14 +55,14 @@
{#if tables?.total} -
    +
      {#each sortedTables as table, index} {@const href = `${base}/project-${region}-${project}/databases/database-${databaseId}/table-${table.$id}`} {@const isSelected = tableId === table.$id} {@const isFirst = index === 0} {@const isLast = index === sortedTables.length - 1} - +
    • {/if} - + +
@@ -166,17 +169,16 @@ From de40b450a2381ddd0985544bf927d0a04c13f7d2 Mon Sep 17 00:00:00 2001 From: Darshan Date: Fri, 15 Aug 2025 13:05:42 +0530 Subject: [PATCH 05/15] fix: column selector <> column swap edge case. Details - Hiding some columns via `columnSelector.svelte` and then swapping them would bring back the hidden columns. --- src/lib/components/columnSelector.svelte | 5 +-- src/lib/stores/preferences.ts | 6 +-- .../table-[table]/spreadsheet.svelte | 41 +++++++++---------- 3 files changed, 24 insertions(+), 28 deletions(-) diff --git a/src/lib/components/columnSelector.svelte b/src/lib/components/columnSelector.svelte index 6037717ce..17d43482f 100644 --- a/src/lib/components/columnSelector.svelte +++ b/src/lib/components/columnSelector.svelte @@ -62,9 +62,8 @@ const shownColumns = $columns.filter((n) => n.hide === true).map((n) => n.id); if (isCustomTable) { - preferences.setCustomTableColumns(page.params.table, shownColumns).then(() => { - onPreferencesUpdated?.(); - }); + onPreferencesUpdated?.(); + preferences.setCustomTableColumns(page.params.table, shownColumns); } else { preferences.setColumns(shownColumns); } diff --git a/src/lib/stores/preferences.ts b/src/lib/stores/preferences.ts index 1b15f23b0..ab0a2e37b 100644 --- a/src/lib/stores/preferences.ts +++ b/src/lib/stores/preferences.ts @@ -191,8 +191,6 @@ function createPreferences() { n.tables ??= {}; n.tables[tableId] = Array.from(new Set(columns)); - // let's not double save - // n.collections[tableId] = Array.from(new Set(columns)); return n; }), @@ -238,8 +236,8 @@ function createPreferences() { }); }, - getColumnOrder(collectionId: string): TeamPreferences['order'] { - return teamPreferences?.columnOrder?.[collectionId] ?? []; + getColumnOrder(tableId: string): TeamPreferences['order'] { + return teamPreferences?.columnOrder?.[tableId] ?? []; }, async saveColumnOrder( diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/spreadsheet.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/spreadsheet.svelte index e7f8bde93..e3f16ebcd 100644 --- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/spreadsheet.svelte +++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/spreadsheet.svelte @@ -96,7 +96,6 @@ const minimumWidth = 168; const emptyCellsLimit = $isSmallViewport ? 12 : 18; - const selected = preferences.getCustomTableColumns(page.params.table); const SYSTEM_KEYS = new Set([ '$tableId', '$databaseId' @@ -133,6 +132,8 @@ onDestroy(() => ($showCreateAttributeSheet.show = false)); function makeTableColumns() { + const selected = preferences.getCustomTableColumns(page.params.table); + const baseColumns = $table.columns.map((col) => ({ id: col.key, title: col.key, @@ -185,12 +186,13 @@ { id: 'actions', title: '', - width: getColumnWidth('actions', 40), + width: 40, isAction: true, draggable: false, type: 'string', resizable: false, - isEditable: false + isEditable: false, + hide: false } ]; @@ -198,11 +200,12 @@ staticColumns[0], ...baseColumns, staticColumns[1], - staticColumns[2], - staticColumns[3] + staticColumns[2] ]; - const visibleNonAction = groupedColumns.filter((c) => !c.hide && !c.isAction); + const actionsColumn = staticColumns[3]; + + const visibleNonAction = groupedColumns.filter((c) => !c.hide); if (visibleNonAction.length === 1) { const only = visibleNonAction[0]; if (typeof only.width === 'number') { @@ -212,18 +215,10 @@ } } - tableColumns.set( - reorderItems( - [ - staticColumns[0], - ...baseColumns, - staticColumns[1], - staticColumns[2], - staticColumns[3] - ], - $columnsOrder - ) - ); + const reorderedNonActions = reorderItems(groupedColumns, $columnsOrder); + const finalColumns = [...reorderedNonActions, actionsColumn]; + + tableColumns.set(finalColumns); } function getColumnWidth( @@ -241,6 +236,8 @@ columnsOrder.set(newOrder); } + makeTableColumns(); + saveColumnOrderToPreferences(newOrder); } @@ -404,9 +401,11 @@ showColumnDelete = false; try { - await sdk - .forProject(page.params.region, page.params.project) - .grids.deleteColumn(databaseId, tableId, $databaseColumnSheetOptions.column.key); + await sdk.forProject(page.params.region, page.params.project).grids.deleteColumn({ + databaseId, + tableId, + key: $databaseColumnSheetOptions.column.key + }); if ($columnsOrder.includes($databaseColumnSheetOptions.column.key)) { const updatedOrder = $columnsOrder.filter( From 1bdbab334c04e87b6c14b8310bb43fbb5c5b2ec6 Mon Sep 17 00:00:00 2001 From: Darshan Date: Fri, 15 Aug 2025 19:43:28 +0530 Subject: [PATCH 06/15] fix: stuff around with columns, reordering and pagination small fix. new: you can now scroll to the top of a page by selecting it again when at the bottom of the same page! --- package.json | 2 +- pnpm-lock.yaml | 10 +++++----- .../table-[table]/+layout.svelte | 2 -- .../table-[table]/spreadsheet.svelte | 15 ++++++++------- 4 files changed, 14 insertions(+), 15 deletions(-) diff --git a/package.json b/package.json index 846d64baa..cfd988ff9 100644 --- a/package.json +++ b/package.json @@ -26,7 +26,7 @@ "@appwrite.io/pink-icons": "0.25.0", "@appwrite.io/pink-icons-svelte": "^2.0.0-RC.1", "@appwrite.io/pink-legacy": "^1.0.3", - "@appwrite.io/pink-svelte": "https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@0fed23b", + "@appwrite.io/pink-svelte": "https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@8076873", "@faker-js/faker": "^9.9.0", "@popperjs/core": "^2.11.8", "@sentry/sveltekit": "^8.38.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 7bb1f7efc..8cd1a7c41 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -24,8 +24,8 @@ importers: specifier: ^1.0.3 version: 1.0.3 '@appwrite.io/pink-svelte': - specifier: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@0fed23b - version: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@0fed23b(svelte@5.25.3) + specifier: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@8076873 + version: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@8076873(svelte@5.25.3) '@faker-js/faker': specifier: ^9.9.0 version: 9.9.0 @@ -287,8 +287,8 @@ packages: '@appwrite.io/pink-legacy@1.0.3': resolution: {integrity: sha512-GGde5fmPhs+s6/3aFeMPc/kKADG/gTFkYQSy6oBN8pK0y0XNCLrZZgBv+EBbdhwdtqVEWXa0X85Mv9w7jcIlwQ==} - '@appwrite.io/pink-svelte@https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@0fed23b': - resolution: {tarball: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@0fed23b} + '@appwrite.io/pink-svelte@https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@8076873': + resolution: {tarball: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@8076873} version: 2.0.0-RC.2 peerDependencies: svelte: ^4.0.0 @@ -3831,7 +3831,7 @@ snapshots: '@appwrite.io/pink-icons': 1.0.0 the-new-css-reset: 1.11.3 - '@appwrite.io/pink-svelte@https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@0fed23b(svelte@5.25.3)': + '@appwrite.io/pink-svelte@https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@8076873(svelte@5.25.3)': dependencies: '@appwrite.io/pink-icons-svelte': 2.0.0-RC.1(svelte@5.25.3) '@floating-ui/dom': 1.6.13 diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/+layout.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/+layout.svelte index 93f5a48f7..44a6cb572 100644 --- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/+layout.svelte +++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/+layout.svelte @@ -72,8 +72,6 @@ const tableId = page.params.table; onMount(() => { - columnsOrder.set(preferences.getColumnOrder(tableId)); - columnsWidth.set(preferences.getColumnWidths(tableId)); expandTabs.set(preferences.isTableHeaderExpanded(tableId)); return realtime diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/spreadsheet.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/spreadsheet.svelte index e3f16ebcd..9cdab7056 100644 --- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/spreadsheet.svelte +++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/spreadsheet.svelte @@ -119,6 +119,8 @@ onMount(async () => { displayNames = preferences.getDisplayNames(); + columnsOrder.set(preferences.getColumnOrder(tableId)); + columnsWidth.set(preferences.getColumnWidths(tableId)); makeTableColumns(); sortState.set(data.currentSort as SortState); @@ -132,13 +134,13 @@ onDestroy(() => ($showCreateAttributeSheet.show = false)); function makeTableColumns() { - const selected = preferences.getCustomTableColumns(page.params.table); + const selectedColumnsToHide = preferences.getCustomTableColumns(tableId); const baseColumns = $table.columns.map((col) => ({ id: col.key, title: col.key, type: col.type as ColumnType, - hide: !!selected?.includes(col.key), + hide: !!selectedColumnsToHide?.includes(col.key), array: col?.array, width: getColumnWidth(col.key, { min: minimumWidth }), minimumWidth: minimumWidth, @@ -159,7 +161,7 @@ icon: IconFingerPrint, isEditable: false, isPrimary: false, - hide: !!selected?.includes('$id') + hide: !!selectedColumnsToHide?.includes('$id') }, { id: '$createdAt', @@ -170,7 +172,7 @@ type: 'datetime', icon: IconCalendar, isEditable: false, - hide: !!selected?.includes('$createdAt') + hide: !!selectedColumnsToHide?.includes('$createdAt') }, { id: '$updatedAt', @@ -181,7 +183,7 @@ type: 'datetime', icon: IconCalendar, isEditable: false, - hide: !!selected?.includes('$updatedAt') + hide: !!selectedColumnsToHide?.includes('$updatedAt') }, { id: 'actions', @@ -236,8 +238,6 @@ columnsOrder.set(newOrder); } - makeTableColumns(); - saveColumnOrderToPreferences(newOrder); } @@ -582,6 +582,7 @@ } async function handleGoToPage(targetPageNum: number): Promise { + jumpToPageReactive = 0; if (targetPageNum < 1 || targetPageNum > totalPages) return; if (!$paginatedRows.hasPage(targetPageNum)) { From 2d79326954677fa7eec4c669e1b88850635d6a8b Mon Sep 17 00:00:00 2001 From: Darshan Date: Fri, 15 Aug 2025 20:00:15 +0530 Subject: [PATCH 07/15] fix: another sizing bug from library! --- package.json | 2 +- pnpm-lock.yaml | 10 +++++----- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/package.json b/package.json index cfd988ff9..030e7254f 100644 --- a/package.json +++ b/package.json @@ -26,7 +26,7 @@ "@appwrite.io/pink-icons": "0.25.0", "@appwrite.io/pink-icons-svelte": "^2.0.0-RC.1", "@appwrite.io/pink-legacy": "^1.0.3", - "@appwrite.io/pink-svelte": "https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@8076873", + "@appwrite.io/pink-svelte": "https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@fe36900", "@faker-js/faker": "^9.9.0", "@popperjs/core": "^2.11.8", "@sentry/sveltekit": "^8.38.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 8cd1a7c41..f44191854 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -24,8 +24,8 @@ importers: specifier: ^1.0.3 version: 1.0.3 '@appwrite.io/pink-svelte': - specifier: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@8076873 - version: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@8076873(svelte@5.25.3) + specifier: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@fe36900 + version: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@fe36900(svelte@5.25.3) '@faker-js/faker': specifier: ^9.9.0 version: 9.9.0 @@ -287,8 +287,8 @@ packages: '@appwrite.io/pink-legacy@1.0.3': resolution: {integrity: sha512-GGde5fmPhs+s6/3aFeMPc/kKADG/gTFkYQSy6oBN8pK0y0XNCLrZZgBv+EBbdhwdtqVEWXa0X85Mv9w7jcIlwQ==} - '@appwrite.io/pink-svelte@https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@8076873': - resolution: {tarball: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@8076873} + '@appwrite.io/pink-svelte@https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@fe36900': + resolution: {tarball: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@fe36900} version: 2.0.0-RC.2 peerDependencies: svelte: ^4.0.0 @@ -3831,7 +3831,7 @@ snapshots: '@appwrite.io/pink-icons': 1.0.0 the-new-css-reset: 1.11.3 - '@appwrite.io/pink-svelte@https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@8076873(svelte@5.25.3)': + '@appwrite.io/pink-svelte@https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@fe36900(svelte@5.25.3)': dependencies: '@appwrite.io/pink-icons-svelte': 2.0.0-RC.1(svelte@5.25.3) '@floating-ui/dom': 1.6.13 From 3e0db68391087511a27b277623abb14c2badd752 Mon Sep 17 00:00:00 2001 From: Darshan Date: Sat, 16 Aug 2025 12:01:58 +0530 Subject: [PATCH 08/15] updates: misc, library bump. --- package.json | 2 +- pnpm-lock.yaml | 10 +- .../table-[table]/spreadsheet.svelte | 118 ++++++++---------- 3 files changed, 60 insertions(+), 70 deletions(-) diff --git a/package.json b/package.json index 030e7254f..826ff2830 100644 --- a/package.json +++ b/package.json @@ -26,7 +26,7 @@ "@appwrite.io/pink-icons": "0.25.0", "@appwrite.io/pink-icons-svelte": "^2.0.0-RC.1", "@appwrite.io/pink-legacy": "^1.0.3", - "@appwrite.io/pink-svelte": "https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@fe36900", + "@appwrite.io/pink-svelte": "https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@558e460", "@faker-js/faker": "^9.9.0", "@popperjs/core": "^2.11.8", "@sentry/sveltekit": "^8.38.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index f44191854..a5bd67722 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -24,8 +24,8 @@ importers: specifier: ^1.0.3 version: 1.0.3 '@appwrite.io/pink-svelte': - specifier: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@fe36900 - version: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@fe36900(svelte@5.25.3) + specifier: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@558e460 + version: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@558e460(svelte@5.25.3) '@faker-js/faker': specifier: ^9.9.0 version: 9.9.0 @@ -287,8 +287,8 @@ packages: '@appwrite.io/pink-legacy@1.0.3': resolution: {integrity: sha512-GGde5fmPhs+s6/3aFeMPc/kKADG/gTFkYQSy6oBN8pK0y0XNCLrZZgBv+EBbdhwdtqVEWXa0X85Mv9w7jcIlwQ==} - '@appwrite.io/pink-svelte@https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@fe36900': - resolution: {tarball: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@fe36900} + '@appwrite.io/pink-svelte@https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@558e460': + resolution: {tarball: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@558e460} version: 2.0.0-RC.2 peerDependencies: svelte: ^4.0.0 @@ -3831,7 +3831,7 @@ snapshots: '@appwrite.io/pink-icons': 1.0.0 the-new-css-reset: 1.11.3 - '@appwrite.io/pink-svelte@https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@fe36900(svelte@5.25.3)': + '@appwrite.io/pink-svelte@https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@558e460(svelte@5.25.3)': dependencies: '@appwrite.io/pink-icons-svelte': 2.0.0-RC.1(svelte@5.25.3) '@floating-ui/dom': 1.6.13 diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/spreadsheet.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/spreadsheet.svelte index 9cdab7056..a329de63e 100644 --- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/spreadsheet.svelte +++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/spreadsheet.svelte @@ -207,16 +207,6 @@ const actionsColumn = staticColumns[3]; - const visibleNonAction = groupedColumns.filter((c) => !c.hide); - if (visibleNonAction.length === 1) { - const only = visibleNonAction[0]; - if (typeof only.width === 'number') { - only.width = { - min: only.width - }; - } - } - const reorderedNonActions = reorderItems(groupedColumns, $columnsOrder); const finalColumns = [...reorderedNonActions, actionsColumn]; @@ -878,7 +868,7 @@ paginatedRows.update(index, row.detail)} on:revert={(row) => @@ -985,65 +975,65 @@ title={selectedRows.length === 1 ? 'Delete Row' : 'Delete Rows'}> {@const isSingle = selectedRowForDelete !== null} -
+

{#if isSingle} - Are you sure you want to delete this document from {$table.name}? + Are you sure you want to delete this row from {$table.name}? {:else} Are you sure you want to delete {selectedRows.length} {selectedRows.length > 1 ? 'rows' : 'row'} from {$table.name}? {/if} +

- {#if relatedColumns?.length} - - - Relation - Setting - - - {#each relatedColumns as attr} - - - - {#if attr.twoWay} - - {:else} - - {/if} - {attr.key} - - - - {attr.onDelete} - - - {Deletion[attr.onDelete]} - - - {/each} - -
- To change the selection edit the relationship settings. -
    - - Delete {isSingle ? 'document' : 'documents'} from - {$table.name} - -
-
- {:else} -

This action is irreversible.

- {/if} -
+ {#if relatedColumns?.length} + + + Relation + Setting + + + {#each relatedColumns as attr} + + + + {#if attr.twoWay} + + {:else} + + {/if} + {attr.key} + + + + {attr.onDelete} + + + {Deletion[attr.onDelete]} + + + {/each} + +
+ To change the selection edit the relationship settings. +
    + + Delete {isSingle ? 'document' : 'documents'} from + {$table.name} + +
+
+ {:else} +

This action is irreversible.

+ {/if} Date: Sat, 16 Aug 2025 14:02:12 +0530 Subject: [PATCH 09/15] updates: misc, library bump for sequence to checkbox on hover. --- package.json | 2 +- pnpm-lock.yaml | 10 +++++----- .../table-[table]/spreadsheet.svelte | 5 ++++- 3 files changed, 10 insertions(+), 7 deletions(-) diff --git a/package.json b/package.json index 826ff2830..cbf29da6d 100644 --- a/package.json +++ b/package.json @@ -26,7 +26,7 @@ "@appwrite.io/pink-icons": "0.25.0", "@appwrite.io/pink-icons-svelte": "^2.0.0-RC.1", "@appwrite.io/pink-legacy": "^1.0.3", - "@appwrite.io/pink-svelte": "https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@558e460", + "@appwrite.io/pink-svelte": "https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@45189ad", "@faker-js/faker": "^9.9.0", "@popperjs/core": "^2.11.8", "@sentry/sveltekit": "^8.38.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index a5bd67722..4c767bcd5 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -24,8 +24,8 @@ importers: specifier: ^1.0.3 version: 1.0.3 '@appwrite.io/pink-svelte': - specifier: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@558e460 - version: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@558e460(svelte@5.25.3) + specifier: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@45189ad + version: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@45189ad(svelte@5.25.3) '@faker-js/faker': specifier: ^9.9.0 version: 9.9.0 @@ -287,8 +287,8 @@ packages: '@appwrite.io/pink-legacy@1.0.3': resolution: {integrity: sha512-GGde5fmPhs+s6/3aFeMPc/kKADG/gTFkYQSy6oBN8pK0y0XNCLrZZgBv+EBbdhwdtqVEWXa0X85Mv9w7jcIlwQ==} - '@appwrite.io/pink-svelte@https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@558e460': - resolution: {tarball: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@558e460} + '@appwrite.io/pink-svelte@https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@45189ad': + resolution: {tarball: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@45189ad} version: 2.0.0-RC.2 peerDependencies: svelte: ^4.0.0 @@ -3831,7 +3831,7 @@ snapshots: '@appwrite.io/pink-icons': 1.0.0 the-new-css-reset: 1.11.3 - '@appwrite.io/pink-svelte@https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@558e460(svelte@5.25.3)': + '@appwrite.io/pink-svelte@https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@45189ad(svelte@5.25.3)': dependencies: '@appwrite.io/pink-icons-svelte': 2.0.0-RC.1(svelte@5.25.3) '@floating-ui/dom': 1.6.13 diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/spreadsheet.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/spreadsheet.svelte index a329de63e..c3374b186 100644 --- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/spreadsheet.svelte +++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/spreadsheet.svelte @@ -747,7 +747,10 @@ {index} id={row?.$id} virtualItem={item} - select={rowSelection}> + select={rowSelection} + showSelectOnHover + valueWithoutHover={row.$sequence} + > {#each $tableColumns as { id: columnId, isEditable } (columnId)} {@const rowColumn = $columns.find((col) => col.key === columnId)} From 5e481440deafeb58318596c54091fd3d93a4a86e Mon Sep 17 00:00:00 2001 From: Darshan Date: Sat, 16 Aug 2025 16:54:51 +0530 Subject: [PATCH 10/15] updates: misc, library bump for keyboard nav. --- package.json | 2 +- pnpm-lock.yaml | 10 +++++----- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/package.json b/package.json index cbf29da6d..246d94254 100644 --- a/package.json +++ b/package.json @@ -26,7 +26,7 @@ "@appwrite.io/pink-icons": "0.25.0", "@appwrite.io/pink-icons-svelte": "^2.0.0-RC.1", "@appwrite.io/pink-legacy": "^1.0.3", - "@appwrite.io/pink-svelte": "https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@45189ad", + "@appwrite.io/pink-svelte": "https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@7a52c75", "@faker-js/faker": "^9.9.0", "@popperjs/core": "^2.11.8", "@sentry/sveltekit": "^8.38.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 4c767bcd5..4359f7a5b 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -24,8 +24,8 @@ importers: specifier: ^1.0.3 version: 1.0.3 '@appwrite.io/pink-svelte': - specifier: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@45189ad - version: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@45189ad(svelte@5.25.3) + specifier: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@7a52c75 + version: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@7a52c75(svelte@5.25.3) '@faker-js/faker': specifier: ^9.9.0 version: 9.9.0 @@ -287,8 +287,8 @@ packages: '@appwrite.io/pink-legacy@1.0.3': resolution: {integrity: sha512-GGde5fmPhs+s6/3aFeMPc/kKADG/gTFkYQSy6oBN8pK0y0XNCLrZZgBv+EBbdhwdtqVEWXa0X85Mv9w7jcIlwQ==} - '@appwrite.io/pink-svelte@https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@45189ad': - resolution: {tarball: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@45189ad} + '@appwrite.io/pink-svelte@https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@7a52c75': + resolution: {tarball: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@7a52c75} version: 2.0.0-RC.2 peerDependencies: svelte: ^4.0.0 @@ -3831,7 +3831,7 @@ snapshots: '@appwrite.io/pink-icons': 1.0.0 the-new-css-reset: 1.11.3 - '@appwrite.io/pink-svelte@https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@45189ad(svelte@5.25.3)': + '@appwrite.io/pink-svelte@https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@7a52c75(svelte@5.25.3)': dependencies: '@appwrite.io/pink-icons-svelte': 2.0.0-RC.1(svelte@5.25.3) '@floating-ui/dom': 1.6.13 From d460c8357ed6503b59cbfdfc30045f1d3e943e02 Mon Sep 17 00:00:00 2001 From: Darshan Date: Sat, 16 Aug 2025 17:29:52 +0530 Subject: [PATCH 11/15] update: check the selector to create index from columns page. --- .../table-[table]/columns/+page.svelte | 32 +++++++++++++++++-- 1 file changed, 30 insertions(+), 2 deletions(-) diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/+page.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/+page.svelte index 6dd2d8ff7..ab3a1467b 100644 --- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/+page.svelte +++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/+page.svelte @@ -102,6 +102,7 @@ let showDelete = $state(false); let selectedColumns = $state([]); let selectedColumn: Columns = $state(null); + let columnIndexMap: Record = $state({}); let columnsOrder = $state([]); const tableId = page.params.table; @@ -161,6 +162,18 @@ tick().then(() => spreadsheetContainer?.resizeSheet()); } }); + + $effect(() => { + if (!$showCreateIndexSheet.show && $showCreateIndexSheet.column) { + const columnKey = $showCreateIndexSheet.column; + + const isActuallyIndexed = $indexes.some((index) => index.columns.includes(columnKey)); + + if (!isActuallyIndexed) { + columnIndexMap[columnKey] = false; + } + } + }); - {@const isIndexed = $indexes.some((index) => + {@const isActuallyIndexed = $indexes.some((index) => index.columns.includes(column.key) )} - + + {@const checked = isActuallyIndexed || !!columnIndexMap[column.key]} + + { + if (!isActuallyIndexed) { + if (e.detail) { + columnIndexMap[column.key] = true; + $showCreateIndexSheet.show = true; + $showCreateIndexSheet.column = column.key; + } + } + }} /> {@const _default = From 894b5b742acea1c3c2e9dbe4b3c70ef224b3133c Mon Sep 17 00:00:00 2001 From: Darshan Date: Sat, 16 Aug 2025 17:35:17 +0530 Subject: [PATCH 12/15] add: button to notification when index is created from non main page. --- .../table-[table]/indexes/createIndex.svelte | 34 +++++++++++++------ 1 file changed, 24 insertions(+), 10 deletions(-) diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/indexes/createIndex.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/indexes/createIndex.svelte index b677cdf14..ac46bf996 100644 --- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/indexes/createIndex.svelte +++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/indexes/createIndex.svelte @@ -1,6 +1,7 @@ - {#if logs.total}
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/+layout.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/+layout.svelte index 44a6cb572..66b52bb9c 100644 --- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/+layout.svelte +++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/+layout.svelte @@ -382,7 +382,7 @@ externalColumnKey={$showCreateIndexSheet.column} /> - + diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/rowActivity.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/rowActivity.svelte index 69060a955..a6ad658fb 100644 --- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/rowActivity.svelte +++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/rowActivity.svelte @@ -6,7 +6,7 @@ import { rowActivitySheet } from './store'; import { pageToOffset } from '$lib/helpers/load'; import { type Models, Query } from '@appwrite.io/console'; - import { Layout, Skeleton } from '@appwrite.io/pink-svelte'; + import { Skeleton } from '@appwrite.io/pink-svelte'; let limit = 25; /* default */ let offset = $state(0); @@ -47,16 +47,22 @@
{/if} From 8dd316c66774267df96ea2305227ed1ec4d7fbf9 Mon Sep 17 00:00:00 2001 From: Darshan Date: Sat, 16 Aug 2025 18:06:17 +0530 Subject: [PATCH 14/15] scroll back to top on any sort. --- .../database-[database]/table-[table]/layout/spreadsheet.svelte | 1 + 1 file changed, 1 insertion(+) diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/layout/spreadsheet.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/layout/spreadsheet.svelte index a120769de..ff6757ebb 100644 --- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/layout/spreadsheet.svelte +++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/layout/spreadsheet.svelte @@ -60,6 +60,7 @@ export function restoreGridSheetScroll(): void { if (initSpreadsheetGridContainer() && spreadsheetGridContainer.scrollWidth > 0) { + spreadsheetGridContainer.scrollTop = 0; spreadsheetGridContainer.scrollLeft = $scrollStore; } } From d5805c353bca334766d16cf2d84dae2780132e14 Mon Sep 17 00:00:00 2001 From: Darshan Date: Sat, 16 Aug 2025 18:26:30 +0530 Subject: [PATCH 15/15] lint. --- .../database-[database]/table-[table]/spreadsheet.svelte | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/spreadsheet.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/spreadsheet.svelte index c3374b186..494a27a24 100644 --- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/spreadsheet.svelte +++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/spreadsheet.svelte @@ -749,8 +749,7 @@ virtualItem={item} select={rowSelection} showSelectOnHover - valueWithoutHover={row.$sequence} - > + valueWithoutHover={row.$sequence}> {#each $tableColumns as { id: columnId, isEditable } (columnId)} {@const rowColumn = $columns.find((col) => col.key === columnId)}