Merge pull request #1577 from abpframework/feature/abp-button

Feature/abp button

npm/ng-packs/packages/identity/src/lib/components/users/users.component.html

@@ -83,7 +83,7 @@
   </ng-template>
 
   <ng-template #abpBody>
-    <perfect-scrollbar class="ps-show-always" style="max-height: 65vh;">
+    <perfect-scrollbar class="ps-show-always" style="max-height: 70vh;">
       <form [formGroup]="form">
         <ngb-tabset>
           <ngb-tab [title]="'AbpIdentity::UserInformations' | abpLocalization">
@@ -92,7 +92,7 @@
                 <div class="form-group">
                   <label for="user-name">{{ 'AbpIdentity::UserName' | abpLocalization }}</label
                   ><span> * </span>
-                  <input type="text" id="user-name" class="form-control" formControlName="userName" autofocus/>
+                  <input type="text" id="user-name" class="form-control" formControlName="userName" autofocus />
                 </div>
 
                 <div class="form-group">

npm/ng-packs/packages/permission-management/src/lib/components/permission-management.component.html

@@ -1,4 +1,4 @@
-<abp-modal [(visible)]="visible">
+<abp-modal [(visible)]="visible" (init)="initModal()">
   <ng-container *ngIf="{ entityName: entityName$ | async } as data">
     <ng-template #abpHeader>
       <h4>{{ 'AbpPermissionManagement::Permissions' | abpLocalization }} - {{ data.entityName }}</h4>
@@ -24,9 +24,12 @@
           <ul class="nav nav-pills flex-column">
             <perfect-scrollbar class="ps-show-always" style="max-height: 70vh;">
               <li *ngFor="let group of groups$ | async; trackBy: trackByFn" class="nav-item">
-                <a class="nav-link" [class.active]="selectedGroup.name === group.name" (click)="onChangeGroup(group)">{{
-                  group?.displayName
-                }}</a>
+                <a
+                  class="nav-link pointer"
+                  [class.active]="selectedGroup.name === group.name"
+                  (click)="onChangeGroup(group)"
+                  >{{ group?.displayName }}</a
+                >
               </li>
             </perfect-scrollbar>
           </ul>

npm/ng-packs/packages/permission-management/src/lib/components/permission-management.component.ts

@@ -216,14 +216,14 @@ export class PermissionManagementComponent implements OnInit, OnChanges {
         this.permissions = getPermissions(permissionRes.groups);
 
         this.visible = true;
-
-        setTimeout(() => {
-          this.setTabCheckboxState();
-          this.setGrantCheckboxState();
-        }, 0);
       });
   }
 
