Merge pull request #10202 from abpframework/feat/10200

add component and enumList properties to entity props

npm/ng-packs/packages/theme-shared/extensions/src/lib/components/extensible-table/extensible-table.component.html

@@ -25,14 +25,24 @@
     >
       <ng-template let-row="row" let-i="index" ngx-datatable-cell-template>
         <ng-container *abpPermission="prop.permission">
-          <div
-            *ngIf="row['_' + prop.name]?.visible"
-            [innerHTML]="row['_' + prop.name]?.value | async"
-            (click)="
-              prop.action && prop.action({ getInjected: getInjected, record: row, index: i })
-            "
-            [class.pointer]="prop.action"
-          ></div>
+          <ng-container *ngIf="row['_' + prop.name]?.visible">
+            <div
+              *ngIf="!row['_' + prop.name].component; else component"
+              [innerHTML]="row['_' + prop.name]?.value | async"
+              (click)="
+                prop.action && prop.action({ getInjected: getInjected, record: row, index: i })
+              "
+              [class.pointer]="prop.action"
+            ></div>
+          </ng-container>
+          <ng-template #component>
+            <ng-container
+              *ngComponentOutlet="
+                row['_' + prop.name].component;
+                injector: row['_' + prop.name].injector
+              "
+            ></ng-container>
+          </ng-template>
         </ng-container>
       </ng-template>
     </ngx-datatable-column>

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<R = any> 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<R = any> implements OnChanges {
       : '<div class="text-center text-danger"><i class="fa fa-times"></i></div>';
   }
 
+  private getEnum(rowValue: any, list: Array<ABP.Option<any>>) {
+    if (!list) return rowValue;
+    const { key } = list.find(({ value }) => value === rowValue);
+    return key;
+  }
+
   getContent(prop: EntityProp<R>, data: PropData): Observable<string> {
     return prop.valueResolver(data).pipe(
       map(value => {
@@ -118,6 +126,8 @@ export class ExtensibleTableComponent<R = any> 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<R = any> 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;

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<R = any> extends Prop<R> {
   readonly sortable: boolean;
   readonly valueResolver: PropCallback<R, Observable<any>>;
   readonly action: ActionCallback<R>;
+  readonly component: Type<any>;
+  readonly enumList: Array<ABP.Option<any>>;
 
   constructor(options: EntityPropOptions<R>) {
     super(
@@ -42,6 +45,8 @@ export class EntityProp<R = any> extends Prop<R> {
     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<R = any>(options: EntityPropOptions<R>) {
@@ -63,6 +68,8 @@ export type EntityPropOptions<R = any> = O.Optional<
   | 'sortable'
   | 'valueResolver'
   | 'action'
+  | 'component'
+  | 'enumList'
 >;
 
 export type EntityPropDefaults<R = any> = Record<string, EntityProp<R>[]>;

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<string>('EXTENSIONS_IDENTIFIER');
 export type ActionKeys = Extract<'entityActions' | 'toolbarActions', keyof ExtensionsService>;
@@ -11,3 +12,4 @@ export const EXTENSIONS_ACTION_DATA = new InjectionToken<ActionData>('EXTENSIONS
 export const EXTENSIONS_ACTION_CALLBACK = new InjectionToken<ActionCallback<unknown>>(
   'EXTENSIONS_ACTION_DATA',
 );
+export const PROP_DATA_STREAM = new InjectionToken<Observable<any>>('PROP_DATA_STREAM');