Skip to content

Commit db0ce49

Browse files
abnegateabnegate
authored
Merge pull request #2926 from appwrite/fix-SER-1172-table-filters
2 parents 87477a1 + 28ac966 commit db0ce49

File tree

3 files changed

+69
-52
lines changed

3 files changed

+69
-52
lines changed

‎src/app.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,8 +26,8 @@
2626
sizes="120x120"
2727
href="%sveltekit.assets%/logos/apple-touch-icon-120x120.png" />
2828

29-
<!-- apple web app meta tags -->
30-
<meta name="apple-mobile-web-app-capable" content="yes" />
29+
<!-- web app / standalone display meta tags -->
30+
<meta name="mobile-web-app-capable" content="yes" />
3131
<meta name="apple-mobile-web-app-title" content="Appwrite Console" />
3232
<meta name="apple-mobile-web-app-status-bar-style" content="default" />
3333

‎src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/rows/columns/columnItem.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@
2323
onUpdateFormValues?: (formValues: object) => void;
2424
} = $props();
2525
26-
let formStore = writable(formValues);
26+
let formStore = writable(formValues ?? {});
2727
2828
function removeArrayItem(key: string, index: number) {
2929
const currentArray = Array.isArray($formStore[key]) ? $formStore[key] : [];

‎src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/spreadsheet.svelte‎

Lines changed: 66 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -103,6 +103,8 @@
103103
};
104104
105105
$: table = data.table;
106+
/** Keep sort in sync after client navigations (e.g. filters); onMount alone misses SPA loads. */
107+
$: sortState.set(data.currentSort as SortState);
106108
$: rows = writable(data.rows);
107109
$: if ($rows) {
108110
paginatedRows.clear();
@@ -113,7 +115,9 @@
113115
}
114116
115117
// create index map for O(1) row lookups, reactive!
116-
$: rowIndexMap = new Map($paginatedRows.items.map((row, index) => [row.$id, index]));
118+
$: rowIndexMap = new Map(
119+
$paginatedRows.items.flatMap((r, index) => (r ? [[r.$id, index]] : []))
120+
);
117121
118122
const tableId = page.params.table;
119123
const databaseId = page.params.database;
@@ -912,7 +916,8 @@
912916

