feat(core): add field order & setup web column dnd

apps/web/components/table-ui/table.tsx

@@ -1,3 +1,4 @@
+import { DndContext } from '@dnd-kit/core'
 import { Table } from '@egodb/ui'
 import { createColumnHelper, getCoreRowModel, useReactTable } from '@tanstack/react-table'
 import { useMemo } from 'react'
@@ -13,6 +14,7 @@ const fieldHelper = createColumnHelper<TData>()
 export const EGOTable: React.FC<IProps> = ({ table, records }) => {
   const view = table.getOrCreateDefaultView()
   const columnVisibility = view.getVisibility()
+  const columnOrder = table.getFieldsOrder().order
 
   const columns = table.schema.fields
     .map((c) =>
@@ -36,31 +38,34 @@ export const EGOTable: React.FC<IProps> = ({ table, records }) => {
     columns,
     state: {
       columnVisibility,
+      columnOrder,
     },
     columnResizeMode: 'onChange',
     getCoreRowModel: getCoreRowModel(),
   })
 
   return (
-    <Table
-      highlightOnHover
-      withBorder
-      withColumnBorders
-      sx={{
-        backgroundColor: 'white',
-        width: rt.getCenterTotalSize(),
-      }}
-    >
-      <thead>
-        {rt.getHeaderGroups().map((headerGroup) => (
-          <Thead headerGroup={headerGroup} key={headerGroup.id} tableId={table.id.value} />
-        ))}
-      </thead>
-      <tbody>
-        {rt.getRowModel().rows.map((row) => (
-          <Tr key={row.id} row={row} />
-        ))}
-      </tbody>
-    </Table>
+    <DndContext>
+      <Table
+        highlightOnHover
+        withBorder
+        withColumnBorders
+        sx={{
+          backgroundColor: 'white',
+          width: rt.getCenterTotalSize(),
+        }}
+      >
+        <thead>
+          {rt.getHeaderGroups().map((headerGroup) => (
+            <Thead headerGroup={headerGroup} key={headerGroup.id} tableId={table.id.value} />
+          ))}
+        </thead>
+        <tbody>
+          {rt.getRowModel().rows.map((row) => (
+            <Tr key={row.id} row={row} />
+          ))}
+        </tbody>
+      </Table>
+    </DndContext>
   )
 }

apps/web/components/table-ui/th.tsx

@@ -1,8 +1,9 @@
-import { Text } from '@egodb/ui'
+import { Group, Text, useEgoUITheme } from '@egodb/ui'
 import { flexRender } from '@tanstack/react-table'
 import styled from '@emotion/styled'
 import type { THeader } from './interface'
 import { trpc } from '../../trpc'
