FIX #14149 TIME 4 can edit main document in signature book

src/frontend/app/signature-book.component.html

@@ -4,39 +4,53 @@
 <div *ngIf="!loading" class='visaContent'>
     <div class="titleSignatureBook">
         <div id="tabSignatureBook">
-            <div *ngIf="signatureBook.documents[0] && !signatureBook.documents[0].inSignatureBook" title="{{lang.mail}}" class="item" [ngClass]="{'activeTabSignatureBook': headerTab == 'document'}" (click)="changeSignatureBookLeftContent('document')">
+            <div *ngIf="signatureBook.documents[0] && !signatureBook.documents[0].inSignatureBook" title="{{lang.mail}}"
+                class="item" [ngClass]="{'activeTabSignatureBook': headerTab == 'document'}"
+                (click)="changeSignatureBookLeftContent('document')">
                 <i class="fa fa-file-alt fa-2x"></i>
             </div>
-            <div *ngFor="let module of processTool" title="{{module.label}}" class="item" [ngClass]="{'activeTabSignatureBook': headerTab == module.id}" (click)="changeSignatureBookLeftContent(module.id)">
+            <div *ngFor="let module of processTool" title="{{module.label}}" class="item"
+                [ngClass]="{'activeTabSignatureBook': headerTab == module.id}"
+                (click)="changeSignatureBookLeftContent(module.id)">
                 <i [class]="module.icon"></i>
                 <i *ngIf="module.count > 0" class="fas fa-circle haveContent"></i>
             </div>
         </div>
-        <div id="labelSignatureBook" title="{{signatureBook.documents[0].title}}" ><div>{{signatureBook.documents[0].alt_id}} : {{signatureBook.documents[0].title}}</div></div>
+        <div id="labelSignatureBook" title="{{signatureBook.documents[0].title}}">
+            <div>{{signatureBook.documents[0].alt_id}} : {{signatureBook.documents[0].title}}</div>
+        </div>
         <div id="closeSignatureBook">
             <i style="cursor: pointer" (click)="backToBasket()" class="fa fa-times-circle fa-2x"></i>
         </div>
         <div class="actions">
-            <i style="cursor: pointer;vertical-align: middle;" title="{{lang.linkDetails}}" class="fa fa-info-circle fa-2x" (click)="backToDetails()"></i>&nbsp;
+            <i style="cursor: pointer;vertical-align: middle;" title="{{lang.linkDetails}}"
+                class="fa fa-info-circle fa-2x" (click)="backToDetails()"></i>&nbsp;
             <select id="signatureBookActions">
                 <option *ngFor="let option of signatureBook.actions" value="{{option.id}}">{{option.label}}</option>
             </select>
-            <input name="send" id="send" value="{{lang.validate}}" class="button button-form-primary-filled" type="button" (click)="validForm()">
+            <input name="send" id="send" value="{{lang.validate}}" class="button button-form-primary-filled"
+                type="button" (click)="validForm()">
         </div>
         <div class="others" *ngIf="!functions.empty(signatureBook.consigne)">
             <span id="consigne">
-                <input type="text" value="{{signatureBook.consigne}}" title="{{signatureBook.consigne}}" readonly="readonly" class="inputConsigne">
+                <input type="text" value="{{signatureBook.consigne}}" title="{{signatureBook.consigne}}"
+                    readonly="readonly" class="inputConsigne">
             </span>
         </div>
     </div>
     <div class="contentSignatureBook">
-        <div class="resListContent" [ngStyle]="{'display': showResLeftPanel ? 'inline-block' : 'none'}" id="resListContent">
+        <div class="resListContent" [ngStyle]="{'display': showResLeftPanel ? 'inline-block' : 'none'}"
+            id="resListContent">
             <div class="resListContentPos">
-                <div class="resListContentFrame" *ngFor="let res of signatureBook.resList" (click)="changeLocation(res.res_id, 'view')" [ngClass]="{'resListContentFrameSelected': resId == res.res_id}">
+                <div class="resListContentFrame" *ngFor="let res of signatureBook.resList"
+                    (click)="changeLocation(res.res_id, 'view')"
+                    [ngClass]="{'resListContentFrameSelected': resId == res.res_id}">
                     <div class="resListContentInfo">
                         <i class="fa fa-compass" title="{{lang.chronoNumber}}"></i> {{res.alt_identifier}}
                         <i *ngIf="res.allSigned" class="fa fa-certificate"></i>&nbsp;
-                        <i class="fa fa-circle" title="{{res.priorityLabel}}" aria-hidden="true" [ngStyle]="{'color': res.priorityColor}" style="position: absolute;right: 0px;top: -10px;font-size: 25px;"></i>
+                        <i class="fa fa-circle" title="{{res.priorityLabel}}" aria-hidden="true"
+                            [ngStyle]="{'color': res.priorityColor}"
+                            style="position: absolute;right: 0px;top: -10px;font-size: 25px;"></i>
                     </div>
                     <div class="resListContentInfo">
                         <i class="fa fa-info" title="{{lang.object}}"></i> {{res.subject}}
@@ -45,10 +59,12 @@
                         <i class="fa fa-book" title="{{lang.contactInfo}}"></i> {{res.sender}}
                     </div>
                     <div class="resListContentInfo">
-                        <i class="fa fa-calendar-alt" title="{{lang.arrivalDate}}"></i> {{res.creation_date | date:'dd/MM/y'}}
+                        <i class="fa fa-calendar-alt" title="{{lang.arrivalDate}}"></i>
+                        {{res.creation_date | date:'dd/MM/y'}}
                     </div>
                     <div class="resListContentInfo" style="margin-top:-10px;">
-                        <i class="fa fa-bell" title="{{lang.processLimitDate}}"></i> {{res.process_limit_date | date:'dd/MM/y'}}
+                        <i class="fa fa-bell" title="{{lang.processLimitDate}}"></i>
+                        {{res.process_limit_date | date:'dd/MM/y'}}
                     </div>
                 </div>
             </div>
