feat(core): add set_field action #WIK-16194

packages/grid/src/components/field-menu/field-menu.component.ts

@@ -1,6 +1,6 @@
-import { Component, ChangeDetectionStrategy, Input, ElementRef, signal } from '@angular/core';
+import { Component, ChangeDetectionStrategy, Input, ElementRef, signal, Signal } from '@angular/core';
 import { AITableFieldMenu } from '../../types/field';
-import { AITableField, AITable } from '../../core';
+import { AITable, AITableField } from '../../core';
 import {
     ThyDropdownMenuItemDirective,
     ThyDropdownMenuItemNameDirective,
@@ -9,6 +9,7 @@ import {
 } from 'ngx-tethys/dropdown';
 import { ThyIcon } from 'ngx-tethys/icon';
 import { ThyDivider } from 'ngx-tethys/divider';
+import { getRecordOrField } from '../../utils';
 
 @Component({
     selector: 'field-menu',
@@ -25,7 +26,7 @@ import { ThyDivider } from 'ngx-tethys/divider';
     ]
 })
 export class FieldMenu {
-    @Input({ required: true }) field!: AITableField;
+    @Input({ required: true }) fieldId!: string;
 
     @Input({ required: true }) aiTable!: AITable;
 
@@ -34,7 +35,7 @@ export class FieldMenu {
     @Input() origin!: HTMLElement | ElementRef<any>;
 
     execute(menu: AITableFieldMenu) {
-        const field = signal({ ...this.field });
+        const field = getRecordOrField(this.aiTable.fields, this.fieldId) as Signal<AITableField>;
         menu.exec && menu.exec(this.aiTable, field, this.origin);
     }
 }

packages/grid/src/components/field-property-editor/field-property-editor.component.html

@@ -3,7 +3,7 @@
         <thy-input-group>
             <input
                 thyInput
-                thyAutofocus
+                [thyAutofocus]="true"
                 name="fieldName"
                 [maxlength]="fieldMaxLength"
                 [(ngModel)]="aiField().name"

packages/grid/src/components/field-property-editor/field-property-editor.component.ts

@@ -16,6 +16,7 @@ import { ThyIcon } from 'ngx-tethys/icon';
 import { ThyPopoverRef } from 'ngx-tethys/popover';
 import { ThyListItem } from 'ngx-tethys/list';
 import { of } from 'rxjs';
+import { ThyAutofocusDirective } from 'ngx-tethys/shared';
 
 @Component({
     selector: 'ai-table-field-property-editor',
@@ -41,7 +42,8 @@ import { of } from 'rxjs';
         ThyButton,
         ThyFormModule,
         ThyListItem,
-        NgTemplateOutlet
+        NgTemplateOutlet,
+        ThyAutofocusDirective
     ],
     host: {
         class: 'field-property-editor d-block pl-5 pr-5 pb-5 pt-4'
@@ -95,7 +97,8 @@ export class AITableFieldPropertyEditor {
 
     editFieldProperty() {
         if (this.isUpdate) {
-            //TODO: updateField
+            const path = this.aiTable.fields().findIndex((item) => item.id === this.aiField().id);
+            Actions.setField(this.aiTable, this.aiField(), [path]);
         } else {
             Actions.addField(this.aiTable, this.aiField(), [this.aiTable.fields().length]);
         }

packages/grid/src/constants/field.ts

@@ -1,7 +1,7 @@
 import { AITable, AITableField } 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, Signal, WritableSignal } from '@angular/core';
 
 export const DividerMenuItem = {
     id: 'divider'
@@ -11,9 +11,10 @@ export const EditFieldPropertyItem = {
     id: 'editFieldProperty',
     name: '编辑列',
     icon: 'edit',
-    exec: (aiTable: AITable, field: WritableSignal<AITableField>, origin?: HTMLElement | ElementRef<any>) => {
+    exec: (aiTable: AITable, field: Signal<AITableField>, origin?: HTMLElement | ElementRef<any>) => {
         const fieldService = AI_TABLE_GRID_FIELD_SERVICE_MAP.get(aiTable);
-        origin && fieldService?.editFieldProperty(origin, aiTable, field, true);
+        const copyField: WritableSignal<AITableField> = signal(JSON.parse(JSON.stringify(field())));
+        origin && fieldService?.editFieldProperty(origin, aiTable, copyField, true);
     }
 };
 

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

@@ -1,4 +1,5 @@
-import { ActionName, AddFieldAction, AIFieldPath, AITable, AITableField } from '../types';
+import { ActionName, AddFieldAction, AIFieldPath, AITable, AITableField, SetFieldAction } from '../types';
+import { AITableQueries } from '../utils';
 
 export function addField(aiTable: AITable, field: AITableField, path: AIFieldPath) {
     const operation: AddFieldAction = {
@@ -9,6 +10,33 @@ export function addField(aiTable: AITable, field: AITableField, path: AIFieldPat
     aiTable.apply(operation);
 }
 
+export function setField(aiTable: AITable, value: Partial<AITableField>, path: AIFieldPath) {
+    const node = AITableQueries.getField(aiTable, path);
+    if (node) {
+        const field: Partial<AITableField> = {};
+        const newField: Partial<AITableField> = {};
+        for (const k in value) {
+            if (node[k] !== value[k]) {
+                if (node.hasOwnProperty(k)) {
+                    field[k] = node[k];
+                }
+                newField[k] = value[k];
+            }
+        }
+
+        const operation: SetFieldAction = {
+            type: ActionName.SetField,
+            field,
+            newField,
+            path
+        };
+
+        aiTable.apply(operation);
+    }
+}
+
+
 export const FieldActions = {
-    addField
+    addField,
+    setField
 };

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

@@ -27,6 +27,18 @@ const apply = (aiTable: AITable, records: AITableRecords, fields: AITableFields,
                     ...newRecord
                 };
             });
+            break;
+        }
+
+        case ActionName.SetField: {
+            const [fieldIndex] = options.path;
+            if (fieldIndex > -1) {
+                fields.splice(fieldIndex, 1, {
+                    ...fields[fieldIndex],
+                    ...options.newField
+                });
+            }
+            break;
         }
     }
     return {

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

@@ -11,7 +11,8 @@ export type Path = AIRecordPath | AIFieldPath | AIFieldValuePath;
 export enum ActionName {
     UpdateFieldValue = 'update_field_value',
     AddRecord = 'add_record',
-    AddField = 'add_field'
+    AddField = 'add_field',
+    SetField = 'set_field'
 }
 
 export enum ExecuteType {
@@ -39,4 +40,15 @@ export type AddFieldAction = {
     field: AITableField;
 };
 
-export type AITableAction = UpdateFieldValueAction | AddRecordAction | AddFieldAction;
+export type SetFieldAction = {
+    type: ActionName.SetField;
+    path: AIFieldPath;
+    field: Partial<AITableField>;
+    newField: Partial<AITableField>;
+};
+
+export type AITableAction =
+    | UpdateFieldValueAction
+    | AddRecordAction
+    | AddFieldAction
+    | SetFieldAction;

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

@@ -32,5 +32,12 @@ export const AITableQueries = {
             throw new Error(`can not find field at path [${path}]`);
         }
         return aiTable.records()[path[0]].value[field.id];
+    },
+
+    getField(aiTable: AITable, path: AIFieldPath): AITableField {
+        if (!aiTable) {
+            throw new Error(`aiTable does not exist [${path}]`);
+        }
+        return aiTable.fields()[path[0]];
     }
 };

packages/grid/src/grid.component.html

@@ -10,13 +10,13 @@
             [ngClass]="{ highlight: aiTable.selection().selectedFields.has(field.id) }"
             [ngStyle]="{ width: field.width + 'px' }"
         >
-            <span>
+            <span class="text-truncate">
                 <thy-icon [thyIconName]="field.icon!" class="mr-2 text-muted"></thy-icon>
                 <span>{{ field.name }}</span>
             </span>
             <a class="grid-field-action" thyAction thyActiveClass="active" thyIcon="more-vertical" [thyDropdown]="fieldMenu" href="javascript:;">
                 <thy-dropdown-menu #fieldMenu>
-                    <field-menu [origin]="fieldAction" [field]="field" [aiTable]="aiTable" [fieldMenus]="fieldMenus"></field-menu>
+                    <field-menu [origin]="fieldAction" [fieldId]="field.id" [aiTable]="aiTable" [fieldMenus]="fieldMenus"></field-menu>
                 </thy-dropdown-menu>
             </a>
         </div>

packages/grid/src/types/field.ts

@@ -5,7 +5,7 @@ export interface AITableFieldMenu {
     id: string;
     name?: string;
     icon?: string;
-    exec?: (aiTable: AITable, field: WritableSignal<AITableField>, origin?: HTMLElement | ElementRef<any>) => void;
+    exec?: (aiTable: AITable, field: Signal<AITableField>, origin?: HTMLElement | ElementRef<any>) => void;
     hidden?: (aiTable: AITable, field: Signal<AITableField>) => boolean;
     disabled?: (aiTable: AITable, field: Signal<AITableField>) => boolean;
 }