+import { useDraggable, useDroppable } from '@dnd-kit/core'
 
 const ResizerLine = styled.div`
   display: block;
@@ -33,6 +34,7 @@ const Resizer = styled.div`
 
 export const Th: React.FC<{ header: THeader; tableId: string }> = ({ header, tableId }) => {
   const setFieldWidth = trpc.table.setFieldWidth.useMutation()
+  const theme = useEgoUITheme()
 
   const onSetFieldWidth = (fieldName: string, width: number) => {
     setFieldWidth.mutate({
@@ -42,11 +44,36 @@ export const Th: React.FC<{ header: THeader; tableId: string }> = ({ header, tab
     })
   }
 
+  const { isOver, setNodeRef: setDroppableRef } = useDroppable({ id: header.id })
+  const {
+    attributes,
+    listeners,
+    setNodeRef: setDraggableRef,
+    transform,
+  } = useDraggable({
+    id: header.id,
+  })
+  const style = transform
+    ? {
+        transform: `translate3d(${transform.x}px, ${transform.y}px, 0)`,
+      }
+    : undefined
   return (
-    <th key={header.id} style={{ position: 'relative', width: header.getSize() }} colSpan={header.colSpan}>
-      <Text fz="sm" color="gray.7" fw={500}>
-        {header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
-      </Text>
+    <th
+      ref={setDroppableRef}
+      key={header.id}
+      style={{
+        position: 'relative',
+        width: header.getSize(),
+        color: isOver ? theme.colors.gray[2] : theme.colors.gray[7],
+      }}
+      colSpan={header.colSpan}
+    >
+      <Group position="apart" ref={setDraggableRef} style={style} {...listeners} {...attributes}>
+        <Text fz="sm" fw={500}>
+          {header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
+        </Text>
+      </Group>
       <Resizer
         onMouseDown={header.getResizeHandler()}
         onTouchStart={header.getResizeHandler()}

apps/web/components/table-ui/thead.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import type { THeaderGroup } from './interface'
 import { Th } from './th'
 

packages/core/specifications/index.ts

@@ -5,4 +5,5 @@ export * from './table-id.specifaction'
 export * from './table-name.specification'
 export * from './table-schema.specification'
 export * from './table-view-field-option.specification'
+export * from './table-view-fields-order.specification'
 export * from './table-views.specification'

packages/core/specifications/interface.ts

@@ -7,6 +7,7 @@ import type { WithTableId } from './table-id.specifaction'
 import type { WithTableName } from './table-name.specification'
 import type { WithTableSchema } from './table-schema.specification'
 import type { WithFieldVisibility, WithFieldWidth } from './table-view-field-option.specification'
+import type { WithViewFieldsOrder } from './table-view-fields-order.specification'
 import type { WithTableViews } from './table-views.specification'
 
 export interface ITableSpecVisitor extends ISpecVisitor {
@@ -18,6 +19,7 @@ export interface ITableSpecVisitor extends ISpecVisitor {
   filterEqual(s: WithFilter): void
   newField(s: WithNewField): void
 
+  fieldsOrder(s: WithViewFieldsOrder): void
   fieldWidthEqual(s: WithFieldWidth): void
   fieldVisibility(s: WithFieldVisibility): void
 }

packages/core/specifications/table-view-fields-order.specification.ts

@@ -0,0 +1,26 @@
+import { CompositeSpecification } from '@egodb/domain'
+import type { Result } from 'oxide.ts'
+import { Ok } from 'oxide.ts'
+import type { ITableSpecVisitor } from '.'
+import type { Table } from '../table'
+import type { ViewFieldsOrder } from '../view'
+
+export class WithViewFieldsOrder extends CompositeSpecification<Table, ITableSpecVisitor> {
+  constructor(public readonly viewName: string, public readonly viewFieldsOrder: ViewFieldsOrder) {
+    super()
+  }
+
+  isSatisfiedBy(t: Table): boolean {
+    return this.viewFieldsOrder.equals(t.getOrCreateDefaultView(this.viewName).fieldsOrder)
+  }
+
+  mutate(t: Table): Result<Table, string> {
+    t.getOrCreateDefaultView(this.viewName).fieldsOrder = this.viewFieldsOrder
+    return Ok(t)
+  }
+
+  accept(v: ITableSpecVisitor): Result<void, string> {
+    v.fieldsOrder(this)
+    return Ok(undefined)
+  }
+}

packages/core/table.ts

@@ -22,7 +22,7 @@ import type { IEditTableSchema } from './table.schema'
 import type { TableId } from './value-objects'
 import { TableSchema } from './value-objects'
 import type { TableName } from './value-objects/table-name.vo'
-import type { IQueryView, ISetFieldVisibilitySchema, ISetFieldWidthSchema } from './view'
+import type { IQueryView, ISetFieldVisibilitySchema, ISetFieldWidthSchema, ViewFieldsOrder } from './view'
 import { defaultViewDiaplyType, View } from './view'
 import { Views } from './view/views'
 
@@ -97,6 +97,10 @@ export class Table {
     return and(...specs)
   }
 
+  public getFieldsOrder(viewName?: string): ViewFieldsOrder {
+    return this.getOrCreateDefaultView(viewName).fieldsOrder ?? this.schema.defaultFieldsOrder
+  }
+
   public createRecord(input: ICreateRecordInput): Record {
     const inputs: ICreateFieldsSchema_internal = pipe(
       input.value,

packages/core/value-objects/table-schema.vo.ts

@@ -6,6 +6,7 @@ import { createFieldSchema } from '../field'
 import { FieldFactory } from '../field/field.factory'
 import type { TableCompositeSpecificaiton } from '../specifications/interface'
 import { WithNewField } from '../specifications/table-field.specification'
+import { ViewFieldsOrder } from '../view/view-fields-order.vo'
 
 function hasDuplicates(elements: ICreateFieldSchema[]): boolean {
   const names = elements.map((e) => e.name)
@@ -46,6 +47,11 @@ export class TableSchema extends ValueObject<Field[]> {
     this.props.push(field)
   }
 
+  public get defaultFieldsOrder(): ViewFieldsOrder {
+    const order = this.props.map((v) => v.name.value)
+    return ViewFieldsOrder.fromArray(order)
+  }
+
   public createField(input: ICreateFieldSchema): TableCompositeSpecificaiton {
     // FIXME: check name
     const field = FieldFactory.create(input)

packages/core/view/index.ts

@@ -1,5 +1,6 @@
 export * from './view'
 export * from './view-field-options'
+export * from './view-fields-order.vo'
 export * from './view-name.vo'
 export * from './view.schema'
 export * from './view.type'

packages/core/view/view-fields-order.vo.test.ts

@@ -0,0 +1,10 @@
+import { ViewFieldsOrder } from '.'
+
+describe('ViewFieldsOrder', () => {
+  test('#move()', () => {
+    const origin = new ViewFieldsOrder(['1', '2', '3'])
+    const moved = origin.swap('1', '3')
+    expect(moved.order).toEqual(['3', '2', '1'])
+    expect(moved === origin).toBe(false)
+  })
+})

packages/core/view/view-fields-order.vo.ts

@@ -0,0 +1,20 @@
+import { ValueObject } from '@egodb/domain'
+
+export class ViewFieldsOrder extends ValueObject<string[]> {
+  public get order() {
+    return this.props
+  }
+
+  static fromArray(ids: string[]): ViewFieldsOrder {
+    return new this(ids)
+  }
+
+  public swap(from: string, to: string): ViewFieldsOrder {
+    const copied = [...this.order]
+    const fromIndex = copied.findIndex((v) => v === from)
+    const toIndex = copied.findIndex((v) => v === to)
+
+    ;[copied[toIndex], copied[fromIndex]] = [copied[fromIndex], copied[toIndex]]
+    return ViewFieldsOrder.fromArray(copied)
+  }
+}

packages/core/view/view.schema.ts

@@ -1,6 +1,6 @@
 import { z } from 'zod'
 import { fieldNameSchema } from '../field'
-import { rootFilter } from '../filter'
+import { rootFilter } from '../filter/filter'
 import { fieldHiddenSchema, fieldWidthSchema, viewFieldOption } from './view-field-options'
 import { viewNameSchema } from './view-name.vo'
 

packages/core/view/view.ts

@@ -4,10 +4,11 @@ import type { Option } from 'oxide.ts'
 import { None } from 'oxide.ts'
 import type { IFilterOrGroupList, IRootFilter } from '../filter'
 import { RootFilter } from '../filter'
-import { WithFieldVisibility, WithFieldWidth } from '../specifications'
 import type { TableCompositeSpecificaiton } from '../specifications/interface'
+import { WithFieldVisibility, WithFieldWidth } from '../specifications/table-view-field-option.specification'
 import type { IViewFieldOption } from './view-field-options'
 import { ViewFieldOptions } from './view-field-options'
+import type { ViewFieldsOrder } from './view-fields-order.vo'
 import { ViewName } from './view-name.vo'
 import { createViewInput_internal } from './view.schema'
 import type { ICreateViewInput_internal, IView, IViewDisplayType } from './view.type'
@@ -36,6 +37,14 @@ export class View extends ValueObject<IView> {
     return this.props.fieldOptions
   }
 
+  public get fieldsOrder() {
+    return this.props.fieldsOrder
+  }
+
+  public set fieldsOrder(v: ViewFieldsOrder | undefined) {
+    this.props.fieldsOrder = v
+  }
+
   public getFieldOption(fieldName: string): IViewFieldOption {
     return this.fieldOptions.getOption(fieldName)
   }

packages/core/view/view.type.ts

@@ -2,6 +2,7 @@ import type { z } from 'zod'
 import type { IRootFilter } from '../filter'
 import type { RootFilter } from '../filter/root-filter'
 import type { IViewFieldOption, ViewFieldOptions } from './view-field-options'
+import type { ViewFieldsOrder } from './view-fields-order.vo'
 import type { ViewName } from './view-name.vo'
 import type { createViewInput_internal, viewDisplayType } from './view.schema'
 
@@ -10,6 +11,7 @@ export interface IView {
   displayType: IViewDisplayType
   filter?: RootFilter
   fieldOptions: ViewFieldOptions
+  fieldsOrder?: ViewFieldsOrder
 }
 
 export interface IQueryView {

packages/eslint-config/index.js

@@ -1,18 +1,31 @@
 module.exports = {
-  "env": {
-    "browser": true,
-    "amd": true,
-    "node": true,
+  env: {
+    browser: true,
+    amd: true,
+    node: true,
   },
-  extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', "prettier"],
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'prettier',
+    'plugin:import/recommended',
+    'plugin:import/typescript',
+  ],
   ignorePatterns: ['node_modules', 'dist'],
   parser: '@typescript-eslint/parser',
   plugins: ['@typescript-eslint', 'eslint-plugin-tsdoc'],
+  settings: {
+    'import/resolver': {
+      typescript: true,
+      node: true,
+    },
+  },
   rules: {
-    "no-console": "warn",
-    "react/jsx-key": "off",
-    "tsdoc/syntax": "warn",
-    "@typescript-eslint/consistent-type-imports": "warn",
-    "@typescript-eslint/prefer-optional-chain": "warn",
+    'no-console': 'warn',
+    'react/jsx-key': 'off',
+    'tsdoc/syntax': 'warn',
+    'import/no-cycle': 'warn',
+    '@typescript-eslint/consistent-type-imports': 'warn',
+    '@typescript-eslint/prefer-optional-chain': 'warn',
   },
-};
+}

packages/eslint-config/package.json

@@ -11,6 +11,8 @@
   "devDependencies": {
     "@typescript-eslint/eslint-plugin": "^5.46.1",
     "@typescript-eslint/parser": "^5.46.1",
+    "eslint-import-resolver-typescript": "^3.5.2",
+    "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-tsdoc": "^0.2.17",
     "typescript": "^4.9.4"
   },

packages/repositories/in-memory-repository/repositories/table/table-in-memory.mutation-visitor.ts

@@ -7,6 +7,7 @@ import type {
   WithTableName,
   WithTableSchema,
   WithTableViews,
+  WithViewFieldsOrder,
 } from '@egodb/core'
 import type { TableInMemory } from './table'
 import { TableInMemoryMapper } from './table-in-memory.mapper'
@@ -67,4 +68,7 @@ export class TableInMemoryMutationVisitor implements ITableSpecVisitor {
       }
     }
   }
+  fieldsOrder(s: WithViewFieldsOrder): void {
+    throw new Error('Method not implemented.')
+  }
 }

packages/repositories/in-memory-repository/repositories/table/table-in-memory.query-visitor.ts

@@ -5,6 +5,7 @@ import type {
   WithFieldWidth,
   WithTableId,
   WithTableName,
+  WithViewFieldsOrder,
 } from '@egodb/core'
 import type { Result } from 'oxide.ts'
 import { Err, Ok } from 'oxide.ts'
@@ -83,4 +84,7 @@ export class TableInMemoryQueryVisitor implements ITableSpecVisitor {
       return !!view.fieldOptions?.[s.fieldName]?.hidden === s.hidden
     }
   }
+  fieldsOrder(s: WithViewFieldsOrder): void {
+    throw new Error('Method not implemented.')
+  }
 }