Merge pull request #5048 from abpframework/feat/5047

Added action callback property to EntityProp for extensible table

npm/ng-packs/.vscode/settings.json

@@ -18,9 +18,7 @@
     "titleBar.inactiveForeground": "#e7e7e799",
     "statusBar.background": "#1d70a2",
     "statusBarItem.hoverBackground": "#258ecd",
-    "statusBar.foreground": "#e7e7e7",
+    "statusBar.foreground": "#e7e7e7"
-    "statusBar.border": "#1d70a2",
-    "titleBar.border": "#1d70a2"
   },
   "peacock.color": "#1D70A2"
 }

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

@@ -1,5 +1,6 @@
 <ngx-datatable default [rows]="data" [count]="recordsTotal" [list]="list">
   <ngx-datatable-column
+    *ngIf="actionsTemplate || actionList.length"
     [name]="actionsText | abpLocalization"
     [maxWidth]="columnWidths[0]"
     [width]="columnWidths[0]"
@@ -31,6 +32,7 @@
           <div
             *ngIf="row['_' + prop.name].visible"
             [innerHTML]="row['_' + prop.name].value | async"
+            (click)="prop.action({ getInjected: getInjected, record: row, index: i })"
           ></div>
         </ng-container>
       </ng-template>

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

@@ -22,6 +22,7 @@ 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 { EntityActionList } from '../../models/entity-actions';
 const DEFAULT_ACTIONS_COLUMN_WIDTH = 150;
 
 @Component({
@@ -46,6 +47,8 @@ export class ExtensibleTableComponent<R = any> implements OnChanges {
 
   readonly propList: EntityPropList<R>;
 
+  readonly actionList: EntityActionList<R>;
+
   readonly trackByFn: TrackByFunction<EntityProp<R>> = (_, item) => item.name;
 
   constructor(@Inject(LOCALE_ID) private locale: string, injector: Injector) {
@@ -54,6 +57,8 @@ export class ExtensibleTableComponent<R = any> implements OnChanges {
     const extensions = injector.get(ExtensionsService);
     const name = injector.get(EXTENSIONS_IDENTIFIER);
     this.propList = extensions.entityProps.get(name).props;
+    this.actionList = (extensions['entityActions'].get(name)
+      .actions as unknown) as EntityActionList<R>;
     this.setColumnWidths(DEFAULT_ACTIONS_COLUMN_WIDTH);
   }
 

npm/ng-packs/packages/theme-shared/extensions/src/lib/models/entity-props.ts

@@ -11,6 +11,7 @@ import {
   Props,
   PropsFactory,
 } from './props';
+import { ActionCallback } from './actions';
 
 export class EntityPropList<R = any> extends PropList<R, EntityProp<R>> {}
 
@@ -26,6 +27,7 @@ export class EntityProp<R = any> extends Prop<R> {
   readonly columnWidth: number | undefined;
   readonly sortable: boolean;
   readonly valueResolver: PropCallback<R, Observable<any>>;
+  readonly action: ActionCallback<R>;
 
   constructor(options: EntityPropOptions<R>) {
     super(
@@ -40,6 +42,7 @@ export class EntityProp<R = any> extends Prop<R> {
     this.columnWidth = options.columnWidth;
     this.sortable = options.sortable || false;
     this.valueResolver = options.valueResolver || (data => of(data.record[this.name]));
+    this.action = options.action || (_ => {});
   }
 
   static create<R = any>(options: EntityPropOptions<R>) {
@@ -60,6 +63,7 @@ export type EntityPropOptions<R = any> = O.Optional<
   | 'columnWidth'
   | 'sortable'
   | 'valueResolver'
+  | 'action'
 >;
 
 export type EntityPropDefaults<R = any> = Record<string, EntityProp<R>[]>;