FIX #10730 TIME 0:10 add loader admin home

src/frontend/app/administration/administration.component.html

@@ -10,12 +10,15 @@
       </button> {{'lang.administration' | translate}}
     </header>
     <div class="container">
-        <div *ngFor="let privilege of privileges">
+        <div *ngIf="loading" class="loader">
+          <mat-spinner></mat-spinner>
+        </div>
+        <div class="admin-item" *ngFor="let privilege of privileges">
             <button mat-stroked-button color="primary" [routerLink]="privilege.route">
               <mat-icon color="primary" [class]="privilege.icon"></mat-icon>
-              <span>{{'lang.' + privilege.title | translate}}</span>
+              <span>{{'lang.' + privilege.id | translate}}</span>
               <span class="admin-desc">
-                  {{'lang.' + privilege.description | translate}}
+                  {{'lang.' + privilege.id + 'Desc' | translate}}
               </span>
             </button>
         </div>

src/frontend/app/administration/administration.component.scss

@@ -18,7 +18,7 @@ header {
 .container {
   flex: 1;
   overflow: auto;
-  div {
+  .admin-item {
     padding-top: 20px;
     padding-bottom: 20px;
     text-align: center;
@@ -55,6 +55,20 @@ header {
   }
 }
 
+.loader {
+  position: absolute;
+  z-index: 2;
+  display: flex;
+  background: #fffc;
+  width: 100%;
+  height: 100%;
+  justify-content: center;
+  align-items: center;
+  top: 0;
+  margin: 0;
+  padding: 0;
+}
+
 .admin-desc {
   white-space: normal;
   font-size: 10px;

src/frontend/app/administration/administration.component.ts

@@ -2,6 +2,7 @@ import { Component, OnInit } from '@angular/core';
 import { SignaturesContentService } from '../service/signatures.service';
 import { NotificationService } from '../service/notification.service';
 import { HttpClient } from '@angular/common/http';
+import { map, tap, finalize } from 'rxjs/operators';
 
 export interface Privilege {
     title: string;
@@ -18,25 +19,21 @@ export interface Privilege {
 
 export class AdministrationComponent implements OnInit {
 
+    loading: boolean = true;
     privileges: Privilege[] = [];
 
     constructor(public http: HttpClient, public signaturesService: SignaturesContentService, public notificationService: NotificationService) { }
 
     ngOnInit(): void {
         this.http.get('../rest/administrativePrivileges')
-            .subscribe((data: any) => {
-                data.privileges.forEach((element: any) => {
-                    this.privileges.push({
-                        title: element.id,
-                        description: element.id + 'Desc',
-                        icon: element.icon,
-                        route: element.route
-                    }
-                    );
-                });
-                console.log(this.privileges);
-            }, (err) => {
-                this.notificationService.handleErrors(err);
-            });
+        .pipe(
+            map((data: any) => data.privileges),
+            tap(() => this.loading = true),
+            finalize(() => this.loading = false)
+        )
+        .subscribe({
+            next: data => this.privileges = data,
+            error: err => this.notificationService.handleErrors(err)
+        });
     }
 }

src/frontend/app/administration/user/users-list.component.html

@@ -46,7 +46,7 @@
           </mat-cell>
         </ng-container>
         <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
-        <mat-row matRipple *matRowDef="let row; columns: displayedColumns;" routerLink="/administration/users/{{row.id}}"
+        <mat-row *matRowDef="let row; columns: displayedColumns;" routerLink="/administration/users/{{row.id}}"
           style="cursor:pointer;"></mat-row>
       </mat-table>
       <div class="noResult" *ngIf="dataSource.filteredData.length === 0">