913917
<svelte:fragment slot="rows" let:root let:item let:index>
914918
{@const row = $paginatedRows.getItemAtVirtualIndex(index)}
915-
{#if row === null}
919+
<!-- !row: virtualizer can briefly yield null/undefined while row data reloads (e.g. after filters). -->
920+
{#if !row}
916921
<Spreadsheet.Row.Base
917922
{root}
918923
{index}
@@ -936,7 +941,7 @@
936941
select={rowSelection}
937942
hoverEffect
938943
showSelectOnHover
939-
valueWithoutHover={row.$sequence}>
944+
valueWithoutHover={row?.$sequence}>
940945
{#each $tableColumns as { id: columnId, isEditable, hide } (columnId)}
941946
{@const rowColumn = $columns.find((col) => col.key === columnId)}
942947
{#if columnId === '$id' && !hide}
@@ -948,8 +953,8 @@
948953
alignItems="center"
949954
alignContent="center"
950955
justifyContent="space-between">
951-
<Id value={row.$id} tooltipPortal tooltipDelay={200}>
952-
{row.$id}
956+
<Id value={row?.$id} tooltipPortal tooltipDelay={200}>
957+
{row?.$id}
953958
</Id>
954959

955960
<Popover let:show let:hide portal padding="none">
@@ -1009,7 +1014,7 @@
10091014
{#if columnId === '$createdAt' || columnId === '$updatedAt'}
10101015
<DualTimeView
10111016
showDatetime
1012-
time={row[columnId]}
1017+
time={row?.[columnId]}
10131018
canShowPopover={canShowDatetimePopover} />
10141019
{:else if columnId === 'actions'}
10151020
<SheetOptions
@@ -1033,12 +1038,12 @@
10331038
</Button.Button>
10341039
{/snippet}
10351040
</SheetOptions>
1036-
{:else if isRelationship(rowColumn)}
1037-
{@const args = getDisplayNamesForTable(row[columnId])}
1041+
{:else if rowColumn && isRelationship(rowColumn)}
1042+
{@const args = getDisplayNamesForTable(row?.[columnId])}
10381043
{#if !isRelationshipToMany(rowColumn)}
1039-
{#if row[columnId]}
1044+
{#if row?.[columnId]}
10401045
{@const displayValue = args
1041-
.map((arg) => row[columnId]?.[arg])
1046+
.map((arg) => row?.[columnId]?.[arg])
10421047
.filter(Boolean)
10431048
.join(' | ')}
10441049

@@ -1047,9 +1052,9 @@
10471052
variant="muted"
10481053
on:click={() => {
10491054
$databaseRelatedRowSheetOptions.tableId =
1050-
row[columnId]?.['$tableId'];
1055+
row?.[columnId]?.['$tableId'];
10511056
$databaseRelatedRowSheetOptions.rows =
1052-
row[columnId]?.['$id'];
1057+
row?.[columnId]?.['$id'];
10531058
$databaseRelatedRowSheetOptions.show = true;
10541059
}}>
10551060
{displayValue}
@@ -1067,19 +1072,23 @@
10671072
size="xs" />
10681073
{/if}
10691074
{:else}
1070-
{@const itemsNum = row[columnId]?.length}
1075+
{@const itemsNum = row?.[columnId]?.length}
10711076
Items <Badge
10721077
content={itemsNum}
10731078
variant="secondary"
10741079
size="s" />
10751080
{/if}
1076-
{:else if isSpatialType(rowColumn) && row[columnId] !== null}
1081+
{:else if rowColumn && isSpatialType(rowColumn) && row?.[columnId] !== null}
1082+
<Typography.Text truncate>
1083+
{JSON.stringify(row?.[columnId])}
1084+
</Typography.Text>
1085+
{:else if !rowColumn}
10771086
<Typography.Text truncate>
1078-
{JSON.stringify(row[columnId])}
1087+
{formatColumn(row?.[columnId])}
10791088
</Typography.Text>
10801089
{:else}
1081-
{@const value = row[columnId]}
1082-
{@const formatted = formatColumn(row[columnId])}
1090+
{@const value = row?.[columnId]}
1091+
{@const formatted = formatColumn(row?.[columnId])}
10831092
{@const isEmptyArray = formatted === 'Empty'}
10841093
{@const isDatetimeAttribute = rowColumn.type === 'datetime'}
10851094
{@const isEncryptedAttribute =
@@ -1126,38 +1135,46 @@
11261135
{/if}
11271136

11281137
<svelte:fragment slot="cell-editor" let:close>
1129-
{@const isRelatedToMany = isRelationshipToMany(rowColumn)}
1130-
{@const hasItems = isRelatedToMany
1131-
? row[columnId]?.length
1132-
: false}
1133-
1134-
<EditRowCell
1135-
{row}
1136-
column={rowColumn}
1137-
onRowStructureUpdate={async (row) => {
1138-
const success = await updateRowContents(row);
1139-
if (success) {
1140-
// database update succeeded!
1141-
paginatedRows.update(index, row);
1142-
}
1143-
return success;
1144-
}}
1145-
noInlineEdit={isRelatedToMany && hasItems}
1146-
onChange={(row) => paginatedRows.update(index, row)}
1147-
onRevert={(row) => paginatedRows.update(index, row)}
1148-
openSideSheet={() => {
1149-
close(); /* closes the editor */
1150-
1151-
if (isRelationshipToMany(rowColumn)) {
1152-
openSideSheetForRelationsToMany(
1153-
row[columnId],
1154-
rowColumn
1155-
);
1156-
} else {
1157-
$databaseRowSheetOptions.autoFocus = true;
1158-
onSelectSheetOption('update', null, 'row', row);
1159-
}
1160-
}} />
1138+
{#if rowColumn}
1139+
{@const isRelatedToMany =
1140+
isRelationshipToMany(rowColumn)}
1141+
{@const hasItems = isRelatedToMany
1142+
? row?.[columnId]?.length
1143+
: false}
1144+
1145+
<EditRowCell
1146+
{row}
1147+
column={rowColumn}
1148+
onRowStructureUpdate={async (row) => {
1149+
const success = await updateRowContents(row);
1150+
if (success) {
1151+
// database update succeeded!
1152+
paginatedRows.update(index, row);
1153+
}
1154+
return success;
1155+
}}
1156+
noInlineEdit={isRelatedToMany && hasItems}
1157+
onChange={(row) => paginatedRows.update(index, row)}
1158+
onRevert={(row) => paginatedRows.update(index, row)}
1159+
openSideSheet={() => {
1160+
close(); /* closes the editor */
1161+
1162+
if (isRelationshipToMany(rowColumn)) {
1163+
openSideSheetForRelationsToMany(
1164+
row?.[columnId],
1165+
rowColumn
1166+
);
1167+
} else {
1168+
$databaseRowSheetOptions.autoFocus = true;
1169+
onSelectSheetOption(
1170+
'update',
1171+
null,
1172+
'row',
1173+
row
1174+
);
1175+
}
1176+
}} />
1177+
{/if}
11611178
</svelte:fragment>
11621179
</Spreadsheet.Cell>
11631180
{/if}

0 commit comments

Comments
 (0)