mirror of
https://github.com/appwrite/console.git
synced 2026-06-06 19:27:48 +00:00
fix: erratic bugs.
This commit is contained in:
+17
-9
@@ -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: {
|
||||
|
||||
+50
-12
@@ -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({
|
||||
|
||||
+33
-26
@@ -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>
|
||||
|
||||
+6
-3
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user