feat(actions): custom actions idea #WIK-16136

packages/grid/src/core/action/field.ts

@@ -1,4 +1,4 @@
-import { ActionName, AddFieldAction, AIFieldPath, AITable, AITableField } from '../types';
+import { ActionName, AddFieldAction, AIFieldPath, AITable, AITableAction, AITableField, AITableFields, AITableRecords } from '../types';
 
 export function addField(aiTable: AITable, field: AITableField, path: AIFieldPath) {
     const operation: AddFieldAction = {
@@ -9,6 +9,22 @@ export function addField(aiTable: AITable, field: AITableField, path: AIFieldPat
     aiTable.apply(operation);
 }
 
+export const addFieldFn = (aiTable: AITable, records: AITableRecords, fields: AITableFields, options: AITableAction) => {
+    const [fieldIndex] = options.path;
+    const newField = (options as any).field;
+    fields.splice(fieldIndex, 0, newField);
+    const newRecord = {
+        [newField.id]: ''
+    };
+    records.forEach((item) => {
+        item.value = {
+            ...item.value,
+            ...newRecord
+        };
+    });
+};
+
 export const FieldActions = {
-    addField
+    addField,
+    addFieldFn
 };

packages/grid/src/core/action/general.ts

@@ -1,45 +1,33 @@
 import { ActionName, AITable, AITableAction, AITableFields, AITableRecords } from '../types';
 import { createDraft, finishDraft } from 'immer';
+import { addRecordFn, updateFieldValueFn } from './record';
+import { addFieldFn } from './field';
 
-const apply = (aiTable: AITable, records: AITableRecords, fields: AITableFields, options: AITableAction) => {
-    switch (options.type) {
-        case ActionName.UpdateFieldValue: {
-            const [recordIndex, fieldIndex] = options.path;
-            const fieldId = aiTable.fields()[fieldIndex].id;
-            records[recordIndex].value[fieldId] = options.newFieldValue;
-            break;
-        }
-        case ActionName.AddRecord: {
-            const [recordIndex] = options.path;
-            records.splice(recordIndex, 0, options.record);
-            break;
-        }
-        case ActionName.AddField: {
-            const [fieldIndex] = options.path;
-            const newField = options.field;
-            fields.splice(fieldIndex, 0, newField);
-            const newRecord = {
-                [newField.id]: ''
-            };
-            records.forEach((item) => {
-                item.value = {
-                    ...item.value,
-                    ...newRecord
-                };
-            });
-        }
-    }
+export const defaultMethods = {
+    [ActionName.UpdateFieldValue]: updateFieldValueFn,
+    [ActionName.AddField]: addFieldFn,
+    [ActionName.AddRecord]: addRecordFn
+};
+
+export const mergeMethods = (customMethods?: {}) => {
+    return { ...defaultMethods, ...customMethods };
+};
+
+const apply = (aiTable: AITable, records: AITableRecords, fields: AITableFields, options: AITableAction, aiCustomAction = {}) => {
+    const allMethods = mergeMethods(aiCustomAction);
+    const func = allMethods[options.type];
+    func(aiTable, records, fields, options);
     return {
         records,
         fields
     };
 };
 
 export const GeneralActions = {
-    transform(aiTable: AITable, op: AITableAction): void {
+    transform(aiTable: AITable, op: AITableAction, aiCustomAction = {}): void {
         const records = createDraft(aiTable.records());
         const fields = createDraft(aiTable.fields());
-        apply(aiTable, records, fields, op);
+        apply(aiTable, records, fields, op, aiCustomAction);
         aiTable.fields.update(() => {
             return finishDraft(fields);
         });

packages/grid/src/core/action/record.ts

@@ -1,4 +1,15 @@
-import { ActionName, AddRecordAction, AIRecordPath, UpdateFieldValueAction, AITable, AITableRecord, AIFieldValuePath } from '../types';
+import {
+    ActionName,
+    AddRecordAction,
+    AIRecordPath,
+    UpdateFieldValueAction,
+    AITable,
+    AITableRecord,
+    AIFieldValuePath,
+    AITableRecords,
+    AITableFields,
+    AITableAction
+} from '../types';
 import { AITableQueries } from '../utils';
 
 export function updateFieldValue(aiTable: AITable, value: any, path: AIFieldValuePath) {
@@ -23,7 +34,20 @@ export function addRecord(aiTable: AITable, record: AITableRecord, path: AIRecor
     aiTable.apply(operation);
 }
 
+export const addRecordFn = (aiTable: AITable, records: AITableRecords, fields: AITableFields, options: AITableAction) => {
+    const [recordIndex] = options.path;
+    records.splice(recordIndex, 0, (options as any).record);
+};
+
+export const updateFieldValueFn = (aiTable: AITable, records: AITableRecords, fields: AITableFields, options: AITableAction) => {
+    const [recordIndex, fieldIndex] = options.path;
+    const fieldId = aiTable.fields()[fieldIndex as number].id;
+    records[recordIndex].value[fieldId] = (options as any).newFieldValue;
+};
+
 export const RecordActions = {
     addRecord,
-    updateFieldValue
+    updateFieldValue,
+    addRecordFn,
+    updateFieldValueFn
 };

packages/grid/src/core/utils/common.ts

@@ -1,17 +1,22 @@
+import { AICustomAction } from '../../types';
 import { Actions } from '../action';
 import { AITable, AITableAction, AITableFields, AITableRecords } from '../types';
 import { FLUSHING } from './weak-map';
 import { WritableSignal } from '@angular/core';
 
-export function createAITable(records: WritableSignal<AITableRecords>, fields: WritableSignal<AITableFields>): AITable {
+export function createAITable(
+    records: WritableSignal<AITableRecords>,
+    fields: WritableSignal<AITableFields>,
+    aiCustomAction?: AICustomAction
+): AITable {
     const aiTable: AITable = {
         records,
         fields,
         actions: [],
         onChange: () => {},
         apply: (action: AITableAction) => {
             aiTable.actions.push(action);
-            Actions.transform(aiTable, action);
+            Actions.transform(aiTable, action, aiCustomAction);
 
             if (!FLUSHING.get(aiTable)) {
                 FLUSHING.set(aiTable, true);

packages/grid/src/grid.component.ts

@@ -1,11 +1,11 @@
-import { ChangeDetectionStrategy, Component, computed, ElementRef, input, model, OnInit, output, signal, viewChild } from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, ElementRef, input, model, OnInit, output, signal } from '@angular/core';
 import { CommonModule, NgClass, NgComponentOutlet, NgForOf } from '@angular/common';
 import { SelectOptionPipe } from './pipes/grid';
 import { ThyTag } from 'ngx-tethys/tag';
 import { ThyPopoverModule } from 'ngx-tethys/popover';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { buildGridData } from './utils';
-import { AIFieldConfig, AITableFieldMenu, AITableRowHeight } from './types';
+import { AICustomAction, AIFieldConfig, AITableFieldMenu, AITableRowHeight } from './types';
 import {
     Actions,
     createAITable,
@@ -74,6 +74,8 @@ export class AITableGrid implements OnInit {
 
     aiReadonly = input<boolean>();
 
+    aiCustomAction = input<AICustomAction>();
+
     AITableFieldType = AITableFieldType;
 
     takeUntilDestroyed = takeUntilDestroyed();
@@ -103,7 +105,7 @@ export class AITableGrid implements OnInit {
     }
 
     initAITable() {
-        this.aiTable = createAITable(this.aiRecords, this.aiFields);
+        this.aiTable = createAITable(this.aiRecords, this.aiFields, this.aiCustomAction ? this.aiCustomAction() : {});
         this.aiTableInitialized.emit(this.aiTable);
         this.aiTable.onChange = () => {
             this.onChange.emit({

packages/grid/src/types/grid.ts

@@ -1,4 +1,4 @@
-import { AITableField, AITableFieldType, AITableRecord } from '../core';
+import { AITable, AITableField, AITableFields, AITableFieldType, AITableRecord, AITableRecords } from '../core';
 import { AITableFieldMenu } from './field';
 
 export enum AITableRowHeight {
@@ -8,6 +8,10 @@ export enum AITableRowHeight {
     ExtraTall = 4
 }
 
+export interface AICustomAction {
+    [key: string]: (aiTable: AITable, records: AITableRecords, fields: AITableFields, options: any) => void;
+}
+
 export interface AITableGridCellRenderSchema {
     editor: any;
 }

src/app/action/index.ts

@@ -0,0 +1,5 @@
+import { updateRowHeight } from './view';
+
+export const CustomActions = {
+    updateRowHeight
+};

src/app/action/view.ts

@@ -0,0 +1,24 @@
+import { AITable, AITableRecords, AITableFields } from '@ai-table/grid';
+import { AITableView, CustomActionName } from '../types/views';
+
+export function updateRowHeight(aiTable: AITable, views: AITableView, key: string, value: any) {
+    const operation = {
+        type: CustomActionName.updateRowHeight,
+        views: views,
+        key: key,
+        value: value
+    };
+    aiTable.apply(operation as any);
+}
+
+export const updateRowHeightFn = (aiTable: AITable, records: AITableRecords, fields: AITableFields, options: any) => {
+    const views = options.views;
+    const key = options.key;
+    const value = options.value;
+    views[key] = value;
+};
+
+export const ViewActions = {
+    updateRowHeight,
+    updateRowHeightFn
+};

src/app/app.component.html

@@ -1,9 +1,13 @@
+行高:
+<thy-select [(ngModel)]="selected" style="width: 200px" (ngModelChange)="changeRowHeight($event)">
+    <thy-option *ngFor="let option of listOfOption" [thyValue]="option.value" [thyLabelText]="option.text"> </thy-option>
+</thy-select>
+
 <ai-table-grid
     [(aiRecords)]="records"
     [(aiFields)]="fields"
     (onChange)="onChange($event)"
     [aiFieldConfig]="aiFieldConfig"
+    [aiCustomAction]="customAction"
     (aiTableInitialized)="aiTableInitialized($event)"
 ></ai-table-grid>
-
-

src/app/app.component.ts

@@ -13,8 +13,15 @@ import {
     DividerMenuItem
 } from '@ai-table/grid';
 import { ThyIconRegistry } from 'ngx-tethys/icon';
+import { FormsModule } from '@angular/forms';
+import { ThySelect } from 'ngx-tethys/select';
+import { ThyOption } from 'ngx-tethys/shared';
 import { ThyPopover, ThyPopoverModule } from 'ngx-tethys/popover';
 import { FieldPropertyEditor } from './component/field-property-editor/field-property-editor.component';
+import { NgFor } from '@angular/common';
+import { updateRowHeightFn } from './action/view';
+import { CustomActions } from './action';
+import { CustomActionName } from './types/views';
 
 const LOCAL_STORAGE_KEY = 'ai-table-data';
 
@@ -117,13 +124,15 @@ const initValue = {
 @Component({
     selector: 'app-root',
     standalone: true,
-    imports: [RouterOutlet, AITableGrid, ThyPopoverModule, FieldPropertyEditor],
+    imports: [RouterOutlet, AITableGrid, ThyOption, ThyPopoverModule, FieldPropertyEditor, ThySelect, FormsModule, NgFor],
     templateUrl: './app.component.html',
     styleUrl: './app.component.scss'
 })
 export class AppComponent implements OnInit, AfterViewInit {
     records!: WritableSignal<AITableRecords>;
 
+    selected?: string;
+
     fields!: WritableSignal<AITableFields>;
 
     aiTable!: AITable;
@@ -144,6 +153,23 @@ export class AppComponent implements OnInit, AfterViewInit {
         ]
     };
 
+    listOfOption = [
+        {
+            value: 'short',
+            text: 'short'
+        },
+        {
+            value: 'medium',
+            text: 'medium'
+        },
+        {
+            value: 'tall',
+            text: 'tall'
+        }
+    ];
+
+    customAction = { [CustomActionName.updateRowHeight]: updateRowHeightFn };
+
     constructor(
         private iconRegistry: ThyIconRegistry,
         private sanitizer: DomSanitizer,
@@ -189,4 +215,8 @@ export class AppComponent implements OnInit, AfterViewInit {
         const data = localStorage.getItem(`${LOCAL_STORAGE_KEY}`);
         return data ? JSON.parse(data) : initValue;
     }
+
+    changeRowHeight(event: string) {
+        CustomActions.updateRowHeight(this.aiTable, { rowHeight: 'short' } as any, 'rowHeight', event);
+    }
 }

src/app/types/views.ts

@@ -0,0 +1,32 @@
+import { Direction } from '@angular/cdk/bidi';
+import { SafeAny } from 'ngx-tethys/types';
+
+export enum CustomActionName {
+    updateRowHeight = 'update_row_height'
+}
+
+export interface RowHeight {
+    id: 'short' | 'medium' | 'tall';
+}
+
+export interface AITableView {
+    id: string;
+    name: string;
+    emoji_icon?: string;
+    isActive?: boolean;
+    rowHeight?: RowHeight;
+    sortCondition?: {
+        keepSort: boolean;
+        conditions: {
+            sortBy: string;
+            direction: Direction;
+        }[];
+    };
+    // filterCondition?: {
+    //     fieldKey: string;
+    //     operation: OperationSymbol;
+    //     logical: LogicalOperator;
+    //     value?: SafeAny;
+    //     disabled?: boolean;
+    // }[];
+}