FIX #18826 TIME 0:25 document editor: add a loader when saving changes

src/frontend/app/administration/template/templateFileEditorModal/template-file-editor-modal.component.html

@@ -4,10 +4,10 @@
             <mat-spinner></mat-spinner>
         </div>
         <onlyoffice-viewer *ngIf="editorType === 'onlyoffice'" #onlyofficeViewer style="height:100%;width:100%;" [hideCloseEditor]="true"
-            [params]="editorOptions" [file]="file" [editMode]="true" (triggerAfterUpdatedDoc)="close()"
+            [params]="editorOptions" [file]="file" [editMode]="true" [loading]="loading" (triggerAfterUpdatedDoc)="close()"
             (triggerCloseEditor)="dialogRef.close('');" (triggerModifiedDocument)="documentIsModified = true"></onlyoffice-viewer>
         <app-collabora-online-viewer *ngIf="editorType === 'collaboraonline'" #collaboraOnlineViewer style="height:100%;width:100%;" [params]="editorOptions" [file]="file"
-                                     [editMode]="true" (triggerAfterUpdatedDoc)="close()"
+                                     [editMode]="true" [loading]="loading" (triggerAfterUpdatedDoc)="close()"
                                          (triggerCloseEditor)="dialogRef.close('');" (triggerModifiedDocument)="documentIsModified = true"></app-collabora-online-viewer>
         <div *ngIf="editorType === 'office365sharepoint'" class="office-sharepoint-container">
             <app-office-sharepoint-viewer #officeSharepointViewer style="height:100%;width:100%;" [params]="editorOptions" [file]="file"

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

@@ -114,12 +114,15 @@
 </ng-container>
 <ng-container *ngIf="editInProgress && editor.mode === 'onlyoffice'">
     <onlyoffice-viewer #onlyofficeViewer style="height:100%;width:100%;" [params]="editor.options" [file]="file"
-        [editMode]="true" (triggerAfterUpdatedDoc)="triggerEvent.emit()"
+        [editMode]="true" (triggerAfterUpdatedDoc)="triggerEvent.emit()" [loading]="loading"
         (triggerCloseEditor)="closeEditor()" (triggerModifiedDocument)="isDocModified = true"></onlyoffice-viewer>
+    <div *ngIf="loading" class="example-loading-shade">
+        <mat-spinner style="margin:auto;"></mat-spinner>
+    </div>
 </ng-container>
 <ng-container *ngIf="editInProgress && editor.mode === 'collaboraOnline'">
     <app-collabora-online-viewer #collaboraOnlineViewer style="height:100%;width:100%;" [params]="editor.options" [file]="file"
-        [editMode]="true" (triggerAfterUpdatedDoc)="triggerEvent.emit()"
+        [editMode]="true" (triggerAfterUpdatedDoc)="triggerEvent.emit()" [loading]="loading"
         (triggerCloseEditor)="closeEditor()" (triggerModifiedDocument)="isDocModified = true"></app-collabora-online-viewer>
     <div *ngIf="collaboraOnlineViewer.isSaving" class="example-loading-shade">
         <mat-spinner style="margin:auto;"></mat-spinner>
@@ -134,12 +137,12 @@
         <mat-spinner style="margin:auto;"></mat-spinner>
     </div>
 </ng-container>
-<button mat-fab *ngIf="isDocModified && mode === 'mainDocument' && resId !== null && editor.mode !== 'office365sharepoint'" color="accent"
+<button mat-fab *ngIf="isDocModified && mode === 'mainDocument' && resId !== null && editor.mode !== 'office365sharepoint' && !loading" color="accent"
     [title]="'lang.saveModifications' | translate" style="position: absolute;z-index: 3;bottom: 40px;right: 60px;"
     (click)="saveMainDocument()">
     <mat-icon style="height:auto;font-size:20px;" class="fas fa-check"></mat-icon>
 </button>
-<button mat-fab *ngIf="isDocModified && mode === 'attachment' && editor.mode !== 'office365sharepoint'" color="accent"
+<button mat-fab *ngIf="isDocModified && mode === 'attachment' && editor.mode !== 'office365sharepoint' && !loading" color="accent"
     [title]="'lang.saveModifications' | translate" style="position: absolute;z-index: 3;bottom: 40px;right: 60px;"
     (click)="saveTmpDocument()">
     <mat-icon style="height:auto;font-size:20px;" class="fas fa-check"></mat-icon>

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

