✨feat(grid): support progress editor

- support hover pop-up editing component
worktile · Jul 31, 2024 · 70df9d2 · 70df9d2
1 parent bd7bf6b
commit 70df9d2
Show file tree

Hide file tree

Showing 19 changed files with 265 additions and 103 deletions.
diff --git a/package.json b/package.json
@@ -38,7 +38,7 @@
         "@tethys/icons": "^1.4.62",
         "date-fns": "^3.6.0",
         "immer": "^10.0.3",
-        "ngx-tethys": "^17.0.8",
+        "ngx-tethys": "^17.0.14",
         "npm": "^10.8.1",
         "rxjs": "~7.8.0",
         "tslib": "^2.6.3",

diff --git a/packages/grid/src/components/cell-editors/abstract-cell-editor.component.ts b/packages/grid/src/components/cell-editors/abstract-cell-editor.component.ts
@@ -32,6 +32,6 @@ export abstract class AbstractEditCellEditor<TValue, TFieldType extends AITableF
     }
 
     closePopover() {
-        this.thyPopoverRef.close();
+        this.thyPopoverRef?.close();
     }
 }
diff --git a/packages/grid/src/components/cell-editors/progress/progress-editor.component.scss b/packages/grid/src/components/cell-editors/progress/progress-editor.component.scss
@@ -0,0 +1,21 @@
+@use 'ngx-tethys/styles/variables.scss';
+
+.progress-editor {
+    display: flex;
+    align-items: center;
+    height: 100%;
+    padding: 0 12px;
+
+    .thy-slider {
+        flex: 1;
+        padding: 2px 0;
+    }
+    .progress-text {
+        display: inline-block;
+        margin-left: 8px;
+        width: 40px;
+        white-space: nowrap;
+        font-size: 0.875rem;
+        flex-shrink: 0;
+    }
+}
diff --git a/packages/grid/src/components/cell-editors/progress/progress-editor.component.ts b/packages/grid/src/components/cell-editors/progress/progress-editor.component.ts
@@ -0,0 +1,59 @@
+import { ChangeDetectionStrategy, Component, HostListener, OnInit } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { ThySlider, ThySliderSize, ThySliderType } from 'ngx-tethys/slider';
+import { AbstractEditCellEditor } from '../abstract-cell-editor.component';
+
+export interface AITableProgressConfig {
+    max?: number;
+    min?: number;
+    step?: number;
+    progressType?: ThySliderType;
+    suffix?: string;
+    size?: ThySliderSize;
+}
+
+@Component({
+    selector: 'progress-editor',
+    template: `
+        <thy-slider
+            [(ngModel)]="modelValue"
+            [thyMax]="config?.max || 100"
+            [thyMin]="config?.min || 0"
+            [thyStep]="config?.step || 1"
+            [thyType]="config?.progressType || 'success'"
+            [thySize]="config?.size || 'md'"
+            (ngModelChange)="updateValue($event)"
+        ></thy-slider>
+        <span class="progress-text">{{ modelValue }}{{ config?.suffix || '%' }}</span>
+    `,
+    standalone: true,
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    imports: [FormsModule, ThySlider],
+    host: {
+        class: 'progress-editor'
+    }
+})
+export class ProgressEditorComponent extends AbstractEditCellEditor<number> implements OnInit {
+    config: Partial<AITableProgressConfig | undefined> = {
+        max: 100,
+        min: 0,
+        step: 1,
+        progressType: 'success',
+        suffix: '%',
+        size: 'md'
+    };
+
+    @HostListener('mousedown', ['$event'])
+    mousedownHandler(event: Event) {
+        event.preventDefault();
+    }
+
+    constructor() {
+        super();
+        console.log('ProgressEditorComponent');
+    }
+
+    updateValue(value: number) {
+        this.updateFieldValue();
+    }
+}
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
@@ -1,15 +1,14 @@
 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';
