From b57d4fa7c3db7e9a9ebd3dbc1b740269746d0a03 Mon Sep 17 00:00:00 2001 From: muhammedaltug Date: Fri, 1 Oct 2021 14:51:22 +0300 Subject: [PATCH] add component and enumList properties to entity props --- .../extensible-table.component.html | 26 +++++++++----- .../extensible-table.component.ts | 34 ++++++++++++++++--- .../extensions/src/lib/models/entity-props.ts | 7 ++++ .../src/lib/tokens/extensions.token.ts | 2 ++ 4 files changed, 57 insertions(+), 12 deletions(-) diff --git a/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/extensible-table/extensible-table.component.html b/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/extensible-table/extensible-table.component.html index 4544d1022a..83314c22f2 100644 --- a/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/extensible-table/extensible-table.component.html +++ b/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/extensible-table/extensible-table.component.html @@ -25,14 +25,24 @@ > -
+ +
+ + + + diff --git a/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/extensible-table/extensible-table.component.ts b/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/extensible-table/extensible-table.component.ts index 1c1757a410..8e1d2752be 100644 --- a/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/extensible-table/extensible-table.component.ts +++ b/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/extensible-table/extensible-table.component.ts @@ -1,4 +1,5 @@ import { + ABP, ConfigStateService, getShortDateFormat, getShortDateShortTimeFormat, @@ -29,7 +30,8 @@ import { EntityActionList } from '../../models/entity-actions'; import { EntityProp, EntityPropList } from '../../models/entity-props'; import { PropData } from '../../models/props'; import { ExtensionsService } from '../../services/extensions.service'; -import { EXTENSIONS_IDENTIFIER } from '../../tokens/extensions.token'; +import { EXTENSIONS_IDENTIFIER, PROP_DATA_STREAM } from '../../tokens/extensions.token'; + const DEFAULT_ACTIONS_COLUMN_WIDTH = 150; @Component({ @@ -71,7 +73,7 @@ export class ExtensibleTableComponent implements OnChanges { constructor( @Inject(LOCALE_ID) private locale: string, private config: ConfigStateService, - injector: Injector, + private injector: Injector, ) { this.getInjected = injector.get.bind(injector); const extensions = injector.get(ExtensionsService); @@ -106,6 +108,12 @@ export class ExtensibleTableComponent implements OnChanges { : '
'; } + private getEnum(rowValue: any, list: Array>) { + if (!list) return rowValue; + const { key } = list.find(({ value }) => value === rowValue); + return key; + } + getContent(prop: EntityProp, data: PropData): Observable { return prop.valueResolver(data).pipe( map(value => { @@ -118,6 +126,8 @@ export class ExtensibleTableComponent implements OnChanges { return this.getDate(value, getShortTimeFormat(this.config)); case ePropType.DateTime: return this.getDate(value, getShortDateShortTimeFormat(this.config)); + case ePropType.Enum: + return this.getEnum(value, prop.enumList); default: return value; // More types can be handled in the future @@ -132,10 +142,26 @@ export class ExtensibleTableComponent implements OnChanges { this.data = data.currentValue.map((record, index) => { this.propList.forEach(prop => { const propData = { getInjected: this.getInjected, record, index } as any; - record[`_${prop.value.name}`] = { + const value = this.getContent(prop.value, propData); + + const propKey = `_${prop.value.name}`; + record[propKey] = { visible: prop.value.visible(propData), - value: this.getContent(prop.value, propData), + value, }; + if (prop.value.component) { + const injector = Injector.create( + [ + { + provide: PROP_DATA_STREAM, + useValue: value, + }, + ], + this.injector, + ); + record[propKey].injector = injector; + record[propKey].component = prop.value.component; + } }); return record; diff --git a/npm/ng-packs/packages/theme-shared/extensions/src/lib/models/entity-props.ts b/npm/ng-packs/packages/theme-shared/extensions/src/lib/models/entity-props.ts index 1342480cd8..fad8c29ade 100644 --- a/npm/ng-packs/packages/theme-shared/extensions/src/lib/models/entity-props.ts +++ b/npm/ng-packs/packages/theme-shared/extensions/src/lib/models/entity-props.ts @@ -1,6 +1,7 @@ import { Type } from '@angular/core'; import { Observable, of } from 'rxjs'; import { O } from 'ts-toolbelt'; +import { ABP } from '@abp/ng.core'; import { ActionCallback } from './actions'; import { Prop, @@ -27,6 +28,8 @@ export class EntityProp extends Prop { readonly sortable: boolean; readonly valueResolver: PropCallback>; readonly action: ActionCallback; + readonly component: Type; + readonly enumList: Array>; constructor(options: EntityPropOptions) { super( @@ -42,6 +45,8 @@ export class EntityProp extends Prop { this.sortable = options.sortable || false; this.valueResolver = options.valueResolver || (data => of(data.record[this.name])); this.action = options.action; + this.component = options.component; + this.enumList = options.enumList; } static create(options: EntityPropOptions) { @@ -63,6 +68,8 @@ export type EntityPropOptions = O.Optional< | 'sortable' | 'valueResolver' | 'action' + | 'component' + | 'enumList' >; export type EntityPropDefaults = Record[]>; diff --git a/npm/ng-packs/packages/theme-shared/extensions/src/lib/tokens/extensions.token.ts b/npm/ng-packs/packages/theme-shared/extensions/src/lib/tokens/extensions.token.ts index ba504756aa..f0343169c1 100644 --- a/npm/ng-packs/packages/theme-shared/extensions/src/lib/tokens/extensions.token.ts +++ b/npm/ng-packs/packages/theme-shared/extensions/src/lib/tokens/extensions.token.ts @@ -1,6 +1,7 @@ import { InjectionToken } from '@angular/core'; import { ActionCallback, ReadonlyActionData as ActionData } from '../models/actions'; import { ExtensionsService } from '../services/extensions.service'; +import { Observable } from 'rxjs'; export const EXTENSIONS_IDENTIFIER = new InjectionToken('EXTENSIONS_IDENTIFIER'); export type ActionKeys = Extract<'entityActions' | 'toolbarActions', keyof ExtensionsService>; @@ -11,3 +12,4 @@ export const EXTENSIONS_ACTION_DATA = new InjectionToken('EXTENSIONS export const EXTENSIONS_ACTION_CALLBACK = new InjectionToken>( 'EXTENSIONS_ACTION_DATA', ); +export const PROP_DATA_STREAM = new InjectionToken>('PROP_DATA_STREAM');