Merge pull request #12956 from abpframework/Issue-9715-CP

Added PipeFunction

npm/ng-packs/packages/theme-shared/extensions/src/lib/components/abstract-actions/abstract-actions.component.ts

@@ -2,6 +2,7 @@ import { Directive, Injector, Input } from '@angular/core';
 import { ActionData, ActionList } from '../../models/actions';
 import { ExtensionsService } from '../../services/extensions.service';
 import { EXTENSIONS_ACTION_TYPE, EXTENSIONS_IDENTIFIER } from '../../tokens/extensions.token';
+import { InferredData, InferredRecord } from '../../models/toolbar-actions';
 
 // Fix for https://github.com/angular/angular/issues/23904
 // @dynamic
@@ -25,6 +26,3 @@ export abstract class AbstractActionsComponent<L extends ActionList<any>> extend
     this.actionList = extensions[type].get(name).actions as unknown as L;
   }
 }
-
-type InferredData<L> = ActionData<InferredRecord<L>>;
-type InferredRecord<L> = L extends ActionList<infer R> ? R : never;

npm/ng-packs/packages/theme-shared/extensions/src/lib/components/page-toolbar/page-toolbar.component.html

@@ -8,7 +8,7 @@
       <ng-container *abpPermission="action.permission">
         <ng-container *ngIf="action.component as component; else button">
           <ng-container
-            *ngComponentOutlet="component; injector: createInjector(action)"
+            *ngComponentOutlet="component; injector: record | createInjector: action:this"
           ></ng-container>
         </ng-container>
 

npm/ng-packs/packages/theme-shared/extensions/src/lib/components/page-toolbar/page-toolbar.component.ts