+import { AbstractEditCellEditor } from '../abstract-cell-editor.component';
 
 @Component({
     selector: 'rating-cell-editor',
     template: ` <thy-rate [(ngModel)]="modelValue" (ngModelChange)="updateValue()"></thy-rate> `,
     standalone: true,
     changeDetection: ChangeDetectionStrategy.OnPush,
-    imports: [FormsModule, ThyRate, ThyTooltipModule]
+    imports: [FormsModule, ThyRate]
 })
 export class RatingCellEditorComponent extends AbstractEditCellEditor<number> {
     updateValue() {

diff --git a/packages/grid/src/components/cell-editors/text/text-editor.component.ts b/packages/grid/src/components/cell-editors/text/text-editor.component.ts
@@ -7,14 +7,9 @@ import { AbstractEditCellEditor } from '../abstract-cell-editor.component';
 
 @Component({
     selector: 'text-cell-editor',
-    template: `<input
-        thyInput
-        [thyAutofocus]="true"
-        [(ngModel)]="modelValue"
-        (thyEnter)="updateValue()"
-        (blur)="updateValue()"
-        placeholder=""
-    /> `,
+    template: `
+        <input thyInput placeholder="" [thyAutofocus]="true" [(ngModel)]="modelValue" (thyEnter)="updateValue()" (blur)="updateValue()" />
+    `,
     standalone: true,
     changeDetection: ChangeDetectionStrategy.OnPush,
     imports: [NgIf, FormsModule, ThyAutofocusDirective, ThyInputDirective, ThyEnterDirective]

diff --git a/packages/grid/src/components/index.ts b/packages/grid/src/components/index.ts
@@ -1 +1,7 @@
-export * from './field-property-editor/field-property-editor.component'
+export * from './cell-editors/date-time/date-time-editor.component';
+export * from './cell-editors/link/number-editor.component';
+export * from './cell-editors/number/number-editor.component';
+export * from './cell-editors/progress/progress-editor.component';
+export * from './cell-editors/rating/rating-editor.component';
+export * from './cell-editors/text/text-editor.component';
+export * from './field-property-editor/field-property-editor.component';
diff --git a/packages/grid/src/constants/editor.ts b/packages/grid/src/constants/editor.ts
@@ -1,16 +1,21 @@
-import { AITableFieldType } from '../core';
-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 {
+    DateTimeCellEditorComponent,
+    LinkCellEditorComponent,
+    ProgressEditorComponent,
+    RatingCellEditorComponent,
+    TextCellEditorComponent
+} from '../components';
 import { SelectCellEditorComponent } from '../components/cell-editors/select/select-editor.component';
+import { AITableFieldType } from '../core';
 
-export const GRID_CELL_EDITOR_MAP: Partial<Record<AITableFieldType, any>> = {
+export const GRID_CELL_EDITOR_MAP: Record<AITableFieldType, any> = {
     [AITableFieldType.text]: TextCellEditorComponent,
+    [AITableFieldType.richText]: TextCellEditorComponent,
     [AITableFieldType.select]: SelectCellEditorComponent,
-    [AITableFieldType.number]: NumberCellEditorComponent,
+    [AITableFieldType.number]: null,
+    [AITableFieldType.member]: null,
     [AITableFieldType.date]: DateTimeCellEditorComponent,
     [AITableFieldType.rate]: RatingCellEditorComponent,
-    [AITableFieldType.link]: LinkCellEditorComponent
+    [AITableFieldType.link]: LinkCellEditorComponent,
+    [AITableFieldType.progress]: ProgressEditorComponent
 };
diff --git a/packages/grid/src/constants/grid.ts b/packages/grid/src/constants/grid.ts
@@ -1,15 +1,12 @@
-import { AITable, AITableFieldType } from '../core';
+import { AITableFieldType } from '../core';
 
 export const DEFAULT_COLUMN_WIDTH = 200;
 
 export const MIN_COLUMN_WIDTH = 80;
 
-export const DBL_CLICK_EDIT_TYPE = [
-    AITableFieldType.text,
-    AITableFieldType.number,
-    AITableFieldType.select,
-    AITableFieldType.date
-];
+export const DBL_CLICK_EDIT_TYPE = [AITableFieldType.text, AITableFieldType.number, AITableFieldType.select, AITableFieldType.date];
+
+export const MOUSEOVER_EDIT_TYPE = [AITableFieldType.progress];
 
 export const RowHeight = {
     Short: 32,

diff --git a/packages/grid/src/core/constants/field.ts b/packages/grid/src/core/constants/field.ts
@@ -1,5 +1,5 @@
-import { AITableFieldInfo, AITableFieldType } from '../types';
 import { helpers } from 'ngx-tethys/util';
+import { AITableFieldInfo, AITableFieldType } from '../types';
 
 export const BasicFields = [
     {
@@ -37,6 +37,12 @@ export const BasicFields = [
         name: '链接',
         icon: 'link-insert',
         width: 300
+    },
+    {
+        type: AITableFieldType.progress,
+        name: '进度',
+        icon: 'progress',
+        width: 200
     }
 ];
 

diff --git a/packages/grid/src/core/types/core.ts b/packages/grid/src/core/types/core.ts
@@ -1,7 +1,7 @@
 import { WritableSignal } from '@angular/core';
-import { AITableAction } from './action';
-import { AITableSelection } from '../../types';
 import { Id } from 'ngx-tethys/types';
+import { AITableSelection } from '../../types';
+import { AITableAction } from './action';
 
 export enum AITableFieldType {
     text = 'text', // 包含多行文本

diff --git a/packages/grid/src/grid.component.html b/packages/grid/src/grid.component.html
@@ -47,6 +47,7 @@
             </div>
             @for (field of gridData().fields; track $index) {
                 <div
+                    #cell
                     class="grid-cell"
                     [ngClass]="{
                         highlight: aiTable.selection().selectedCells.has(record.id) || aiTable.selection().selectedFields.has(field.id),
@@ -56,7 +57,6 @@
                     [attr.fieldId]="[field.id]"
                     [attr.recordId]="[record.id]"
                     [ngStyle]="{ width: field.width + 'px' }"
-                    #cell
                 >
                     @switch (field.type) {
                         @case (AITableFieldType.select) {
@@ -73,13 +73,25 @@
                         @case (AITableFieldType.link) {
                             <a
                                 class="d-block"
+                                target="_blank"
+                                [href]="record.values[field.id]?.url"
                                 thyStopPropagation
                                 thyFlexibleText
                                 [thyTooltipContent]="record.values[field.id]?.text"
-                                [href]="record.values[field.id]?.url"
-                                target="_blank"
-                                >{{ record.values[field.id]?.text }}</a
                             >
+                                {{ record.values[field.id]?.text }}
+                            </a>
+                        }
+                        @case (AITableFieldType.progress) {
+                            <thy-progress
+                                class="w-100"
+                                [thyValue]="record.values[field.id]"
+                                [thySize]="record.values[field.id]?.config?.size || 'md'"
+                                [thyMax]="record.values[field.id]?.config?.max || 100"
+                                [thyType]="record.values[field.id]?.config?.progressType || 'success'"
+                            >
+                                <span> {{ record.values[field.id] }}{{ record.values[field.id]?.config?.suffix || '%' }} </span>
+                            </thy-progress>
                         }
                         @default {
                             <span class="text-truncate"> {{ record.values[field.id] }}</span>

diff --git a/packages/grid/src/grid.component.ts b/packages/grid/src/grid.component.ts
@@ -1,39 +1,40 @@
-import { ChangeDetectionStrategy, Component, computed, ElementRef, input, model, NgZone, OnInit, output, signal } from '@angular/core';
 import { CommonModule, NgClass, NgComponentOutlet, NgForOf } from '@angular/common';
-import { SelectOptionPipe } from './pipes/grid';
-import { ThyTag } from 'ngx-tethys/tag';
-import { ThyPopoverModule } from 'ngx-tethys/popover';
+import { ChangeDetectionStrategy, Component, computed, ElementRef, input, model, NgZone, OnInit, output, signal } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { buildGridData } from './utils';
-import { AIFieldConfig, AITableFieldMenuItem, AITableRowHeight } from './types';
+import { FormsModule } from '@angular/forms';
+import { ThyAction } from 'ngx-tethys/action';
+import { ThyCheckboxModule } from 'ngx-tethys/checkbox';
+import { ThyDatePickerFormatPipe } from 'ngx-tethys/date-picker';
+import { ThyDropdownDirective, ThyDropdownMenuComponent } from 'ngx-tethys/dropdown';
+import { ThyFlexibleText } from 'ngx-tethys/flexible-text';
+import { ThyIcon } from 'ngx-tethys/icon';
+import { ThyPopoverModule } from 'ngx-tethys/popover';
+import { ThyProgress } from 'ngx-tethys/progress';
+import { ThyRate } from 'ngx-tethys/rate';
+import { ThyStopPropagationDirective } from 'ngx-tethys/shared';
+import { ThyTag } from 'ngx-tethys/tag';
+import { ProgressEditorComponent } from './components';
+import { FieldMenu } from './components/field-menu/field-menu.component';
+import { AITableFieldPropertyEditor } from './components/field-property-editor/field-property-editor.component';
+import { DefaultFieldMenus } from './constants';
 import {
     Actions,
-    createAITable,
-    getDefaultRecord,
+    AIPlugin,
     AITable,
     AITableChangeOptions,
     AITableFields,
     AITableFieldType,
     AITableRecords,
+    createAITable,
     createDefaultField,
-    AIPlugin
+    getDefaultRecord
 } from './core';
-import { ThyIcon } from 'ngx-tethys/icon';
+import { SelectOptionPipe } from './pipes/grid';
 import { AITableGridEventService } from './services/event.service';
-import { AITableFieldPropertyEditor } 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 { ThyCheckboxModule } from 'ngx-tethys/checkbox';
-import { ThyStopPropagationDirective } from 'ngx-tethys/shared';
-import { FieldMenu } from './components/field-menu/field-menu.component';
-import { ThyAction } from 'ngx-tethys/action';
-import { ThyDropdownDirective, ThyDropdownMenuComponent } from 'ngx-tethys/dropdown';
-import { DefaultFieldMenus } from './constants';
 import { AI_TABLE_GRID_FIELD_SERVICE_MAP, AITableGridFieldService } from './services/field.service';
 import { AITableGridSelectionService } from './services/selection.servive';
+import { AIFieldConfig, AITableFieldMenuItem, AITableRowHeight } from './types';
+import { buildGridData } from './utils';
 
 @Component({
     selector: 'ai-table-grid',
@@ -54,18 +55,19 @@ import { AITableGridSelectionService } from './services/selection.servive';
         ThyPopoverModule,
         ThyIcon,
         ThyRate,
+        ThyProgress,
         AITableFieldPropertyEditor,
         ThyDatePickerFormatPipe,
-        ThyTooltipModule,
         ThyFlexibleText,
         ThyStopPropagationDirective,
         FieldMenu,
         ThyAction,
         ThyDropdownDirective,
         ThyDropdownMenuComponent,
-        ThyCheckboxModule
+        ThyCheckboxModule,
+        ProgressEditorComponent
     ],
-    providers: [ThyTooltipService, AITableGridEventService, AITableGridFieldService, AITableGridSelectionService]
+    providers: [AITableGridEventService, AITableGridFieldService, AITableGridSelectionService]
 })
 export class AITableGrid implements OnInit {
     aiRecords = model.required<AITableRecords>();