Merge branch...

Merge branch '134-data-accesses-button-should-be-disabled-while-a-request-is-made' into 'development'

Add loading on buttons and update disabled condition

Closes #134

See merge request refonte-data/portail-data!44

src/app/user/components/access-management/available-data/available-data.component.html

@@ -68,8 +68,9 @@
   </div>
 </div>
 <div class="action-button-wrapper">
-  <button type="button" class="button btn-blue-text" [disabled]="selectedResources(requestableResources).length <= 0"
-    (click)="requestAccess()" i18n="@@userService.sendRequest">
+  <button type="button" class="button btn-blue-text" [ngClass]="{'is-loading': isLoading}"
+    [disabled]="selectedResources(requestableResources).length <= 0 || isLoading" (click)="requestAccess()"
+    i18n="@@userService.sendRequest">
     Send my request
   </button>
 </div>
\ No newline at end of file

src/app/user/components/access-management/available-data/available-data.component.ts

@@ -15,6 +15,7 @@ import { AppRoutes } from '../../../../routes';
 })
 export class AvailableDataComponent implements OnInit {
 
+  private _pendingRequests: number = 0;
   AppRoutes = AppRoutes;
   requestableResources: Resource[] = [];
   openedRow: number[] = [];
@@ -30,6 +31,7 @@ export class AvailableDataComponent implements OnInit {
   ) { }
 
   ngOnInit() {
+    this._pendingRequests += 1;
     forkJoin([
       // Get the list of the different modes (wms, ws...)
       this._userAccessService.getServices(),
@@ -45,13 +47,19 @@ export class AvailableDataComponent implements OnInit {
           return (e.geonetUuid && e.geonetUuid !== '');
         });
         const uuids = this.restrictedAccessDatasets.map((e) => { return e.geonetUuid; });
-        this._elasticSearchService.getSlugsFromUuid(uuids).subscribe((response) => {
-          this.slugsUuids = response;
-          this.initRequestableResources();
-        });
-
+        this._elasticSearchService.getSlugsFromUuid(uuids).subscribe(
+          (response) => {
+            this.slugsUuids = response;
+            this.initRequestableResources();
+          },
+          (err) => { },
+          () => {
+            this._pendingRequests -= 1;
+          }
+        );
       },
       (err) => {
+        this._pendingRequests -= 1;
         this._notificationService.notify(new Notification({
           type: 'error',
           message: `${notificationMessages.userServices.initializationError}`,
@@ -143,6 +151,7 @@ export class AvailableDataComponent implements OnInit {
     this.selectedResources(this.requestableResources).forEach((e) => {
       accessRequests.push({ id: e.datasetId, servicesId: e.services.map(e => e.id) });
     });
+    this._pendingRequests += 1;
     this._userAccessService.requestAccessToResource(accessRequests).subscribe(
       (res) => {
         // Displaying notification for each sucessful and unsuccessful request
@@ -172,9 +181,13 @@ export class AvailableDataComponent implements OnInit {
               message: `${notificationMessages.userServices.failedToLoadUserResources}`,
             }));
           },
+          () => {
+            this._pendingRequests -= 1;
+          },
         );
       },
       (err) => {
+        this._pendingRequests -= 1;
         this._notificationService.notify(new Notification({
           type: 'error',
           message: `${notificationMessages.userServices.addFailed}`,
@@ -270,4 +283,8 @@ export class AvailableDataComponent implements OnInit {
     }
   }
 
+  get isLoading() {
+    return this._pendingRequests > 0 ? true : false;
+  }
+
 }

src/app/user/components/access-management/user-services/user-services.component.html

@@ -144,13 +144,15 @@
 </div>
 
 <div class="action-button-wrapper">
-  <button type="button" class="button btn-red-text" [disabled]="selectedResources(userResources).length <= 0"
-    (click)="removeAccess()" i18n="@@userService.removeButton">
+  <button type="button" class="button btn-red-text" [ngClass]="{'is-loading': isRemovingAccess}"
+    [disabled]="selectedResources(userResources).length <= 0 || isLoading" (click)="removeAccess()"
+    i18n="@@userService.removeButton">
     Remove access
   </button>
 
-  <button type="button" class="button btn-blue-text" [disabled]="selectedResources(userResources).length <= 0"
-    (click)="renewAccesses()" i18n="@@userService.renewButton">
+  <button type="button" class="button btn-blue-text" [ngClass]="{'is-loading': isRenewingAccess}"
+    [disabled]="selectedResources(userResources).length <= 0 || isLoading" (click)="renewAccesses()"
+    i18n="@@userService.renewButton">
     Renew access
   </button>
 </div>
\ No newline at end of file

src/app/user/components/access-management/user-services/user-services.component.ts

@@ -14,8 +14,11 @@ import { AppRoutes } from '../../../../routes';
   styleUrls: ['./user-services.component.scss'],
 })
 export class UserServicesComponent implements OnInit {
-  AppRoutes = AppRoutes;
 
+  private _pendingRequests: number = 0;
+  isRemovingAccess = false;
+  isRenewingAccess = false;
+  AppRoutes = AppRoutes;
   userResources: Resource[] = [];
   services: IService[] = [];
   statusesTrad = userServicesStatuses;
@@ -31,6 +34,7 @@ export class UserServicesComponent implements OnInit {
   ) { }
 
   ngOnInit() {
+    this._pendingRequests += 1;
     forkJoin([
       // Get the list of the requested services by the user
       this._userAccessService.getUserResources(),
@@ -56,6 +60,9 @@ export class UserServicesComponent implements OnInit {
           message: `${notificationMessages.userServices.initializationError}`,
         }));
       },
+      () => {
+        this._pendingRequests -= 1;
+      },
     );
   }
 
@@ -205,6 +212,10 @@ export class UserServicesComponent implements OnInit {
     );
   }
 
+  get isLoading() {
+    return this._pendingRequests > 0 ? true : false;
+  }
+
   // Functions perfoming actions on user access
   removeAccess() {
     const accessRequests = [];
@@ -213,6 +224,10 @@ export class UserServicesComponent implements OnInit {
     this.selectedResources(this.userResources).forEach((e) => {
       accessRequests.push({ id: e.datasetId, servicesId: e.services.map(e => e.id) });
     });
+
+    this._pendingRequests += 1;
+    this.isRemovingAccess = true;
+
     this._userAccessService.deleteAccessToResource(accessRequests).subscribe(
       (res) => {
         // Displaying notification for each sucessful and unsuccessful request
@@ -241,9 +256,14 @@ export class UserServicesComponent implements OnInit {
               message: `${notificationMessages.userServices.failedToLoadUserResources}`,
             }));
           },
+          () => {
+            this._pendingRequests -= 1;
+            this.isRemovingAccess = false;
+          },
         );
       },
       (err) => {
+        this._pendingRequests -= 1;
         this._notificationService.notify(new Notification({
           type: 'error',
           message: `${notificationMessages.userServices.removeFailed}`,
@@ -262,6 +282,9 @@ export class UserServicesComponent implements OnInit {
       },
     );
 
+    this._pendingRequests += 1;
+    this.isRenewingAccess = true;
+
     this._userAccessService.renewAccessToResource(accessRequests).subscribe(
       (res) => {
         this.resetUserRessourcesState();
@@ -287,6 +310,10 @@ export class UserServicesComponent implements OnInit {
           message: `${notificationMessages.userServices.renewFailed}`,
         }));
       },
+      () => {
+        this._pendingRequests -= 1;
+        this.isRenewingAccess = false;
+      },
     );
   }
 }