feat(types): adjust field type and record value #WIK-16187 (#21)

worktile · Jul 30, 2024 · 2938add · 2938add
1 parent 024fa5f
commit 2938add
Show file tree

Hide file tree

Showing 17 changed files with 105 additions and 73 deletions.
diff --git a/...-select/single-select-editor.component.ts → ...editors/select/select-editor.component.ts b/...-select/single-select-editor.component.ts → ...editors/select/select-editor.component.ts
@@ -1,5 +1,5 @@
 import { NgForOf, NgIf } from '@angular/common';
-import { ChangeDetectionStrategy, Component, computed } from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, Input } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { ThySelect } from 'ngx-tethys/select';
 import { AbstractEditCellEditor } from '../abstract-cell-editor.component';
@@ -8,7 +8,7 @@ import { ThyIcon } from 'ngx-tethys/icon';
 import { ThyOption } from 'ngx-tethys/shared';
 import { AITableSelectOption, AITableField } from '../../../core';
 
-export interface AITableSingleSelectField extends AITableField {
+export interface AITableSingleSelectField extends AITableField<AITableSelectOption> {
     options: AITableSelectOption[];
 }
 
@@ -24,7 +24,9 @@ export interface AITableSingleSelectField extends AITableField {
     },
     imports: [NgIf, NgForOf, FormsModule, ThySelect, ThyOption, ThyTag, ThyIcon]
 })
