signature-position.component.html

<ion-header [translucent]="true">
    <ion-toolbar color="primary">
        <ion-title>{{'lang.adminSignaturesPositions' | translate}}</ion-title>
    </ion-toolbar>
    <ion-toolbar color="primary">
        <ion-segment color="warning" scrollable [value]="currentUser" (ionChange)="selectUser($event.detail.value)"
            style="justify-content: center;">
            <ion-segment-button *ngFor="let user of workflow;let i=index" [value]="i" layout="icon-start">
                <ion-label>
                    <h2>{{user.userDisplay}}</h2>
                    <p class="chip-item-content">
                        <ng-container *ngFor="let sign of signList">
                            <ion-chip class="chip-item" *ngIf="sign.sequence == i" outline
                                [title]="('lang.accessToPage' | translate) + ' ' + sign.page"
                                [color]="(i=== currentUser && sign.page === currentPage) ? 'primary' : 'medium'"
                                (click)="goToSignUserPage(i,sign.page)">
                                <ion-label>{{sign.page}}</ion-label>
                            </ion-chip>
                        </ng-container>
                    </p>
                </ion-label>
                <ion-icon [name]="user.mode === 'sign' ? 'pencil-outline' : 'checkmark-done-outline'"></ion-icon>
            </ion-segment-button>
        </ion-segment>
    </ion-toolbar>
</ion-header>
<ion-content>
    <drag-scroll style="overflow:auto;height: 100%;width: 100%;margin: auto;"
        [drag-disabled]="dragging && !signaturesService.mobileMode"
        [drag-scroll-disabled]="dragging && signaturesService.mobileMode">
        <div id="myBounds" #myBounds style="margin:auto;position: relative;box-shadow: 0px 0px 5px 0px #656565;"
            [style.width.px]="workingAreaWidth" [style.height.px]="workingAreaHeight">
            <ng-container *ngFor="let sign of signList;let indexSign=index;">
                <div *ngIf="sign.page === currentPage" [class.signDisabled]="currentUser!==sign.sequence"
                    [position]="{x: (sign.position.positionX*workingAreaWidth)/100, y:(sign.position.positionY*workingAreaHeight)/100}"
                    [style.width.%]="25" [ngDraggable]="currentUser===sign.sequence" (movingOffset)="dragging=true"
                    (endOffset)="moveSign($event, i);" [preventDefaultEvent]="false" [bounds]="myBounds"
                    [inBounds]="true" class="signature" [class.hide]="!pagesLoaded"
                    (click)="currentUser!=sign.sequence ? goToSignUserPage(sign.sequence, currentPage) : false">
                    <ion-buttons style="position: absolute;top: -50px;right: 0px;">
                        <ion-button fill="clear" slot="icon-only" shape="round" size="small" color="danger"
                            [title]="'lang.delete' | translate" (click)="deleteSign(indexSign)">
                            <ion-icon slot="icon-only" name="trash-outline"></ion-icon>
                        </ion-button>
                    </ion-buttons>
                    <span class="signUserName">{{getUserName(sign.sequence)}}</span>
                    {{'lang.signature' | translate | uppercase}}
                    <p>x = {{sign.position.positionX}}, y = {{sign.position.positionY}}</p>
                </div>
            </ng-container>
            <ion-img class="img-content" [src]="imgContent" (ionImgDidLoad)="imageLoaded($event)"></ion-img>
            <ion-button color="primary" *ngIf="emptySign()" (click)="initSign()"
                style="position: fixed;top: 50%;left: 50%;transform: translate(-50%,-50%);font-size:20px;">
                {{'lang.createSignaturePosition' | translate}}</ion-button>
        </div>
    </drag-scroll>
    <ngx-extended-pdf-viewer style="display: none;" [src]="pdfContent" [useBrowserLocale]="true" [textLayer]="false"
        (pdfLoaded)="onPagesLoaded($event)">
    </ngx-extended-pdf-viewer>
    <section class="page-info">
        <div class="page-info-doc">{{pdfTitle}}</div>
        <div class="page-info-page" (click)="pages.length > 1 ? pagesList.open() : false">{{'lang.page' | translate}} {{ currentPage }} / {{ pages.length }}</div>
        <ion-select [cancelText]="'lang.cancel' | translate" style="max-height: 30%;" interface="action-sheet" #pagesList (ionChange)="changePage($event.target.value)" hidden="true">
            <ion-select-option  *ngFor="let page of pages;let i=index" [value]="page">{{ i + 1 }}</ion-select-option>
        </ion-select>
    </section>
    <ng-container *ngIf="pages.length > 1">
        <ion-fab-button *ngIf="currentPage > 1" (click)="changePage(currentPage-1)" class="paginate-left">
            <ion-icon name="chevron-back-outline"></ion-icon>
        </ion-fab-button>
        <ion-fab-button *ngIf="currentPage < pages.length" (click)="changePage(currentPage+1)" 
            class="paginate-right">
            <ion-icon name="chevron-forward-outline"></ion-icon>
        </ion-fab-button>
    </ng-container>
</ion-content>
<ion-footer class="ion-no-border footer-buttons">
    <div>
        <ion-button type="button" color="primary" fill="outline" shape="round" size="large" (click)="onSubmit()">
            <ion-label>{{'lang.save' | translate}}</ion-label>
        </ion-button>
        <ion-button type="button" color="medium" fill="outline" shape="round" size="large"
            (click)="modalController.dismiss()">
            <ion-label>{{'lang.cancel' | translate}}</ion-label>
        </ion-button>
    </div>
</ion-footer>