@@ -1,18 +1,10 @@
+import { ChangeDetectionStrategy, Component, Injector, TrackByFunction } from '@angular/core';
 import {
-  ChangeDetectionStrategy,
+  HasCreateInjectorPipe,
-  Component,
+  ToolbarActionList,
-  InjectFlags,
+  ToolbarComponent,
-  InjectionToken,
+} from '../../models/toolbar-actions';
-  Injector,
+import { EXTENSIONS_ACTION_TYPE } from '../../tokens/extensions.token';
-  TrackByFunction,
-  Type,
-} from '@angular/core';
-import { ToolbarActionList, ToolbarComponent } from '../../models/toolbar-actions';
-import {
-  EXTENSIONS_ACTION_CALLBACK,
-  EXTENSIONS_ACTION_DATA,
-  EXTENSIONS_ACTION_TYPE,
-} from '../../tokens/extensions.token';
 import { AbstractActionsComponent } from '../abstract-actions/abstract-actions.component';
 
 @Component({
@@ -27,24 +19,17 @@ import { AbstractActionsComponent } from '../abstract-actions/abstract-actions.c
   ],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class PageToolbarComponent<R = any> extends AbstractActionsComponent<ToolbarActionList<R>> {
+export class PageToolbarComponent<R = any>
+  extends AbstractActionsComponent<ToolbarActionList<R>>
+  implements HasCreateInjectorPipe<R>
+{
   defaultBtnClass = 'btn btn-sm btn-primary';
+
+  getData = () => this.data;
+
   readonly trackByFn: TrackByFunction<ToolbarComponent<R>> = (_, item) =>
     item.action || item.component;
-
+  constructor(public readonly injector: Injector) {
-  constructor(private readonly injector: Injector) {
     super(injector);
   }
-
-  createInjector(action: ToolbarComponent<R>): Injector {
-    const get = <T>(token: Type<T> | InjectionToken<T>, notFoundValue?: T, flags?: InjectFlags) => {
-      return token === EXTENSIONS_ACTION_DATA
-        ? this.data
-        : token === EXTENSIONS_ACTION_CALLBACK
-        ? (data = this.data) => action.action(data)
-        : this.getInjected.call(this.injector, token, notFoundValue, flags);
-    };
-
-    return { get };
-  }
 }

npm/ng-packs/packages/theme-shared/extensions/src/lib/models/toolbar-actions.ts

@@ -1,12 +1,14 @@
-import { Type } from '@angular/core';
+import { Injector, Type } from '@angular/core';
 import { O } from 'ts-toolbelt';
 import {
   Action,
   ActionContributorCallback,
   ActionContributorCallbacks,
+  ActionData,
   ActionList,
   Actions,
   ActionsFactory,
+  ReadonlyActionData,
 } from './actions';
 
 export class ToolbarActionList<R = any> extends ActionList<
@@ -31,9 +33,9 @@ export class ToolbarAction<R = any> extends Action<R> {
     super(options.permission || '', options.visible, options.action);
     this.text = options.text;
     this.icon = options.icon || '';
-     if(options.btnClass){
+    if (options.btnClass) {
-       this.btnClass = options.btnClass;
+      this.btnClass = options.btnClass;
-     };
+    }
   }
 
   static create<R = any>(options: ToolbarActionOptions<R>) {
@@ -72,10 +74,20 @@ export type ToolbarComponentOptions<R = any> = O.Optional<
   'permission' | 'visible' | 'action'
 >;
 
-export type ToolbarActionDefaults<R = any> = Record<string, ToolbarAction<R>[]>;
+export type ToolbarActionDefault<R = any> = ToolbarAction<R> | ToolbarComponent<R>;
+
+export type ToolbarActionDefaults<R = any> = Record<string, Array<ToolbarActionDefault<R>>>;
 export type ToolbarActionContributorCallback<R = any> = ActionContributorCallback<
   ToolbarActionList<R>
 >;
 export type ToolbarActionContributorCallbacks<R = any> = ActionContributorCallbacks<
   ToolbarActionList<R>
 >;
+export type InferredData<L> = ActionData<InferredRecord<L>>;
+export type InferredRecord<L> = L extends ActionList<infer R> ? R : never;
+
+export interface HasCreateInjectorPipe<R> {
+  getData: () => ReadonlyActionData<R>;
+  injector: Injector;
+  getInjected: InferredData<ToolbarActionList<R>>['getInjected'];
+}

npm/ng-packs/packages/theme-shared/extensions/src/lib/pipes/create-injector.pipe.ts

@@ -0,0 +1,35 @@
+import { InjectFlags, InjectionToken, Injector, Pipe, PipeTransform, Type } from '@angular/core';
+import { HasCreateInjectorPipe, ToolbarComponent } from '../models/toolbar-actions';
+import { EXTENSIONS_ACTION_CALLBACK, EXTENSIONS_ACTION_DATA } from '../tokens/extensions.token';
+
+@Pipe({
+  name: 'createInjector',
+})
+export class CreateInjectorPipe<R> implements PipeTransform {
+  public transform(
+    _: any,
+    action: ToolbarComponent<R>,
+    context: HasCreateInjectorPipe<R>,
+  ): Injector {
+    const get = <T>(token: Type<T> | InjectionToken<T>, notFoundValue?: T, flags?: InjectFlags) => {
+      const componentData = context.getData();
+      const componentDataCallback = data => {
+        data = data ?? context.getData();
+        return action.action(data);
+      };
+      let extensionData;
+      switch (token) {
+        case EXTENSIONS_ACTION_DATA:
+          extensionData = componentData;
+          break;
+        case EXTENSIONS_ACTION_CALLBACK:
+          extensionData = componentDataCallback;
+          break;
+        default:
+          extensionData = context.getInjected.call(context.injector, token, notFoundValue, flags);
+      }
+      return extensionData;
+    };
+    return { get };
+  }
+}

npm/ng-packs/packages/theme-shared/extensions/src/lib/ui-extensions.module.ts

@@ -16,6 +16,7 @@ import { GridActionsComponent } from './components/grid-actions/grid-actions.com
 import { PageToolbarComponent } from './components/page-toolbar/page-toolbar.component';
 import { DisabledDirective } from './directives/disabled.directive';
 import { PropDataDirective } from './directives/prop-data.directive';
+import { CreateInjectorPipe } from './pipes/create-injector.pipe';
 
 @NgModule({
   exports: [
@@ -26,6 +27,7 @@ import { PropDataDirective } from './directives/prop-data.directive';
     ExtensibleTableComponent,
     PropDataDirective,
     DisabledDirective,
+    CreateInjectorPipe,
   ],
   declarations: [
     DateTimePickerComponent,
@@ -36,6 +38,7 @@ import { PropDataDirective } from './directives/prop-data.directive';
     ExtensibleTableComponent,
     PropDataDirective,
     DisabledDirective,
+    CreateInjectorPipe,
   ],
   imports: [
     CoreModule,

npm/ng-packs/packages/theme-shared/extensions/src/public-api.ts

@@ -61,6 +61,7 @@ export {
   ToolbarComponent,
   ToolbarComponentOptions,
 } from './lib/models/toolbar-actions';
+export * from './lib/pipes/create-injector.pipe';
 export * from './lib/services/extensions.service';
 export * from './lib/tokens/extensions.token';
 export * from './lib/ui-extensions.module';