@dxos/react-ui-table 0.8.3 → 0.8.4-main.28f8d3d

package/src/model/table-model.ts

@@ -2,44 +2,60 @@
 // Copyright 2025 DXOS.org
 //
 
-import { computed, effect, signal, type ReadonlySignal } from '@preact/signals-core';
+import { type ReadonlySignal, computed, effect, signal } from '@preact/signals-core';
 
-import { type Space } from '@dxos/client/echo';
 import { Resource } from '@dxos/context';
+import { Obj, Ref } from '@dxos/echo';
 import {
   type FieldSortType,
   FormatEnum,
-  getValue,
-  setValue,
   type JsonProp,
-  getSnapshot,
+  type JsonSchemaType,
   getSchema,
+  getSnapshot,
+  getValue,
+  setValue,
+  toEffectSchema,
 } from '@dxos/echo-schema';
 import { invariant } from '@dxos/invariant';
-import { isLiveObject, makeRef } from '@dxos/live-object';
+import { ObjectId } from '@dxos/keys';
+import { isLiveObject } from '@dxos/live-object';
+import { fullyQualifiedId } from '@dxos/react-client/echo';
+import { type Label } from '@dxos/react-ui';
 import { formatForEditing, parseValue } from '@dxos/react-ui-form';
 import {
   type DxGridAxisMeta,
-  type DxGridPlaneRange,
   type DxGridPlanePosition,
+  type DxGridPlaneRange,
   type DxGridPosition,
 } from '@dxos/react-ui-grid';
-import { type ViewType, type ViewProjection, type PropertyType, validateSchema } from '@dxos/schema';
+import { type DataType, ProjectionModel, type PropertyType, type ValidationError, validateSchema } from '@dxos/schema';
 
-import { type SelectionMode, SelectionModel } from './selection-model';
-import { TableSorting } from './table-sorting';
+import { TableView } from '../types';
 import { touch } from '../util';
 import { extractTagIds } from '../util/tag';
 
+import { type SelectionMode, SelectionModel } from './selection-model';
+import { TableSorting } from './table-sorting';
+
+// Domain types for cell classification
+export type TableCellType = 'standard' | 'draft' | 'header';
+
 // TODO(ZaymonFC): Use a common type?
 export type ValidationResult = { valid: true } | { valid: false; error: string };
 
