FEAT #12861 TIME 0:45 add menu list linked document

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

@@ -4,7 +4,7 @@
             (tap)="snavRightComponent.close();">
             <mat-icon fontSet="fas" fontIcon="fa-arrow-right fa-2x"></mat-icon>
         </button>
-        <mat-icon fontSet="fas" fontIcon="fa-file fa-2x"></mat-icon> <b>{{docList.length}}</b>&nbsp;{{'lang.documents' | translate}}
+        <mat-icon fontSet="fas" fontIcon="fa-file fa-2x"></mat-icon> <b>{{docList.length}}</b>&nbsp;{{'lang.attachedElements' | translate}}
     </div>
     <div class="pjListContent">
         <div *ngFor="let doc of docList;let i=index" style="position: relative;">

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

@@ -25,17 +25,29 @@
                     </button>
                 </section>
                 <section class="header-action">
-                    <button mat-button (click)="openDocumentList();">
-                        <i class="fas fa-file fa-2x" [matBadge]="mainDocument.attachments.length + 1"></i><span
-                            style="display: block;line-height: 10px;">{{'lang.documents' | translate | titlecase}}</span>
+                    <button mat-button class="header-action-button" *ngIf="mainDocument.linkedDocuments !== undefined && mainDocument.linkedDocuments.length > 0" [matMenuTriggerFor]="assocDoc">
+                        <i class="fas fa-folder-open fa-2x" [matBadge]="mainDocument.linkedDocuments.length"></i><span
+                            style="display: block;line-height: 15px;">{{'lang.associatedDocuments' | translate | ucfirst}}</span>
                     </button>
-                    <button mat-button (click)="openVisaWorkflow();">
+                    <mat-menu #assocDoc="matMenu">
+                        <button mat-menu-item *ngFor="let doc of mainDocument.linkedDocuments" (click)="gotTo(doc.id)" style="height: auto;line-height: inherit;font-family: 'lato', sans-serif;">
+                            <div style="font-size: 12px;color: #4F4F4F;padding-top: 10px;padding-bottom: 10px;">
+                                <div>{{doc.reference}}</div>
+                                <div style="font-weight: 600;color: #135F7F;font-size: 14px;">{{doc.title}}</div>
+                            </div>
+                        </button>
+                      </mat-menu>
+                    <button mat-button class="header-action-button" (click)="openDocumentList();">
+                        <i class="fas fa-paperclip fa-2x" [matBadge]="mainDocument.attachments.length + 1"></i><span
+                            style="display: block;line-height: 15px;">{{'lang.attachedElements' | translate | ucfirst}}</span>
+                    </button>
+                    <button mat-button class="header-action-button" (click)="openVisaWorkflow();">
                         <i class="fas fa-list-ol fa-2x" [matBadge]="mainDocument.workflow.length"></i><span
-                            style="display: block;line-height: 10px;">{{'lang.circuit' | translate}}</span>
+                            style="display: block;line-height: 15px;">{{'lang.circuit' | translate}}</span>
                     </button>
-                    <button mat-button [matMenuTriggerFor]="menu">
+                    <button mat-button class="header-action-button" [matMenuTriggerFor]="menu">
                         <i class="fas fa-cog fa-2x"></i><span
-                            style="display: block;line-height: 10px;">{{'lang.actions' | translate}}</span>
+                            style="display: block;line-height: 15px;">{{'lang.actions' | translate}}</span>
                     </button>
                     <mat-menu #menu="matMenu">
                         <button [disabled]="checkEmptiness()" mat-menu-item

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

@@ -71,6 +71,7 @@ canvas {
   justify-content: center;
   align-items: center;
   padding: 0;
+
   /*&-left
       position absolute
       top 15px
@@ -79,6 +80,12 @@ canvas {
     justify-content: center;
     display: flex;
     color: $primary;
+
+    &-button {
+      white-space: initial;
+      word-break: break-word;
+      width: 135px !important;
+    }
   }
 
   &-infos {
@@ -133,20 +140,20 @@ canvas {
     }
 
     ::ng-deep .mat-form-field-underline {
-        display: none;
+      display: none;
     }
 
     &-content {
-        width: 33%;
-        display: inline-block;
-
-        input {
-          text-overflow: ellipsis;
-        }
-        
-        .mat-form-field {
-          width: 100%;
-        }
+      width: 33%;
+      display: inline-block;
+
+      input {
+        text-overflow: ellipsis;
+      }
+
+      .mat-form-field {
+        width: 100%;
+      }
     }
 
     input:disabled {
@@ -271,7 +278,7 @@ button.disabled {
 }
 
 .leftPosDesk {
-  left:25% !important;
+  left: 25% !important;
 }
 
 .mat-badge-content {
@@ -283,7 +290,7 @@ button.disabled {
   background: $primary;
 
   div {
-    padding:10px;
+    padding: 10px;
   }
 
   .msgModal {
@@ -299,9 +306,9 @@ button.disabled {
   overflow: hidden;
   text-overflow: ellipsis;
   background:
-  #135F7F;
+    #135F7F;
   color:
-  white;
+    white;
   font-size: 13px;
   text-align: center;
-}
+}
\ No newline at end of file

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

@@ -539,4 +539,15 @@ export class DocumentComponent implements OnInit {
                 });
         }
     }
+
+    gotTo(documentId: number, i: any) {
+        this.router.navigate(['/documents/' + documentId]);
+        this.signaturesService.mainDocumentId = documentId;
+        // this.signaturesService.indexDocumentsList = i;
+        this.signaturesService.sideNavRigtDatas = {
+            mode: 'mainDocumentDetail',
+            width: '450px',
+            locked: false,
+        };
+    }
 }

src/frontend/core/styles.scss

@@ -275,4 +275,12 @@ mat-accordion mat-expansion-panel {
 
 .mat-bottom-sheet-container {
   max-height: 90vh !important;
+}
+
+.mat-menu-panel {
+  max-width: inherit !important;
+}
+.mat-menu-content:not(:empty) {
+  padding-top: 0 !important;
+  padding-bottom: 0 !important;
 }
\ No newline at end of file