-export class SingleSelectCellEditorComponent extends AbstractEditCellEditor<string, AITableSingleSelectField> {
+export class SelectCellEditorComponent extends AbstractEditCellEditor<string, AITableSingleSelectField> {
+    @Input() isMultiple!: boolean;
+
     selectOptions = computed(() => {
         return this.field().options;
     });

diff --git a/packages/grid/src/constants/editor.ts b/packages/grid/src/constants/editor.ts
@@ -1,16 +1,16 @@
 import { AITableFieldType } from '../core';
-import { SingleSelectCellEditorComponent } from '../components/cell-editors/single-select/single-select-editor.component';
 import { TextCellEditorComponent } from '../components/cell-editors/text/text-editor.component';
 import { NumberCellEditorComponent } from '../components/cell-editors/number/number-editor.component';
 import { DateTimeCellEditorComponent } from '../components/cell-editors/date-time/date-time-editor.component';
 import { RatingCellEditorComponent } from '../components/cell-editors/rating/rating-editor.component';
 import { LinkCellEditorComponent } from '../components/cell-editors/link/number-editor.component';
+import { SelectCellEditorComponent } from '../components/cell-editors/select/select-editor.component';
 
-export const GRID_CELL_EDITOR_MAP: Record<AITableFieldType, any> = {
-    [AITableFieldType.Text]: TextCellEditorComponent,
-    [AITableFieldType.SingleSelect]: SingleSelectCellEditorComponent,
-    [AITableFieldType.Number]: NumberCellEditorComponent,
-    [AITableFieldType.DateTime]: DateTimeCellEditorComponent,
-    [AITableFieldType.Rating]: RatingCellEditorComponent,
-    [AITableFieldType.Link]: LinkCellEditorComponent
+export const GRID_CELL_EDITOR_MAP: Partial<Record<AITableFieldType, any>> = {
+    [AITableFieldType.text]: TextCellEditorComponent,
+    [AITableFieldType.select]: SelectCellEditorComponent,
+    [AITableFieldType.number]: NumberCellEditorComponent,
+    [AITableFieldType.date]: DateTimeCellEditorComponent,
+    [AITableFieldType.rate]: RatingCellEditorComponent,
+    [AITableFieldType.link]: LinkCellEditorComponent
 };
diff --git a/packages/grid/src/constants/grid.ts b/packages/grid/src/constants/grid.ts
@@ -5,10 +5,10 @@ export const DEFAULT_COLUMN_WIDTH = 200;
 export const MIN_COLUMN_WIDTH = 80;
 
 export const DBL_CLICK_EDIT_TYPE = [
-    AITableFieldType.Text,
-    AITableFieldType.Number,
-    AITableFieldType.SingleSelect,
-    AITableFieldType.DateTime
+    AITableFieldType.text,
+    AITableFieldType.number,
+    AITableFieldType.select,
+    AITableFieldType.date
 ];
 
 export const RowHeight = {

diff --git a/packages/grid/src/core/action/general.ts b/packages/grid/src/core/action/general.ts
@@ -6,7 +6,7 @@ const apply = (aiTable: AITable, records: AITableRecords, fields: AITableFields,
         case ActionName.UpdateFieldValue: {
             const [recordIndex, fieldIndex] = options.path;
             const fieldId = aiTable.fields()[fieldIndex].id;
-            records[recordIndex].value[fieldId] = options.newFieldValue;
+            records[recordIndex].values[fieldId] = options.newFieldValue;
             break;
         }
         case ActionName.AddRecord: {
@@ -22,8 +22,8 @@ const apply = (aiTable: AITable, records: AITableRecords, fields: AITableFields,
                 [newField.id]: ''
             };
             records.forEach((item) => {
-                item.value = {
-                    ...item.value,
+                item.values = {
+                    ...item.values,
                     ...newRecord
                 };
             });

diff --git a/packages/grid/src/core/constants/field.ts b/packages/grid/src/core/constants/field.ts
@@ -3,37 +3,37 @@ import { helpers } from 'ngx-tethys/util';
 
 export const BasicFields = [
     {
-        type: AITableFieldType.Text,
+        type: AITableFieldType.text,
         name: '文本',
         icon: 'font',
         width: 300
     },
     {
-        type: AITableFieldType.SingleSelect,
+        type: AITableFieldType.select,
         name: '单选',
         icon: 'check-circle',
         width: 200
     },
     {
-        type: AITableFieldType.Number,
+        type: AITableFieldType.number,
         name: '数字',
         icon: 'hashtag',
         width: 200
     },
     {
-        type: AITableFieldType.DateTime,
+        type: AITableFieldType.date,
         name: '日期',
         icon: 'calendar',
         width: 200
     },
     {
-        type: AITableFieldType.Rating,
+        type: AITableFieldType.rate,
         name: '评分',
         icon: 'star-circle',
         width: 200
     },
     {
-        type: AITableFieldType.Link,
+        type: AITableFieldType.link,
         name: '链接',
         icon: 'link-insert',
         width: 300

diff --git a/packages/grid/src/core/types/core.ts b/packages/grid/src/core/types/core.ts
@@ -1,21 +1,19 @@
 import { WritableSignal } from '@angular/core';
 import { AITableAction } from './action';
 import { AITableSelection } from '../../types';
+import { Id } from 'ngx-tethys/types';
 
 export enum AITableFieldType {
-    // NotSupport = 0,
-    Text = 1,
-    Number = 2,
-    SingleSelect = 3,
-    // MultiSelect = 4,
-    DateTime = 5,
-    // Attachment = 6,
-    Link = 7,
-    // Email = 9,
-    // Phone = 10,
-    // Checkbox = 11,
-    Rating = 12
-    // Member = 13
+    text = 'text', // 包含多行文本
+    richText = 'rich_text', // 包含多行文本
+    select = 'select', // 包含单选和多选
+    number = 'number',
+    date = 'date',
+    member = 'member', // 包含单个和多个
+    // cascadeSelect = "cascade_select", // 包含单选和多选，参数复杂后续再进行设计
+    progress = 'progress',
+    rate = 'rate',
+    link = 'link'
 }
 
 export enum AITableStatType {
@@ -45,7 +43,7 @@ export interface AITableSelectOption {
     color?: string;
 }
 
-export interface AITableField {
+export interface AITableField<T = unknown> {
     id: string;
     name: string;
     type: AITableFieldType;
@@ -54,13 +52,38 @@ export interface AITableField {
     hidden?: boolean;
     frozen?: boolean;
     statType?: AITableStatType;
-    [key: string]: AITableSelectOption[] | any;
+    isMultiple?: boolean;
+    [key: string]: T | any;
 }
 
+export type TextFieldValue = string;
+
+export type SelectFieldValue = Id[]; // 数字
+
+export type NumberFieldValue = number;
+
+export type DateFieldValue = { timestamp: number }; // 时间戳
+
+export type MemberFieldValue = Id[];
+
+export type ProgressFieldValue = number; // [0,1]
+
+export type RateFieldValue = 1 | 2 | 3 | 4 | 5;
+
+export type FieldValue =
+    | TextFieldValue
+    | SelectFieldValue
+    | NumberFieldValue
+    | DateFieldValue
+    | MemberFieldValue
+    | ProgressFieldValue
+    | RateFieldValue
+    | any;
+
 export interface AITableRecord {
     id: string;
     checked?: boolean;
-    value: Record<string, any>;
+    values: Record<string, FieldValue>;
 }
 
 export type AITableRecords = AITableRecord[];

diff --git a/packages/grid/src/core/utils/field.ts b/packages/grid/src/core/utils/field.ts
@@ -6,12 +6,12 @@ export function getDefaultFieldValue(type: AITableFieldType) {
     return '';
 }
 
-export function createDefaultFieldName(aiTable: AITable, type: AITableFieldType = AITableFieldType.Text) {
+export function createDefaultFieldName(aiTable: AITable, type: AITableFieldType = AITableFieldType.text) {
     const fields = aiTable.fields();
     const count = fields.filter((item) => item.type === type).length;
     return count === 0 ? FieldsMap[type].name : FieldsMap[type].name + count;
 }
 
-export function createDefaultField(aiTable: AITable, type: AITableFieldType = AITableFieldType.Text) {
+export function createDefaultField(aiTable: AITable, type: AITableFieldType = AITableFieldType.text) {
     return { id: idCreator(), type, name: createDefaultFieldName(aiTable, type) };
 }
diff --git a/packages/grid/src/core/utils/queries.ts b/packages/grid/src/core/utils/queries.ts
@@ -31,6 +31,6 @@ export const AITableQueries = {
         if (!field) {
             throw new Error(`can not find field at path [${path}]`);
         }
-        return aiTable.records()[path[0]].value[field.id];
+        return aiTable.records()[path[0]].values[field.id];
     }
 };
diff --git a/packages/grid/src/core/utils/record.ts b/packages/grid/src/core/utils/record.ts
@@ -5,10 +5,10 @@ import { idCreator } from './id-creator';
 export function getDefaultRecord(fields: AITableFields) {
     const newRow: AITableRecord = {
         id: idCreator(),
-        value: {}
+        values: {}
     };
     fields.map((item) => {
-        newRow.value[item.id] = getDefaultFieldValue(item.type);
+        newRow.values[item.id] = getDefaultFieldValue(item.type);
     });
     return newRow;
 }
diff --git a/packages/grid/src/grid.component.html b/packages/grid/src/grid.component.html
@@ -14,7 +14,14 @@
                 <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:;">
+            <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>
                 </thy-dropdown-menu>
@@ -52,30 +59,30 @@
                     #cell
                 >
                     @switch (field.type) {
-                        @case (AITableFieldType.SingleSelect) {
-                            @if (record.value[field.id] | selectOption: field['options']; as selectedOption) {
+                        @case (AITableFieldType.select) {
+                            @if (!field.isMultiple && record.values[field.id] | selectOption: field['options']; as selectedOption) {
                                 <thy-tag [thyColor]="selectedOption!.color!">{{ selectedOption.name }}</thy-tag>
                             }
                         }
-                        @case (AITableFieldType.DateTime) {
-                            {{ record.value[field.id] | thyDatePickerFormat }}
+                        @case (AITableFieldType.date) {
+                            {{ record.values[field.id] | thyDatePickerFormat }}
                         }
-                        @case (AITableFieldType.Rating) {
-                            <thy-rate [(ngModel)]="record.value[field.id]"></thy-rate>
+                        @case (AITableFieldType.rate) {
+                            <thy-rate [(ngModel)]="record.values[field.id]"></thy-rate>
                         }
-                        @case (AITableFieldType.Link) {
+                        @case (AITableFieldType.link) {
                             <a
                                 class="d-block"
                                 thyStopPropagation
                                 thyFlexibleText
-                                [thyTooltipContent]="record.value[field.id]?.text"
-                                [href]="record.value[field.id]?.url"
+                                [thyTooltipContent]="record.values[field.id]?.text"
+                                [href]="record.values[field.id]?.url"
                                 target="_blank"
-                                >{{ record.value[field.id]?.text }}</a
+                                >{{ record.values[field.id]?.text }}</a
                             >
                         }
                         @default {
-                            <span class="text-truncate"> {{ record.value[field.id] }}</span>
+                            <span class="text-truncate"> {{ record.values[field.id] }}</span>
                         }
                     }
                     <div class="autofill-container"></div>

diff --git a/packages/grid/src/grid.component.ts b/packages/grid/src/grid.component.ts
@@ -161,7 +161,7 @@ export class AITableGrid implements OnInit {
     }
 
     addField(gridColumnBlank: HTMLElement) {
-        const field = signal(createDefaultField(this.aiTable, AITableFieldType.Text));
+        const field = signal(createDefaultField(this.aiTable, AITableFieldType.text));
         this.aiTableGridFieldService.editFieldProperty(gridColumnBlank, this.aiTable, field, false);
     }
 }
diff --git a/packages/grid/src/services/event.service.ts b/packages/grid/src/services/event.service.ts
@@ -41,8 +41,8 @@ export class AITableGridEventService {
 
     private dblClick(event: MouseEvent) {
         const cellDom = (event.target as HTMLElement).closest('.grid-cell') as HTMLElement;
-        const type = cellDom && cellDom.getAttribute('type')!;
-        if (type && DBL_CLICK_EDIT_TYPE.includes(Number(type))) {
+        const type = cellDom && cellDom.getAttribute('type')! as AITableFieldType;
+        if (type && DBL_CLICK_EDIT_TYPE.includes(type)) {
             this.openEdit(cellDom);
         }
     }

diff --git a/src/app/app.component.ts b/src/app/app.component.ts
@@ -36,7 +36,7 @@ const initValue = {
     records: [
         {
             id: 'row-1',
-            value: {
+            values: {
                 'column-1': '文本 1-1',
                 'column-2': '1',
                 'column-3': {
@@ -48,7 +48,7 @@ const initValue = {
         },
         {
             id: 'row-2',
-            value: {
+            values: {
                 'column-1': '文本 2-1',
                 'column-2': '2',
                 'column-3': {},
@@ -57,7 +57,7 @@ const initValue = {
         },
         {
             id: 'row-3',
-            value: {
+            values: {
                 'column-1': '文本 3-1',
                 'column-2': '3',
                 'column-3': {},
@@ -69,12 +69,12 @@ const initValue = {
         {
             id: 'column-1',
             name: '文本',
-            type: AITableFieldType.Text
+            type: AITableFieldType.text
         },
         {
             id: 'column-2',
             name: '单选',
-            type: AITableFieldType.SingleSelect,
+            type: AITableFieldType.select,
             options: [
                 {
                     id: '1',
@@ -96,12 +96,12 @@ const initValue = {
         {
             id: 'column-3',
             name: '链接',
-            type: AITableFieldType.Link
+            type: AITableFieldType.link
         },
         {
             id: 'column-4',
             name: '评分',
-            type: AITableFieldType.Rating
+            type: AITableFieldType.rate
         }
     ]
 };
@@ -112,7 +112,7 @@ const initValue = {
 //     initValue.fields.push({
 //         id: `column-${index}`,
 //         name: "文本",
-//         type: AITableFieldType.Text,
+//         type: AITableFieldType.text,
 //     });
 // }
 // initValue.records = [];