feat(action): add AIPlugin (#18)

packages/grid/src/core/types/core.ts

@@ -93,3 +93,5 @@ export interface AITableFieldInfo {
     icon: string;
     width: number;
 }
+
+export type AIPlugin = (aiTable: AITable) => AITable;

packages/grid/src/grid.component.ts

@@ -15,7 +15,8 @@ import {
     AITableFields,
     AITableFieldType,
     AITableRecords,
-    createDefaultField
+    createDefaultField,
+    AIPlugin
 } from './core';
 import { ThyIcon } from 'ngx-tethys/icon';
 import { AITableGridEventService } from './services/event.service';
@@ -77,6 +78,8 @@ export class AITableGrid implements OnInit {
 
     aiReadonly = input<boolean>();
 
+    aiPlugins = input<AIPlugin[]>();
+
     AITableFieldType = AITableFieldType;
 
     takeUntilDestroyed = takeUntilDestroyed();
@@ -120,6 +123,9 @@ export class AITableGrid implements OnInit {
 
     initAITable() {
         this.aiTable = createAITable(this.aiRecords, this.aiFields);
+        this.aiPlugins()?.forEach((plugin) => {
+            this.aiTable = plugin(this.aiTable);
+        });
         this.aiTableInitialized.emit(this.aiTable);
         this.aiTable.onChange = () => {
             this.onChange.emit({

src/app/action/index.ts

@@ -0,0 +1,7 @@
+import { setView, applyView, GeneralActions } from './view';
+
+export const CustomActions = {
+    setView,
+    applyView,
+    ...GeneralActions
+};

src/app/action/view.ts

@@ -0,0 +1,38 @@
+import { AITableView, AIViewAction, ViewActionName } from '../types/view';
+import { AIViewTable } from '../types/view';
+import { createDraft, finishDraft } from 'immer';
+
+export function setView(aiTable: AIViewTable, newView: AITableView, path: [number]) {
+    const [index] = path;
+    const view = aiTable.views()[index];
+    if (JSON.stringify(view) !== JSON.stringify(newView)) {
+        const operation = {
+            type: ViewActionName.setView,
+            view,
+            newView,
+            path
+        };
+        aiTable.viewApply(operation);
+    }
+}
+
+export const GeneralActions = {
+    transform(aiTable: AIViewTable, op: AIViewAction): void {
+        const views = createDraft(aiTable.views());
+        applyView(aiTable, views, op);
+        aiTable.views.update(() => {
+            return finishDraft(views);
+        });
+    }
+};
+
+export const applyView = (aiTable: AIViewTable, views: AITableView[], options: AIViewAction) => {
+    const [viewIndex] = options.path;
+    views[viewIndex] = options.newView;
+    return views;
+};
+
+export const ViewActions = {
+    setView,
+    applyView
+};

src/app/app.component.html

@@ -1,7 +1,12 @@
+行高:
+<thy-select [(ngModel)]="activeView().rowHeight" 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"
+    [aiPlugins]="plugins"
     (aiTableInitialized)="aiTableInitialized($event)"
 ></ai-table-grid>

src/app/app.component.ts

@@ -1,4 +1,4 @@
-import { AfterViewInit, Component, OnDestroy, OnInit, Signal, signal, WritableSignal } from '@angular/core';
+import { AfterViewInit, Component, OnDestroy, computed, OnInit, Signal, signal, WritableSignal } from '@angular/core';
 import { DomSanitizer } from '@angular/platform-browser';
 import { RouterOutlet } from '@angular/router';
 import {
@@ -15,6 +15,13 @@ import {
 import { ThyIconRegistry } from 'ngx-tethys/icon';
 import { ThyPopover, ThyPopoverModule } from 'ngx-tethys/popover';
 import { FieldPropertyEditor } from './component/field-property-editor/field-property-editor.component';
+import { withCustomApply } from './plugins/custom-action.plugin';
+import { ThyOption } from 'ngx-tethys/shared';
+import { ThySelect } from 'ngx-tethys/select';
+import { FormsModule } from '@angular/forms';
+import { NgFor } from '@angular/common';
+import { CustomActions } from './action';
+import { AITableView, AIViewTable, RowHeight } from './types/view';
 import { WebsocketProvider } from 'y-websocket';
 import { connectProvider } from './share/provider';
 import { SharedType, getSharedType } from './share/shared';
@@ -124,7 +131,7 @@ const initValue = {
 @Component({
     selector: 'app-root',
     standalone: true,
-    imports: [RouterOutlet, AITableGrid, ThyPopoverModule, FieldPropertyEditor],
+    imports: [RouterOutlet, AITableGrid, ThyPopoverModule, FieldPropertyEditor, ThySelect, FormsModule, NgFor, ThyOption],
     templateUrl: './app.component.html',
     styleUrl: './app.component.scss'
 })
@@ -135,6 +142,27 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
 
     aiTable!: AITable;
 
+    views = signal([
+        { rowHeight: RowHeight.short, id: 'view1', name: '表格1', isActive: true },
+        { rowHeight: RowHeight.short, id: '3', name: '表格视图3' }
+    ]);
+
+    plugins = [withCustomApply];
+
+    listOfOption = [
+        {
+            value: 'short',
+            text: 'short'
+        },
+        {
+            value: 'medium',
+            text: 'medium'
+        },
+        {
+            value: 'tall',
+            text: 'tall'
+        }
+    ];
     sharedType!: SharedType | null;
 
     provider!: WebsocketProvider | null;
@@ -155,6 +183,10 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
         ]
     };
 
+    activeView = computed(() => {
+        return { ...this.views().find((view) => view?.isActive) } as AITableView;
+    });
+
     constructor(
         private iconRegistry: ThyIconRegistry,
         private sanitizer: DomSanitizer,
@@ -227,6 +259,7 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
 
     aiTableInitialized(aiTable: AITable) {
         this.aiTable = aiTable;
+        (this.aiTable as AIViewTable).views = this.views;
     }
 
     setLocalData(data: string) {
@@ -238,6 +271,9 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
         return data ? JSON.parse(data) : initValue;
     }
 
+    changeRowHeight(event: string) {
+        CustomActions.setView(this.aiTable as any, this.activeView(), [0]);
+    }
 
     disconnect() {
         if (this.provider) {

src/app/plugins/custom-action.plugin.ts

@@ -0,0 +1,20 @@
+import { AITable, AITableAction, FLUSHING } from '@ai-table/grid';
+import { CustomActions } from '../action';
+import { AIViewAction, AIViewTable } from '../types/view';
+
+export const withCustomApply = (aiTable: AITable) => {
+    const viewTable = aiTable as AIViewTable;
+    viewTable.viewApply = (action: AIViewAction) => {
+        aiTable.actions.push(action as unknown as AITableAction);
+        CustomActions.transform(viewTable, action);
+        if (!FLUSHING.get(aiTable)) {
+            FLUSHING.set(aiTable, true);
+            Promise.resolve().then(() => {
+                FLUSHING.set(aiTable, false);
+                aiTable.onChange();
+                aiTable.actions = [];
+            });
+        }
+    };
+    return aiTable;
+};

src/app/types/view.ts

@@ -0,0 +1,47 @@
+import { AITable } from '@ai-table/grid';
+import { Direction } from '@angular/cdk/bidi';
+import { Signal, WritableSignal } from '@angular/core';
+
+export enum RowHeight {
+    short = 'short',
+    medium = 'medium',
+    tall = '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;
+    // }[];
+}
+
+export enum ViewActionName {
+    setView = 'set_view'
+}
+
+export interface AIViewAction {
+    type: ViewActionName.setView;
+    view: AITableView;
+    newView: AITableView;
+    path: [number];
+}
+
+export interface AIViewTable extends AITable {
+    views: WritableSignal<AITableView[]>;
+    viewApply: (action: AIViewAction) => void;
+}