document.component.html

<ion-header *ngIf="!loadingdocument" [translucent]="true">
    <ion-toolbar color="light">
        <ion-buttons slot="start">
            <ion-menu-button></ion-menu-button>
          </ion-buttons>
        <ion-segment value="favorite" [value]="signaturesService.currentToobal"
            (ionChange)="signaturesService.currentToobal=$event.detail.value">
            <ion-segment-button value="mainDocumentDetail" (click)="openMainDocumentDetail();">
                <ion-label color="primary">{{'lang.informations' | translate}}</ion-label>
                <ion-icon color="primary" name="information-circle"></ion-icon>
            </ion-segment-button>
            <ion-segment-button value="documentList" (click)="openDocumentList();">
                <ion-label color="primary">{{'lang.attachedElements' | translate | ucfirst}}</ion-label>
                <ion-icon color="primary" name="document-attach-outline"></ion-icon>
                <ion-badge color="danger" style="position: absolute;top: 10px;right: 40%;">
                    {{mainDocument.attachments.length + 1}}
                </ion-badge>
            </ion-segment-button>
            <ion-segment-button value="associatedDocuments"
                *ngIf="mainDocument.linkedDocuments !== undefined && mainDocument.linkedDocuments.length > 0"
                (click)="openAssociatedDocuments();">
                <ion-label color="primary">{{'lang.associatedDocuments' | translate | ucfirst}}</ion-label>
                <ion-icon color="primary" name="link-outline"></ion-icon>
                <ion-badge color="danger" style="position: absolute;top: 10px;right: 40%;">
                    {{mainDocument.linkedDocuments.length}}
                </ion-badge>
            </ion-segment-button>
            <ion-segment-button value="visaWorkflow" (click)="openVisaWorkflow();">
                <ion-label color="primary">{{'lang.circuit' | translate}}</ion-label>
                <ion-icon color="primary" name="list-outline"></ion-icon>
                <ion-badge color="danger" style="position: absolute;top: 10px;right: 40%;">
                    {{mainDocument.workflow.length}}
                </ion-badge>
            </ion-segment-button>
        </ion-segment>
        <ion-buttons slot="end" *ngIf="!detailMode">
            <ion-button color="primary" (click)="openAction($event)" [disabled]="!canShowActions() || mainDocument.status === 'CONVERTING'">
              <ion-icon slot="icon-only" name="settings-sharp"></ion-icon>
            </ion-button>
          </ion-buttons>
    </ion-toolbar>
</ion-header>
<ion-toolbar class="ion-text-center" color="primary"
    *ngIf="authService.user.substitute !== null && docList[currentDoc]">
    <ion-label style="font-size: 13px;">{{'lang.substitutionInfo' | translate}}</ion-label>
</ion-toolbar>
<ion-toolbar class="ion-text-center" color="danger" *ngIf="mainDocument.id !== 0 && mainDocument.status === 'CONVERTING'">
    <ion-label style="font-size: 13px;">{{'lang.convertingDocument' | translate}}</ion-label>
</ion-toolbar>
<ion-toolbar class="ion-text-center" color="danger" *ngIf="mainDocument.id !== 0 && mainDocument.status === 'ERROR'">
    <ion-label style="font-size: 13px;">{{'lang.errorConvertingDocument' | translate}}</ion-label>
