signature-book.component.html

<div *ngIf="loading" class='visaContent'>
    <i class="fa fa-spinner fa-spin fa-5x" style="margin-left: 50%;margin-top: 16%;font-size: 8em"></i>
</div>
<div *ngIf="!loading" class='visaContent'>
    <div class="titleSignatureBook">
        <div id="tabSignatureBook">
            <div *ngIf="signatureBook.documents[0] && signatureBook.documents[0].category_id != 'outgoing'" title="{{lang.mail}}" class="item" [ngClass]="{'activeTabSignatureBook': headerTab == 'document'}" (click)="changeSignatureBookLeftContent(1)">
                <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)">
                <i [class]="module.icon">
                    <sup *ngIf="module.count > 0" class="nbRes" style="font-size: 12px;font-weight: bold;">{{module.count}}</sup>
                </i>
            </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;
            <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" type="button" (click)="validForm()">
        </div>
        <div class="others" *ngIf="signatureBook.consigne != ''">
            <span id="consigne">
                <input type="text" value="{{signatureBook.consigne}}" title="{{signatureBook.consigne}}" readonly="readonly">
            </span>
        </div>
    </div>
    <div class="contentSignatureBook">
        <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="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>
                    </div>
                    <div class="resListContentInfo">
                        <i class="fa fa-info" title="{{lang.object}}"></i> {{res.subject}}
                    </div>
                    <div class="resListContentInfo">
                        <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'}}
                    </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'}}
                    </div>
                </div>
            </div>
            <div *ngIf="signatureBook.resList.length == 0" style="position: absolute;top: 48%; left: 3%">
                <i class="fa fa-spinner fa-spin fa-4x"></i>
            </div>
        </div>
        <div *ngIf="showLeftPanel" class="contentLeft" [ngStyle]="{'width': leftContentWidth}" id="contentLeft">
            <div *ngIf="showLeftPanel && showRightPanel" class="hideresListContent" (click)="displayPanel('RESLEFT')">
                <i class="fa fa-chevron-left" aria-hidden="true" *ngIf="showResLeftPanel"></i>
                <i class="fa fa-chevron-right" aria-hidden="true" *ngIf="!showResLeftPanel"></i>
            </div>
            <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]="coreUrl + document.thumbnailLink"
                                 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;">
                    <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>
                    <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" 
                                        [render-text]="true" [fit-to-page]="false" [original-size]="true" 
                                        [ngStyle]="{'height': showTopLeftPanel ? '84%' : '99%'}" [show-all]="true"
                            ></pdf-viewer>
                <!-- <iframe *ngIf="leftViewerLink != '' && (leftSelectedThumbnail == 0 || signatureBook.documents[leftSelectedThumbnail].format == 'pdf' || signatureBook.documents[leftSelectedThumbnail].isConverted)" id="leftPanelShowDocumentIframe" [src]="leftViewerLink | safeUrl" [ngStyle]="{'height': showTopLeftPanel ? '84%' : '99%'}"></iframe> -->
                <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}}" href="../../rest/attachments/{{signatureBook.documents[leftSelectedThumbnail].res_id}}/originalContent" target="_blank">
                            <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>
            </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')"></app-visa-workflow>
            </div>
            <div *ngIf="headerTab == 'history'" class="contentShow" style="width:98%;">
                <app-history-list #appHistoryList [resId]="resId"></app-history-list>
            </div>
            <div *ngIf="headerTab == 'linkedResources'" class="contentShow" style="width:98%;">
                <app-linked-resource-list #appLinkedResourceList [resId]="resId"
                    (reloadBadgeLinkedResources)="refreshBadge($event,'linkedResources')">
                </app-linked-resource-list>
            </div>
            <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'}">
                <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 *ngIf="signatureBook.hasWorkflow" class="contentShow">
                <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}}">
                            <label>Type : </label>
                            <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}} : </label>
                            <span>{{signatureBook.attachments[rightSelectedThumbnail].title}}</span>
                        </div>
                        <div class="infoPj" title="{{signatureBook.attachments[rightSelectedThumbnail].destUser}}">
                            <label>{{lang.for}} : </label>
                            <span>{{signatureBook.attachments[rightSelectedThumbnail].destUser}}</span>
                        </div>
                        <div>
                            <div *ngIf="!signatureBook.attachments[rightSelectedThumbnail].updated_by" title="{{signatureBook.attachments[rightSelectedThumbnail].typist}}" class="infoPj">
                                <label>{{lang.createdBy}} : </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">
                                <label><i>*</i> {{lang.createdBy}} : </label>
                                <span>{{signatureBook.attachments[rightSelectedThumbnail].typist}}</span>
                            </div>
                            <div class="infoPj">
                                <label>{{lang.createdOn}} : </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'}}">
                                <label>{{lang.back}} : </label>
                                <span>{{signatureBook.attachments[rightSelectedThumbnail].validation_date | date:'dd/MM/y'}}</span>
                            </div>
                            <div class="infoPj" title="{{signatureBook.attachments[rightSelectedThumbnail].identifier}}">
                                <label>{{lang.chrono}} : </label>
                                <span>{{signatureBook.attachments[rightSelectedThumbnail].identifier}}</span>
                            </div>
                            <div class="infoPj">
                                <label>Version : </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>
                            </div>
                            <div class="infoPj">
                                <label>Format : </label>
                                <span>{{signatureBook.attachments[rightSelectedThumbnail].format.toUpperCase()}}</span>
                            </div>
                        </div>
                    </div>
                    <div class="pjDetailsMore" (click)="displayPanel('TOPRIGHT')" title="{{lang.details}}">
                        <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" 
                                        [render-text]="true" [autoresize]="true" [original-size]="false"
                                        [ngStyle]="{'height': showTopRightPanel ? '84%' : '99%'}" [show-all]="true"
                            ></pdf-viewer>
                    <!-- <iframe id="rightPanelShowDocumentIframe" [src]="rightViewerLink | safeUrl" [ngStyle]="{'height': showTopRightPanel ? '84%' : '99%'}"></iframe> -->
                    <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}}" href="../../rest/attachments/{{signatureBook.attachments[rightSelectedThumbnail].res_id}}/originalContent" target="_blank">
                                <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 style="padding-top: 25%;" [innerHTML]="lang.editingAttachmentInterrupted"></div>
                        <div>
                            <a title="{{lang.editAttachment}}" (click)="editAttachmentIframe(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"
                         (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" (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;">
                            <i title="{{lang.unsign}}" class="fa fa-check fa-2x" aria-hidden="true"></i>
                        </span>
                    </div>
                </div>
                <iframe *ngIf="showAttachmentPanel" [src]="attachmentsViewerLink | safeUrl"></iframe>
            </div>
            <div *ngIf="!signatureBook.hasWorkflow" class="visaNoWorkflowWarning">
                <div style="margin-top:200px;" [innerHTML]="noVisaWorkflowNoSignature"></div>
            </div>
            <div *ngIf="!signatureBook.attachments[rightSelectedThumbnail] && signatureBook.hasWorkflow" class="visaNoPjWarning">
                <div style="margin-top:200px;" [innerHTML]="noAttachmentClickToAddOne"></div>
            </div>
        </div>
        <div *ngIf="signatureBook.hasWorkflow" 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}">
                    <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>
                    </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>
                </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>
                <hr style="background-color:#666;margin-top:0px;"/>
                <div class="panelRightAddPj" (click)="addAttachmentIframe()" title="{{lang.createAtt}}">
                    <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)="editAttachmentIframe(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])">
                        <i class="fa fa-trash-alt fa-2x"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="tooltip_templates" style="display: none">
    <span id="obsVersionTooltip">
        <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}}" href="../../rest/attachments/{{version.resId}}/originalContent" target="_blank">
                    <i class="fa fa-download fa-2x"></i>
                </a>
            </div>
        </div>
    </span>
</div>