feat(grid): support dateTime editor #WIK-16048 (#4)

worktile · Jul 11, 2024 · 090cd8a · 090cd8a
1 parent b9fbfbc
commit 090cd8a
Show file tree

Hide file tree

Showing 9 changed files with 91 additions and 5 deletions.
diff --git a/.changeset/sour-bees-argue.md b/.changeset/sour-bees-argue.md
@@ -0,0 +1,5 @@
+---
+'@ai-table/grid': patch
+---
+
+support dateTime field editor
diff --git a/packages/grid/src/components/cell-editors/cell-editor.scss b/packages/grid/src/components/cell-editors/cell-editor.scss
@@ -0,0 +1,5 @@
+.date-time-cell-editor {
+    .thy-calendar-picker {
+        height: 100%;
+    }
+}
diff --git a/packages/grid/src/components/cell-editors/date-time/date-time-editor.component.ts b/packages/grid/src/components/cell-editors/date-time/date-time-editor.component.ts
@@ -0,0 +1,60 @@
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { DateEntry, ThyDatePicker } from 'ngx-tethys/date-picker';
+import { AbstractEditCellEditor } from '../abstract-cell-editor.component';
+import { ThyTimePickerModule } from 'ngx-tethys/time-picker';
+
+@Component({
+    selector: 'date-time-cell-editor',
+    template: `
+        <thy-date-picker
+            class="h-100"
+            thyTimestampPrecision="milliseconds"
+            thyPlaceHolder="选择时间"
+            [(ngModel)]="modelValue"
+            (ngModelChange)="updateValue()"
+            (thyOpenChange)="thyOpenChange($event)"
+            [thyAllowClear]="true"
+            [thyShowShortcut]="true"
+            [thyHasBackdrop]="false"
+            [thyShowTime]="dateShowTime()"
+            [thyOpen]="true"
+            [thyFormat]="dateFormat"
+        >
+        </thy-date-picker>
+    `,
+    standalone: true,
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    imports: [FormsModule, ThyDatePicker, ThyTimePickerModule],
+    host: {
+        class: 'date-time-cell-editor'
+    }
+})
+export class DateTimeCellEditorComponent extends AbstractEditCellEditor<DateEntry> {
+    dateShowTime = input<boolean>(false);
+
+    dateFormat = computed(() => {
+        return this.dateShowTime() ? 'yyyy-MM-dd HH:mm' : 'yyyy-MM-dd';
+    })();
+
+    override ngOnInit(): void {
+        super.ngOnInit();
+        if (!this.modelValue && this.dateShowTime()) {
+            this.modelValue = {
+                date: 0,
+                with_time: 1
+            };
+        }
+    }
+
+    updateValue() {
+        this.updateFieldValue();
+        this.closePopover();
+    }
+
+    thyOpenChange(isOpen: Boolean) {
+        if (!isOpen) {
+            this.closePopover();
+        }
+    }
+}
diff --git a/packages/grid/src/constants/editor.ts b/packages/grid/src/constants/editor.ts
@@ -2,9 +2,11 @@ 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';
 
 export const GRID_CELL_EDITOR_MAP: Record<AITableFieldType, any> = {
     [AITableFieldType.Text]: TextCellEditorComponent,
     [AITableFieldType.SingleSelect]: SingleSelectCellEditorComponent,
-    [AITableFieldType.Number]: NumberCellEditorComponent
+    [AITableFieldType.Number]: NumberCellEditorComponent,
+    [AITableFieldType.DateTime]: DateTimeCellEditorComponent
 };
diff --git a/packages/grid/src/constants/grid.ts b/packages/grid/src/constants/grid.ts
@@ -4,7 +4,12 @@ export const DEFAULT_COLUMN_WIDTH = 200;
 
 export const MIN_COLUMN_WIDTH = 80;
 
-export const DBL_CLICK_EDIT_TYPE = [AITableFieldType.Text, AITableFieldType.Number, AITableFieldType.SingleSelect];
+export const DBL_CLICK_EDIT_TYPE = [
+    AITableFieldType.Text,
+    AITableFieldType.Number,
+    AITableFieldType.SingleSelect,
+    AITableFieldType.DateTime
+];
 
 export const RowHeight = {
     Short: 32,

diff --git a/packages/grid/src/core/constants/field.ts b/packages/grid/src/core/constants/field.ts
@@ -16,6 +16,11 @@ export const BasicFieldTypes = [
         type: AITableFieldType.Number,
         name: '数字',
         icon: 'hashtag'
+    },
+    {
+        type: AITableFieldType.DateTime,
+        name: '日期',
+        icon: 'calendar'
     }
 ];
 

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

diff --git a/packages/grid/src/grid.component.html b/packages/grid/src/grid.component.html
@@ -21,6 +21,9 @@
                                 <thy-tag [thyColor]="selectedOption!.color!">{{ selectedOption.name }}</thy-tag>
                             }
                         }
+                        @case (AITableFieldType.DateTime) {
+                            {{ record.value[field.id] | thyDatePickerFormat }}
+                        }
                         @default {
                             {{ record.value[field.id] }}
                         }

diff --git a/packages/grid/src/styles.scss b/packages/grid/src/styles.scss
@@ -1,6 +1,7 @@
 /* You can add global styles to this file, and also import other style files */
 @use 'ngx-tethys/styles/index.scss';
 @use 'ngx-tethys/styles/variables.scss';
+@use './components/cell-editors/cell-editor.scss';
 
 .ai-table-grid {
     display: table;