FEAT #11698 TIME 0:20 add loader get file content

src/frontend/app/process/process.component.html

@@ -169,7 +169,7 @@
         </div>
         <div class="document-container" [class.fullContainer]="appService.getViewMode()">
             <div class="content">
-                <app-document-viewer #appDocumentViewer style="height:100%;width:100%;" [editMode]="false">
+                <app-document-viewer #appDocumentViewer *ngIf="!loading" style="height:100%;width:100%;" [editMode]="false" [resId]="currentResourceInformations.resId">
                 </app-document-viewer>
             </div>
         </div>

src/frontend/app/viewer/document-viewer.component.html

@@ -19,6 +19,7 @@
     <ng-template #elseHaveFile>
         <div class="example-loading-shade" *ngIf="loading">
             <mat-progress-spinner [mode]="loadingInfo.mode" [value]="loadingInfo.percent"></mat-progress-spinner>
+            <div class="percent">{{loadingInfo.percent}} %</div>
             <div style="padding-top: 10px;">{{loadingInfo.message}}</div>
         </div>
         <div *ngIf="file.content === null && !loading" class="view-doc-container" appUploadFileDragDrop

src/frontend/app/viewer/document-viewer.component.scss

@@ -19,6 +19,12 @@
   background: rgba(255, 255, 255, 0.7);
   display: flex;
   flex-direction: column;
+
+  .percent {
+    position: absolute;
+    margin-top: -5px;
+    color: $primary;
+  }
 }
 
 .viewer-tools {

src/frontend/app/viewer/document-viewer.component.ts

@@ -28,7 +28,7 @@ export class DocumentViewerComponent implements OnInit {
 
     lang: any = LANG;
 
-    loading: boolean = false;
+    loading: boolean = true;
     noConvertedFound: boolean = false;
 
     noFile: boolean = false;
@@ -51,10 +51,11 @@ export class DocumentViewerComponent implements OnInit {
 
     listTemplates: any[] = [];
 
+    @Input('resId') resId: number = null;
     @Input('editMode') editMode: boolean = false;
 
     loadingInfo: any = {
-        mode: 'determinate',
+        mode: 'indeterminate',
         percent: 0,
         message: '',
     };
@@ -86,6 +87,12 @@ export class DocumentViewerComponent implements OnInit {
 
                 this.maxFileSize = data.informations.maximumSize;
                 this.maxFileSizeLabel = data.informations.maximumSizeLabel;
+
+                if (this.resId !== null) {
+                    this.loadRessource(this.resId);
+                } else {
+                    this.loading = false;
+                }
             }),
             catchError((err: any) => {
                 this.notify.handleErrors(err);
@@ -390,21 +397,25 @@ export class DocumentViewerComponent implements OnInit {
     }
 
     loadRessource(resId: any, target: string = 'mainDocument') {
-        this.http.get(`../../rest/resources/${resId}/content`, { params: { mode: 'base64'}}).pipe(
-            tap((data: any) => {
-                this.file.content = data.encodedDocument;
-                this.file.src = this.base64ToArrayBuffer(this.file.content);
-
-            }),
-            catchError((err: any) => {
+        this.loading = true;
+        this.requestWithLoader(`../../rest/resources/${resId}/content?mode=base64`).subscribe(
+            (data: any) => {
+                if (data.encodedDocument) {
+                    this.file.content = data.encodedDocument;
+                    this.file.src = this.base64ToArrayBuffer(this.file.content);
+                    this.loading = false;
+                }
+            },
+            (err: any) => {
                 if (err.error.errors === 'Document has no file') {
                     this.noFile = true;
                 } else {
                     this.notify.handleErrors(err);
                 }
+                this.loading = false;
                 return of(false);
-            })
-        ).subscribe();
+            }
+        );
     }
 
     editTemplate(template: any) {