@@ -1177,6 +1177,7 @@ export class DocumentViewerComponent implements OnInit, OnDestroy {
     }
 
     saveTmpDocument() {
+        this.loading = true;
         return new Promise((resolve, reject) => {
             this.getFile().pipe(
                 tap((data: any) => {
@@ -1195,6 +1196,7 @@ export class DocumentViewerComponent implements OnInit, OnDestroy {
                     this.closeEditor();
                     resolve(true);
                 }),
+                finalize(() => this.loading = false),
                 catchError((err: any) => {
                     this.notify.handleSoftErrors(err);
                     resolve(false);

src/frontend/plugins/collabora-online/collabora-online-viewer.component.html

 <div *ngIf="loading" style="display:block;padding: 10px;">{{'lang.checkCollaboraOnlineServer' | translate}}...</div>
-<button  class="collaboraOnlineButton_fullscreen" [class.buttonsHide]="hideButtons" [class.fullScreen]="fullscreenMode" mat-mini-fab color="warn"
+<button  class="collaboraOnlineButton_fullscreen" [disabled]="loading" [class.buttonsHide]="hideButtons" [class.fullScreen]="fullscreenMode" mat-mini-fab color="warn"
     [title]="'lang.closeEditor' | translate" (click)="quit()">
     <mat-icon class="fa fa-times" style="height:auto;"></mat-icon>
 </button>
-<button mat-mini-fab class="collaboraOnlineButton_close" [class.buttonsHide]="hideButtons" [class.fullScreen]="fullscreenMode" color="default"
+<button mat-mini-fab class="collaboraOnlineButton_close" [disabled]="loading" [class.buttonsHide]="hideButtons" [class.fullScreen]="fullscreenMode" color="default"
     [title]="fullscreenMode ? ('lang.closeFullscreen' | translate) : ('lang.openFullscreen' | translate)" (click)="openFullscreen()">
     <mat-icon class="fas" [class.fa-expand]="!fullscreenMode" [class.fa-compress]="fullscreenMode" style="height:auto;"></mat-icon>
 </button>
-<button class="collaboraOnlineButton_hide" [class.buttonsHide]="hideButtons" [class.fullScreen]="fullscreenMode" mat-mini-fab color="default"
+<button class="collaboraOnlineButton_hide" [disabled]="loading" [class.buttonsHide]="hideButtons" [class.fullScreen]="fullscreenMode" mat-mini-fab color="default"
         [title]="!hideButtons ? ('lang.hideTool' | translate) : ('lang.showTool' | translate)" (click)="hideButtons = !hideButtons">
     <mat-icon class="fa fa-arrow-right" style="height:auto;"></mat-icon>
 </button>

src/frontend/plugins/collabora-online/collabora-online-viewer.component.ts

@@ -18,11 +18,10 @@ declare let $: any;
 })
 export class CollaboraOnlineViewerComponent implements OnInit, AfterViewInit, OnDestroy {
 
-    loading: boolean = true;
-
     @Input() editMode: boolean = false;
     @Input() file: any = {};
     @Input() params: any = {};
+    @Input() loading: boolean = false;
 
     @Output() triggerAfterUpdatedDoc = new EventEmitter<string>();
     @Output() triggerCloseEditor = new EventEmitter<string>();

src/frontend/plugins/onlyoffice-api-js/onlyoffice-viewer.component.html

 <div *ngIf="loading" style="display:block;padding: 10px;">{{'lang.checkOnlyofficeServer' | translate}}...</div>
-<button *ngIf="!hideCloseEditor" class="onlyofficeButton_fullscreen" [class.buttonsHide]="hideButtons" [class.fullScreen]="fullscreenMode" mat-mini-fab color="warn"
+<button *ngIf="!hideCloseEditor" class="onlyofficeButton_fullscreen" [disabled]="loading" [class.buttonsHide]="hideButtons" [class.fullScreen]="fullscreenMode" mat-mini-fab color="warn"
     [title]="'lang.closeEditor' | translate" (click)="quit()">
     <mat-icon class="fa fa-times" style="height:auto;"></mat-icon>
 </button>
-<button mat-mini-fab class="onlyofficeButton_close" [class.buttonsHide]="hideButtons" [class.fullScreen]="fullscreenMode" color="default"
+<button mat-mini-fab class="onlyofficeButton_close" [disabled]="loading" [class.buttonsHide]="hideButtons" [class.fullScreen]="fullscreenMode" color="default"
     [title]="fullscreenMode ? ('lang.closeFullscreen' | translate) : ('lang.openFullscreen' | translate)" (click)="openFullscreen()">
     <mat-icon class="fas" [class.fa-expand]="!fullscreenMode" [class.fa-compress]="fullscreenMode" style="height:auto;"></mat-icon>
 </button>
-<button class="onlyofficeButton_hide" [class.fullScreen]="fullscreenMode" [class.buttonsHide]="hideButtons" mat-mini-fab color="default"
+<button class="onlyofficeButton_hide" [disabled]="loading" [class.fullScreen]="fullscreenMode" [class.buttonsHide]="hideButtons" mat-mini-fab color="default"
         [title]="!hideButtons ? ('lang.hideTool' | translate) : ('lang.showTool' | translate)" (click)="hideButtons = !hideButtons">
     <mat-icon class="fa fa-arrow-right" style="height:auto;"></mat-icon>
 </button>

src/frontend/plugins/onlyoffice-api-js/onlyoffice-viewer.component.ts

@@ -28,12 +28,11 @@ declare let DocsAPI: any;
 })
 export class EcplOnlyofficeViewerComponent implements OnInit, AfterViewInit, OnDestroy {
 
-    loading: boolean = true;
-
     @Input() editMode: boolean = false;
     @Input() file: any = {};
     @Input() params: any = {};
     @Input() hideCloseEditor: any = false;
+    @Input() loading: boolean = false;
 
     @Output() triggerAfterUpdatedDoc = new EventEmitter<string>();
     @Output() triggerCloseEditor = new EventEmitter<string>();