signature-position.component.html

<div class="mat-dialog-content-container">
    <h1 mat-dialog-title>Gérer les positions de signatures</h1>
    <div mat-dialog-content>
        <div *ngIf="loading" class="loading" style="display:flex;height:100%;">
            <mat-spinner style="margin:auto;"></mat-spinner>
        </div>
        <div style="display: flex;height: 100%;flex-direction:column">
            <nav mat-tab-nav-bar *ngIf="!loading" class="workflowList">
                <a mat-tab-link *ngFor="let user of data.workflow;let i=index" (click)="selectUser(i)"
                    [active]="currentUser == i">
                    <div>
                        <i class="fas" [class.fa-pen-nib]="user.requested_signature"
                            [class.fa-check-double]="!user.requested_signature"></i>&nbsp;{{user.labelToDisplay}}
                    </div>
                    <div>
                        <mat-chip-list>
                            <ng-container *ngFor="let sign of signList">
                                <mat-chip *ngIf="sign.sequence === i" color="primary" style="font-size: 10px;
                            padding-top: 0px;
                            padding-bottom: 0px;
                            min-height: 20px;cursor: pointer;" (click)="goToSignUserPage(i,sign.page)"
                                    [selected]="currentUser == i && currentPage === sign.page">Page
                                    {{sign.page}}</mat-chip>
                            </ng-container>
                            <ng-container *ngFor="let date of dateList">
                                <mat-chip *ngIf="!hasSign(i, date.page) && date.sequence === i" color="primary" style="font-size: 10px;
                            padding-top: 0px;
                            padding-bottom: 0px;
                            min-height: 20px;cursor: pointer;" (click)="goToSignUserPage(i,date.page)"
                                    [selected]="currentUser == i && currentPage === date.page">Page
                                    {{date.page}}</mat-chip>
                            </ng-container>
                        </mat-chip-list>
                    </div>
                </a>
            </nav>
            <div class="signatureContainer">
                <div id="myBounds" #myBounds style="position: absolute;position: absolute;"
                    [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.positionX*workingAreaWidth)/100, y:(sign.positionY*workingAreaHeight)/100}"
                            [style.width.%]="25" [ngDraggable]="currentUser===sign.sequence"
                            (endOffset)="moveSign($event);" [preventDefaultEvent]="false" [bounds]="myBounds"
                            [inBounds]="true" class="signature"
                            (click)="currentUser!=sign.sequence ? goToSignUserPage(sign.sequence, currentPage) : false">
                            <button style="position: absolute;top: -50px;right: 0px;" mat-icon-button color="warn"
                                [title]="'lang.delete' | translate" (click)="deleteSign(indexSign)">
                                <mat-icon class="fa fa-trash-alt fa-2x"></mat-icon>
                            </button>
                            <span class="signUserName">{{getUserName(sign.sequence)}}</span>
                            SIGNATURE
                        </div>
                    </ng-container>
                    <ng-container *ngFor="let date of dateList;let indexSign=index;">
                        <div 
                        *ngIf="date.page === currentPage"
                        [class.signDisabled]="currentUser!==date.sequence"
                        [position]="{x: (date.positionX*workingAreaWidth)/100, y:(date.positionY*workingAreaHeight)/100}"
                        [ngDraggable]="currentUser===date.sequence && !resizing"
                        (endOffset)="moveDate($event);"
                        [preventDefaultEvent]="false"
                        [bounds]="myBounds"
                        [inBounds]="true"
                        class="dateBlock"
                        [style.width.%]="date.width"
                        [style.height.%]="date.height"
                        (click)="$event.stopPropagation();currentUser!=date.sequence ? goToSignUserPage(date.sequence, currentPage) : false"
                        ngResizable
                        [rzAspectRatio]="true"
                        (rzStart)="resizing=true"
                        (rzStop)="onResizeDateStop($event, indexSign);resizing=false;"
                        (dblclick)="colorPicker.click()"
                        >
                        <div style="position: absolute;top: -50px;left: 50%;transform: translateX(-50%);">
                            <button mat-icon-button (click)="colorPicker.click()">
                                <mat-icon class="fas fa-circle" [style.color]="date.color"></mat-icon>
                            </button>
                            <input type="color" #colorPicker [(ngModel)]="date.color" name="color" style="display: none;" (click)="$event.stopPropagation()">
                        </div>
                        <svg viewBox="0 0 130 30" preserveAspectRatio="xMinYMin meet">
                            <text y="10" font-size="16" dy=".3em" [style.fill]="date.color">25 décembre 2020</text></svg>
                        </div>
                    </ng-container>
                </div>
                <button mat-mini-fab color="primary" style="position: fixed;margin-top: 10px;margin-left: 10px;" [matMenuTriggerFor]="actionPosMenu" [disabled]="!emptySign() && !emptyDate()">
                    <mat-icon class="fas fa-plus" style="height: auto"></mat-icon>
                </button>
                <mat-menu #actionPosMenu="matMenu">
                    <button mat-menu-item [disabled]="!emptyDate()" (click)="initDateBlock()">Ajouter le bloc date</button>
                    <button mat-menu-item [disabled]="!emptySign()" (click)="initSign()">Ajouter la position de signature</button>
                </mat-menu>
                <!--<mat-form-field *ngIf="!loading" class="pageList" style="position: fixed;">
                    <span matPrefix>Page :&nbsp;</span>
                    <mat-select [(ngModel)]="currentPage" (selectionChange)="false">
                        <mat-option *ngFor="let page of pages" [value]="page">{{page}}</mat-option>
                    </mat-select>
                </mat-form-field>-->
                <img class="img-content" [src]="imgContent" (load)="imgLoaded()" />
            </div>
        </div>
    </div>
    <span class="divider-modal"></span>
    <div mat-dialog-actions class="actions">
        <button mat-raised-button mat-button color="primary" [disabled]="loading"
            (click)="onSubmit()">{{'lang.validate' | translate}}</button>
        <button mat-raised-button mat-button [mat-dialog-close]="">{{'lang.cancel' | translate}}</button>
    </div>
</div>