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="{{signatureBook.lang.mail}}" class="item" [ngClass]="{'activeTabSignatureBook': headerTab == 1}" (click)="changeSignatureBookLeftContent(1)">
                <i class="fa fa-file-text-o fa-2x"></i>
            </div>
            <div title="{{signatureBook.lang.notes}}" class="item" [ngClass]="{'activeTabSignatureBook': headerTab == 2}" (click)="changeSignatureBookLeftContent(2)">
                <i class="fa fa-pencil fa-2x">
                    <sup *ngIf="signatureBook.nbNotes > 0" class="nbRes" style="font-size: 12px;font-weight: bold;">{{signatureBook.nbNotes}}</sup>
                </i>
            </div>
            <div title="{{signatureBook.lang.visaWorkflow}}" class="item" [ngClass]="{'activeTabSignatureBook': headerTab == 3}" (click)="changeSignatureBookLeftContent(3)">
                <i class="fa fa-certificate fa-2x"></i>
            </div>
            <div title="{{signatureBook.lang.progression}}" class="item" [ngClass]="{'activeTabSignatureBook': headerTab == 4}" (click)="changeSignatureBookLeftContent(4)">
                <i class="fa fa-line-chart fa-2x"></i>
            </div>
            <div title="{{signatureBook.lang.links}}" class="item" [ngClass]="{'activeTabSignatureBook': headerTab == 5}" (click)="changeSignatureBookLeftContent(5)">
                <i class="fa fa-link fa-2x"></i>
            </div>
        </div>
        <div id="labelSignatureBook" title="{{signatureBook.currentAction.actionLabel}}" ><div>{{signatureBook.currentAction.actionLabel}}</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="{{signatureBook.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.value}}">{{option.label}}</option>
            </select>
            <input name="send" id="send" value="{{signatureBook.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="{{signatureBook.lang.chrono}}"></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="{{signatureBook.lang.object}}"></i> {{res.subject}}
                    </div>
                    <div class="resListContentInfo">
                        <i class="fa fa-book" title="{{signatureBook.lang.contactInfo}}"></i> {{res.sender}}
                    </div>
                    <div class="resListContentInfo">
                        <i class="fa fa-calendar" title="{{signatureBook.lang.arrDate}}"></i> {{res.creation_date | date:'dd/MM/y'}}
                    </div>
                    <div class="resListContentInfo" style="margin-top:-10px;">
                        <i class="fa fa-bell" title="{{signatureBook.lang.processLimitDate}}"></i> {{res.process_limit_date | date:'dd/MM/y'}}
                    </div>
                </div>
            </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 == 1" 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"
                                 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}} {{signatureBook.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>
                <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%;">Aucun aperçu disponible<br/><sub>La version PDF du fichier "{{signatureBook.documents[leftSelectedThumbnail].title}}.{{signatureBook.documents[leftSelectedThumbnail].format}}" n'est pas disponible.</sub></div>
                    <div class="visaPjView">
                        <a title="{{signatureBook.lang.dlAttachment}}" href="index.php?display=true&module=attachments&page=view_attachment&res_id_master={{resId}}&id={{signatureBook.documents[leftSelectedThumbnail].res_id}}" target="_blank">
                            <i class="fa fa-download fa-2x"></i>
                        </a>
                    </div>
                </div>
            </div>
            <div *ngIf="headerTab == 2" class="contentShow" style="width:98%;">
                <iframe [src]="notesViewerLink | safeUrl"></iframe>
            </div>
            <div *ngIf="headerTab == 3" class="contentShow" style="width:98%;overflow-x: hidden;">
                <iframe [src]="visaViewerLink | safeUrl"></iframe>
            </div>
            <div *ngIf="headerTab == 4" class="contentShow" style="width:98%;">
                <iframe [src]="histViewerLink | safeUrl"></iframe>
            </div>
            <div *ngIf="headerTab == 5" class="contentShow" style="width:98%;">
                <iframe [src]="linksViewerLink | safeUrl"></iframe>
            </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.attachments[rightSelectedThumbnail] && signatureBook.hasWorkflow" class="contentShow">
                <div *ngIf="!showAttachmentPanel" style="height:100%;">
                    <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:#16ADEB;">{{signatureBook.lang.signed}}</sup></span>
                        </div>
                        <div class="infoPj" title="{{signatureBook.attachments[rightSelectedThumbnail].title}}">
                            <label>{{signatureBook.lang.object}} : </label>
                            <span>{{signatureBook.attachments[rightSelectedThumbnail].title}}</span>
                        </div>
                        <div class="infoPj" title="{{signatureBook.attachments[rightSelectedThumbnail].destUser}}">
                            <label>{{signatureBook.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>{{signatureBook.lang.createBy}} : </label>
                                <span>{{signatureBook.attachments[rightSelectedThumbnail].typist}}</span>
                            </div>
                            <div *ngIf="signatureBook.attachments[rightSelectedThumbnail].updated_by" title="Modifié par : {{signatureBook.attachments[rightSelectedThumbnail].updated_by}} le {{signatureBook.attachments[rightSelectedThumbnail].doc_date | date:'dd/MM/y'}}" class="infoPj">
                                <label><i>*</i> {{signatureBook.lang.createBy}} : </label>
                                <span>{{signatureBook.attachments[rightSelectedThumbnail].typist}}</span>
                            </div>
                            <div class="infoPj">
                                <label>{{signatureBook.lang.createOn}} : </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>{{signatureBook.lang.back}} : </label>
                                <span>{{signatureBook.attachments[rightSelectedThumbnail].validation_date | date:'dd/MM/y'}}</span>
                            </div>
                            <div class="infoPj" title="{{signatureBook.attachments[rightSelectedThumbnail].identifier}}">
                                <label>{{signatureBook.lang.olyChrono}} : </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:#16ADEB" 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="{{signatureBook.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>
                    <iframe *ngIf="signatureBook.attachments[rightSelectedThumbnail].format == 'pdf' || signatureBook.attachments[rightSelectedThumbnail].isConverted" 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%;">Aucun aperçu disponible<br/><sub>La version PDF du fichier "{{signatureBook.attachments[rightSelectedThumbnail].title}}.{{signatureBook.attachments[rightSelectedThumbnail].format}}" n'est pas disponible.</sub></div>
                        <div class="visaPjView">
                            <a title="{{signatureBook.lang.dlAttachment}}" href="index.php?display=true&module=attachments&page=view_attachment&res_id_master={{resId}}&id={{signatureBook.attachments[rightSelectedThumbnail].res_id}}" 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%;">L'édition de la pièce jointe a été interrompue.<br/><sub>Veuillez la ré-éditer.</sub></div>
                        <div>
                            <a title="Editer la pièce jointe" (click)="editAttachmentIframe(signatureBook.attachments[rightSelectedThumbnail])">
                                <i class="fa fa-pencil-square-o 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].format == 'pdf' || signatureBook.attachments[rightSelectedThumbnail].isConverted)"
                         (mouseenter)="showSignaturesPanel = true" (mouseleave)="showSignaturesPanel = false" class="pjSign" [ngClass]="[signatureBook.attachments[rightSelectedThumbnail].status == 'SIGN' ? 'signed' : '']">
                        <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="{{signature.pathToSignatureOnTmp}}" (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="Dé-signer" 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;">Aucun circuit de visa paramétré.<br/><sub>Aucune signature possible.</sub></div>
            </div>
            <div *ngIf="!signatureBook.attachments[rightSelectedThumbnail] && signatureBook.hasWorkflow" class="visaNoPjWarning">
                <div style="margin-top:200px;">Aucune pièce jointe disponible<br/><sub>Cliquez sur <i class="fa fa-paperclip fa-lg" ></i><i class="fa fa-plus"></i> pour en ajouter une</sub></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="fa fa-file-o 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="fa fa-circle-o"></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;" >{{signatureBook.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="{{signatureBook.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="{{signatureBook.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="{{signatureBook.lang.updateAtt}}" class="visaPjUp" (click)="editAttachmentIframe(signatureBook.attachments[rightSelectedThumbnail])">
                        <i class="fa fa-pencil-square-o fa-2x"></i>
                    </div>
                    <div [ngClass]="{'visaDisabledButton': !signatureBook.attachments[rightSelectedThumbnail].canDelete}" title="{{signatureBook.lang.deleteAtt}}" class="visaPjDel" (click)="delAttachment(signatureBook.attachments[rightSelectedThumbnail])">
                        <i class="fa fa-trash 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>Version : </span>
                <span>{{version.relation}}</span>&nbsp;
                <span>{{signatureBook.lang.object}} : </span>
                <span>{{version.title}}</span>&nbsp;
                <a style="color:#16ADEB" title="{{signatureBook.lang.dlAttachment}}" href="index.php?display=true&module=attachments&page=view_attachment&res_id_master={{resId}}&id={{version.resId}}" target="_blank">
                    <i class="fa fa-download fa-2x"></i>
                </a>
            </div>
        </div>
    </span>
</div>