feat(core): support remove_field and remove_record #WIK-16192

packages/grid/src/constants/field.ts

@@ -1,7 +1,7 @@
-import { AITable, AITableField } from '../core';
+import { Actions, AIFieldPath, AITable, AITableField, AITableQueries } from '../core';
 import { AITableFieldMenu } from '../types/field';
 import { AI_TABLE_GRID_FIELD_SERVICE_MAP } from '../services/field.service';
-import { ElementRef, WritableSignal } from '@angular/core';
+import { ElementRef, Signal, WritableSignal } from '@angular/core';
 
 export const DividerMenuItem = {
     id: 'divider'
@@ -17,4 +17,14 @@ export const EditFieldPropertyItem = {
     }
 };
 
-export const DefaultFieldMenus: AITableFieldMenu[] = [EditFieldPropertyItem];
+export const RemoveFieldItem = {
+    id: 'removeField',
+    name: '删除列',
+    icon: 'trash',
+    exec: (aiTable: AITable, field: Signal<AITableField>) => {
+        const path = AITableQueries.findPath(aiTable, field()) as AIFieldPath;
+        Actions.removeField(aiTable, path);
+    }
+};
+
+export const DefaultFieldMenus: AITableFieldMenu[] = [EditFieldPropertyItem, RemoveFieldItem];

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

