feat(grid): support highlight the cell which match the keywords

worktile · Dec 24, 2024 · b317ca0 · b317ca0
1 parent e6e9dd0
commit b317ca0
Show file tree

Hide file tree

Showing 19 changed files with 186 additions and 5 deletions.
diff --git a/packages/grid/src/constants/colors.ts b/packages/grid/src/constants/colors.ts
@@ -12,6 +12,7 @@ export const Colors = {
     gray80: '#fafafa',
     headSelectedBgColor: '#EAEFFA',
     itemActiveBgColor: '#6698ff1a',
+    itemMatchBgColor: '#ff9f731a',
     waring: '#ffcd5d',
     success: '#73d897'
 };
diff --git a/packages/grid/src/core/types/ai-table.ts b/packages/grid/src/core/types/ai-table.ts
@@ -9,10 +9,11 @@ export interface AITable {
     fields: WritableSignal<AITableFields>;
     context?: RendererContext;
     selection: WritableSignal<AITableSelection>;
+    matchedCells: WritableSignal<string[]>; // [`${recordId}-${fieldId}`]
     recordsMap: Signal<{ [kay: string]: AITableRecord }>;
     fieldsMap: Signal<{ [kay: string]: AITableField }>;
     recordsWillHidden: WritableSignal<string[]>;
-    recordsWillMove: WritableSignal<string[]>
+    recordsWillMove: WritableSignal<string[]>;
 }
 
 export type AIPlugin = (aiTable: AITable) => AITable;

diff --git a/packages/grid/src/core/utils/common.ts b/packages/grid/src/core/utils/common.ts
@@ -10,6 +10,7 @@ export function createAITable(records: WritableSignal<AITableRecords>, fields: W
             selectedFields: new Map(),
             selectedCells: new Map()
         }),
