From 01548da3c9fdc780728812745f572de18088299a Mon Sep 17 00:00:00 2001 From: Adria Navarro Date: Fri, 27 Dec 2024 20:21:26 +0100 Subject: [PATCH 1/5] Initial reorder conversion --- .../src/components/grid/stores/index.ts | 3 +- .../grid/stores/{reorder.js => reorder.ts} | 46 +++++++++++++------ .../types/src/ui/stores/grid/datasource.ts | 1 + 3 files changed, 35 insertions(+), 15 deletions(-) rename packages/frontend-core/src/components/grid/stores/{reorder.js => reorder.ts} (88%) diff --git a/packages/frontend-core/src/components/grid/stores/index.ts b/packages/frontend-core/src/components/grid/stores/index.ts index ec11ed1da8..ba4ac5a830 100644 --- a/packages/frontend-core/src/components/grid/stores/index.ts +++ b/packages/frontend-core/src/components/grid/stores/index.ts @@ -84,7 +84,8 @@ export type Store = BaseStore & fixedRowHeight: Writable bounds: Readable height: Readable - } & Rows.Store + } & Rows.Store & + Reorder.Store export const attachStores = (context: Store): Store => { // Atomic store creation diff --git a/packages/frontend-core/src/components/grid/stores/reorder.js b/packages/frontend-core/src/components/grid/stores/reorder.ts similarity index 88% rename from packages/frontend-core/src/components/grid/stores/reorder.js rename to packages/frontend-core/src/components/grid/stores/reorder.ts index 8153ee7084..1481b96f29 100644 --- a/packages/frontend-core/src/components/grid/stores/reorder.js +++ b/packages/frontend-core/src/components/grid/stores/reorder.ts @@ -1,7 +1,18 @@ -import { get, writable, derived } from "svelte/store" +import { get, writable, derived, Writable, Readable } from "svelte/store" import { parseEventLocation } from "../lib/utils" +import { Store as StoreContext } from "." -const reorderInitialState = { +interface ReorderInitialStoreData { + sourceColumn: any + targetColumn: any + insertAfter?: boolean + breakpoints: any[] + gridLeft: number + width: number + increment?: number +} + +const reorderInitialState: ReorderInitialStoreData = { sourceColumn: null, targetColumn: null, insertAfter: false, @@ -11,7 +22,14 @@ const reorderInitialState = { increment: 0, } -export const createStores = () => { +interface ReorderInitialStore { + reorder: Writable + isReordering: Readable +} + +export type Store = ReorderInitialStore + +export const createStores = (): ReorderInitialStore => { const reorder = writable(reorderInitialState) const isReordering = derived( reorder, @@ -24,7 +42,7 @@ export const createStores = () => { } } -export const createActions = context => { +export const createActions = (context: StoreContext) => { const { reorder, columns, @@ -40,11 +58,11 @@ export const createActions = context => { maxScrollLeft, } = context let latestX = 0 - let autoScrollInterval - let isAutoScrolling + let autoScrollInterval: any + let isAutoScrolling: boolean // Callback when dragging on a colum header and starting reordering - const startReordering = (column, e) => { + const startReordering = (column: any, e: any) => { const $scrollableColumns = get(scrollableColumns) const $bounds = get(bounds) const $stickyWidth = get(stickyWidth) @@ -87,9 +105,9 @@ export const createActions = context => { } // Callback when moving the mouse when reordering columns - const onReorderMouseMove = e => { + const onReorderMouseMove = (e: MouseEvent | TouchEvent) => { // Immediately handle the current position - const { x } = parseEventLocation(e) + const { x } = parseEventLocation(e as any) latestX = x considerReorderPosition() @@ -122,7 +140,7 @@ export const createActions = context => { const $scrollLeft = get(scrollLeft) // Compute the closest breakpoint to the current position - let breakpoint + let breakpoint: any let minDistance = Number.MAX_SAFE_INTEGER const mouseX = latestX - $reorder.gridLeft + $scrollLeft $reorder.breakpoints.forEach(point => { @@ -157,7 +175,7 @@ export const createActions = context => { const { increment } = get(reorder) scroll.update(state => ({ ...state, - left: Math.max(0, Math.min($maxLeft, state.left + increment)), + left: Math.max(0, Math.min($maxLeft, state.left + increment!)), })) considerReorderPosition() }, 10) @@ -195,7 +213,7 @@ export const createActions = context => { sourceColumn, targetColumn, insertAfter = false, - }) => { + }: any) => { // Find the indices in the overall columns array const $columns = get(columns) let sourceIdx = $columns.findIndex(col => col.name === sourceColumn) @@ -232,7 +250,7 @@ export const createActions = context => { } // Moves a column one place left (as appears visually) - const moveColumnLeft = async column => { + const moveColumnLeft = async (column: string) => { const $visibleColumns = get(visibleColumns) const $columnLookupMap = get(columnLookupMap) const sourceIdx = $columnLookupMap[column].__idx @@ -243,7 +261,7 @@ export const createActions = context => { } // Moves a column one place right (as appears visually) - const moveColumnRight = async column => { + const moveColumnRight = async (column: string) => { const $visibleColumns = get(visibleColumns) const $columnLookupMap = get(columnLookupMap) const sourceIdx = $columnLookupMap[column].__idx diff --git a/packages/types/src/ui/stores/grid/datasource.ts b/packages/types/src/ui/stores/grid/datasource.ts index 1d9b6740a4..9533bbb8f0 100644 --- a/packages/types/src/ui/stores/grid/datasource.ts +++ b/packages/types/src/ui/stores/grid/datasource.ts @@ -8,4 +8,5 @@ export interface UIFieldMutation { visible?: boolean readonly?: boolean width?: number + order?: number } From 6034d8ec4269a108c34d46f8775383a31aac3d9e Mon Sep 17 00:00:00 2001 From: Adria Navarro Date: Fri, 27 Dec 2024 20:26:42 +0100 Subject: [PATCH 2/5] Fix types --- packages/frontend-core/src/components/grid/stores/columns.ts | 1 + packages/types/src/ui/stores/grid/columns.ts | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/frontend-core/src/components/grid/stores/columns.ts b/packages/frontend-core/src/components/grid/stores/columns.ts index d67b0dd8e8..8073988323 100644 --- a/packages/frontend-core/src/components/grid/stores/columns.ts +++ b/packages/frontend-core/src/components/grid/stores/columns.ts @@ -190,6 +190,7 @@ export const initialise = (context: StoreContext) => { related: fieldSchema.related, calculationType: fieldSchema.calculationType, __left: undefined as any, // TODO + __idx: undefined as any, // TODO } // Override a few properties for primary display if (field === primaryDisplay) { diff --git a/packages/types/src/ui/stores/grid/columns.ts b/packages/types/src/ui/stores/grid/columns.ts index 56442a871f..7f20145246 100644 --- a/packages/types/src/ui/stores/grid/columns.ts +++ b/packages/types/src/ui/stores/grid/columns.ts @@ -16,7 +16,7 @@ export type UIColumn = FieldSchema & { autocolumn: boolean } calculationType: CalculationType - __idx?: number + __idx: number __left: number width: number } From 81897f8ed55092775cfce403244bf281adc1f468 Mon Sep 17 00:00:00 2001 From: Adria Navarro Date: Fri, 27 Dec 2024 20:28:56 +0100 Subject: [PATCH 3/5] Type anys --- .../src/components/grid/stores/reorder.ts | 18 ++++++++++++------ 1 file changed, 12 insertions(+), 6 deletions(-) diff --git a/packages/frontend-core/src/components/grid/stores/reorder.ts b/packages/frontend-core/src/components/grid/stores/reorder.ts index 1481b96f29..ba606626e3 100644 --- a/packages/frontend-core/src/components/grid/stores/reorder.ts +++ b/packages/frontend-core/src/components/grid/stores/reorder.ts @@ -2,11 +2,17 @@ import { get, writable, derived, Writable, Readable } from "svelte/store" import { parseEventLocation } from "../lib/utils" import { Store as StoreContext } from "." +interface Breakpoint { + x: number + column: string + insertAfter: boolean +} + interface ReorderInitialStoreData { - sourceColumn: any - targetColumn: any + sourceColumn: string | null + targetColumn: string | null insertAfter?: boolean - breakpoints: any[] + breakpoints: Breakpoint[] gridLeft: number width: number increment?: number @@ -140,7 +146,7 @@ export const createActions = (context: StoreContext) => { const $scrollLeft = get(scrollLeft) // Compute the closest breakpoint to the current position - let breakpoint: any + let breakpoint: Breakpoint | undefined let minDistance = Number.MAX_SAFE_INTEGER const mouseX = latestX - $reorder.gridLeft + $scrollLeft $reorder.breakpoints.forEach(point => { @@ -157,8 +163,8 @@ export const createActions = (context: StoreContext) => { ) { reorder.update(state => ({ ...state, - targetColumn: breakpoint.column, - insertAfter: breakpoint.insertAfter, + targetColumn: breakpoint!.column, + insertAfter: breakpoint!.insertAfter, })) } } From 989b4197292de0d0be90597cc532c735799603c0 Mon Sep 17 00:00:00 2001 From: Adria Navarro Date: Fri, 27 Dec 2024 20:31:49 +0100 Subject: [PATCH 4/5] Type anys --- packages/frontend-core/src/components/grid/lib/utils.ts | 4 +++- .../frontend-core/src/components/grid/stores/reorder.ts | 6 +++--- 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/packages/frontend-core/src/components/grid/lib/utils.ts b/packages/frontend-core/src/components/grid/lib/utils.ts index 14aee663b7..3dd2d1ddd5 100644 --- a/packages/frontend-core/src/components/grid/lib/utils.ts +++ b/packages/frontend-core/src/components/grid/lib/utils.ts @@ -14,7 +14,9 @@ export const getCellID = (rowId: string, fieldName: string) => { return `${rowId}${CellIDSeparator}${fieldName}` } -export const parseEventLocation = (e: MouseEvent & TouchEvent) => { +export const parseEventLocation = (event: MouseEvent | TouchEvent) => { + const e = event as MouseEvent & TouchEvent + return { x: e.clientX ?? e.touches?.[0]?.clientX, y: e.clientY ?? e.touches?.[0]?.clientY, diff --git a/packages/frontend-core/src/components/grid/stores/reorder.ts b/packages/frontend-core/src/components/grid/stores/reorder.ts index ba606626e3..8f602ab836 100644 --- a/packages/frontend-core/src/components/grid/stores/reorder.ts +++ b/packages/frontend-core/src/components/grid/stores/reorder.ts @@ -64,11 +64,11 @@ export const createActions = (context: StoreContext) => { maxScrollLeft, } = context let latestX = 0 - let autoScrollInterval: any + let autoScrollInterval: NodeJS.Timeout let isAutoScrolling: boolean // Callback when dragging on a colum header and starting reordering - const startReordering = (column: any, e: any) => { + const startReordering = (column: string, e: MouseEvent | TouchEvent) => { const $scrollableColumns = get(scrollableColumns) const $bounds = get(bounds) const $stickyWidth = get(stickyWidth) @@ -113,7 +113,7 @@ export const createActions = (context: StoreContext) => { // Callback when moving the mouse when reordering columns const onReorderMouseMove = (e: MouseEvent | TouchEvent) => { // Immediately handle the current position - const { x } = parseEventLocation(e as any) + const { x } = parseEventLocation(e) latestX = x considerReorderPosition() From 739499d72635cf1b48784914ddb5f71baf8441ed Mon Sep 17 00:00:00 2001 From: Adria Navarro Date: Fri, 27 Dec 2024 20:33:07 +0100 Subject: [PATCH 5/5] Type other anys --- .../src/components/grid/stores/reorder.ts | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/packages/frontend-core/src/components/grid/stores/reorder.ts b/packages/frontend-core/src/components/grid/stores/reorder.ts index 8f602ab836..b0bc482afb 100644 --- a/packages/frontend-core/src/components/grid/stores/reorder.ts +++ b/packages/frontend-core/src/components/grid/stores/reorder.ts @@ -209,7 +209,11 @@ export const createActions = (context: StoreContext) => { const { sourceColumn, targetColumn, insertAfter } = get(reorder) reorder.set(reorderInitialState) if (sourceColumn !== targetColumn) { - await moveColumn({ sourceColumn, targetColumn, insertAfter }) + await moveColumn({ + sourceColumn: sourceColumn!, + targetColumn: targetColumn!, + insertAfter, + }) } } @@ -219,7 +223,11 @@ export const createActions = (context: StoreContext) => { sourceColumn, targetColumn, insertAfter = false, - }: any) => { + }: { + sourceColumn: string + targetColumn: string + insertAfter?: boolean + }) => { // Find the indices in the overall columns array const $columns = get(columns) let sourceIdx = $columns.findIndex(col => col.name === sourceColumn)