FEAT #11698 TIME 0:20 disable validate if edit template in progress

src/frontend/app/indexation/indexation.component.html

@@ -66,7 +66,7 @@
                             </button>
                         </ng-container>
                     </mat-menu>
-                    <button mat-button *ngIf="!appService.getViewMode()" [disabled]="actionService.loading || selectedAction.id === 0"
+                    <button mat-button *ngIf="!appService.getViewMode()" [disabled]="actionService.loading || selectedAction.id === 0 || appDocumentViewer.isEditingTemplate()"
                         class="button-form-primary-filled"
                         style="width: 150px;align-items: center;justify-content: center;text-align: center;display: flex;"
                         (click)="onSubmit()">{{lang.validate}}</button>

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

 <ng-container *ngIf="editInProgress; else elseTemplate">
-    toto
+    <div class="editInProgress">
+        <i class="fas fa-file-word bounce"></i>
+        <div>
+            Edition en cours ...
+        </div>
+        <div>
+            <button mat-button (click)="cancelTemplateEdition()">{{lang.cancel}}</button>
+        </div>
+    </div>
 </ng-container>
 <ng-template #elseTemplate>
     <div class="example-loading-shade" *ngIf="loading">
@@ -19,14 +27,12 @@
                 <i class="fa fa-chevron-down menu-icon"></i>
             </button>
             <mat-menu #menu="matMenu" [class]="'menuForm'">
-                <button mat-menu-item>Modèle 1</button>
+                <button mat-menu-item (click)="editTemplate()">Modèle 1</button>
                 <button mat-menu-item>Modèle 2</button>
             </mat-menu>
             <button mat-button (click)="docToUpload.click()" class="button-form-primary-alt"
                 style="align-items: center;justify-content: center;text-align: center;display: flex;">Choisissez
                 votre fichier</button>
-            <button mat-button (click)="editTemplate()" class="button-form-primary-alt"
-                style="align-items: center;justify-content: center;text-align: center;display: flex;">Test</button>
         </div>
     </div>
     <input type="file" #docToUpload name="files[]" (change)="uploadTrigger($event)" style="display:none;">

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

@@ -37,7 +37,7 @@
         width: 50px;
 
         .mat-icon {
-            color:white;
+            color: white;
             font-size: 20px;
             transition: all 0.2s;
         }
@@ -92,4 +92,96 @@
 .extensionsList {
     height: 200px;
     overflow: auto;
-}
\ No newline at end of file
+}
+
+.editInProgress {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    justify-content: center;
+    opacity: 0.5;
+
+    div {
+        font-size: 20px;
+        padding-top: 20px;
+    }
+
+    i {
+        font-size: 150px;
+    }
+}
+
+@-webkit-keyframes bounce {
+    from,
+    20%,
+    53%,
+    80%,
+    to {
+      -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+      animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+      -webkit-transform: translate3d(0, 0, 0);
+      transform: translate3d(0, 0, 0);
+    }
+  
+    40%,
+    43% {
+      -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+      animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+      -webkit-transform: translate3d(0, -30px, 0);
+      transform: translate3d(0, -30px, 0);
+    }
+  
+    70% {
+      -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+      animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+      -webkit-transform: translate3d(0, -15px, 0);
+      transform: translate3d(0, -15px, 0);
+    }
+  
+    90% {
+      -webkit-transform: translate3d(0, -4px, 0);
+      transform: translate3d(0, -4px, 0);
+    }
+  }
+  
+  @keyframes bounce {
+    from,
+    20%,
+    53%,
+    80%,
+    to {
+      -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+      animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+      -webkit-transform: translate3d(0, 0, 0);
+      transform: translate3d(0, 0, 0);
+    }
+  
+    40%,
+    43% {
+      -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+      animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+      -webkit-transform: translate3d(0, -30px, 0);
+      transform: translate3d(0, -30px, 0);
+    }
+  
+    70% {
+      -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+      animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+      -webkit-transform: translate3d(0, -15px, 0);
+      transform: translate3d(0, -15px, 0);
+    }
+  
+    90% {
+      -webkit-transform: translate3d(0, -4px, 0);
+      transform: translate3d(0, -4px, 0);
+    }
+  }
+  
+  .bounce {
+    animation-duration: 2s;
+    -webkit-animation-name: bounce;
+    animation-name: bounce;
+    -webkit-transform-origin: center bottom;
+    transform-origin: center bottom;
+    animation-iteration-count: infinite;
+  }
\ No newline at end of file

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

@@ -396,4 +396,13 @@ export class DocumentViewerComponent implements OnInit {
                 });
         }, 1000);
     }
+
+    cancelTemplateEdition() {
+        clearInterval(this.intervalLockFile);
+        this.editInProgress = false;
+    }
+
+    isEditingTemplate() {
+        return this.editInProgress;
+    }
 }
\ No newline at end of file