@@ -64,40 +80,54 @@
             <div *ngIf="headerTab == 'document'" class="contentShow">
                 <div *ngIf="showTopLeftPanel" class="pjDoc">
                     <div style="height:100%;">
-                        <img title="{{document.title}}" id="thumnails_img" *ngFor="let document of signatureBook.documents; let i = index" (click)="changeLeftViewer(i)" [src]="document.thumbnailLink | secureUrl | async"
-                                 class="leftPanelThumbnails" [ngClass]="{'panelSelectedThumbnail': i == leftSelectedThumbnail}"/>
+                        <img title="{{document.title}}" id="thumnails_img"
+                            *ngFor="let document of signatureBook.documents; let i = index"
+                            (click)="changeLeftViewer(i)" [src]="document.thumbnailLink | secureUrl | async"
+                            class="leftPanelThumbnails"
+                            [ngClass]="{'panelSelectedThumbnail': i == leftSelectedThumbnail}" />
                     </div>
                 </div>
-                <div *ngIf="signatureBook.documents.length - 1 > 0" class="pjDetailsMore" (click)="displayPanel('TOPLEFT')" title="{{signatureBook.documents.length - 1}} {{lang.mailAttachments}}" style="left:25px;">
+                <div *ngIf="signatureBook.documents.length - 1 > 0" class="pjDetailsMore"
+                    (click)="displayPanel('TOPLEFT')"
+                    title="{{signatureBook.documents.length - 1}} {{lang.mailAttachments}}" style="left:25px;">
                     <i *ngIf="!showTopLeftPanel" class="fa fa-envelope-square fa-2x" aria-hidden="true"></i>
-                    <sup *ngIf="!showTopLeftPanel" class="nbRes" style="position: absolute;right: 6px;top: 5px;">{{signatureBook.documents.length - 1}}</sup>
+                    <sup *ngIf="!showTopLeftPanel" class="nbRes"
+                        style="position: absolute;right: 6px;top: 5px;">{{signatureBook.documents.length - 1}}</sup>
                     <i *ngIf="showTopLeftPanel" class="fa fa-chevron-up" aria-hidden="true"></i>
                 </div>
-                <pdf-viewer *ngIf="leftViewerLink != '' && (leftSelectedThumbnail == 0 || signatureBook.documents[leftSelectedThumbnail].format == 'pdf' || signatureBook.documents[leftSelectedThumbnail].isConverted)" id="leftPanelShowDocumentIframe" #leftPanelShowDocumentIframe [src]="leftViewerLink | secureUrl | async" 
-                    [render-text]="true" [fit-to-page]="false" [original-size]="true" 
-                    [ngStyle]="{'height': showTopLeftPanel ? '84%' : '99%'}" [show-all]="true"
-                    (error)="pdfViewerError(leftViewerLink)"
-                ></pdf-viewer>
-                <div *ngIf="leftSelectedThumbnail > 0 && signatureBook.documents[leftSelectedThumbnail].format != 'pdf' && !signatureBook.documents[leftSelectedThumbnail].isConverted" [ngStyle]="{'height': showTopLeftPanel ? '79%' : '96%'}" class="visaNoPdfWarning">
-                    <div style="padding-top: 25%;">{{lang.noOverviewAvailable}}<br/><sub>{{lang.pdfVersionFile}} "{{signatureBook.documents[leftSelectedThumbnail].title}}.{{signatureBook.documents[leftSelectedThumbnail].format}}" {{lang.isNotAvailable}}.</sub></div>
+                <pdf-viewer
+                    *ngIf="leftViewerLink != '' && (leftSelectedThumbnail == 0 || signatureBook.documents[leftSelectedThumbnail].format == 'pdf' || signatureBook.documents[leftSelectedThumbnail].isConverted)"
+                    id="leftPanelShowDocumentIframe" #leftPanelShowDocumentIframe
+                    [src]="leftViewerLink | secureUrl | async" [render-text]="true" [fit-to-page]="false"
+                    [original-size]="true" [ngStyle]="{'height': showTopLeftPanel ? '84%' : '99%'}" [show-all]="true"
+                    (error)="pdfViewerError(leftViewerLink)"></pdf-viewer>
+                <div *ngIf="leftSelectedThumbnail > 0 && signatureBook.documents[leftSelectedThumbnail].format != 'pdf' && !signatureBook.documents[leftSelectedThumbnail].isConverted"
+                    [ngStyle]="{'height': showTopLeftPanel ? '79%' : '96%'}" class="visaNoPdfWarning">
+                    <div style="padding-top: 25%;">{{lang.noOverviewAvailable}}<br /><sub>{{lang.pdfVersionFile}}
+                            "{{signatureBook.documents[leftSelectedThumbnail].title}}.{{signatureBook.documents[leftSelectedThumbnail].format}}"
+                            {{lang.isNotAvailable}}.</sub></div>
                     <div class="visaPjView">
-                        <a title="{{lang.dlAttachment}}" (click)="downloadOriginalFile(signatureBook.documents[leftSelectedThumbnail].res_id)" style="cursor: pointer;">
+                        <a title="{{lang.dlAttachment}}"
+                            (click)="downloadOriginalFile(signatureBook.documents[leftSelectedThumbnail].res_id)"
+                            style="cursor: pointer;">
                             <i class="fa fa-download fa-2x"></i>
                         </a>
                     </div>
                 </div>
             </div>
             <div *ngIf="headerTab == 'notes'" class="contentShow" style="width:98%;">
-                <app-notes-list #appNotesList [editMode]="true"
-                    [resId]="resId" (reloadBadgeNotes)="refreshBadge($event,'notes')">
+                <app-notes-list #appNotesList [editMode]="true" [resId]="resId"
+                    (reloadBadgeNotes)="refreshBadge($event,'notes')">
                 </app-notes-list>
             </div>
             <div *ngIf="headerTab == 'visaCircuit'" class="contentShow" style="width:98%;overflow-x: hidden;">
                 <app-visa-workflow #appVisaWorkflow [resId]="resId"
