From 39a758fb10f433be37b96996081cbfc30f7fb3de Mon Sep 17 00:00:00 2001 From: Darshan Date: Wed, 13 Aug 2025 20:04:03 +0530 Subject: [PATCH] qa: fixes, lesssgoooo! --- package.json | 2 +- pnpm-lock.yaml | 10 +-- src/lib/components/columnSelector.svelte | 45 ++++++++----- src/lib/components/sortButton.svelte | 14 +++- src/lib/components/viewSelector.svelte | 2 +- src/lib/layout/animatedTitle.svelte | 1 + src/lib/layout/container.svelte | 1 - src/lib/stores/preferences.ts | 2 +- .../database-[database]/subNavigation.svelte | 25 +++++++- .../table-[table]/+layout.svelte | 14 +++- .../table-[table]/+page.svelte | 4 +- .../table-[table]/columns/+page.svelte | 20 +++++- .../table-[table]/columns/deleteColumn.svelte | 23 +++---- .../table-[table]/createColumn.svelte | 11 ++-- .../table-[table]/editRow.svelte | 27 ++++++-- .../table-[table]/header.svelte | 28 +++++--- .../table-[table]/indexes/+page.svelte | 8 ++- .../table-[table]/indexes/createIndex.svelte | 49 ++++++++------ .../table-[table]/rowActivity.svelte | 64 ++++++------------- .../table-[table]/spreadsheet.svelte | 26 ++++---- 20 files changed, 237 insertions(+), 139 deletions(-) diff --git a/package.json b/package.json index 02e7bcd07..846d64baa 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@c467db8", + "@appwrite.io/pink-svelte": "https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@0fed23b", "@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 df497cd93..7bb1f7efc 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@c467db8 - version: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@c467db8(svelte@5.25.3) + specifier: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@0fed23b + version: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@0fed23b(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@c467db8': - resolution: {tarball: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@c467db8} + '@appwrite.io/pink-svelte@https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@0fed23b': + resolution: {tarball: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@0fed23b} 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@c467db8(svelte@5.25.3)': + '@appwrite.io/pink-svelte@https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@0fed23b(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/lib/components/columnSelector.svelte b/src/lib/components/columnSelector.svelte index dbe2a9c0c..6092e1eea 100644 --- a/src/lib/components/columnSelector.svelte +++ b/src/lib/components/columnSelector.svelte @@ -4,7 +4,14 @@ import { preferences } from '$lib/stores/preferences'; import { onMount, type Snippet } from 'svelte'; import type { Column } from '$lib/helpers/types'; - import { ActionMenu, Divider, Layout, Popover, Selector } from '@appwrite.io/pink-svelte'; + import { + ActionMenu, + Divider, + Layout, + Popover, + Selector, + Typography + } from '@appwrite.io/pink-svelte'; import { Button } from '$lib/elements/forms'; let { @@ -87,7 +94,7 @@ let selectedColumnsNumber = $derived( $columns.reduce((acc, column) => { - if (column.hide) return acc; + if (column.hide || column.isAction) return acc; return ++acc; }, 0) @@ -187,21 +194,29 @@ placeholder="Search" bind:value={search} /> - - + {#if filteredColumns.length > 0} + + -
- +
+ +
+ + + + {:else} +
+ + No column named "{search}" was found +
- - - + {/if} {/if} diff --git a/src/lib/components/sortButton.svelte b/src/lib/components/sortButton.svelte index be3692e49..d202cf664 100644 --- a/src/lib/components/sortButton.svelte +++ b/src/lib/components/sortButton.svelte @@ -45,9 +45,13 @@ onSort?.(Query.orderDesc(column)); } } + + const direction = $derived( + $state?.column === column && $state?.direction !== 'default' ? $state?.direction : '' + ); - 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 93b9983b3..2f681aaf4 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 @@ -4,6 +4,7 @@ import { ActionMenu, Badge, + Divider, FloatingActionBar, Icon, Layout, @@ -176,6 +177,7 @@ bind:selectedRows={selectedColumns} columns={[ { id: 'key', width: { min: 200 } }, + { id: 'size', width: { min: 200 } }, { id: 'indexed', width: { min: 150 } }, { id: 'default', width: { min: 200 } }, { id: 'actions', width: 40, isAction: true } @@ -183,6 +185,7 @@ bottomActionClick={() => ($showCreateAttributeSheet.show = true)}> Column name + Size Indexed Default value @@ -218,7 +221,7 @@ {#if column.key === '$id' || column.key === '$sequence' || column.key === '$createdAt' || column.key === '$updatedAt'} {column['name']} {:else} - {column.key} + {column.key} {column.array ? '[]' : undefined} {/if} {#if isString(column) && column.encrypt} @@ -252,6 +255,15 @@ + + {#if column.type === 'string'} + {column.size /* or length */} + {:else if column.type === 'integer' || column.type === 'double'} + Min: {column.min} Max: {column.max} + {:else} + - + {/if} + {@const isIndexed = $indexes.some((index) => index.columns.includes(column.key) @@ -309,6 +321,10 @@ {/if} {#if column.status !== 'processing' && !column['system']} +
+ +
+ - {selectedColumns.length > 1 ? 'attributes' : 'attribute'} + {selectedColumns.length > 1 ? 'columns' : 'column'} selected diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/deleteColumn.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/deleteColumn.svelte index e4f6bbca7..b472643df 100644 --- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/deleteColumn.svelte +++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/deleteColumn.svelte @@ -27,28 +27,29 @@ Array.isArray(selectedColumn) ? selectedColumn : [selectedColumn] ); - const selectedKeys = $derived(getKeys(selectedColumn)); + const selectedKeys = $derived( + selectedColumns.map((c: string | Columns) => (typeof c === 'string' ? c : c.key)) + ); const requiresTwoWayConfirm = $derived( - selectedColumns.some((column: string | Columns) => { - typeof column === 'string' ? false : isRelationship(column) && column.twoWay; - }) + selectedColumns + .filter((c): c is Columns => typeof c !== 'string') + .some((col) => isRelationship(col) && col.twoWay) ); const isDeleteBtnDisabled = $derived(requiresTwoWayConfirm && !checked); - function getKeys(selected: Columns | string[]): string[] { - return Array.isArray(selected) ? selected : [selected.key]; - } - async function handleDelete() { try { const client = sdk.forProject(page.params.region, page.params.project); await Promise.all( - // TODO: check the type here - selectedColumns.map((key) => - client.grids.deleteColumn(page.params.database, page.params.table, key) + selectedKeys.map((key) => + client.grids.deleteColumn({ + databaseId: page.params.database, + tableId: page.params.table, + key + }) ) ); diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/createColumn.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/createColumn.svelte index 2af8be4e5..f00d59a0e 100644 --- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/createColumn.svelte +++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/createColumn.svelte @@ -7,11 +7,7 @@ import { InputSelect, InputText } from '$lib/elements/forms'; import { addNotification } from '$lib/stores/notifications'; import { Submit, trackError, trackEvent } from '$lib/actions/analytics'; - import { - option, - columnOptions, - type Option - } from '$routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/store'; + import { option, columnOptions, type Option } from './columns/store'; import type { Column } from '$lib/helpers/types'; import { preferences } from '$lib/stores/preferences'; @@ -57,6 +53,11 @@ ? columnsOrder : columns?.map((col) => col.id) || []; + // if the length is empty, + // means there's no ordering done. + // auto handled, leave this here as is. + if (!currentOrder.length) return; + let newOrder: string[]; if (!direction || !direction.neighbour) { diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/editRow.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/editRow.svelte index 66aab7f8b..c52825a3e 100644 --- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/editRow.svelte +++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/editRow.svelte @@ -11,6 +11,7 @@ import { table, type Columns } from './store'; import ColumnItem from './row-[row]/columnItem.svelte'; import { isRelationship, isRelationshipToMany } from './row-[row]/columns/store'; + import { Layout } from '@appwrite.io/pink-svelte'; import { deepClone } from '$lib/helpers/object'; const tableId = page.params.table; @@ -23,6 +24,7 @@ } = $props(); let work = $state | null>(null); + let columnFormWrapper = $state(null); function initWork() { const prohibitedKeys = [ @@ -47,7 +49,10 @@ } $effect(() => { - if (row) work = initWork(); + if (row) { + work = initWork(); + focusFirstInput(); + } }); function compareAttributes(column: Columns, $work: Models.Row, $doc: Models.Row) { @@ -110,11 +115,23 @@ return $table.columns.every((attribute) => compareAttributes(attribute, $work, row)); } + + function focusFirstInput() { + const firstInput = columnFormWrapper?.querySelector( + 'input:not([disabled]):not([readonly]), textarea:not([disabled]):not([readonly])' + ); + + firstInput?.focus({ preventScroll: true }); + } {#if $table.columns?.length && work} - {#each $table.columns as column} - {@const label = column.key} - - {/each} +
+ + {#each $table.columns as column} + {@const label = column.key} + + {/each} + +
{/if} diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/header.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/header.svelte index 3abe31f07..638d858dc 100644 --- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/header.svelte +++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/header.svelte @@ -7,6 +7,7 @@ import AnimatedTitle from '$lib/layout/animatedTitle.svelte'; import { canWriteTables } from '$lib/stores/roles'; import { expandTabs, table } from './store'; + import { Layout } from '@appwrite.io/pink-svelte'; const databaseId = $derived(page.params.database); @@ -62,17 +63,19 @@ - - {$table?.name} - + + + {$table?.name} + - {#key $table?.$id} - {$table?.$id} - {/key} + {#key $table?.$id} + {$table?.$id} + {/key} + -
+
{#each tabs as tab} .tabs-container { + opacity: 1; transition: opacity 300ms cubic-bezier(0.4, 0, 0.2, 1); + + &.collapsed { + opacity: 0; + + & :global([role='tab']) { + cursor: default; + } + } } diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/indexes/+page.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/indexes/+page.svelte index d703a3bd8..a6def7593 100644 --- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/indexes/+page.svelte +++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/indexes/+page.svelte @@ -11,6 +11,7 @@ import { ActionMenu, Badge, + Divider, FloatingActionBar, Icon, Layout, @@ -167,7 +168,7 @@ {index.lengths} - + @@ -178,6 +179,11 @@ selectedIndex = index; showOverview = true; }}>Overview + +
+ +
+ - import { goto, invalidate } from '$app/navigation'; - import { base } from '$app/paths'; + import { invalidate } from '$app/navigation'; import { page } from '$app/state'; import { Submit, trackError, trackEvent } from '$lib/actions/analytics'; import { Dependencies } from '$lib/constants'; @@ -13,6 +12,7 @@ import { table, indexes } from '../store'; import { Icon, Layout } from '@appwrite.io/pink-svelte'; import { IconPlus, IconX } from '@appwrite.io/pink-icons-svelte'; + import { isSmallViewport } from '$lib/stores/viewport'; let { showCreateIndex = $bindable(false), @@ -95,12 +95,6 @@ invalidate(Dependencies.DATABASE) ]); - if (!page.route.id.includes('/indexes')) { - await goto( - `${base}/project-${page.params.region}-${page.params.project}/databases/database-${databaseId}/table-${$table.$id}/indexes` - ); - } - addNotification({ message: 'Creating index', type: 'success' @@ -138,7 +132,8 @@ {#each columnList as column, index} - + {@const direction = $isSmallViewport ? 'column' : 'row'} + {/if} - - - + {#if $isSmallViewport} +
+ +
+ {:else} +
+ +
+ {/if} {/each}
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 93eb1a881..69060a955 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, Table } from '@appwrite.io/pink-svelte'; + import { Layout, Skeleton } from '@appwrite.io/pink-svelte'; let limit = 25; /* default */ let offset = $state(0); @@ -38,49 +38,25 @@ {#if loading} -
- - - User - Event - Location - IP - Date - - - {#each Array(5) as _} - - - - - - - - - - - - - - - - - - - - - - - - - {/each} - +
+ +
{:else if rowActivityLogs} - +
+ +
{/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 af8a5d781..f641a4ce8 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 @@ -32,7 +32,8 @@ rowActivitySheet, paginatedRows, paginatedRowsLoading, - spreadsheetRenderKey, expandTabs + spreadsheetRenderKey, + expandTabs } from './store'; import RelationshipsModal from './relationshipsModal.svelte'; import type { Column, ColumnType } from '$lib/helpers/types'; @@ -118,9 +119,6 @@ onMount(async () => { displayNames = preferences.getDisplayNames(); - columnsOrder.set(preferences.getColumnOrder(tableId)); - columnsWidth.set(preferences.getColumnWidths(tableId)); - expandTabs.set(preferences.isTableHeaderExpanded(tableId)); makeTableColumns(); sortState.set(data.currentSort as SortState); @@ -661,7 +659,7 @@ expandTabs.subscribe((expanded) => { preferences.setTableHeaderExpanded(tableId, expanded); - }) + }); @@ -699,8 +697,8 @@ on:click={() => { $showCreateAttributeSheet.show = true; $showCreateAttributeSheet.column = null; - $showCreateAttributeSheet.columns = $tableColumns; $showCreateAttributeSheet.title = 'Create column'; + $showCreateAttributeSheet.columns = $tableColumns; $showCreateAttributeSheet.columnsOrder = $columnsOrder; }}> @@ -940,13 +938,15 @@ -
- { - $randomDataModalState.show = true; - }}>Generate sample data -
+ {#if !$isSmallViewport} +
+ { + $randomDataModalState.show = true; + }}>Generate sample data +
+ {/if}