Merge pull request #1633 from abpframework/feature/theme-shared

feature(theme-shared): add busy input to modal

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

@@ -188,6 +188,7 @@
       requestURLContainSearchValue="users"
       iconClass="fa fa-check"
       (click)="save()"
+      [disabled]="form.invalid"
       >{{ 'AbpIdentity::Save' | abpLocalization }}</abp-button
     >
   </ng-template>

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

@@ -6,7 +6,7 @@ import { filter } from 'rxjs/operators';
 @Component({
   selector: 'abp-button',
   template: `
-    <button [attr.type]="buttonType" [ngClass]="buttonClass" [disabled]="loading">
+    <button [attr.type]="buttonType" [ngClass]="buttonClass" [disabled]="loading" [disabled]="disabled">
       <i [ngClass]="icon" class="mr-1"></i><ng-content></ng-content>
     </button>
   `,
@@ -24,6 +24,9 @@ export class ButtonComponent implements OnInit {
   @Input()
   loading: boolean = false;
 
+  @Input()
+  disabled: boolean = false;
+
   @Input()
   requestType: string | string[];
 

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

@@ -1,6 +1,7 @@
 <div
   *ngIf="showModal"
-  (click)="onClickBackdrop()"
+  (click)="close()"
+  (keyup.esc)="close()"
   id="abp-modal"
   tabindex="-1"
   class="modal fade {{ modalClass }} d-block show"

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

@@ -9,11 +9,13 @@ import {
   Renderer2,
   TemplateRef,
   ViewChild,
+  ViewChildren,
 } from '@angular/core';
 import { fromEvent, Subject, timer } from 'rxjs';
-import { debounceTime, filter, take, takeUntil } from 'rxjs/operators';
-import { ConfirmationService } from '../../services/confirmation.service';
+import { filter, take, takeUntil } from 'rxjs/operators';
 import { Toaster } from '../../models/toaster';
+import { ConfirmationService } from '../../services/confirmation.service';
+import { ButtonComponent } from '../button/button.component';
 
 export type ModalSize = 'sm' | 'md' | 'lg' | 'xl';
 
@@ -49,24 +51,35 @@ export class ModalComponent implements OnDestroy {
       this.renderer.addClass(this.modalContent.nativeElement, 'fade-out-top');
       setTimeout(() => {
         this.setVisible(value);
-        // this.renderer.removeClass(this.modalContent.nativeElement, 'fade-out-top');
         this.ngOnDestroy();
       }, ANIMATION_TIMEOUT - 10);
     }
   }
 
+  @Input()
+  get busy(): boolean {
+    return this._busy;
+  }
+  set busy(value: boolean) {
+    if (this.abpSubmit && this.abpSubmit instanceof ButtonComponent) {
+      this.abpSubmit.loading = value;
+    }
+
+    this._busy = value;
+  }
+
   @Input() centered: boolean = false;
 
   @Input() modalClass: string = '';
 
   @Input() size: ModalSize = 'lg';
 
-  @Output() visibleChange = new EventEmitter<boolean>();
-
   @Input() height: number;
 
   @Input() minHeight: number;
 
+  @Output() visibleChange = new EventEmitter<boolean>();
+
   @Output() init = new EventEmitter<void>();
 
   @ContentChild('abpHeader', { static: false }) abpHeader: TemplateRef<any>;
@@ -77,10 +90,16 @@ export class ModalComponent implements OnDestroy {
 
   @ContentChild('abpClose', { static: false, read: ElementRef }) abpClose: ElementRef<any>;
 
+  @ContentChild(ButtonComponent, { static: false, read: ButtonComponent }) abpSubmit: ButtonComponent;
+
   @ViewChild('abpModalContent', { static: false }) modalContent: ElementRef;
 
+  @ViewChildren('abp-button') abpButtons;
+
   _visible: boolean = false;
 
+  _busy: boolean = false;
+
   showModal: boolean = false;
 
   isOpenConfirmation: boolean = false;
@@ -108,16 +127,6 @@ export class ModalComponent implements OnDestroy {
   }
 
   listen() {
-    fromEvent(document, 'keyup')
-      .pipe(
-        takeUntil(this.destroy$),
-        debounceTime(250),
-        filter((key: KeyboardEvent) => key && key.code === 'Escape' && this.closable),
-      )
-      .subscribe(_ => {
-        this.close();
-      });
-
     setTimeout(() => {
       if (!this.abpClose) return;
 
@@ -129,10 +138,13 @@ export class ModalComponent implements OnDestroy {
         .subscribe(() => this.close());
     }, 0);
 
+    window.location.hash = '#abp-modal';
     this.init.emit();
   }
 
   close() {
+    if (!this.closable || this.busy) return;
+
     const nodes = getFlatNodes(
       (this.modalContent.nativeElement.querySelector('#abp-modal-body') as HTMLElement).childNodes,
     );
@@ -155,10 +167,8 @@ export class ModalComponent implements OnDestroy {
     } else {
       this.visible = false;
     }
-  }
 
-  onClickBackdrop() {
-    this.close();
+    window.location.hash = 'body';
   }
 }