-                    [adminMode]="privilegeService.hasCurrentUserPrivilege('config_visa_workflow')" [target]="'signatureBook'"></app-visa-workflow>
+                    [adminMode]="privilegeService.hasCurrentUserPrivilege('config_visa_workflow')"
+                    [target]="'signatureBook'"></app-visa-workflow>
                 <div style="position: sticky;bottom: 0px;text-align:right;">
-                    <button mat-fab [title]="lang.saveModifications" *ngIf="appVisaWorkflow !== undefined && appVisaWorkflow.isModified()" (click)="saveVisaWorkflow()"
-                        color="accent">
+                    <button mat-fab [title]="lang.saveModifications"
+                        *ngIf="appVisaWorkflow !== undefined && appVisaWorkflow.isModified()"
+                        (click)="saveVisaWorkflow()" color="accent">
                         <mat-icon style="height:auto;font-size:20px;" class="fas fa-check"></mat-icon>
                     </button>
                 </div>
@@ -110,22 +140,28 @@
                     (reloadBadgeLinkedResources)="refreshBadge($event,'linkedResources')">
                 </app-linked-resource-list>
             </div>
-            <div class="hideRightContent" (click)="displayPanel('MIDDLE')" [ngStyle]="{'right': showRightPanel ? '-10px' : '0px'}">
+            <div class="hideRightContent" (click)="displayPanel('MIDDLE')"
+                [ngStyle]="{'right': showRightPanel ? '-10px' : '0px'}">
                 <i class="fa fa-chevron-right" aria-hidden="true" *ngIf="showRightPanel"></i>
                 <i class="fa fa-chevron-left" aria-hidden="true" *ngIf="!showRightPanel"></i>
             </div>
         </div>
         <div *ngIf="showRightPanel" class="contentRight" id="contentRight" [ngStyle]="{'width': rightContentWidth}">
-            <div class="hideLeftContent" (click)="displayPanel('LEFT')" id="hideLeftContent" [ngStyle]="{'margin-left': showLeftPanel ? '-13px' : '-2px'}">
+            <div class="hideLeftContent" (click)="displayPanel('LEFT')" id="hideLeftContent"
+                [ngStyle]="{'margin-left': showLeftPanel ? '-13px' : '-2px'}">
                 <i class="fa fa-chevron-left" aria-hidden="true" *ngIf="showLeftPanel"></i>
                 <i class="fa fa-chevron-right" aria-hidden="true" *ngIf="!showLeftPanel"></i>
             </div>
             <div class="contentShow" style="overflow: auto">
-                <div *ngIf="signatureBook.attachments[rightSelectedThumbnail] && !showAttachmentPanel" style="height:100%;overflow: auto;">
+                <div *ngIf="signatureBook.attachments[rightSelectedThumbnail] && !showAttachmentPanel"
+                    style="height:100%;overflow: auto;">
                     <div [ngStyle]="{'display': showTopRightPanel ? 'block' : 'none'}" class="pjDetails">
-                        <div class="infoPj" title="{{signatureBook.attachments[rightSelectedThumbnail].attachment_type}}">
+                        <div class="infoPj"
+                            title="{{signatureBook.attachments[rightSelectedThumbnail].attachment_type}}">
                             <label>Type :&nbsp;</label>
-                            <span>{{signatureBook.attachments[rightSelectedThumbnail].attachment_type}} <sup *ngIf="signatureBook.attachments[rightSelectedThumbnail].status == 'SIGN'" style="color:#135F7F;">{{lang.signed}}</sup></span>
+                            <span>{{signatureBook.attachments[rightSelectedThumbnail].attachment_type}} <sup
+                                    *ngIf="signatureBook.attachments[rightSelectedThumbnail].status == 'SIGN'"
+                                    style="color:#135F7F;">{{lang.signed}}</sup></span>
                         </div>
                         <div class="infoPj" title="{{signatureBook.attachments[rightSelectedThumbnail].title}}">
                             <label>{{lang.object}} :&nbsp;</label>
@@ -136,11 +172,14 @@
                             <span>{{signatureBook.attachments[rightSelectedThumbnail].destUser}}</span>
                         </div>
                         <div>
-                            <div *ngIf="!signatureBook.attachments[rightSelectedThumbnail].updated_by" title="{{signatureBook.attachments[rightSelectedThumbnail].typist}}" class="infoPj">
+                            <div *ngIf="!signatureBook.attachments[rightSelectedThumbnail].updated_by"
+                                title="{{signatureBook.attachments[rightSelectedThumbnail].typist}}" class="infoPj">
                                 <label>{{lang.createdBy}} :&nbsp;</label>
                                 <span>{{signatureBook.attachments[rightSelectedThumbnail].typist}}</span>
                             </div>
-                            <div *ngIf="signatureBook.attachments[rightSelectedThumbnail].updated_by" title="{{lang.modifiedBy}} : {{signatureBook.attachments[rightSelectedThumbnail].updated_by}} le {{signatureBook.attachments[rightSelectedThumbnail].doc_date | date:'dd/MM/y'}}" class="infoPj">
+                            <div *ngIf="signatureBook.attachments[rightSelectedThumbnail].updated_by"
+                                title="{{lang.modifiedBy}} : {{signatureBook.attachments[rightSelectedThumbnail].updated_by}} le {{signatureBook.attachments[rightSelectedThumbnail].doc_date | date:'dd/MM/y'}}"
+                                class="infoPj">
                                 <label><i>*</i> {{lang.createdBy}} :&nbsp;</label>
                                 <span>{{signatureBook.attachments[rightSelectedThumbnail].typist}}</span>
                             </div>
@@ -148,18 +187,22 @@
                                 <label>{{lang.createdOn}} :&nbsp;</label>
                                 <span>{{signatureBook.attachments[rightSelectedThumbnail].creation_date | date:'dd/MM/y à HH:mm'}}</span>
                             </div>