+        matchedCells: signal([]),
         recordsMap: computed(() => {
             return records().reduce(
                 (object, item) => {

diff --git a/packages/grid/src/grid-base.component.ts b/packages/grid/src/grid-base.component.ts
@@ -35,6 +35,7 @@ import { AI_TABLE_GRID_FIELD_SERVICE_MAP, AITableGridFieldService } from './serv
 import { AITableGridSelectionService } from './services/selection.service';
 import { AIFieldConfig, AITableFieldMenuItem, AITableContextMenuItem, AITableReferences } from './types';
 import { AITableFieldPropertyEditor } from './components';
+import { AITableGridMatchCellService } from './services/match-cell.service';
 
 @Component({
     selector: 'ai-table-grid-base',
@@ -59,6 +60,8 @@ export class AITableGridBase implements OnInit {
 
     aiBuildRenderDataFn = input<(aiTable: AITable) => AITableValue>();
 
+    aiKeywords = input<string>();
+
     AITableFieldType = AITableFieldType;
 
     AITableSelectOptionStyle = AITableSelectOptionStyle;
@@ -99,6 +102,7 @@ export class AITableGridBase implements OnInit {
     protected aiTableGridFieldService = inject(AITableGridFieldService);
     protected aiTableGridEventService = inject(AITableGridEventService);
     protected aiTableGridSelectionService = inject(AITableGridSelectionService);
+    protected aiTableGridMatchCellService = inject(AITableGridMatchCellService);
 
     ngOnInit(): void {
         this.initAITable();
@@ -116,6 +120,7 @@ export class AITableGridBase implements OnInit {
     initService() {
         this.aiTableGridEventService.initialize(this.aiTable, this.aiFieldConfig()?.fieldPropertyEditor);
         this.aiTableGridSelectionService.initialize(this.aiTable);
+        this.aiTableGridMatchCellService.initialize(this.aiTable);
         this.aiTableGridEventService.registerEvents(this.elementRef.nativeElement);
         this.aiTableGridFieldService.initAIFieldConfig(this.aiFieldConfig());
         AI_TABLE_GRID_FIELD_SERVICE_MAP.set(this.aiTable, this.aiTableGridFieldService);

diff --git a/packages/grid/src/grid.component.ts b/packages/grid/src/grid.component.ts
@@ -43,6 +43,7 @@ import { AITableGridSelectionService } from './services/selection.service';
 import { AITableMouseDownType, AITableRendererConfig, ScrollActionOptions } from './types';
 import { buildGridLinearRows, getColumnIndicesMap, getDetailByTargetName, handleMouseStyle, isWindows } from './utils';
 import { getMousePosition } from './utils/position';
+import { AITableGridMatchCellService } from './services/match-cell.service';
 
 @Component({
     selector: 'ai-table-grid',
@@ -53,7 +54,7 @@ import { getMousePosition } from './utils/position';
         class: 'ai-table-grid'
     },
     imports: [AITableRenderer],
-    providers: [AITableGridEventService, AITableGridFieldService, AITableGridSelectionService]
+    providers: [AITableGridEventService, AITableGridFieldService, AITableGridSelectionService, AITableGridMatchCellService]
 })
 export class AITableGrid extends AITableGridBase implements OnInit, OnDestroy {
     private viewContainerRef = inject(ViewContainerRef);
@@ -147,6 +148,14 @@ export class AITableGrid extends AITableGridBase implements OnInit, OnDestroy {
                 this.toggleHoverCellEditor();
             }
         });
+        effect(
+            () => {
+                if (this.aiKeywords()) {
+                    this.aiTableGridMatchCellService.findMatchedCells(this.aiKeywords()!, this.aiReferences());
+                }
+            },
+            { allowSignalWrites: true }
+        );
     }
 
     override ngOnInit(): void {

diff --git a/packages/grid/src/renderer/creations/create-cells.ts b/packages/grid/src/renderer/creations/create-cells.ts
@@ -6,7 +6,7 @@ import {
     DEFAULT_FONT_STYLE
 } from '../../constants';
 import { AITable, AITableQueries, RendererContext } from '../../core';
-import { AITableAreaType, AITableCellsDrawerConfig, AITableRender, AITableRowType } from '../../types';
+import { AITableCellsDrawerConfig, AITableRender, AITableRowType } from '../../types';
 import { getCellHorizontalPosition, transformCellValue } from '../../utils';
 import { addRowLayout } from '../drawers/add-row-layout-drawer';
 import { cellDrawer } from '../drawers/cell-drawer';
@@ -85,7 +85,15 @@ export const createCells = (config: AITableCellsDrawerConfig) => {
                     const isSiblingActiveCell = recordId === activeCell?.recordId && fieldId !== activeCell?.fieldId;
                     const isActiveCell = recordId === activeCell?.recordId;
 
-                    if (isCheckedRow || isSelected || isSiblingActiveCell) {
+                    let matchedCellsMap: { [key: string]: boolean } = {};
+                    aiTable.matchedCells().forEach((key) => {
+                        matchedCellsMap[key] = true;
+                    });
+                    const isMatchedCell = matchedCellsMap[`${recordId}-${fieldId}`];
+
+                    if (isMatchedCell) {
+                        background = colors.itemMatchBgColor;
+                    } else if (isCheckedRow || isSelected || isSiblingActiveCell) {
                         background = colors.itemActiveBgColor;
                     } else if (isHoverRow && !isActiveCell) {
                         background = colors.gray80;

diff --git a/packages/grid/src/services/index.ts b/packages/grid/src/services/index.ts
@@ -1,3 +1,4 @@
 export * from './event.service';
 export * from './field.service';
 export * from './selection.service';
+export * from './match-cell.service';
diff --git a/packages/grid/src/services/match-cell.service.ts b/packages/grid/src/services/match-cell.service.ts
@@ -0,0 +1,38 @@
+import { Injectable } from '@angular/core';
+import { AITable, AITableField, AITableQueries } from '../core';
+import { AITableReferences } from '../types';
+import { transformCellValue, ViewOperationMap } from '../utils';
+
+@Injectable()
+export class AITableGridMatchCellService {
+    aiTable!: AITable;
+
+    initialize(aiTable: AITable) {
+        this.aiTable = aiTable;
+    }
+
+    findMatchedCells(keywords: string, references: AITableReferences) {
+        let matchedCells: string[] = [];
+        this.aiTable.records().forEach((record) => {
+            this.aiTable.fields().forEach((field) => {
+                if (this.isCellMatchKeywords(this.aiTable, field, record._id, keywords, references)) {
+                    matchedCells.push(`${record._id}-${field._id}`);
+                }
+            });
+        });
+        this.aiTable.matchedCells.set([...matchedCells]);
+    }
+
+    private isCellMatchKeywords(aiTable: AITable, field: AITableField, recordId: string, keywords: string, references: AITableReferences) {
+        const cellValue = AITableQueries.getFieldValue(aiTable, [recordId, field._id]);
+        const transformValue = transformCellValue(aiTable, field, cellValue);
+        const fieldMethod = ViewOperationMap[field.type];
+        let cellFullText: string[] = fieldMethod.cellFullText(transformValue, field, references);
+
+        try {
+            return keywords && cellFullText.length && cellFullText.some((item) => item.toLowerCase().includes(keywords.toLowerCase()));
+        } catch (error) {
+            return false;
+        }
+    }
+}
diff --git a/packages/grid/src/utils/common.ts b/packages/grid/src/utils/common.ts
@@ -1,3 +1,4 @@
+import { isArray, isEmpty as isArrayEmpty, isObject, isUndefinedOrNull } from 'ngx-tethys/util';
 import { AI_TABLE_BLANK } from '../constants';
 import { AITableTargetNameDetail, AITableTargetNameOptions } from '../types';
 
@@ -51,3 +52,15 @@ export const castToString = (value: string): string | null => {
     }
     return typeof value !== 'string' ? String(value) : value;
 };
+
+export function isEmpty(value: any) {
+    if (isArray(value)) {
+        return isArrayEmpty(value);
+    }
+
+    if (isObject(value)) {
+        return Reflect.ownKeys(value).length === 0;
+    }
+
+    return isUndefinedOrNull(value) || value === '';
+}
diff --git a/packages/grid/src/utils/field/field.ts b/packages/grid/src/utils/field/field.ts
@@ -0,0 +1,5 @@
+import { AITableField, AITableReferences } from '../../index';
+
+export abstract class Field {
+    abstract cellFullText(transformValue: any, field: AITableField, references?: AITableReferences): string[];
+}
diff --git a/packages/grid/src/utils/field/index.ts b/packages/grid/src/utils/field/index.ts
@@ -0,0 +1,22 @@
+import { AITableFieldType } from '../../index';
+import { Field } from './field';
+import { LinkField } from './link';
+import { MemberField } from './member';
+import { SelectField } from './select';
+import { TextField } from './text';
+
+export const ViewOperationMap: Record<AITableFieldType, Field> = {
+    [AITableFieldType.text]: new TextField(),
+    [AITableFieldType.richText]: new TextField(),
+    [AITableFieldType.select]: new SelectField(),
+    [AITableFieldType.date]: new TextField(),
+    [AITableFieldType.createdAt]: new TextField(),
+    [AITableFieldType.updatedAt]: new TextField(),
+    [AITableFieldType.number]: new TextField(),
+    [AITableFieldType.rate]: new TextField(),
+    [AITableFieldType.link]: new LinkField(),
+    [AITableFieldType.member]: new MemberField(),
+    [AITableFieldType.progress]: new TextField(),
+    [AITableFieldType.createdBy]: new MemberField(),
+    [AITableFieldType.updatedBy]: new MemberField()
+};
diff --git a/packages/grid/src/utils/field/link.ts b/packages/grid/src/utils/field/link.ts
@@ -0,0 +1,13 @@
+import { AITableField, LinkFieldValue } from '../../index';
+import { Field } from './field';
+import { isEmpty } from '../common';
+
+export class LinkField extends Field {
+    override cellFullText(transformValue: LinkFieldValue, field: AITableField): string[] {
+        let fullText: string[] = [];
+        if (!isEmpty(transformValue?.text)) {
+            fullText.push(transformValue.text);
+        }
+        return fullText;
+    }
+}
diff --git a/packages/grid/src/utils/field/member.ts b/packages/grid/src/utils/field/member.ts
@@ -0,0 +1,20 @@
+import { AITableField, AITableReferences } from '../../index';
+import { Field } from './field';
+
+export class MemberField extends Field {
+    override cellFullText(transformValue: string[], field: AITableField, references?: AITableReferences): string[] {
+        let fullText: string[] = [];
+        if (transformValue?.length && references) {
+            for (let index = 0; index < transformValue.length; index++) {
+                const userInfo = references?.members[transformValue[index]];
+                if (!userInfo) {
+                    continue;
+                }
+                if (userInfo.display_name) {
+                    fullText.push(userInfo.display_name);
+                }
+            }
+        }
+        return fullText;
+    }
+}
diff --git a/packages/grid/src/utils/field/progress.ts b/packages/grid/src/utils/field/progress.ts
@@ -0,0 +1,9 @@
+import { AITableField } from '../../index';
+import { Field } from './field';
+
+export class ProgressField extends Field {
+    override cellFullText(transformValue: number, field: AITableField): string[] {
+        const fullText = `${transformValue}%`;
+        return [fullText];
+    }
+}
diff --git a/packages/grid/src/utils/field/select.ts b/packages/grid/src/utils/field/select.ts
@@ -0,0 +1,17 @@
+import { Field } from './field';
+import { AITableField, AITableSelectField } from '../../index';
+
+export class SelectField extends Field {
+    override cellFullText(transformValue: string[], field: AITableField): string[] {
+        let cellText: string[] = [];
+        if (transformValue && Array.isArray(transformValue) && transformValue.length) {
+            transformValue.forEach((optionId) => {
+                const item = (field as AITableSelectField).settings?.options?.find((option) => option._id === optionId);
+                if (item?.text) {
+                    cellText.push(item.text);
+                }
+            });
+        }
+        return cellText;
+    }
+}
diff --git a/packages/grid/src/utils/field/text.ts b/packages/grid/src/utils/field/text.ts
@@ -0,0 +1,12 @@
+import { AITableField, AITableReferences, isEmpty } from '../../index';
+import { Field } from './field';
+
+export class TextField extends Field {
+    override cellFullText(transformValue: any, field: AITableField, references?: AITableReferences): string[] {
+        let fullText: string[] = [];
+        if (!isEmpty(transformValue)) {
+            fullText.push(String(transformValue));
+        }
+        return fullText;
+    }
+}
diff --git a/packages/grid/src/utils/index.ts b/packages/grid/src/utils/index.ts
@@ -9,3 +9,4 @@ export * from './position';
 export * from './style';
 export * from './text-measure';
 export * from './visible-range';
+export * from './field';
diff --git a/packages/state/src/types/view.ts b/packages/state/src/types/view.ts
@@ -49,7 +49,7 @@ export enum AITableFilterOperation {
     notContain = 'not_contain'
 }
 
-export type ViewSettings = AITableFilterConditions & AITableSortOptions;
+export type ViewSettings = AITableSearchOptions & AITableFilterConditions & AITableSortOptions;
 
 export interface AITableView {
     _id: string;
@@ -78,4 +78,8 @@ export interface AITableSortOptions {
     }[];
 }
 
+export interface AITableSearchOptions {
+    keywords?: string;
+}
+
 export type AITableViews = AITableView[];
diff --git a/src/app/component/common/content/content.component.html b/src/app/component/common/content/content.component.html
@@ -33,6 +33,7 @@
                     [(aiRecords)]="tableService.records"
                     [(aiFields)]="tableService.fields"
                     [aiFieldConfig]="aiFieldConfig()"
+                    [aiKeywords]="tableService.keywords()"
                     [aiPlugins]="plugins"
                     [aiReferences]="references()"
                     (aiAddRecord)="addRecord($event)"