Merge pull request #17320 from abpframework/issue-17318

AngularUI: Add property to EntityAction for customize actions button

docs/en/UI/Angular/Entity-Action-Extensions.md

@@ -312,6 +312,8 @@ type EntityActionOptions<R = any> = {
   icon?: string,
   permission?: string,
   visible?: ActionPredicate<R>,
+  btnClass?: string,
+  btnStyle?: string,
 };
 ```
 
@@ -322,6 +324,8 @@ As you see, passing `action` and `text` is enough to create an entity action. He
 - **icon** is the classes that define an icon to be placed before the text. (_default:_ `''`)
 - **permission** is the permission context which will be used to decide if this type of grid action should be displayed to the user or not. (_default:_ `undefined`)
 - **visible** is a predicate that will be used to decide if the current record should have this grid action or not. (_default:_ `() => true`)
+- **btnClass** is the classes that will be applied to the button. (_default:_ `'btn btn-primary'`)
+- **btnStyle** is the styles that will be applied to the button. (_default:_ `''`)
 
 You may find a full example below.
 
@@ -339,6 +343,8 @@ const options: EntityActionOptions<IdentityUserDto> = {
   icon: 'fa fa-unlock',
   permission: 'AbpIdentity.Users.Update',
   visible: data => data.record.isLockedOut,
+  btnClass:'btn-warning',
+  btnStyle: 'margin-right: 5px;',
 };
 
 const action = new EntityAction(options);

npm/ng-packs/packages/theme-shared/extensions/src/lib/components/grid-actions/grid-actions.component.html

@@ -52,7 +52,8 @@
       *abpPermission="action.permission; runChangeDetection: false"
       (click)="action.action(data)"
       type="button"
-      class="btn btn-primary text-center"
+      [class]="action.btnClass"
+      [style]="action.btnStyle"
     >
       <ng-container
         *ngTemplateOutlet="buttonContentTmp; context: { $implicit: action }"

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

@@ -29,6 +29,8 @@ export abstract class Action<R = any> {
     public readonly permission: string,
     public readonly visible: ActionPredicate<R> = () => true,
     public readonly action: ActionCallback<R> = () => {},
+    public readonly btnClass?: string,
+    public readonly btnStyle?: string,
   ) {}
 }
 

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

@@ -22,11 +22,15 @@ export class EntityActionsFactory<R = any> extends ActionsFactory<EntityActions<
 export class EntityAction<R = any> extends Action<R> {
   readonly text: string;
   readonly icon: string;
+  readonly btnClass?: string;
+  readonly btnStyle?: string;
 
   constructor(options: EntityActionOptions<R>) {
     super(options.permission || '', options.visible, options.action);
     this.text = options.text;
     this.icon = options.icon || '';
+    this.btnClass = options.btnClass || 'btn btn-primary text-center';
+    this.btnStyle = options.btnStyle;
   }
 
   static create<R = any>(options: EntityActionOptions<R>) {

npm/ng-packs/packages/theme-shared/src/lib/models/nav-item.ts

@@ -18,6 +18,7 @@ export class NavItem {
   order?: number;
   requiredPolicy?: string;
   visible?: NavBarPropPredicate<NavItem>;
+  icon?: string;
   constructor(props: Partial<NavItem>) {
     Object.assign(this, props);
   }