-                            <div class="infoPj" title="{{signatureBook.attachments[rightSelectedThumbnail].validation_date | date:'dd/MM/y'}}">
+                            <div class="infoPj"
+                                title="{{signatureBook.attachments[rightSelectedThumbnail].validation_date | date:'dd/MM/y'}}">
                                 <label>{{lang.back}} :&nbsp;</label>
                                 <span>{{signatureBook.attachments[rightSelectedThumbnail].validation_date | date:'dd/MM/y'}}</span>
                             </div>
-                            <div class="infoPj" title="{{signatureBook.attachments[rightSelectedThumbnail].identifier}}">
+                            <div class="infoPj"
+                                title="{{signatureBook.attachments[rightSelectedThumbnail].identifier}}">
                                 <label>{{lang.chrono}} :&nbsp;</label>
                                 <span>{{signatureBook.attachments[rightSelectedThumbnail].identifier}}</span>
                             </div>
                             <div class="infoPj">
                                 <label>Version :&nbsp;</label>
                                 <span>{{signatureBook.attachments[rightSelectedThumbnail].relation}}</span>
-                                <i [ngStyle]="{'display': signatureBook.attachments[rightSelectedThumbnail].relation > 1 ? '' : 'none'}" style="color:#135F7F" class="fa fa-chevron-circle-up" id="obsVersion" data-tooltip-content="#obsVersionTooltip" aria-hidden="true"></i>
+                                <i [ngStyle]="{'display': signatureBook.attachments[rightSelectedThumbnail].relation > 1 ? '' : 'none'}"
+                                    style="color:#135F7F" class="fa fa-chevron-circle-up" id="obsVersion"
+                                    data-tooltip-content="#obsVersionTooltip" aria-hidden="true"></i>
                             </div>
                             <div class="infoPj">
                                 <label>Format :&nbsp;</label>
@@ -171,44 +214,69 @@
                         <i *ngIf="!showTopRightPanel" class="fa fa-list-alt fa-2x" aria-hidden="true"></i>
                         <i *ngIf="showTopRightPanel" class="fa fa-chevron-up" aria-hidden="true"></i>
                     </div>
-                    <pdf-viewer #rightPanelShowDocumentIframe  id="rightPanelShowDocumentIframe" [src]="rightViewerLink| secureUrl | async" 
+                    <!--<pdf-viewer #rightPanelShowDocumentIframe [src]="rightViewerLink| secureUrl | async"
                         [render-text]="true" [autoresize]="true" [original-size]="false"
                         [ngStyle]="{'height': showTopRightPanel ? '84%' : '99%'}" [show-all]="true"
                         *ngIf="signatureBook.attachments[rightSelectedThumbnail].isConverted"
-                        (error)="pdfViewerError(rightViewerLink)"
-                    ></pdf-viewer>
-                    <div *ngIf="signatureBook.attachments[rightSelectedThumbnail].format != 'pdf' && signatureBook.attachments[rightSelectedThumbnail].status != 'TMP' && !signatureBook.attachments[rightSelectedThumbnail].isConverted" [ngStyle]="{'height': showTopRightPanel ? '79%' : '96%'}" class="visaNoPdfWarning">
-                        <div style="padding-top: 25%;">{{lang.noOverviewAvailable}}<br/><sub>{{lang.pdfVersionFile}} "{{signatureBook.attachments[rightSelectedThumbnail].title}}.{{signatureBook.attachments[rightSelectedThumbnail].format}}" {{lang.isNotAvailable}}.</sub></div>
+                        (error)="pdfViewerError(rightViewerLink)"></pdf-viewer>-->
+                    <app-document-viewer #appDocumentViewer id="rightPanelShowDocumentIframe"
+                        *ngIf="signatureBook.attachments[rightSelectedThumbnail].isConverted"
+                        style="height:100%;width:100%;" [editMode]="true"
+                        [hideTools]="true"
+                        [mode]="signatureBook.attachments[rightSelectedThumbnail].isResource ? 'mainDocument' : 'attachment'"
+                        [resId]="signatureBook.attachments[rightSelectedThumbnail].res_id"
+                        [title]="signatureBook.attachments[rightSelectedThumbnail].identifier">
+                    </app-document-viewer>
+                    <div *ngIf="signatureBook.attachments[rightSelectedThumbnail].format != 'pdf' && signatureBook.attachments[rightSelectedThumbnail].status != 'TMP' && !signatureBook.attachments[rightSelectedThumbnail].isConverted"
+                        [ngStyle]="{'height': showTopRightPanel ? '79%' : '96%'}" class="visaNoPdfWarning">
+                        <div style="padding-top: 25%;">{{lang.noOverviewAvailable}}<br /><sub>{{lang.pdfVersionFile}}
+                                "{{signatureBook.attachments[rightSelectedThumbnail].title}}.{{signatureBook.attachments[rightSelectedThumbnail].format}}"
+                                {{lang.isNotAvailable}}.</sub></div>
                         <div class="visaPjView">
-                            <a title="{{lang.dlAttachment}}" (click)="downloadOriginalFile(signatureBook.attachments[rightSelectedThumbnail].res_id)" style="cursor: pointer;">
+                            <a title="{{lang.dlAttachment}}"
+                                (click)="downloadOriginalFile(signatureBook.attachments[rightSelectedThumbnail].res_id)"
+                                style="cursor: pointer;">
                                 <i class="fa fa-download fa-2x"></i>
                             </a>
                         </div>
                     </div>
-                    <div *ngIf="signatureBook.attachments[rightSelectedThumbnail].status == 'TMP' && !signatureBook.attachments[rightSelectedThumbnail].isConverted" [ngStyle]="{'height': showTopRightPanel ? '79%' : '96%'}" class="visaNoPdfWarning">
+                    <div *ngIf="signatureBook.attachments[rightSelectedThumbnail].status == 'TMP' && !signatureBook.attachments[rightSelectedThumbnail].isConverted"
+                        [ngStyle]="{'height': showTopRightPanel ? '79%' : '96%'}" class="visaNoPdfWarning">
                         <div style="padding-top: 25%;" [innerHTML]="lang.editingAttachmentInterrupted"></div>
                         <div>
