@dxos/react-ui-table 0.8.3-staging.0fa589b → 0.8.4-main.f9ba587

package/src/model/table-model.ts

@@ -6,6 +6,7 @@ import { computed, effect, signal, type ReadonlySignal } from '@preact/signals-c
 
 import { type Space } from '@dxos/client/echo';
 import { Resource } from '@dxos/context';
+import { Ref } from '@dxos/echo';
 import {
   type FieldSortType,
   FormatEnum,
@@ -14,9 +15,11 @@ import {
   type JsonProp,
   getSnapshot,
   getSchema,
+  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 { formatForEditing, parseValue } from '@dxos/react-ui-form';
 import {
   type DxGridAxisMeta,
@@ -24,16 +27,31 @@ import {
   type DxGridPlanePosition,
   type DxGridPosition,
 } from '@dxos/react-ui-grid';
-import { type ViewType, type ViewProjection, type PropertyType, validateSchema } from '@dxos/schema';
+import {
+  type ViewType,
+  type ViewProjection,
+  type PropertyType,
+  validateSchema,
+  type ValidationError,
+} from '@dxos/schema';
 
 import { type SelectionMode, SelectionModel } from './selection-model';
 import { TableSorting } from './table-sorting';
 import { touch } from '../util';
 import { extractTagIds } from '../util/tag';
 
+// 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 };
 
@@ -63,7 +81,7 @@ export type TableModelProps<T extends TableRow = TableRow> = {
   sorting?: FieldSortType[];
   pinnedRows?: { top: number[]; bottom: number[] };
   rowActions?: TableRowAction[];
-  onInsertRow?: (index?: number) => void;
+  onInsertRow?: (data?: any) => boolean;
   onDeleteRows?: (index: number, obj: T[]) => void;
   onDeleteColumn?: (fieldId: string) => void;
   onCellUpdate?: (cell: DxGridPosition) => void;
@@ -82,7 +100,7 @@ export class TableModel<T extends TableRow = TableRow> extends Resource {
     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 +110,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']>;
@@ -265,6 +284,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 +303,101 @@ export class TableModel<T extends TableRow = TableRow> extends Resource {
 
   public getRowCount = (): number => this._rows.value.length;
 
+  /**
+   * @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 getColumnCount = (): number => this._view?.fields.length ?? 0;
 
-  public insertRow = (rowIndex?: number): void => {
-    const row = rowIndex !== undefined ? this._sorting.getDataIndex(rowIndex) : this._rows.value.length;
-    this._onInsertRow?.(row);
+  public insertRow = (): void => {
+    const result = this._onInsertRow?.();
+    if (result === false && this._draftRows.value.length === 0) {
+      this.createDraftRow();
+    }
+  };
+
+  private createDraftRow(): void {
+    if (!this._view) {
+      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.schema);
+    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 +428,29 @@ export class TableModel<T extends TableRow = TableRow> extends Resource {
     }
   };
 
-  public getCellData = ({ col, row }: DxGridPlanePosition): any => {
+  public getCellData = (cell: DxGridPosition): any => {
+    const { col, row, plane } = cell;
     const fields = this._view?.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,8 +471,7 @@ 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);
+  public validateCellData = async ({ col, row, plane }: DxGridPosition, value: any): Promise<ValidationResult> => {
     const fields = this._view?.fields ?? [];
     if (col < 0 || col >= fields.length) {
       return { valid: false, error: 'Invalid column index' };
@@ -350,32 +479,52 @@ export class TableModel<T extends TableRow = TableRow> extends Resource {
 
     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' };
+      }
+
+      const draftRow = this._draftRows.value[row];
+      const snapshot = { ...draftRow.data };
+      setValue(snapshot, field.path, transformedValue);
+
+      const validationErrors = this.validateDraftRowData(snapshot);
+      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');
 
-    // Set the proposed value.
-    setValue(snapshot, field.path, transformedValue);
+      const snapshot = getSnapshot(currentRow);
+      setValue(snapshot, field.path, transformedValue);
 
-    const schema = getSchema(currentRow);
-    invariant(schema);
+      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 };
-    }
+      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 };
+      return { valid: true };
+    }
   };
 
-  public setCellData = ({ col, row }: DxGridPlanePosition, value: any): void => {
-    const rowIdx = this._sorting.getDataIndex(row);
+  public setCellData = (cell: DxGridPosition, value: any): void => {
+    const { col, row, plane } = cell;
     const fields = this._view?.fields ?? [];
     if (col < 0 || col >= fields.length) {
       return;
@@ -387,12 +536,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);
+    }
   };
 
   /**
@@ -410,6 +568,33 @@ 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
   //
@@ -457,6 +642,7 @@ export class TableModel<T extends TableRow = TableRow> extends Resource {
   //
   // View operations
   //
+
   public saveView(): void {
     this._sorting.save();
   }
@@ -466,7 +652,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;
       }