@@ -1,4 +1,4 @@
-import { ActionName, AddFieldAction, AIFieldPath, AITable, AITableField } from '../types';
+import { ActionName, AddFieldAction, AIFieldPath, AITable, AITableField, RemoveFieldAction } from '../types';
 
 export function addField(aiTable: AITable, field: AITableField, path: AIFieldPath) {
     const operation: AddFieldAction = {
@@ -9,6 +9,15 @@ export function addField(aiTable: AITable, field: AITableField, path: AIFieldPat
     aiTable.apply(operation);
 }
 
+export function removeField(aiTable: AITable, path: AIFieldPath) {
+    const operation: RemoveFieldAction = {
+        type: ActionName.RemoveField,
+        path
+    };
+    aiTable.apply(operation);
+}
+
 export const FieldActions = {
-    addField
+    addField,
+    removeField
 };

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

@@ -5,28 +5,54 @@ const apply = (aiTable: AITable, records: AITableRecords, fields: AITableFields,
     switch (options.type) {
         case ActionName.UpdateFieldValue: {
             const [recordIndex, fieldIndex] = options.path;
-            const fieldId = aiTable.fields()[fieldIndex].id;
-            records[recordIndex].value[fieldId] = options.newFieldValue;
+            if (fieldIndex > -1 && recordIndex > -1) {
+                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);
+            if (recordIndex > -1) {
+                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
+            if (fieldIndex > -1) {
+                const newField = options.field;
+                fields.splice(fieldIndex, 0, newField);
+                const newRecord = {
+                    [newField.id]: ''
                 };
-            });
+                records.forEach((item) => {
+                    item.value = {
+                        ...item.value,
+                        ...newRecord
+                    };
+                });
+            }
+
+            break;
+        }
+        case ActionName.RemoveField: {
+            const [fieldIndex] = options.path;
+            if (fieldIndex > -1) {
+                const fieldId = aiTable.fields()[fieldIndex].id;
+                fields.splice(fieldIndex, 1);
+                records.forEach((item) => {
+                    delete item.value[fieldId];
+                });
+            }
+            break;
+        }
+        case ActionName.RemoveRecord: {
+            const [recordIndex] = options.path;
+            if (recordIndex > -1) {
+                records.splice(recordIndex, 1);
+            }
+            break;
         }
     }
     return {

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

@@ -1,4 +1,13 @@
-import { ActionName, AddRecordAction, AIRecordPath, UpdateFieldValueAction, AITable, AITableRecord, AIFieldValuePath } from '../types';
+import {
+    ActionName,
+    AddRecordAction,
+    AIRecordPath,
+    UpdateFieldValueAction,
+    AITable,
+    AITableRecord,
+    AIFieldValuePath,
+    RemoveRecordAction
+} from '../types';
 import { AITableQueries } from '../utils';
 
 export function updateFieldValue(aiTable: AITable, value: any, path: AIFieldValuePath) {
@@ -23,7 +32,16 @@ export function addRecord(aiTable: AITable, record: AITableRecord, path: AIRecor
     aiTable.apply(operation);
 }
 
+export function removeRecord(aiTable: AITable, path: AIRecordPath) {
+    const operation: RemoveRecordAction = {
+        type: ActionName.RemoveRecord,
+        path
+    };
+    aiTable.apply(operation);
+}
+
 export const RecordActions = {
     addRecord,
-    updateFieldValue
+    updateFieldValue,
+    removeRecord
 };

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

@@ -11,7 +11,9 @@ export type Path = AIRecordPath | AIFieldPath | AIFieldValuePath;
 export enum ActionName {
     UpdateFieldValue = 'update_field_value',
     AddRecord = 'add_record',
-    AddField = 'add_field'
+    AddField = 'add_field',
+    RemoveField = 'remove_field',
+    RemoveRecord = 'remove_record'
 }
 
 export enum ExecuteType {
@@ -39,4 +41,14 @@ export type AddFieldAction = {
     field: AITableField;
 };
 
-export type AITableAction = UpdateFieldValueAction | AddRecordAction | AddFieldAction;
+export type RemoveFieldAction = {
+    type: ActionName.RemoveField;
+    path: AIFieldPath;
+};
+
+export type RemoveRecordAction = {
+    type: ActionName.RemoveRecord;
+    path: AIRecordPath;
+};
+
+export type AITableAction = UpdateFieldValueAction | AddRecordAction | AddFieldAction | RemoveRecordAction | RemoveFieldAction;

src/app/app.component.ts

@@ -10,7 +10,9 @@ import {
     AITable,
     AIFieldConfig,
     EditFieldPropertyItem,
-    DividerMenuItem
+    DividerMenuItem,
+    RemoveFieldItem,
+    Actions
 } from '@ai-table/grid';
 import { ThyIconRegistry } from 'ngx-tethys/icon';
 import { ThyPopover, ThyPopoverModule } from 'ngx-tethys/popover';
@@ -29,6 +31,7 @@ import { YjsAITable } from './share/yjs-table';
 import applyActionOps from './share/apply-to-yjs';
 import { applyYjsEvents } from './share/apply-to-table';
 import { translateSharedTypeToTable } from './share/utils/translate-to-table';
+import { ThyAction } from 'ngx-tethys/action';
 
 const LOCAL_STORAGE_KEY = 'ai-table-data';
 
@@ -131,7 +134,7 @@ const initValue = {
 @Component({
     selector: 'app-root',
     standalone: true,
-    imports: [RouterOutlet, AITableGrid, ThyPopoverModule, FieldPropertyEditor, ThySelect, FormsModule, NgFor, ThyOption],
+    imports: [RouterOutlet, AITableGrid, ThyPopoverModule, FieldPropertyEditor, ThySelect, FormsModule, NgFor, ThyOption, ThyAction],
     templateUrl: './app.component.html',
     styleUrl: './app.component.scss'
 })
@@ -179,7 +182,9 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
                 exec: (aiTable: AITable, field: Signal<AITableField>) => {},
                 hidden: (aiTable: AITable, field: Signal<AITableField>) => false,
                 disabled: (aiTable: AITable, field: Signal<AITableField>) => false
-            }
+            },
+            DividerMenuItem,
+            RemoveFieldItem
         ]
     };
 
@@ -218,7 +223,6 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
             if (!YjsAITable.isLocal(this.aiTable)) {
                 if (!isInitialized) {
                     const data = translateSharedTypeToTable(this.sharedType!);
-                    console.log(123, data);
                     this.records.set(data.records);
                     this.fields.set(data.fields);
                     isInitialized = true;
@@ -275,6 +279,14 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
         CustomActions.setView(this.aiTable as any, this.activeView(), [0]);
     }
 
+    removeRecord() {
+        const recordIds = [...this.aiTable.selection().selectedRecords.keys()];
+        recordIds.forEach((item) => {
+            const path = this.aiTable.records().findIndex((record) => record.id === item);
+            Actions.removeRecord(this.aiTable, [path]);
+        });
+    }
+
     disconnect() {
         if (this.provider) {
             this.provider.disconnect();