-                            <a title="{{lang.editAttachment}}" (click)="showAttachment(signatureBook.attachments[rightSelectedThumbnail])">
+                            <a title="{{lang.editAttachment}}"
+                                (click)="showAttachment(signatureBook.attachments[rightSelectedThumbnail])">
                                 <i class="fa fa-edit fa-2x" style="cursor:pointer;"></i>
                             </a>
                         </div>
                     </div>
                     <div *ngIf="signatureBook.signatures[0] && signatureBook.canSign && signatureBook.attachments[rightSelectedThumbnail].status != 'TMP' && signatureBook.attachments[rightSelectedThumbnail].sign && signatureBook.attachments[rightSelectedThumbnail].isConverted"
-                         (mouseenter)="showSignaturesPanel = true" (mouseleave)="showSignaturesPanel = false" class="pjSign" [ngClass]="[signatureBook.attachments[rightSelectedThumbnail].status == 'SIGN' ? 'signed' : '']" [ngStyle]="{'box-shadow': signatureBook.listinstance.requested_signature ? 'inset 0px 0px 5px 0px red' : 'inset 0px 0px 5px 0px #656565;'}">
-                        <span *ngIf="signatureBook.attachments[rightSelectedThumbnail].status != 'SIGN' && signatureBook.signatures[0]" style="cursor: pointer">
+                        (mouseenter)="showSignaturesPanel = true" (mouseleave)="showSignaturesPanel = false"
+                        class="pjSign"
+                        [ngClass]="[signatureBook.attachments[rightSelectedThumbnail].status == 'SIGN' ? 'signed' : '']"
+                        [ngStyle]="{'box-shadow': signatureBook.listinstance.requested_signature ? 'inset 0px 0px 5px 0px red' : 'inset 0px 0px 5px 0px #656565;'}">
+                        <span
+                            *ngIf="signatureBook.attachments[rightSelectedThumbnail].status != 'SIGN' && signatureBook.signatures[0]"
+                            style="cursor: pointer">
                             <span *ngIf="!loadingSign">
-                                <img *ngFor="let signature of signatureBook.signatures; let i = index" [src]="('../rest/users/' + signature.user_serial_id + '/signatures/' + signature.id + '/content') | secureUrl | async" (click)="signFile(signatureBook.attachments[rightSelectedThumbnail], signature)" [ngStyle]="{'display': !showSignaturesPanel && i > 0 ? 'none' : ''}" title="{{signature.signature_label}}">
+                                <img *ngFor="let signature of signatureBook.signatures; let i = index"
+                                    [src]="('../rest/users/' + signature.user_serial_id + '/signatures/' + signature.id + '/content') | secureUrl | async"
+                                    (click)="signFile(signatureBook.attachments[rightSelectedThumbnail], signature)"
+                                    [ngStyle]="{'display': !showSignaturesPanel && i > 0 ? 'none' : ''}"
+                                    title="{{signature.signature_label}}">
                             </span>
                             <i *ngIf="loadingSign" class="fa fa-spinner fa-pulse fa-2x fa-fw"></i>
                         </span>
-                        <span *ngIf="signatureBook.attachments[rightSelectedThumbnail].status == 'SIGN'" (click)="unsignFile(signatureBook.attachments[rightSelectedThumbnail])" style="cursor: pointer;color: green;">
+                        <span *ngIf="signatureBook.attachments[rightSelectedThumbnail].status == 'SIGN'"
+                            (click)="unsignFile(signatureBook.attachments[rightSelectedThumbnail])"
+                            style="cursor: pointer;color: green;">
                             <i title="{{lang.unsign}}" class="fa fa-check fa-2x" aria-hidden="true"></i>
                         </span>
                     </div>
                 </div>
-                <app-attachments-list *ngIf="showAttachmentPanel" #appAttachmentsList
-                    [resId]="resId" [target]="'process'"
-                    (reloadBadgeAttachments)="refreshAttachments()" (afterActionAttachment)="refreshAttachments()">
+                <app-attachments-list *ngIf="showAttachmentPanel" #appAttachmentsList [resId]="resId"
+                    [target]="'process'" (reloadBadgeAttachments)="refreshAttachments()"
+                    (afterActionAttachment)="refreshAttachments()">
                 </app-attachments-list>
             </div>
             <div class="visaNoWorkflowWarning">
@@ -220,30 +288,43 @@
         </div>
         <div class="panelRight">
             <div *ngIf="signatureBook.attachments" id="rightPanelContent" class="panelRightContent">
-                <div title="[{{attachment.attachment_type}}] {{attachment.title}}" style="position: relative;" class="item" *ngFor="let attachment of signatureBook.attachments; let i = index" (click)="changeRightViewer(i)" [ngClass]="{'panelSelectedThumbnail': i == rightSelectedThumbnail && !showAttachmentPanel}">
+                <div title="[{{attachment.attachment_type}}] {{attachment.title}}" style="position: relative;"
+                    class="item" *ngFor="let attachment of signatureBook.attachments; let i = index"
+                    (click)="changeRightViewer(i)"
+                    [ngClass]="{'panelSelectedThumbnail': i == rightSelectedThumbnail && !showAttachmentPanel}">
                     <span class="fa-stack fa-lg">
-                        <i class="far fa-file fa-stack-2x"></i><i style="font-weight:bold;letter-spacing: -1px;">{{attachment.icon}}</i>
+                        <i class="far fa-file fa-stack-2x"></i><i
+                            style="font-weight:bold;letter-spacing: -1px;">{{attachment.icon}}</i>
                     </span>