</ion-toolbar>
<ion-content *ngIf="!loadingdocument" #mainContent>
    <ng-container *ngIf="(mainDocument.notes !== undefined && mainDocument.notes !== null) || hasWorkflowNotes">
        <ion-fab-button *ngIf="!expandedNote" ngDraggable [bounds]="myBounds" [inBounds]="true"
            (movingOffset)="signaturesService.dragging=true" (endOffset)="signaturesService.dragging=false"
            [title]="'lang.expandNote' | translate" (click)="expandedNote = true;"
            style="top: 40px;right: 40px;z-index:2;position:absolute;" [disabled]="signaturesService.dragging">
            <ion-icon name="chatbubble-ellipses-outline"></ion-icon>
        </ion-fab-button>
        <div ngDraggable (movingOffset)="signaturesService.dragging=true" (endOffset)="signaturesService.dragging=false"
            [bounds]="myBounds" [inBounds]="true" *ngIf="expandedNote" class="note">
            <div class="note-title">
                <i class="far fa-sticky-note" style="padding-right: 5px;"></i>
                <span style="flex:1;">{{'lang.note' | translate}}</span>
                <i class="fa fa-minus-square" style="cursor: pointer;" (click)="expandedNote = false;"
                    [title]="'lang.collapseNote' | translate"></i>
            </div>
            <ng-container *ngIf="mainDocument.notes !== undefined && mainDocument.notes !== null">
                <div class="note-creator">
                    {{mainDocument.notes.creator}} ({{mainDocument.notes.creationDate}}) :
                </div>
                <div class="note-content">
                    {{mainDocument.notes.value}}
                </div>
            </ng-container>
            <ng-container *ngFor="let step of mainDocument.workflow">
                <div *ngIf="step.note">
                    <div class="note-creator">
                        {{step.noteCreator}} ({{step.processDate}}) :
                    </div>
                    <div class="note-content">
                        {{step.note}}
                    </div>
                </div>
            </ng-container>
        </div>
    </ng-container>
    <div style="display: contents;">
        <drag-scroll style="overflow:auto;height: 100%;width: 100%;margin: auto;"
            [drag-scroll-disabled]="(signaturesService.dragging || signaturesService.resizing) && signaturesService.mobileMode"
            [drag-disabled]="(signaturesService.dragging || signaturesService.resizing) && !signaturesService.mobileMode"
            [style.maxWidth.px]="signaturesService.workingAreaWidth" #nav (click)="canShowActions() ? openAction($event) : false">
            <div style="position:relative;cursor: grab;" [style.width.px]="signaturesService.workingAreaWidth"
                [style.height.px]="signaturesService.workingAreaHeight" id="myBounds" #myBounds>
                <app-document-note-list *ngIf="currentDoc == 0 && !loadingImage">
                </app-document-note-list>
                <app-document-sign-list *ngIf="currentDoc === 0 && !loadingImage && this.signaturesService.signaturesContent[pageNum]" [bounds]="myBounds">
                </app-document-sign-list>
                <app-document-date-list *ngIf="currentDoc === 0 && !loadingImage && this.signaturesService.datesContent[pageNum]" [bounds]="myBounds">
                </app-document-date-list>
                <ion-img
                    *ngIf="docList[currentDoc] !== undefined && !functionsService.empty(docList[currentDoc].imgContent[pageNum])"
                    class="img-content" [src]="docList[currentDoc].imgContent[pageNum]"
                    [style.width.px]="signaturesService.workingAreaWidth"
                    [style.height.px]="signaturesService.workingAreaHeight" (ionImgDidLoad)="imageLoaded($event)" #img>
                </ion-img>
                <!--<ngx-extended-pdf-viewer style="display: none;" [src]="pdfname" [useBrowserLocale]="true"
                    [textLayer]="false" [showHandToolButton]="true" (pdfLoaded)="onPagesLoaded($event)">
                </ngx-extended-pdf-viewer>-->
            </div>
        </drag-scroll>
    </div>
    <section class="page-info"
        *ngIf="!signaturesService.dragging && !signaturesService.resizing && docList[currentDoc]">
        <div class="page-info-doc">
            {{docList[currentDoc].title}}
        </div>
        <div class="page-info-page" (click)="openSelect($event)">{{'lang.page' | translate}} {{ pageNum }} / {{ totalPages }}</div>
        <ion-select interface="popover" [(ngModel)]="pageNum" [interfaceOptions]="{cssClass : this.totalPages > 10  ? 'popover-class' : 'custom-popover-class'}"  style="max-height: 100%;" #pagesList (ionChange)='goTo($event.target.value)' hidden="true">
            <ion-select-option *ngFor="let page of pagesArray(this.totalPages);let i=index" [value]="i+1" [disabled]="i+1 === pageNum">{{ i + 1 }}</ion-select-option>
        </ion-select>
    </section>
    <ion-item *ngIf="mainDocument.isCertified" lines="none" class="certified">
        <ion-icon slot="start" name="ribbon-outline" color="success"></ion-icon>
        <ion-label>{{'lang.certifiedDocument' | translate}}</ion-label>
    </ion-item>
    <ng-container *ngIf="!signaturesService.dragging && !signaturesService.resizing && !loadingImage">
        <ion-fab-button *ngIf="pageNum > 1 && !loadingImage" (click)="prevPage()" class="paginate-left">
            <ion-icon name="chevron-back-outline"></ion-icon>
        </ion-fab-button>
        <ion-fab-button *ngIf="pageNum < totalPages && !loadingImage" (click)="nextPage()" 
            class="paginate-right">
            <ion-icon name="chevron-forward-outline"></ion-icon>
        </ion-fab-button>
    </ng-container>

</ion-content>
<ion-footer *ngIf="!loadingImage && currentDoc === 0" class="ion-no-border footer-buttons" [ngStyle]="{'grid-template-columns': actionsList.length === 2 ? 'repeat(2, 1fr)' : 'repeat(3, 1fr)'}">
    <ion-button [disabled]="isNotReady()" *ngFor="let action of actionsList" [color]="action.color" shape="round" size="large" fill="outline" (click)="launchEvent(action)" style="width: auto;">
        <ion-icon *ngIf="action.logo !== ''" [slot]="'start'" [name]="action.logo"></ion-icon>
        <ion-label style="font-size: 13px;">{{getLabel(action)}}</ion-label>
    </ion-button>
</ion-footer>

<ng-template #rightContent>
    <app-visa-workflow [visaWorkflow]="mainDocument.workflow"
        *ngIf="signaturesService.currentToobal == 'visaWorkflow'" style="display: contents;">
    </app-visa-workflow>
    <app-document-list #appDocumentList [currentDocId]="currentDoc"
        [docList]="docList" *ngIf="signaturesService.currentToobal == 'documentList'"
        (triggerEvent)="loadDoc($event)" style="display: contents;"></app-document-list>
    <app-associated-documents #appAssociatedDocuments
        [associatedDocuments]="mainDocument.linkedDocuments" *ngIf="signaturesService.currentToobal == 'associatedDocuments'"
        style="display: contents;"></app-associated-documents>
    <app-main-document-detail #appMainDocumentDetail [mainDocument]="mainDocument"
        *ngIf="signaturesService.currentToobal == 'mainDocumentDetail'" style="display: contents;">
    </app-main-document-detail>
</ng-template>