fix: erratic bugs.

This commit is contained in:
Darshan
2025-07-26 10:59:41 +05:30
parent eb436d2359
commit b0e0074324
4 changed files with 106 additions and 50 deletions
@@ -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<Column[]>([]);
$: 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}
<EmptySheet
mode="records"
customColumns={$columns}
customColumns={createColumnsFromAttributes($collection.attributes, selected)}
showActions={$canWriteDocuments}
actions={{
primary: {
@@ -6,8 +6,8 @@
import { Layout } from '@appwrite.io/pink-svelte';
import { InputSelect, InputText } from '$lib/elements/forms';
import { addNotification } from '$lib/stores/notifications';
import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
import { option, attributeOptions, type Option } from './attributes/store';
import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
import { attributeOptions, option, type Option } from './attributes/store';
import type { Column } from '$lib/helpers/types';
import { preferences } from '$lib/stores/preferences';
@@ -44,24 +44,63 @@
);
function insertColumnInOrder() {
if (!direction || !direction.neighbour || !key) return;
if (!key) return;
const currentOrder = columnsOrder?.length
? columnsOrder
: columns?.map((col) => 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({
@@ -15,24 +15,30 @@
type Mode = 'records' | 'columns' | 'indexes';
type ColumnsMap = Record<Mode, Column[]>;
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<Mode, Column[]> = $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]);
</script>
<div class="spreadsheet-container-outer">
@@ -192,7 +199,7 @@
size="s"
variant="secondary"
disabled={actions?.primary?.disabled}
on:click={actions?.primary?.onClick}>
onclick={actions?.primary?.onClick}>
<Icon icon={IconPlus} size="s" />
{actions?.primary?.text ?? `Create ${mode}`}
</Button.Button>
@@ -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`}
</Button.Button>
<span slot="tooltip">Yet to be added</span>
@@ -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 @@
<Button.Button
icon
variant="extra-compact"
on:click={() => ($showCreateAttributeSheet.show = true)}>
on:click={() => {
$showCreateAttributeSheet.show = true;
$showCreateAttributeSheet.columns = $columns;
$showCreateAttributeSheet.columnsOrder = $columnsOrder;
}}>
<Icon icon={IconPlus} color="--fgcolor-neutral-primary" />
</Button.Button>
</Spreadsheet.Header.Cell>