-                    <i *ngIf="attachment.sign && attachment.status == 'SIGN'" title="Le document a été signé" style="position: absolute;top: 12px;right: 6px;" class="fa fa-circle"></i>
-                    <i *ngIf="attachment.sign && attachment.status != 'SIGN' && attachment.status != 'TMP'" title="Le document n'a pas encore été signé"  style="position: absolute;top: 12px;right: 6px;" class="far fa-circle"></i>
-                    <i *ngIf="attachment.sign && attachment.status == 'TMP'"  style="color:green;-ms-transform: rotate(-35deg);-webkit-transform: rotate(-35deg);transform: rotate(-35deg);position: absolute;top: 39px;right: 1px;" >{{lang.draft}}</i>
-                    <br/><i style="position: absolute;margin-left: -9px;" >.{{attachment.format}}</i>
+                    <i *ngIf="attachment.sign && attachment.status == 'SIGN'" title="Le document a été signé"
+                        style="position: absolute;top: 12px;right: 6px;" class="fa fa-circle"></i>
+                    <i *ngIf="attachment.sign && attachment.status != 'SIGN' && attachment.status != 'TMP'"
+                        title="Le document n'a pas encore été signé" style="position: absolute;top: 12px;right: 6px;"
+                        class="far fa-circle"></i>
+                    <i *ngIf="attachment.sign && attachment.status == 'TMP'"
+                        style="color:green;-ms-transform: rotate(-35deg);-webkit-transform: rotate(-35deg);transform: rotate(-35deg);position: absolute;top: 39px;right: 1px;">{{lang.draft}}</i>
+                    <br /><i style="position: absolute;margin-left: -9px;">.{{attachment.format}}</i>
                 </div>
             </div>
             <div style="bottom: 0px;position: absolute;width:100%;">
-                <div class="panelRightListPj" (click)="displayAttachmentPanel()" title="{{lang.displayAtt}}" [ngClass]="{'panelSelectedThumbnail': showAttachmentPanel}">
-                    <i class="fa fa-bars fa-2x" ></i>
+                <div class="panelRightListPj" (click)="displayAttachmentPanel()" title="{{lang.displayAtt}}"
+                    [ngClass]="{'panelSelectedThumbnail': showAttachmentPanel}">
+                    <i class="fa fa-bars fa-2x"></i>
                 </div>
-                <hr style="background-color:#666;margin-top:0px;"/>
+                <hr style="background-color:#666;margin-top:0px;" />
                 <div class="panelRightAddPj" (click)="createAttachment()" title="{{lang.createAtt}}">
-                    <i class="fa fa-paperclip fa-2x" ></i>
+                    <i class="fa fa-paperclip fa-2x"></i>
                     <i class="fa fa-plus" style="position:absolute;"></i>
                 </div>
                 <div *ngIf="signatureBook.attachments[rightSelectedThumbnail]">
-                    <div [ngClass]="{'visaDisabledButton': !signatureBook.attachments[rightSelectedThumbnail].canModify || signatureBook.attachments[rightSelectedThumbnail].status == 'SIGN'}" title="{{lang.updateAtt}}" class="visaPjUp" (click)="showAttachment(signatureBook.attachments[rightSelectedThumbnail])">
+                    <div [ngClass]="{'visaDisabledButton': !signatureBook.attachments[rightSelectedThumbnail].canModify || signatureBook.attachments[rightSelectedThumbnail].status == 'SIGN'}"
+                        title="{{lang.updateAtt}}" class="visaPjUp"
+                        (click)="showAttachment(signatureBook.attachments[rightSelectedThumbnail])">
                         <i class="fa fa-edit fa-2x"></i>
                     </div>
-                    <div [ngClass]="{'visaDisabledButton': !signatureBook.attachments[rightSelectedThumbnail].canDelete}" title="{{lang.deleteAtt}}" class="visaPjDel" (click)="delAttachment(signatureBook.attachments[rightSelectedThumbnail])">
+                    <div [ngClass]="{'visaDisabledButton': !signatureBook.attachments[rightSelectedThumbnail].canDelete}"
+                        title="{{lang.deleteAtt}}" class="visaPjDel"
+                        (click)="delAttachment(signatureBook.attachments[rightSelectedThumbnail])">
                         <i class="fa fa-trash-alt fa-2x"></i>
                     </div>
                 </div>
@@ -254,16 +335,18 @@
 
 <div class="tooltip_templates" style="display: none">
     <span id="obsVersionTooltip">
-        <div *ngIf="signatureBook.attachments[rightSelectedThumbnail] && signatureBook.attachments[rightSelectedThumbnail].relation > 1">
+        <div
+            *ngIf="signatureBook.attachments[rightSelectedThumbnail] && signatureBook.attachments[rightSelectedThumbnail].relation > 1">
             <div *ngFor="let version of signatureBook.attachments[rightSelectedThumbnail].obsAttachments">
                 <span>{{lang.version}} : </span>
                 <span>{{version.relation}}</span>&nbsp;
                 <span>{{lang.object}} : </span>
                 <span>{{version.title}}</span>&nbsp;
-                <a style="color:#135F7F" title="{{lang.dlAttachment}}" (click)="downloadOriginalFile(version.resId)" style="cursor: pointer;">
+                <a style="color:#135F7F" title="{{lang.dlAttachment}}" (click)="downloadOriginalFile(version.resId)"
+                    style="cursor: pointer;">
                     <i class="fa fa-download fa-2x"></i>
                 </a>
             </div>
         </div>
     </span>
-</div>
+</div>
\ No newline at end of file

src/frontend/app/signature-book.component.ts

-import { Component, OnInit, NgZone, ViewChild } from '@angular/core';
+import { Component, OnInit, NgZone, ViewChild, OnDestroy } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 import { Router, ActivatedRoute } from '@angular/router';
 import { LANG } from './translate.component';
@@ -15,6 +15,7 @@ import { HeaderService } from '../service/header.service';
 import { AppService } from '../service/app.service';
 import { Subscription } from 'rxjs/internal/Subscription';
 import { of } from 'rxjs/internal/observable/of';
+import { DocumentViewerComponent } from './viewer/document-viewer.component';
 
 declare var $: any;
 
@@ -22,7 +23,7 @@ declare var $: any;
     templateUrl: 'signature-book.component.html',
     styleUrls: ['signature-book.component.scss'],
 })