+  initModal() {
+    this.setTabCheckboxState();
+    this.setGrantCheckboxState();
+  }
+
   ngOnChanges({ visible }: SimpleChanges): void {
     if (!visible) return;
 

npm/ng-packs/packages/theme-shared/src/lib/components/button/button.component.ts

@@ -0,0 +1,68 @@
+import { LoaderStart, LoaderStop } from '@abp/ng.core';
+import { Component, Input, OnInit } from '@angular/core';
+import { Actions, ofActionSuccessful } from '@ngxs/store';
+import { filter } from 'rxjs/operators';
+
+@Component({
+  selector: 'abp-button',
+  template: `
+    <button [attr.type]="buttonType" [ngClass]="buttonClass">
+      <i [ngClass]="icon" class="mr-1"></i><ng-content></ng-content>
+    </button>
+  `,
+})
+export class ButtonComponent implements OnInit {
+  @Input()
+  buttonClass: string = 'btn btn-primary';
+
+  @Input()
+  buttonType: string = 'button';
+
+  @Input()
+  iconClass: string;
+
+  @Input()
+  loading: boolean = false;
+
+  @Input()
+  requestType: string | string[];
+
+  @Input()
+  requestURLContainSearchValue: string;
+
+  get icon(): string {
+    return `${this.loading ? 'fa fa-spin fa-spinner' : this.iconClass || 'd-none'}`;
+  }
+
+  constructor(private actions: Actions) {}
+
+  ngOnInit(): void {
+    if (this.requestType || this.requestURLContainSearchValue) {
+      this.actions
+        .pipe(
+          ofActionSuccessful(LoaderStart, LoaderStop),
+          filter((event: LoaderStart | LoaderStop) => {
+            let condition = true;
+            if (this.requestType) {
+              if (!Array.isArray(this.requestType)) this.requestType = [this.requestType];
+
+              condition =
+                condition &&
+                this.requestType.findIndex(type => type.toLowerCase() === event.payload.method.toLowerCase()) > -1;
+            }
+
+            if (condition && this.requestURLContainSearchValue) {
+              condition =
+                condition &&
+                event.payload.url.toLowerCase().indexOf(this.requestURLContainSearchValue.toLowerCase()) > -1;
+            }
+
+            return condition;
+          }),
+        )
+        .subscribe(() => {
+          this.loading = !this.loading;
+        });
+    }
+  }
+}

npm/ng-packs/packages/theme-shared/src/lib/components/index.ts

@@ -1,3 +1,5 @@
+export * from './button/button.component';
 export * from './confirmation/confirmation.component';
-export * from './toast/toast.component';
+export * from './loader-bar/loader-bar.component';
 export * from './modal/modal.component';
+export * from './toast/toast.component';

npm/ng-packs/packages/theme-shared/src/lib/components/modal/modal.component.html

@@ -19,7 +19,12 @@
           <span aria-hidden="true">&times;</span>
         </button>
       </div>
-      <div id="abp-modal-body" class="modal-body">
+      <div
+        id="abp-modal-body"
+        class="modal-body"
+        [style.height]="height || undefined"
+        [style.minHeight]="minHeight || undefined"
+      >
         <ng-container *ngTemplateOutlet="abpBody"></ng-container>
 
         <div id="abp-modal-footer" class="modal-footer">

npm/ng-packs/packages/theme-shared/src/lib/components/modal/modal.component.ts

@@ -55,7 +55,7 @@ export class ModalComponent implements OnDestroy {
     }
   }
 
-  @Input() centered: boolean = true;
+  @Input() centered: boolean = false;
 
   @Input() modalClass: string = '';
 
@@ -63,6 +63,12 @@ export class ModalComponent implements OnDestroy {
 
   @Output() visibleChange = new EventEmitter<boolean>();
 
+  @Input() height: number;
+
+  @Input() minHeight: number;
+
+  @Output() init = new EventEmitter<void>();
+
   @ContentChild('abpHeader', { static: false }) abpHeader: TemplateRef<any>;
 
   @ContentChild('abpBody', { static: false }) abpBody: TemplateRef<any>;
@@ -139,6 +145,8 @@ export class ModalComponent implements OnDestroy {
         filter(() => !!(this.closable && this.modalContent)),
       )
       .subscribe(() => this.close());
+
+    this.init.emit();
   }
 
   close() {

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

@@ -13,6 +13,7 @@ import { ModalComponent } from './components/modal/modal.component';
 import { ToastComponent } from './components/toast/toast.component';
 import styles from './contants/styles';
 import { ErrorHandler } from './handlers/error.handler';
+import { ButtonComponent } from './components/button/button.component';
 
 export function appendScript(injector: Injector) {
   const fn = function() {
@@ -41,8 +42,15 @@ export function appendScript(injector: Injector) {
       targetSelector: '.form-group',
     }),
   ],
-  declarations: [ConfirmationComponent, ToastComponent, ModalComponent, ErrorComponent, LoaderBarComponent],
-  exports: [NgbModalModule, ConfirmationComponent, ToastComponent, ModalComponent, LoaderBarComponent],
+  declarations: [
+    ButtonComponent,
+    ConfirmationComponent,
+    ToastComponent,
+    ModalComponent,
+    ErrorComponent,
+    LoaderBarComponent,
+  ],
+  exports: [NgbModalModule, ButtonComponent, ConfirmationComponent, ToastComponent, ModalComponent, LoaderBarComponent],
   entryComponents: [ErrorComponent],
 })
 export class ThemeSharedModule {