diff --git a/.changeset/nervous-eels-hear.md b/.changeset/nervous-eels-hear.md new file mode 100644 index 00000000..e53847f4 --- /dev/null +++ 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 new file mode 100644 index 00000000..0f76fa44 --- /dev/null +++ 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 { + 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 new file mode 100644 index 00000000..bbe40654 --- /dev/null +++ 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: ` `, + standalone: true, + changeDetection: ChangeDetectionStrategy.OnPush, + imports: [FormsModule, ThyRate, ThyTooltipModule] +}) +export class RatingCellEditorComponent extends AbstractEditCellEditor { + updateValue() { + this.updateFieldValue(); + this.closePopover(); + } +} diff --git a/packages/grid/src/constants/editor.ts b/packages/grid/src/constants/editor.ts index 1f6cc2f8..c360888e 100644 --- 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.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 index 4386fe91..f1f3a532 100644 --- 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 index bdce6c37..3291573d 100644 --- 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 index 3e35e383..8cb46842 100644 --- 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) { + + } + @case (AITableFieldType.Link) { + {{ record.value[field.id]?.text }} + } @default { {{ record.value[field.id] }} } diff --git a/packages/grid/src/grid.component.ts b/packages/grid/src/grid.component.ts index 5b9bd0e7..670249e7 100644 --- 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(); diff --git a/src/app/app.component.ts b/src/app/app.component.ts index d1393025..8dc0e358 100644 --- 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 } ] };