-export class SignatureBookComponent implements OnInit {
+export class SignatureBookComponent implements OnInit, OnDestroy {
 
     resId: number;
     basketId: number;
@@ -89,6 +90,7 @@ export class SignatureBookComponent implements OnInit {
     ];
 
     @ViewChild('appVisaWorkflow', { static: false }) appVisaWorkflow: VisaWorkflowComponent;
+    @ViewChild('appDocumentViewer', { static: false }) appDocumentViewer: DocumentViewerComponent;
 
     constructor(
         public http: HttpClient,
@@ -194,7 +196,7 @@ export class SignatureBookComponent implements OnInit {
         this.currentResourceLock = setInterval(() => {
             this.http.put(`../rest/resourcesList/users/${this.userId}/groups/${this.groupId}/baskets/${this.basketId}/lock`, { resources: [this.resId] }).pipe(
                 catchError((err: any) => {
-                    if (err.status == 403) {
+                    if (err.status === 403) {
                         clearInterval(this.currentResourceLock);
                     }
                     this.notify.handleErrors(err);
@@ -263,6 +265,7 @@ export class SignatureBookComponent implements OnInit {
             this.rightViewerLink = '';
         }
         this.rightSelectedThumbnail = index;
+        this.appDocumentViewer.loadRessource(this.signatureBook.attachments[this.rightSelectedThumbnail].res_id, this.signatureBook.attachments[this.rightSelectedThumbnail].isResource ? 'mainDocument' : 'attachment');
     }
 
     changeLeftViewer(index: number) {
@@ -339,13 +342,12 @@ export class SignatureBookComponent implements OnInit {
                 .subscribe((data: any) => {
                     this.signatureBook.documents = data;
                 });
-
         } else {
             this.http.get('../rest/signatureBook/' + this.resId + '/attachments')
                 .subscribe((data: any) => {
-                    var i = 0;
+                    let i = 0;
                     if (mode === 'add') {
-                        var found = false;
+                        let found = false;
                         data.forEach((elem: any, index: number) => {
                             if (!found && (!this.signatureBook.attachments[index] || elem.res_id != this.signatureBook.attachments[index].res_id)) {
                                 i = index;
@@ -353,7 +355,7 @@ export class SignatureBookComponent implements OnInit {
                             }
                         });
                     } else if (mode === 'edit') {
-                        var id = this.signatureBook.attachments[this.rightSelectedThumbnail].res_id;
+                        const id = this.signatureBook.attachments[this.rightSelectedThumbnail].res_id;
                         data.forEach((elem: any, index: number) => {
                             if (elem.res_id == id) {
                                 i = index;
@@ -374,10 +376,11 @@ export class SignatureBookComponent implements OnInit {
 
     delAttachment(attachment: any) {
         if (attachment.canDelete) {
+            let r = false;
             if (this.signatureBook.attachments.length <= 1) {
-                var r = confirm('Attention, ceci est votre dernière pièce jointe pour ce courrier, voulez-vous vraiment la supprimer ?');
+                r = confirm('Attention, ceci est votre dernière pièce jointe pour ce courrier, voulez-vous vraiment la supprimer ?');
             } else {
-                var r = confirm('Voulez-vous vraiment supprimer la pièce jointe ?');
+                r = confirm('Voulez-vous vraiment supprimer la pièce jointe ?');
             }
             if (r) {
                 this.http.delete('../rest/attachments/' + attachment.res_id).pipe(
@@ -396,21 +399,23 @@ export class SignatureBookComponent implements OnInit {
     signFile(attachment: any, signature: any) {
         if (!this.loadingSign && this.signatureBook.canSign) {
             this.loadingSign = true;
-            var route = attachment.isResource ? '../rest/resources/' + attachment.res_id + '/sign' : '../rest/attachments/' + attachment.res_id + '/sign';
+            const route = attachment.isResource ? '../rest/resources/' + attachment.res_id + '/sign' : '../rest/attachments/' + attachment.res_id + '/sign';
             this.http.put(route, { 'signatureId': signature.id })
                 .subscribe((data: any) => {
                     if (!attachment.isResource) {
+                        this.appDocumentViewer.loadRessource(data.id, 'attachment');
                         this.rightViewerLink = '../rest/attachments/' + data.id + '/content';
                         this.signatureBook.attachments[this.rightSelectedThumbnail].status = 'SIGN';
                         this.signatureBook.attachments[this.rightSelectedThumbnail].idToDl = data.new_id;
                     } else {
+                        this.appDocumentViewer.loadRessource(attachment.res_id, 'mainDocument');
                         this.rightViewerLink += '?tsp=' + Math.floor(Math.random() * 100);
                         this.signatureBook.attachments[this.rightSelectedThumbnail].status = 'SIGN';
                     }
                     this.signatureBook.attachments[this.rightSelectedThumbnail].viewerLink = this.rightViewerLink;
-                    var allSigned = true;
+                    let allSigned = true;
                     this.signatureBook.attachments.forEach((value: any) => {
-                        if (value.sign && value.status != 'SIGN') {
+                        if (value.sign && value.status !== 'SIGN') {
                             allSigned = false;
                         }
                     });
@@ -431,6 +436,7 @@ export class SignatureBookComponent implements OnInit {
         if (attachment.isResource) {
             this.http.put('../rest/resources/' + attachment.res_id + '/unsign', {})
                 .subscribe(() => {
+                    this.appDocumentViewer.loadRessource(attachment.res_id, 'maintDocument');
                     this.rightViewerLink += '?tsp=' + Math.floor(Math.random() * 100);
                     this.signatureBook.attachments[this.rightSelectedThumbnail].status = 'A_TRA';
 
@@ -447,6 +453,7 @@ export class SignatureBookComponent implements OnInit {
         } else {
             this.http.put('../rest/attachments/' + attachment.res_id + '/unsign', {})
                 .subscribe(() => {
+                    this.appDocumentViewer.loadRessource(attachment.res_id, 'attachment');
                     this.rightViewerLink = '../rest/attachments/' + attachment.res_id + '/content';
                     this.signatureBook.attachments[this.rightSelectedThumbnail].viewerLink = this.rightViewerLink;
                     this.signatureBook.attachments[this.rightSelectedThumbnail].status = 'A_TRA';
@@ -467,7 +474,7 @@ export class SignatureBookComponent implements OnInit {
     }
 
     backToBasket() {
-        let path = '/basketList/users/' + this.userId + '/groups/' + this.groupId + '/baskets/' + this.basketId;
+        const path = '/basketList/users/' + this.userId + '/groups/' + this.groupId + '/baskets/' + this.basketId;
         this.http.put('../rest/resourcesList/users/' + this.userId + '/groups/' + this.groupId + '/baskets/' + this.basketId + '/unlock', { resources: [this.resId] })
             .subscribe((data: any) => {
                 this.router.navigate([path]);
@@ -490,7 +497,7 @@ export class SignatureBookComponent implements OnInit {
                 if (data.countLockedResources > 0) {
                     alert(data.countLockedResources + ' ' + this.lang.warnLockRes + '.');
                 } else {
-                    let path = 'signatureBook/users/' + this.userId + '/groups/' + this.groupId + '/baskets/' + this.basketId + '/resources/' + resId;
+                    const path = 'signatureBook/users/' + this.userId + '/groups/' + this.groupId + '/baskets/' + this.basketId + '/resources/' + resId;
                     this.router.navigate([path]);
                 }
             }, (err: any) => {
@@ -555,18 +562,22 @@ export class SignatureBookComponent implements OnInit {
 
     showAttachment(attachment: any) {
         if (attachment.canModify && attachment.status !== 'SIGN') {
-            this.dialogRef = this.dialog.open(AttachmentPageComponent, { height: '99vh', width: this.appService.getViewMode() ? '99vw' : '90vw', maxWidth: this.appService.getViewMode() ? '99vw' : '90vw', panelClass: 'attachment-modal-container', disableClose: true, data: { resId: attachment.res_id } });
+            if (attachment.isResource) {
+                this.appDocumentViewer.editResource();
+            } else {
+                this.dialogRef = this.dialog.open(AttachmentPageComponent, { height: '99vh', width: this.appService.getViewMode() ? '99vw' : '90vw', maxWidth: this.appService.getViewMode() ? '99vw' : '90vw', panelClass: 'attachment-modal-container', disableClose: true, data: { resId: attachment.res_id } });
 
-            this.dialogRef.afterClosed().pipe(
-                filter((data: string) => data === 'success'),
-                tap(() => {
-                    this.refreshAttachments('edit');
-                }),
-                catchError((err: any) => {
-                    this.notify.handleErrors(err);
-                    return of(false);
-                })
-            ).subscribe();
+                this.dialogRef.afterClosed().pipe(
+                    filter((data: string) => data === 'success'),
+                    tap(() => {
+                        this.refreshAttachments('edit');
+                    }),
+                    catchError((err: any) => {
+                        this.notify.handleErrors(err);
+                        return of(false);
+                    })
+                ).subscribe();
+            }
         }
     }
 

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

@@ -42,7 +42,7 @@
         <input type="file" #docToUpload [ngModel]="docToUploadValue" name="files[]" (change)="uploadTrigger($event)" style="display:none;">
         <div style="display: block;width:100%;" appUploadFileDragDrop (onFileDropped)="dndUploadFile($event)"
             [disabled]="!editMode">
-            <div *ngIf="!loading && file.content !== null" class="viewer-tools">
+            <div *ngIf="!loading && file.content !== null && !hideTools" class="viewer-tools">
                 <button mat-icon-button (click)="downloadOriginalFile()" [matTooltip]="lang.downloadOriginalFile">
                     <mat-icon class="fa fa-download"></mat-icon>
                 </button>
@@ -129,7 +129,7 @@
     <mat-icon style="height:auto;font-size:20px;" class="fas fa-check"></mat-icon>
 </button>
 <button mat-raised-button 
-    *ngIf="!isDocModified && mode === 'mainDocument' && resId !== null && !functions.empty(file.subinfos) && file.subinfos.signedDocVersions && (privilegeService.hasCurrentUserPrivilege('sign_document') || this.headerService.user.id == file.creatorId)" 
+    *ngIf="(!isDocModified && mode === 'mainDocument' && resId !== null && !functions.empty(file.subinfos) && file.subinfos.signedDocVersions && (privilegeService.hasCurrentUserPrivilege('sign_document') || this.headerService.user.id == file.creatorId)) && !hideTools" 
     color="warn"
     [title]="lang.unsign" style="position: fixed;z-index: 1;bottom: 100px;right: 150px;"
     (click)="unsignMainDocument()">

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

@@ -64,6 +64,11 @@ export class DocumentViewerComponent implements OnInit {
      */
     @Input() editMode: boolean = false;
 
+    /**
+     * Hide tool document viewer
+     */
+    @Input() hideTools: boolean = false;
+
     /**
      * Title of new tab when open document in external tab
      */
@@ -576,7 +581,9 @@ export class DocumentViewerComponent implements OnInit {
         }
     }
 
-    async loadRessource(resId: any, target: string = 'mainDocument') {
+    async loadRessource(resId: any, target: any = 'mainDocument') {
+        this.resId = resId;
+        this.mode = target;
         this.loading = true;
         if (target === 'attachment') {
             this.requestWithLoader(`../rest/attachments/${resId}/content?mode=base64`).subscribe(

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

@@ -103,7 +103,7 @@ export class EcplOnlyofficeViewerComponent implements OnInit, AfterViewInit, OnD
     }
 
     closeEditor() {
-        if (this.headerService.sideNavLeft !== null) {
+        if (this.headerService.sideNavLeft !== null && !this.headerService.hideSideBar) {
             this.headerService.sideNavLeft.open();
         }
         $('iframe[name=\'frameEditor\']').css('position', 'initial');