diff --git a/package.json b/package.json index 246d94254..889a7fe0e 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@7a52c75", + "@appwrite.io/pink-svelte": "https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@34671e4", "@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 4359f7a5b..f87ebed7c 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@7a52c75 - version: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@7a52c75(svelte@5.25.3) + specifier: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@34671e4 + version: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@34671e4(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@7a52c75': - resolution: {tarball: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@7a52c75} + '@appwrite.io/pink-svelte@https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@34671e4': + resolution: {tarball: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@34671e4} 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@7a52c75(svelte@5.25.3)': + '@appwrite.io/pink-svelte@https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@34671e4(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/elements/forms/inputTextarea.svelte b/src/lib/elements/forms/inputTextarea.svelte index d6fc25d18..9550900f3 100644 --- a/src/lib/elements/forms/inputTextarea.svelte +++ b/src/lib/elements/forms/inputTextarea.svelte @@ -51,4 +51,5 @@ on:input bind:value> + 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 66b52bb9c..0efe9710f 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 @@ -33,7 +33,6 @@ spreadsheetLoading, rowActivitySheet, spreadsheetRenderKey, - columnsWidth, expandTabs } from './store'; import { addSubPanel, registerCommands, updateCommandGroupRanks } from '$lib/commandCenter'; @@ -244,14 +243,10 @@ $spreadsheetLoading = true; $randomDataModalState.show = false; - let attributes = $table.columns; - if (!attributes.length) { + let columns = $table.columns; + if (!columns.length) { try { - attributes = await generateColumns( - $project, - page.params.database, - page.params.table - ); + columns = await generateColumns($project, page.params.database, page.params.table); await invalidate(Dependencies.TABLE); } catch (e) { @@ -264,12 +259,12 @@ } } - /* let the attributes be processed! */ + /* let the columns be processed! */ await sleep(1250); let rowIds = []; try { - const { rows, ids } = generateFakeRecords(attributes, $randomDataModalState.value); + const { rows, ids } = generateFakeRecords(columns, $randomDataModalState.value); rowIds = ids; @@ -311,7 +306,6 @@ - + diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/+page.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/+page.svelte index 4d8671980..a7c310966 100644 --- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/+page.svelte +++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/+page.svelte @@ -138,7 +138,10 @@ icon secondary disabled={!(hasColumns && hasValidColumns)} - on:click={() => ($expandTabs = !$expandTabs)}> + on:click={() => { + $expandTabs = !$expandTabs; + preferences.setTableHeaderExpanded($table.$id, $expandTabs); + }}> {/if} diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/edit.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/edit.svelte index aedbaa2e9..7d6874215 100644 --- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/edit.svelte +++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/edit.svelte @@ -128,8 +128,8 @@ {#if selectedColumn?.type !== 'relationship'} {/if} @@ -153,8 +153,8 @@ {#if selectedColumn?.type !== 'relationship'} {/if} diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/createRecord.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/createRecord.svelte index 53cf2f894..c83a03c5e 100644 --- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/createRecord.svelte +++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/createRecord.svelte @@ -105,47 +105,43 @@ {#if $createRow} -
- - create() - }}> - -
- -
+ create() + }}> + +
+ +
- - - Choose which permission scopes to grant your application. It is best - practice to allow only the permissions you need to meet your project goals. - - {#if table.rowSecurity} - - Row security is enabled - Users will be able to access this row if they have been granted - either row or table permissions. - - - {:else} - - Row security is disabled - If you want to assign row permissions, navigate to Table settings and enable - row security. Otherwise, only table permissions will be used. - - {/if} - + + + Choose which permission scopes to grant your application. It is best practice to + allow only the permissions you need to meet your project goals. + + {#if table.rowSecurity} + + Row security is enabled + Users will be able to access this row if they have been granted + either row or table permissions. + + + {:else} + + Row security is disabled + If you want to assign row permissions, navigate to Table settings and enable + row security. Otherwise, only table permissions will be used. + + {/if} - -
+ + {/if} diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/editRowCell.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/editRowCell.svelte index 6238b4ea0..6b482f244 100644 --- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/editRowCell.svelte +++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/editRowCell.svelte @@ -1,23 +1,28 @@
- +
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 b1b4b1c2b..2178e7350 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 @@ -8,6 +8,7 @@ import { canWriteTables } from '$lib/stores/roles'; import { expandTabs, table } from './store'; import { Layout } from '@appwrite.io/pink-svelte'; + import { preferences } from '$lib/stores/preferences'; const databaseId = $derived(page.params.database); @@ -65,6 +66,13 @@ const isSpreadsheetPage = endings.some((end) => page.route.id?.endsWith(end)); return !isSpreadsheetPage; }); + + $effect(() => { + if (nonSheetPages) expandTabs.set(true); + else { + expandTabs.set(preferences.isTableHeaderExpanded(tableId)); + } + });
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/layout/sidesheet.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/layout/sidesheet.svelte index 243c965e3..a0eeba9ca 100644 --- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/layout/sidesheet.svelte +++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/layout/sidesheet.svelte @@ -6,14 +6,12 @@ let { show = $bindable(false), title, - spaced = false, closeOnBlur = false, submit, children = null }: { show: boolean; title: string; - spaced?: boolean; closeOnBlur?: boolean; submit?: | { @@ -26,7 +24,7 @@ } = $props(); -
+
@@ -79,7 +77,7 @@ position: absolute; @media (max-width: 768px) { - &.spaced :global(aside header) { + & :global(aside header) { margin-top: 6rem; } } diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/row-[row]/column.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/row-[row]/column.svelte index 2a1101aff..7fc122918 100644 --- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/row-[row]/column.svelte +++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/row-[row]/column.svelte @@ -10,6 +10,7 @@ export let id: string; export let label: string; + export let array: boolean | undefined = undefined; export let optionalText: string | undefined = undefined; export let value: string | number | boolean | null | string[]; export let editing = false; @@ -50,17 +51,21 @@ {label} {column} {limited} + {array} {optionalText} bind:value /> {:else} + {/if} {/if} diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/row-[row]/columnItem.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/row-[row]/columnItem.svelte index 36e409944..56fe03c3d 100644 --- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/row-[row]/columnItem.svelte +++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/row-[row]/columnItem.svelte @@ -6,11 +6,19 @@ import Column from './column.svelte'; import type { Columns } from '../store'; - export let column: Columns; - export let formValues: object = {}; - export let label: string; - export let editing = false; - export let fromSpreadsheet: boolean = false; + let { + column, + formValues = $bindable({}), + label, + editing = false, + fromSpreadsheet = false + }: { + column: Columns; + formValues: object; + label: string; + editing?: boolean; + fromSpreadsheet?: boolean; + } = $props(); function removeArrayItem(key: string, index: number) { formValues = { @@ -48,18 +56,41 @@ {#if column.array} {#if formValues[column.key]?.length === 0} - - - {label} - - {getColumnType(column)} - + {#if fromSpreadsheet} + + {:else} + + + {label} + + {getColumnType(column)} + + + - - + {/if} + {:else if fromSpreadsheet} + {:else} {#each [...(formValues[column.key]?.keys() ?? [])] as index} @@ -89,8 +120,8 @@ {label} {editing} {column} - limited={fromSpreadsheet} id={column.key} + limited={fromSpreadsheet} optionalText={getColumnType(column)} bind:value={formValues[column.key]} /> {/if} diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/row-[row]/columns/string.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/row-[row]/columns/string.svelte index ab87d3649..a22dbe256 100644 --- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/row-[row]/columns/string.svelte +++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/row-[row]/columns/string.svelte @@ -1,38 +1,152 @@ -{#if column.size >= 50} +{#if columnSize >= 50 || array} + placeholder={getPlaceholder()}> + + {#if array} + Advanced edit + {/if} + + {:else} {/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 494a27a24..5c86ad216 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 @@ -3,7 +3,7 @@ import { base } from '$app/paths'; import { page } from '$app/state'; import { Submit, trackError, trackEvent } from '$lib/actions/analytics'; - import { Alert, Confirm, Id, SortButton } from '$lib/components'; + import { Confirm, Id, SortButton } from '$lib/components'; import { Dependencies, SPREADSHEET_PAGE_LIMIT } from '$lib/constants'; import { Button as ConsoleButton, InputChoice, InputSelect } from '$lib/elements/forms'; import { addNotification } from '$lib/stores/notifications'; @@ -32,12 +32,12 @@ rowActivitySheet, paginatedRows, paginatedRowsLoading, - spreadsheetRenderKey, - expandTabs + spreadsheetRenderKey } from './store'; import RelationshipsModal from './relationshipsModal.svelte'; import type { Column, ColumnType } from '$lib/helpers/types'; import { + Alert, Tooltip, Spreadsheet, Table, @@ -53,6 +53,7 @@ import { toLocaleDateTime } from '$lib/helpers/date'; import DualTimeView from '$lib/components/dualTimeView.svelte'; import { + IconArrowSmRight, IconCalendar, IconDotsHorizontal, IconFingerPrint, @@ -62,6 +63,7 @@ IconMail, IconPlus, IconRelationship, + IconSwitchHorizontal, IconText, IconToggle, IconViewList @@ -98,7 +100,12 @@ const emptyCellsLimit = $isSmallViewport ? 12 : 18; const SYSTEM_KEYS = new Set([ '$tableId', - '$databaseId' + '$databaseId', + '$permissions', + '$createdAt', + '$updatedAt', + '$id', + '$sequence' ]); /* TODO: should be fixed at the sdk level! */ let selectedRows = []; @@ -138,7 +145,7 @@ const baseColumns = $table.columns.map((col) => ({ id: col.key, - title: col.key, + title: col.array ? `${col.key} []` : col.key, type: col.type as ColumnType, hide: !!selectedColumnsToHide?.includes(col.key), array: col?.array, @@ -514,9 +521,10 @@ Object.entries(row).filter(([key]) => !SYSTEM_KEYS.has(key)) ); + // TODO | BUG: related rows still have `system` columns atm! await sdk.forProject(page.params.region, page.params.project).grids.updateRow({ databaseId, - tableId, + tableId: $table.$id, rowId: row.$id, data: onlyData, permissions: row.$permissions @@ -644,10 +652,6 @@ $: totalPages = Math.ceil($rows.total / SPREADSHEET_PAGE_LIMIT) || 1; $: rowSelection = !$spreadsheetLoading && !$paginatedRowsLoading ? true : ('disabled' as const); - - expandTabs.subscribe((expanded) => { - preferences.setTableHeaderExpanded(tableId, expanded); - }); @@ -867,14 +871,17 @@ {/if} {/if} - + paginatedRows.update(index, row.detail)} - on:revert={(row) => - paginatedRows.update(index, row.detail)} /> + onChange={(row) => paginatedRows.update(index, row)} + onRevert={(row) => paginatedRows.update(index, row)} + openSideSheet={() => { + close(); /* closes the editor */ + onSelectSheetOption('update', null, 'row', row); + }} /> {/each} @@ -990,23 +997,24 @@ Relation Setting - + Description + {#each relatedColumns as attr} {#if attr.twoWay} - + {:else} - + {/if} {attr.key} @@ -1014,25 +1022,27 @@ {attr.onDelete} - + {Deletion[attr.onDelete]} {/each} -
- To change the selection edit the relationship settings. + + + To change the selection edit the relationship settings. +
    - Delete {isSingle ? 'document' : 'documents'} from + Delete {isSingle ? 'row' : 'rows'} from {$table.name}
-
+ {:else}

This action is irreversible.

{/if} @@ -1066,19 +1076,31 @@ } :global(.floating-editor) { + z-index: 3 !important; + & :global(:has(textarea)) { - left: 0 !important; - margin-inline-end: 1px; + left: 2px !important; + //margin-inline-end: 1px; } - /* TODO: not good! */ & :global(textarea) { padding-inline: 9px; margin-block: -2.75px; min-height: 85px !important; } - /* TODO: not good! */ + & :global(:has(.link-wrapper) .input) { + padding-bottom: 6px !important; + } + + & :global(:has(.link-wrapper) textarea) { + min-height: 65px !important; + } + + & :global(.link-wrapper) { + padding-inline: 9px; + } + & :global(input[type='text']) { padding-inline: 8px !important; } diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/store.ts b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/store.ts index f36d40a00..7b0600d0e 100644 --- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/store.ts +++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/store.ts @@ -139,7 +139,7 @@ export const randomDataModalState = writable({ export const spreadsheetLoading = writable(false); export enum Deletion { - 'setNull' = 'Set rpw ID as NULL in all related rows', + 'setNull' = 'Set row ID as NULL in all related rows', 'cascade' = 'All related rows will be deleted', 'restrict' = 'Row can not be deleted' } @@ -151,7 +151,7 @@ export const rowActivitySheet = writable({ row: null as Models.Row }); -export const expandTabs = writable(true); +export const expandTabs = writable(null); export const spreadsheetRenderKey = writable('initial'); export const paginatedRowsLoading = writable(false);