+export type DraftRow<T extends TableRow = TableRow> = {
+  data: T;
+  valid: boolean;
+  validationErrors: ValidationError[];
+};
+
 // TODO(burdon): Use schema types.
 export type TableRow = Record<JsonProp, any> & { id: string };
 
 export type TableRowAction = {
   id: string;
-  translationKey: string;
+  label: Label;
 };
 
 export type TableFeatures = {
@@ -55,15 +71,16 @@ const defaultFeatures: TableFeatures = {
 };
 
 export type TableModelProps<T extends TableRow = TableRow> = {
-  id?: string;
-  space?: Space;
-  view?: ViewType;
-  projection: ViewProjection;
+  view: DataType.View;
+  schema: JsonSchemaType;
+  projection?: ProjectionModel;
   features?: Partial<TableFeatures>;
   sorting?: FieldSortType[];
+  initialSelection?: string[];
   pinnedRows?: { top: number[]; bottom: number[] };
   rowActions?: TableRowAction[];
-  onInsertRow?: (index?: number) => void;
+  onResolveSchema?: (typename: string) => Promise<JsonSchemaType>;
+  onInsertRow?: (data?: any) => boolean;
   onDeleteRows?: (index: number, obj: T[]) => void;
   onDeleteColumn?: (fieldId: string) => void;
   onCellUpdate?: (cell: DxGridPosition) => void;
@@ -72,17 +89,16 @@ export type TableModelProps<T extends TableRow = TableRow> = {
 };
 
 export class TableModel<T extends TableRow = TableRow> extends Resource {
-  private readonly _id: string | undefined;
-  private readonly _space: Space | undefined;
-  private readonly _view: ViewType | undefined;
-  private readonly _projection: ViewProjection;
+  private readonly _view: DataType.View;
+  private readonly _projection: ProjectionModel;
+  private _table?: TableView;
 
   private readonly _visibleRange = signal<DxGridPlaneRange>({
     start: { row: 0, col: 0 },
     end: { row: 0, col: 0 },
   });
 
-  private readonly _onInsertRow?: TableModelProps<T>['onInsertRow'];
+  private readonly _onInsertRow?: (data?: any) => boolean;
   private readonly _onDeleteRows?: TableModelProps<T>['onDeleteRows'];
   private readonly _onDeleteColumn?: TableModelProps<T>['onDeleteColumn'];
   private readonly _onCellUpdate?: TableModelProps<T>['onCellUpdate'];
@@ -92,6 +108,7 @@ export class TableModel<T extends TableRow = TableRow> extends Resource {
   private readonly _features: TableFeatures;
 
   private readonly _rows = signal<T[]>([]);
+  private readonly _draftRows = signal<DraftRow<T>[]>([]);
   private readonly _sorting: TableSorting<T>;
 
   private _pinnedRows: NonNullable<TableModelProps<T>['pinnedRows']>;
@@ -99,12 +116,12 @@ export class TableModel<T extends TableRow = TableRow> extends Resource {
   private _columnMeta?: ReadonlySignal<DxGridAxisMeta>;
 
   constructor({
-    id,
-    space,
     view,
+    schema,
     projection,
     features = {},
     sorting = [],
+    initialSelection = [],
     pinnedRows = { top: [], bottom: [] },
     rowActions = [],
     onCellUpdate,
@@ -115,10 +132,8 @@ export class TableModel<T extends TableRow = TableRow> extends Resource {
     onRowAction,
   }: TableModelProps<T>) {
     super();
-    this._id = id;
-    this._space = space;
     this._view = view;
-    this._projection = projection;
+    this._projection = projection ?? new ProjectionModel(schema, view.projection);
 
     // TODO(ZaymonFC): Use our more robust config merging module?
     this._features = { ...defaultFeatures, ...features };
@@ -128,13 +143,20 @@ export class TableModel<T extends TableRow = TableRow> extends Resource {
       'Single selection is not compatible with editable tables.',
     );
 
-    this._sorting = new TableSorting(this._rows, this._view, projection);
+    this._sorting = new TableSorting(this._rows, this._view, this._projection);
 
     if (sorting.length > 0) {
       const [sort] = sorting;
       this._sorting.setSort(sort.fieldId, sort.direction);
     }
 
+    this._selection = new SelectionModel(
+      this._sorting.sortedRows,
+      this._features.selection.mode ?? 'multiple',
+      initialSelection,
+      () => this._onRowOrderChange?.(),
+    );
+
     this._pinnedRows = pinnedRows;
     this._rowActions = rowActions;
     this._onInsertRow = onInsertRow;
@@ -145,24 +167,25 @@ export class TableModel<T extends TableRow = TableRow> extends Resource {
     this._onRowAction = onRowAction;
   }
 
-  public get id() {
-    return this._id;
+  public get id(): string {
+    return fullyQualifiedId(this._view);
   }
 
-  public get space() {
-    return this._space;
+  public get view(): DataType.View {
+    return this._view;
   }
 
-  public get view() {
-    return this._view;
+  public get table(): TableView {
+    invariant(this._table, 'Model not initialized');
+    return this._table;
   }
 
-  public get projection() {
+  public get projection(): ProjectionModel {
     return this._projection;
   }
 
   public get rows(): ReadonlySignal<T[]> {
-    return this._sorting.sortedRows;
+    return this.sorting.sortedRows;
   }
 
   public get features(): TableFeatures {
@@ -172,7 +195,7 @@ export class TableModel<T extends TableRow = TableRow> extends Resource {
   /**
    * @reactive
    */
-  public get sorting(): TableSorting<T> | undefined {
+  public get sorting(): TableSorting<T> {
     return this._sorting;
   }
 
@@ -180,11 +203,11 @@ export class TableModel<T extends TableRow = TableRow> extends Resource {
    * Gets the row data at the specified display index.
    */
   public getRowAt(displayIndex: number): T | undefined {
-    if (displayIndex < 0 || displayIndex >= this._sorting.sortedRows.value.length) {
+    if (displayIndex < 0 || displayIndex >= this.sorting.sortedRows.value.length) {
       return undefined;
     }
 
-    return this._sorting.sortedRows.value[displayIndex];
+    return this.sorting.sortedRows.value[displayIndex];
   }
 
   public get pinnedRows(): NonNullable<TableModelProps<T>['pinnedRows']> {
@@ -202,7 +225,7 @@ export class TableModel<T extends TableRow = TableRow> extends Resource {
 
   /** @reactive */
   public get isViewDirty(): boolean {
-    return this._sorting.isDirty;
+    return this.sorting.isDirty;
   }
 
   public get rowActions(): TableRowAction[] {
@@ -214,19 +237,20 @@ export class TableModel<T extends TableRow = TableRow> extends Resource {
   //
 
   protected override async _open(): Promise<void> {
+    const presentation = this._view.presentation.target ?? (await this._view.presentation.load());
+    invariant(Obj.instanceOf(TableView, presentation));
+    this._table = presentation;
+
     this.initializeColumnMeta();
     this.initializeEffects();
-    this._selection = new SelectionModel(this._sorting.sortedRows, this._features.selection.mode ?? 'multiple', () =>
-      this._onRowOrderChange?.(),
-    );
     await this._selection.open(this._ctx);
   }
 
   private initializeColumnMeta(): void {
     this._columnMeta = computed(() => {
-      const fields = this._view?.fields ?? [];
+      const fields = this._projection?.fields ?? [];
       const meta = Object.fromEntries(
-        fields.map((field, index: number) => [index, { size: field?.size ?? 256, resizeable: true }]),
+        fields.map((field, index: number) => [index, { size: this.table.sizes[field.path] ?? 256, resizeable: true }]),
       );
 
       return {
@@ -239,7 +263,7 @@ export class TableModel<T extends TableRow = TableRow> extends Resource {
 
   private initializeEffects(): void {
     const rowOrderWatcher = effect(() => {
-      touch(this._sorting.sortedRows.value);
+      touch(this.sorting.sortedRows.value);
       this._onRowOrderChange?.();
     });
     this._ctx.onDispose(rowOrderWatcher);
@@ -255,8 +279,8 @@ export class TableModel<T extends TableRow = TableRow> extends Resource {
       for (let row = start.row; row <= end.row; row++) {
         rowEffects.push(
           effect(() => {
-            const obj = this._sorting.sortedRows.value[row];
-            this._view?.fields.forEach((field) => touch(getValue(obj, field.path)));
+            const obj = this.sorting.sortedRows.value[row];
+            this._projection?.fields.forEach((field) => touch(getValue(obj, field.path)));
             this._onCellUpdate?.({ row, col: start.col, plane: 'grid' });
           }),
         );
@@ -265,6 +289,13 @@ export class TableModel<T extends TableRow = TableRow> extends Resource {
       return () => rowEffects.forEach((cleanup) => cleanup());
     });
     this._ctx.onDispose(rowEffectManager);
+
+    const draftRowsWatcher = effect(() => {
+      touch(this._draftRows.value);
+      // Notify grid that draft rows have changed
+      this._onRowOrderChange?.();
+    });
+    this._ctx.onDispose(draftRowsWatcher);
   }
 
   //
@@ -277,11 +308,101 @@ export class TableModel<T extends TableRow = TableRow> extends Resource {
 
   public getRowCount = (): number => this._rows.value.length;
 
-  public getColumnCount = (): number => this._view?.fields.length ?? 0;
+  /**
+   * @reactive
+   */
+  public getDraftRowCount = (): number => this._draftRows.value.length;
+
+  // TODO(ZaymonFC): Return .value instead of exposing the signal.
+  public get draftRows(): ReadonlySignal<DraftRow<T>[]> {
+    return this._draftRows;
+  }
+
+  /**
+   * Checks if a specific field path has validation errors for a given draft row.
+   * @param draftRowIndex - The index of the draft row to check
+   * @param fieldPath - The path of the field to check for validation errors
+   * @returns true if the field has validation errors, false otherwise
+   */
+  public hasDraftRowValidationError(draftRowIndex: number, fieldPath: string): boolean {
+    if (draftRowIndex < 0 || draftRowIndex >= this._draftRows.value.length) {
+      return false;
+    }
+
+    const draftRow = this._draftRows.value[draftRowIndex];
+    const validationErrors = draftRow.validationErrors || [];
+    return validationErrors.some((error) => error.path === fieldPath);
+  }
 
-  public insertRow = (rowIndex?: number): void => {
-    const row = rowIndex !== undefined ? this._sorting.getDataIndex(rowIndex) : this._rows.value.length;
-    this._onInsertRow?.(row);
+  public getColumnCount = (): number => this._projection?.fields.length ?? 0;
+
+  public insertRow = (): void => {
+    const result = this._onInsertRow?.();
+    if (result === false && this._draftRows.value.length === 0) {
+      this.createDraftRow();
+    }
+  };
+
+  private createDraftRow(): void {
+    if (!this._projection) {
+      return;
+    }
+
+    // NOTE(ZaymonFC): This is initialized with id because it's required in all schemata?
+    const draftData = { id: ObjectId.random() } as any as T;
+    const validationErrors = this.validateDraftRowData(draftData);
+
+    const draftRow: DraftRow<T> = {
+      data: draftData,
+      valid: validationErrors.length === 0,
+      validationErrors,
+    };
+
+    this._draftRows.value = [...this._draftRows.value, draftRow];
+  }
+
+  private validateDraftRow(draftRowIndex: number): void {
+    if (draftRowIndex < 0 || draftRowIndex >= this._draftRows.value.length) {
+      return;
+    }
+
+    const draftRow = this._draftRows.value[draftRowIndex];
+    const validationErrors = this.validateDraftRowData(draftRow.data);
+
+    const updatedDraftRow = {
+      ...draftRow,
+      valid: validationErrors.length === 0,
+      validationErrors,
+    };
+
+    const newDraftRows = [...this._draftRows.value];
+    newDraftRows[draftRowIndex] = updatedDraftRow;
+    this._draftRows.value = newDraftRows;
+  }
+
+  private validateDraftRowData(data: T): ValidationError[] {
+    const schema = toEffectSchema(this._projection.baseSchema);
+    return validateSchema(schema, data) || [];
+  }
+
+  public commitDraftRow = (draftRowIndex: number): boolean => {
+    if (draftRowIndex < 0 || draftRowIndex >= this._draftRows.value.length) {
+      return false;
+    }
+
+    const draftRow = this._draftRows.value[draftRowIndex];
+    if (!draftRow.valid) {
+      return false;
+    }
+
+    const success = this._onInsertRow?.(draftRow.data);
+
+    if (success) {
+      const newDraftRows = this._draftRows.value.filter((_, index) => index !== draftRowIndex);
+      this._draftRows.value = newDraftRows;
+    }
+
+    return success ?? false;
   };
 
   public deleteRow = (rowIndex: number): void => {
@@ -312,15 +433,29 @@ export class TableModel<T extends TableRow = TableRow> extends Resource {
     }
   };
 
-  public getCellData = ({ col, row }: DxGridPlanePosition): any => {
-    const fields = this._view?.fields ?? [];
+  public getCellData = (cell: DxGridPosition): any => {
+    const { col, row, plane } = cell;
+    const fields = this._projection?.fields ?? [];
     if (col < 0 || col >= fields.length) {
       return undefined;
     }
 
     const field = fields[col];
-    const dataIndex = this._sorting.getDataIndex(row);
-    const value = getValue(this._rows.value[dataIndex], field.path);
+    let value: any;
+
+    if (plane === 'frozenRowsEnd') {
+      // Get data from draft row
+      if (row >= 0 && row < this._draftRows.value.length) {
+        value = getValue(this._draftRows.value[row].data, field.path);
+      } else {
+        return undefined;
+      }
+    } else {
+      // Get data from regular row
+      const dataIndex = this._sorting.getDataIndex(row);
+      value = getValue(this._rows.value[dataIndex], field.path);
+    }
+
     if (value == null) {
       return '';
     }
@@ -341,42 +476,62 @@ export class TableModel<T extends TableRow = TableRow> extends Resource {
     }
   };
 
-  public validateCellData = async ({ col, row }: DxGridPlanePosition, value: any): Promise<ValidationResult> => {
-    const rowIdx = this._sorting.getDataIndex(row);
-    const fields = this._view?.fields ?? [];
+  public validateCellData = async ({ col, row, plane }: DxGridPosition, value: any): Promise<ValidationResult> => {
+    const fields = this._projection?.fields ?? [];
     if (col < 0 || col >= fields.length) {
       return { valid: false, error: 'Invalid column index' };
     }
 
     const field = fields[col];
     const { props } = this._projection.getFieldProjection(field.id);
+    const transformedValue = editorTextToCellValue(props, value);
 
-    const currentRow = this._rows.value[rowIdx];
-    invariant(currentRow, 'Invalid row index');
+    const isDraftRow = plane === 'frozenRowsEnd';
 
-    // Get a snapshot of the current object.
-    const snapshot = getSnapshot(currentRow);
-    const transformedValue = editorTextToCellValue(props, value);
+    if (isDraftRow) {
+      const isInvalidDraftRowIndex = row < 0 || row >= this._draftRows.value.length;
+      if (isInvalidDraftRowIndex) {
+        return { valid: false, error: 'Invalid draft row index' };
+      }
 
-    // Set the proposed value.
-    setValue(snapshot, field.path, transformedValue);
+      const draftRow = this._draftRows.value[row];
+      const snapshot = { ...draftRow.data };
+      setValue(snapshot, field.path, transformedValue);
 
-    const schema = getSchema(currentRow);
-    invariant(schema);
+      const validationErrors = this.validateDraftRowData(snapshot);
+      // TODO(thure): These errors sometimes result in a useless message like “is missing” (what is missing?)
+      if (validationErrors.length > 0) {
+        const error = validationErrors.find((err) => err.path === field.path);
+        if (error) {
+          return { valid: false, error: error.message };
+        }
+      }
+      return { valid: true };
+    } else {
+      const rowIdx = this._sorting.getDataIndex(row);
+      const currentRow = this._rows.value[rowIdx];
+      invariant(currentRow, 'Invalid row index');
 
-    const validationResult = validateSchema(schema, snapshot);
-    if (validationResult && validationResult.length > 0) {
-      const error = validationResult[0];
-      invariant(error.path === field.path);
-      return { valid: false, error: error.message };
-    }
+      const snapshot = getSnapshot(currentRow);
+      setValue(snapshot, field.path, transformedValue);
 
-    return { valid: true };
+      const schema = getSchema(currentRow);
+      invariant(schema);
+
+      const validationResult = validateSchema(schema, snapshot);
+      if (validationResult && validationResult.length > 0) {
+        const error = validationResult[0];
+        invariant(error.path === field.path);
+        return { valid: false, error: error.message };
+      }
+
+      return { valid: true };
+    }
   };
 
-  public setCellData = ({ col, row }: DxGridPlanePosition, value: any): void => {
-    const rowIdx = this._sorting.getDataIndex(row);
-    const fields = this._view?.fields ?? [];
+  public setCellData = (cell: DxGridPosition, value: any): void => {
+    const { col, row, plane } = cell;
+    const fields = this._projection?.fields ?? [];
     if (col < 0 || col >= fields.length) {
       return;
     }
@@ -387,12 +542,21 @@ export class TableModel<T extends TableRow = TableRow> extends Resource {
 
     // Special handling for Ref format to preserve existing behavior
     if (props.format === FormatEnum.Ref && !isLiveObject(value)) {
-      // TODO(ZaymonFC): This get's called an additional time by the cell editor onBlur, but with the cell editors
-      //   plain string value. Maybe onBlur should be called with the actual value?
       return;
     }
 
-    setValue(this._rows.value[rowIdx], field.path, transformedValue);
+    if (plane === 'frozenRowsEnd') {
+      // Update draft row data
+      if (row >= 0 && row < this._draftRows.value.length) {
+        setValue(this._draftRows.value[row].data, field.path, transformedValue);
+        // Re-validate the draft row after the update
+        this.validateDraftRow(row);
+      }
+    } else {
+      // Update regular row data
+      const rowIdx = this._sorting.getDataIndex(row);
+      setValue(this._rows.value[rowIdx], field.path, transformedValue);
+    }
   };
 
   /**
@@ -402,7 +566,7 @@ export class TableModel<T extends TableRow = TableRow> extends Resource {
    */
   public updateCellData({ col, row }: DxGridPlanePosition, update: (value: any) => any): void {
     const dataRow = this._sorting.getDataIndex(row);
-    const fields = this._view?.fields ?? [];
+    const fields = this._projection?.fields ?? [];
     const field = fields[col];
 
     const value = getValue(this._rows.value[dataRow], field.path);
@@ -410,16 +574,43 @@ export class TableModel<T extends TableRow = TableRow> extends Resource {
     setValue(this._rows.value[dataRow], field.path, updatedValue);
   }
 
+  /**
+   * Gets the domain-appropriate cell type for a given cell position.
+   * This abstracts away the low-level grid plane concepts and provides domain-specific types.
+   * @param cell - The cell position to classify
+   * @returns The domain-appropriate cell type
+   */
+  public getCellType(cell: DxGridPosition): TableCellType {
+    switch (cell.plane) {
+      case 'frozenRowsEnd':
+        return 'draft';
+      case 'frozenRowsStart':
+        return 'header';
+      case 'grid':
+      default:
+        return 'standard';
+    }
+  }
+
+  /**
+   * Convenience method to check if a cell is a draft cell.
+   * @param cell - The cell position to check
+   * @returns true if the cell is a draft cell, false otherwise
+   */
+  public isDraftCell(cell: DxGridPosition): boolean {
+    return this.getCellType(cell) === 'draft';
+  }
+
   //
   // Column Operations
   //
 
   public deleteColumn(fieldId: string): void {
-    if (!this._view) {
+    if (!this._projection) {
       return;
     }
 
-    const field = this._view?.fields.find((field) => field.id === fieldId);
+    const field = this._projection?.fields.find((field) => field.id === fieldId);
     if (field && this._onDeleteColumn) {
       this._onDeleteColumn(field.id);
     }
@@ -430,12 +621,12 @@ export class TableModel<T extends TableRow = TableRow> extends Resource {
   //
 
   public setColumnWidth(columnIndex: number, width: number): void {
-    const fields = this._view?.fields ?? [];
+    const fields = this._projection?.fields ?? [];
     if (columnIndex < fields.length) {
       const newWidth = Math.max(0, width);
       const field = fields[columnIndex];
       if (field) {
-        field.size = newWidth;
+        this.table.sizes[field.path] = newWidth;
       }
     }
   }
@@ -457,6 +648,7 @@ export class TableModel<T extends TableRow = TableRow> extends Resource {
   //
   // View operations
   //
+
   public saveView(): void {
     this._sorting.save();
   }
@@ -466,7 +658,7 @@ const editorTextToCellValue = (props: PropertyType, value: any): any => {
   switch (props.format) {
     case FormatEnum.Ref: {
       if (isLiveObject(value)) {
-        return makeRef(value);
+        return Ref.make(value);
       } else {
         return value;
       }

package/src/model/table-presentation.test.ts

@@ -3,17 +3,18 @@
 //
 
 import { Schema } from 'effect';
-import { describe, expect, it, beforeEach } from 'vitest';
+import { beforeEach, describe, expect, it } from 'vitest';
 
-import { Obj, Ref } from '@dxos/echo';
+import { Obj } from '@dxos/echo';
 import { TypedObject } from '@dxos/echo-schema';
 import { live } from '@dxos/live-object';
 import { createEchoSchema } from '@dxos/live-object/testing';
-import { createView, ViewProjection } from '@dxos/schema';
+import { createView } from '@dxos/schema';
+
+import { TableView } from '../types';
 
 import { TableModel, type TableModelProps } from './table-model';
 import { TablePresentation } from './table-presentation';
-import { TableType } from '../types';
 
 describe('TablePresentation', () => {
   describe('row reactivity', () => {
@@ -97,8 +98,7 @@ class Test extends TypedObject({ typename: 'example.com/type/Test', version: '0.
 
 const createTableModel = (props: Partial<TableModelProps> = {}): TableModel => {
   const schema = createEchoSchema(Test);
-  const view = createView({ name: 'Test', typename: schema.typename, jsonSchema: schema.jsonSchema });
-  const projection = new ViewProjection(schema.jsonSchema, view);
-  const table = Obj.make(TableType, { view: Ref.make(view) });
-  return new TableModel({ id: table.id, view, projection, ...props });
+  const table = Obj.make(TableView, { sizes: {} });
+  const view = createView({ typename: schema.typename, jsonSchema: schema.jsonSchema, presentation: table });
+  return new TableModel({ view, schema: schema.jsonSchema, ...props });
 };