feat(grid): support display rating and link field #WIK-16072 (#5)

worktile · Jul 15, 2024 · eaf0172 · eaf0172
1 parent 090cd8a
commit eaf0172
Show file tree

Hide file tree

Showing 9 changed files with 107 additions and 8 deletions.
diff --git a/.changeset/nervous-eels-hear.md b/.changeset/nervous-eels-hear.md
@@ -0,0 +1,5 @@
+---
+'@ai-table/grid': patch
+---
+
+support display rating and link field
diff --git a/packages/grid/src/components/cell-editors/link/number-editor.component.ts b/packages/grid/src/components/cell-editors/link/number-editor.component.ts
@@ -0,0 +1,19 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { ThyInputNumber } from 'ngx-tethys/input-number';
+import { ThyAutofocusDirective, ThyEnterDirective } from 'ngx-tethys/shared';
+import { AbstractEditCellEditor } from '../abstract-cell-editor.component';
+
+@Component({
+    selector: 'link-cell-editor',
+    template: ``,
+    standalone: true,
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    imports: [FormsModule, ThyAutofocusDirective, ThyEnterDirective, ThyInputNumber]
+})
+export class LinkCellEditorComponent extends AbstractEditCellEditor<number> {
+    updateValue() {
+        this.updateFieldValue();
+        this.closePopover();
+    }
+}
diff --git a/packages/grid/src/components/cell-editors/rating/rating-editor.component.ts b/packages/grid/src/components/cell-editors/rating/rating-editor.component.ts
@@ -0,0 +1,19 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { AbstractEditCellEditor } from '../abstract-cell-editor.component';
+import { ThyRate } from 'ngx-tethys/rate';
+import { ThyTooltipModule } from 'ngx-tethys/tooltip';
+
+@Component({
+    selector: 'rating-cell-editor',
+    template: ` <thy-rate [(ngModel)]="modelValue" (ngModelChange)="updateValue()"></thy-rate> `,
+    standalone: true,
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    imports: [FormsModule, ThyRate, ThyTooltipModule]
+})
+export class RatingCellEditorComponent extends AbstractEditCellEditor<number> {
+    updateValue() {
+        this.updateFieldValue();
+        this.closePopover();
+    }
+}
diff --git a/packages/grid/src/constants/editor.ts b/packages/grid/src/constants/editor.ts
@@ -3,10 +3,14 @@ import { SingleSelectCellEditorComponent } from '../components/cell-editors/sing
 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';
 
 export const GRID_CELL_EDITOR_MAP: Record<AITableFieldType, any> = {
     [AITableFieldType.Text]: TextCellEditorComponent,
     [AITableFieldType.SingleSelect]: SingleSelectCellEditorComponent,
     [AITableFieldType.Number]: NumberCellEditorComponent,
-    [AITableFieldType.DateTime]: DateTimeCellEditorComponent
+    [AITableFieldType.DateTime]: DateTimeCellEditorComponent,
+    [AITableFieldType.Rating]: RatingCellEditorComponent,
+    [AITableFieldType.Link]: LinkCellEditorComponent
 };
diff --git a/packages/grid/src/core/constants/field.ts b/packages/grid/src/core/constants/field.ts
@@ -21,6 +21,16 @@ export const BasicFieldTypes = [
         type: AITableFieldType.DateTime,
         name: '日期',
         icon: 'calendar'
+    },
+    {
+        type: AITableFieldType.Rating,
+        name: '评分',
+        icon: 'star-circle'
+    },
+    {
+        type: AITableFieldType.Link,
+        name: '链接',
+        icon: 'link-insert'
     }
 ];
 

diff --git a/packages/grid/src/core/types/core.ts b/packages/grid/src/core/types/core.ts
@@ -7,13 +7,13 @@ export enum AITableFieldType {
     Number = 2,
     SingleSelect = 3,
     // MultiSelect = 4,
-    DateTime = 5
+    DateTime = 5,
     // Attachment = 6,
-    // Link = 7,
+    Link = 7,
     // Email = 9,
     // Phone = 10,
     // Checkbox = 11,
-    // Rating = 12,
+    Rating = 12
     // Member = 13
 }
 

diff --git a/packages/grid/src/grid.component.html b/packages/grid/src/grid.component.html
@@ -24,6 +24,20 @@
                         @case (AITableFieldType.DateTime) {
                             {{ record.value[field.id] | thyDatePickerFormat }}
                         }
+                        @case (AITableFieldType.Rating) {
+                            <thy-rate [(ngModel)]="record.value[field.id]"></thy-rate>
+                        }
+                        @case (AITableFieldType.Link) {
+                            <a
+                                class="d-block pl-4 pr-4"
+                                thyStopPropagation
+                                thyFlexibleText
+                                [thyTooltipContent]="record.value[field.id]?.text"
+                                [href]="record.value[field.id]?.url"
+                                target="_blank"
+                                >{{ record.value[field.id]?.text }}</a
+                            >
+                        }
                         @default {
                             {{ record.value[field.id] }}
                         }

diff --git a/packages/grid/src/grid.component.ts b/packages/grid/src/grid.component.ts
@@ -21,6 +21,12 @@ import {
 import { ThyIcon } from 'ngx-tethys/icon';
 import { AITableGridEventService } from './services/event.service';
 import { FieldPropertyEditorComponent } from './components/field-property-editor/field-property-editor.component';
+import { ThyDatePickerFormatPipe } from 'ngx-tethys/date-picker';
+import { ThyRate } from 'ngx-tethys/rate';
+import { FormsModule } from '@angular/forms';
+import { ThyFlexibleText } from 'ngx-tethys/flexible-text';
+import { ThyTooltipModule, ThyTooltipService } from 'ngx-tethys/tooltip';
+import { ThyStopPropagationDirective } from 'ngx-tethys/shared';
 
 @Component({
     selector: 'ai-table-grid',
@@ -35,13 +41,19 @@ import { FieldPropertyEditorComponent } from './components/field-property-editor
         NgClass,
         NgComponentOutlet,
         CommonModule,
+        FormsModule,
         SelectOptionPipe,
         ThyTag,
         ThyPopoverModule,
         ThyIcon,
-        FieldPropertyEditorComponent
+        ThyRate,
+        FieldPropertyEditorComponent,
+        ThyDatePickerFormatPipe,
+        ThyTooltipModule,
+        ThyFlexibleText,
+        ThyStopPropagationDirective
     ],
-    providers: [AITableGridEventService]
+    providers: [ThyTooltipService, AITableGridEventService]
 })
 export class AITableGridComponent implements OnInit {
     aiRecords = model.required<AITableRecords>();

diff --git a/src/app/app.component.ts b/src/app/app.component.ts
@@ -12,14 +12,20 @@ const initValue = {
             id: 'row-1',
             value: {
                 'column-1': '文本 1-1',
-                'column-2': '1'
+                'column-2': '1',
+                'column-3': {
+                    url: 'https://www.baidu.com',
+                    text: '百度链接'
+                },
+                'column-4': 3
             }
         },
         {
             id: 'row-2',
             value: {
                 'column-1': '文本 2-1',
-                'column-2': '2'
+                'column-2': '2',
+                'column-4': 1
             }
         },
         {
@@ -57,6 +63,16 @@ const initValue = {
                     color: '#73d897'
                 }
             ]
+        },
+        {
+            id: 'column-3',
+            name: '链接',
+            type: AITableFieldType.Link
+        },
+        {
+            id: 'column-4',
+            name: '评分',
+            type: AITableFieldType.Rating
         }
     ]
 };