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].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)">
                <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="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 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">
            </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]="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;">
                    <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 | 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;">
                            <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')"
                    [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">
                        <mat-icon style="height:auto;font-size:20px;" class="fas fa-check"></mat-icon>
                    </button>
                </div>
            </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 class="contentShow" style="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}}">
                            <label>Type :&nbsp;</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}} :&nbsp;</label>
                            <span>{{signatureBook.attachments[rightSelectedThumbnail].title}}</span>
                        </div>
                        <div class="infoPj" title="{{signatureBook.attachments[rightSelectedThumbnail].destUser}}">
                            <label>{{lang.for}} :&nbsp;</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}} :&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">
                                <label><i>*</i> {{lang.createdBy}} :&nbsp;</label>
                                <span>{{signatureBook.attachments[rightSelectedThumbnail].typist}}</span>
                            </div>
                            <div class="infoPj">
                                <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'}}">
                                <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}}">
                                <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>
                            </div>
                            <div class="infoPj">
                                <label>Format :&nbsp;</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 [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>-->
                    <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"
                        [inSignatureBook]="true">
                    </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;">
                                <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)="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">
                            <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}}">
                            </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>
                <app-attachments-list *ngIf="showAttachmentPanel" #appAttachmentsList [resId]="resId"
                    [target]="'process'" (reloadBadgeAttachments)="refreshAttachments()"
                    (afterActionAttachment)="refreshAttachments()">
                </app-attachments-list>
            </div>
            <div class="visaNoWorkflowWarning">
                <div style="margin-top:200px;" [innerHTML]="lang.noVisaWorkflowNoSignature"></div>
            </div>
            <div *ngIf="!signatureBook.attachments[rightSelectedThumbnail]" class="visaNoPjWarning">
                <div style="margin-top:200px;" [innerHTML]="lang.noAttachmentClickToAddOne"></div>
            </div>
        </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}">
                    <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)="createAttachment()" 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)="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])">
                        <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}}" (click)="downloadOriginalFile(version.resId)"
                    style="cursor: pointer;">
                    <i class="fa fa-download fa-2x"></i>
                </a>
            </div>
        </div>
    </span>
</div>