Implement busy and block directives

Author: Vitor Durante

angular/src/app/roles/roles.component.html

@@ -6,7 +6,7 @@ <h2>
                     {{ 'Roles' | localize }}
                 </h2>
                 <ul class="header-dropdown m-r--5">
-                    <li>                
+                    <li>
                         <button mat-icon-button [matMenuTriggerFor]="headerMenu" style="bottom: 10px;">
                             <mat-icon>more_vert</mat-icon>
                         </button>
@@ -20,15 +20,15 @@ <h2>
                 </ul>
             </div>
             <div id="roles-table" class="body table-responsive">
-                <table class="table table-hover table-striped">
+                <table class="table table-hover table-striped" [busy]="isTableLoading">
                     <thead>
                         <tr>
                             <th>{{ 'Actions' | localize }}</th>
                             <th>{{ 'RoleName' | localize }}</th>
-                            <th>{{ 'DisplayName' | localize }}</th>                
+                            <th>{{ 'DisplayName' | localize }}</th>
                         </tr>
                     </thead>
-                    <tbody> 
+                    <tbody>
                         <tr *ngFor="let role of roles | paginate: { id: 'server', itemsPerPage: pageSize, currentPage: pageNumber, totalItems: totalItems }">
                             <td>
                                 <button mat-icon-button [matMenuTriggerFor]="actionsMenu">
@@ -59,4 +59,4 @@ <h2>
             </div>
         </div>
     </div>
-</div>
+</div>

angular/src/app/roles/roles.component.ts

@@ -34,7 +34,7 @@ export class RolesComponent extends PagedListingComponentBase<RoleDto> {
     pageNumber: number,
     finishedCallback: Function
   ): void {
-    abp.ui.setBusy($("#roles-table"));
+    //abp.ui.setBusy($("#roles-table"));
 
     this._rolesService
       .getAll(request.skipCount, request.maxResultCount)
@@ -46,8 +46,8 @@ export class RolesComponent extends PagedListingComponentBase<RoleDto> {
       .subscribe((result: PagedResultDtoOfRoleDto) => {
         this.roles = result.items;
         this.showPaging(result, pageNumber);
-        
-        abp.ui.clearBusy($("#roles-table"));
+
+        //abp.ui.clearBusy($("#roles-table"));
       });
   }
 
@@ -64,7 +64,7 @@ export class RolesComponent extends PagedListingComponentBase<RoleDto> {
                 this.refresh();
               })
             )
-            .subscribe(() => {});
+            .subscribe(() => { });
         }
       }
     );

angular/src/shared/directives/block.directive.ts

@@ -0,0 +1,33 @@
+import {
+    AfterViewInit,
+    Directive,
+    ElementRef,
+    Injectable,
+    HostListener,
+    Input,
+    SimpleChanges
+} from '@angular/core';
+
+@Directive({
+    selector: '[block]'
+})
+@Injectable()
+export class BlockDirective implements AfterViewInit {
+    @Input('block') loading: boolean;
+    private $element: JQuery;
+
+    constructor(private _element: ElementRef) { }
+
+    ngAfterViewInit(): void {
+        this.$element = $(this._element.nativeElement);
+    }
+
+    ngOnChanges(changes: SimpleChanges): void {
+        $.blockUI.defaults.overlayCSS.cursor = 'not-allowed';
+        if (changes['loading'].currentValue) {
+            abp.ui.block(this._element.nativeElement);
+        } else {
+            abp.ui.unblock(this._element.nativeElement);
+        }
+    }
+}

angular/src/shared/directives/busy.directive.ts

@@ -0,0 +1,33 @@
+import {
+    AfterViewInit,
+    Directive,
+    ElementRef,
+    Injectable,
+    HostListener,
+    Input,
+    SimpleChanges
+} from '@angular/core';
+
+@Directive({
+    selector: '[busy]'
+})
+@Injectable()
+export class BusyDirective implements AfterViewInit {
+    @Input('busy') loading: boolean;
+    private $element: JQuery;
+
+    constructor(private _element: ElementRef) { }
+
+    ngAfterViewInit(): void {
+        this.$element = $(this._element.nativeElement);
+    }
+
+    ngOnChanges(changes: SimpleChanges): void {
+
+        if (changes['loading'].currentValue) {
+            abp.ui.setBusy(this._element.nativeElement);
+        } else {
+            abp.ui.clearBusy(this._element.nativeElement);
+        }
+    }
+}

angular/src/shared/shared.module.ts

@@ -52,6 +52,8 @@ import {
     MatTooltipModule,
     MatTreeModule,
 } from '@angular/material';
+import { BlockDirective } from './directives/block.directive';
+import { BusyDirective } from './directives/busy.directive';
 @NgModule({
     imports: [
         CommonModule,
@@ -97,12 +99,16 @@ import {
     declarations: [
         MaterialInput,
         AbpPaginationControlsComponent,
-        LocalizePipe
+        LocalizePipe,
+        BlockDirective,
+        BusyDirective
     ],
     exports: [
         MaterialInput,
         AbpPaginationControlsComponent,
         LocalizePipe,
+        BlockDirective,
+        BusyDirective,
         CdkTableModule,
         CdkTreeModule,
         DragDropModule,