From 7fb228de4615a688658e64a8ba8bbee3cb485c8c Mon Sep 17 00:00:00 2001
From: Alex ORLUC <alex.orluc@maarch.org>
Date: Thu, 31 Dec 2020 11:22:06 +0100
Subject: [PATCH] FEAT #12026 TIME 1 add page nav + display page
---
.../signature-position.component.html | 91 +++++++++++--------
.../signature-position.component.scss | 71 ++++++++++++++-
.../signature-position.component.ts | 7 +-
3 files changed, 124 insertions(+), 45 deletions(-)
diff --git a/src/frontend/app/actions/send-external-signatory-book-action/maarch-paraph/signature-position/signature-position.component.html b/src/frontend/app/actions/send-external-signatory-book-action/maarch-paraph/signature-position/signature-position.component.html
index 471ba3e8a78..857721ace90 100644
--- a/src/frontend/app/actions/send-external-signatory-book-action/maarch-paraph/signature-position/signature-position.component.html
+++ b/src/frontend/app/actions/send-external-signatory-book-action/maarch-paraph/signature-position/signature-position.component.html
@@ -19,7 +19,8 @@
padding-top: 0px;
padding-bottom: 0px;
min-height: 20px;cursor: pointer;" (click)="goToSignUserPage(i,sign.page)"
- [selected]="currentUser == i && currentPage === sign.page">{{'lang.page' | translate}}
+ [selected]="currentUser == i && currentPage === sign.page">
+ {{'lang.page' | translate}}
{{sign.page}}</mat-chip>
</ng-container>
<ng-container *ngFor="let date of dateList">
@@ -27,7 +28,8 @@
padding-top: 0px;
padding-bottom: 0px;
min-height: 20px;cursor: pointer;" (click)="goToSignUserPage(i,date.page)"
- [selected]="currentUser == i && currentPage === date.page">{{'lang.page' | translate}}
+ [selected]="currentUser == i && currentPage === date.page">
+ {{'lang.page' | translate}}
{{date.page}}</mat-chip>
</ng-container>
</mat-chip-list>
@@ -53,54 +55,63 @@
</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;"
- >
- <div style="position: absolute;top: -40px;right: 0px;">
- <button mat-icon-button color="primary" [matMenuTriggerFor]="menu">
- <mat-icon class="fas fa-cog"></mat-icon>
- </button>
- <mat-menu #menu="matMenu">
- <button mat-menu-item (click)="openDateSettings(indexSign)">{{'lang.options' | translate}}</button>
- <button mat-menu-item (click)="deleteDate(indexSign)">{{'lang.delete' | translate}}</button>
- </mat-menu>
- </div>
- <svg viewBox="0 0 130 30" preserveAspectRatio="xMinYMin meet">
- <text y="15" [attr.font-size]="date.size" dy=".3em" [style.font-family]="date.font" [style.fill]="date.color">{{today | date : date.format : undefined : ('lang.langISO' | translate)}}</text></svg>
+ <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;">
+ <div style="position: absolute;top: -40px;right: 0px;">
+ <button mat-icon-button color="primary" [matMenuTriggerFor]="menu">
+ <mat-icon class="fas fa-cog"></mat-icon>
+ </button>
+ <mat-menu #menu="matMenu">
+ <button mat-menu-item
+ (click)="openDateSettings(indexSign)">{{'lang.options' | translate}}</button>
+ <button mat-menu-item
+ (click)="deleteDate(indexSign)">{{'lang.delete' | translate}}</button>
+ </mat-menu>
+ </div>
+ <svg viewBox="0 0 130 30" preserveAspectRatio="xMinYMin meet">
+ <text y="15" [attr.font-size]="date.size" dy=".3em" [style.font-family]="date.font"
+ [style.fill]="date.color">{{today | date : date.format : undefined : ('lang.langISO' | translate)}}</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()">
+ <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()">{{'lang.addDateBlock' | translate}}</button>
- <button mat-menu-item [disabled]="!emptySign()" (click)="initSign()">{{'lang.addSignaturePosition' | translate}}</button>
+ <button mat-menu-item [disabled]="!emptyDate()"
+ (click)="initDateBlock()">{{'lang.addDateBlock' | translate}}</button>
+ <button mat-menu-item [disabled]="!emptySign()"
+ (click)="initSign()">{{'lang.addSignaturePosition' | translate}}</button>
</mat-menu>
- <!--<mat-form-field *ngIf="!loading" class="pageList" style="position: fixed;">
- <span matPrefix>Page : </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>
+ <ng-container *ngIf="pages.length > 1">
+ <button mat-fab *ngIf="currentPage > 1" (click)="goToSignUserPage(currentUser, currentPage-1)"
+ class="paginate-left">
+ <mat-icon class="fa fa-chevron-left" style="height:auto"></mat-icon>
+ </button>
+ <button mat-fab *ngIf="currentPage < pages.length" (click)="goToSignUserPage(currentUser, currentPage+1)"
+ class="paginate-right">
+ <mat-icon class="fa fa-chevron-right" style="height:auto"></mat-icon>
+ </button>
+ </ng-container>
+ <section class="page-info">
+ <div class="page-info-doc">{{data.resource.title}}</div>
+ <div class="page-info-page" [matMenuTriggerFor]="menuPage">
+ {{'lang.page' | translate}} {{ currentPage }} / {{ pages.length }}</div>
+ <mat-menu #menuPage="matMenu">
+ <button mat-menu-item *ngFor="let page of pages"
+ (click)="goToSignUserPage(currentUser, page)">{{'lang.page' | translate}} {{ page }}</button>
+ </mat-menu>
+ </section>
</div>
<span class="divider-modal"></span>
<div mat-dialog-actions class="actions">
diff --git a/src/frontend/app/actions/send-external-signatory-book-action/maarch-paraph/signature-position/signature-position.component.scss b/src/frontend/app/actions/send-external-signatory-book-action/maarch-paraph/signature-position/signature-position.component.scss
index 7083f654c62..571acec11cd 100644
--- a/src/frontend/app/actions/send-external-signatory-book-action/maarch-paraph/signature-position/signature-position.component.scss
+++ b/src/frontend/app/actions/send-external-signatory-book-action/maarch-paraph/signature-position/signature-position.component.scss
@@ -118,4 +118,73 @@
.selected {
background: rgba($secondary, 0.3);
-}
\ No newline at end of file
+}
+
+.paginate-left {
+ position: absolute;
+ top: 50%;
+ left: 40px;
+ transform: translateY(-50%);
+ background: #c6c6c680;
+ color: #666;
+}
+
+.paginate-right {
+ position: absolute;
+ top: 50%;
+ right: 40px;
+ transform: translateY(-50%);
+ background: #c6c6c680;
+ color: #666;
+}
+
+.page {
+ &-info {
+ position: absolute;
+ bottom: 70px;
+ height: 30px;
+ width: auto;
+ max-width: 70%;
+ color: rgba(var(--ion-color-dark-rgb), 0.8);
+ font-size: 12px;
+ font-weight: 300;
+ line-height: 30px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ opacity: 0.5;
+ left: 50%;
+ transform: translateX(-50%);
+ font-weight: 500;
+ transition: all 0.3s ease-in-out;
+ z-index: 9999;
+
+ &-doc {
+ max-width: 80%;
+ background-color: #F1F4F4;
+ border-radius: 14px;
+ padding: 0 20px;
+ z-index: 1;
+ white-space: pre;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+
+ &-page {
+ cursor: pointer;
+ text-align: center;
+ border-radius: 0 14px 14px 0;
+ padding: 0 20px;
+ background: #fff;
+ border: 1px solid #ECF0F1;
+ margin-left: -15px;
+ height: 28px;
+ white-space: pre;
+ display: flex;
+ align-items: center;
+ }
+ }
+ &-info:hover {
+ opacity: 1;
+ }
+ }
\ No newline at end of file
diff --git a/src/frontend/app/actions/send-external-signatory-book-action/maarch-paraph/signature-position/signature-position.component.ts b/src/frontend/app/actions/send-external-signatory-book-action/maarch-paraph/signature-position/signature-position.component.ts
index 06683e1816f..37b9b535f6a 100644
--- a/src/frontend/app/actions/send-external-signatory-book-action/maarch-paraph/signature-position/signature-position.component.ts
+++ b/src/frontend/app/actions/send-external-signatory-book-action/maarch-paraph/signature-position/signature-position.component.ts
@@ -88,12 +88,10 @@ export class SignaturePositionComponent implements OnInit {
}
getPageAttachment() {
- console.log(this.data.resource);
-
if (this.data.resource.mainDocument) {
this.http.get(`../rest/resources/${this.data.resource.resId}/thumbnail/${this.currentPage}`).pipe(
tap((data: any) => {
- this.pages = Array.from({ length: data.pagesCount }).map((_, i) => i + 1);
+ this.pages = Array.from({ length: data.pageCount }).map((_, i) => i + 1);
this.imgContent = 'data:image/png;base64,' + data.fileContent;
this.getImageDimensions(this.imgContent);
}),
@@ -105,7 +103,7 @@ export class SignaturePositionComponent implements OnInit {
} else {
this.http.get(`../rest/attachments/${this.data.resource.resId}/thumbnail/${this.currentPage}`).pipe(
tap((data: any) => {
- this.pages = Array.from({ length: data.pagesCount }).map((_, i) => i + 1);
+ this.pages = Array.from({ length: data.pageCount }).map((_, i) => i + 1);
this.imgContent = 'data:image/png;base64,' + data.fileContent;
this.getImageDimensions(this.imgContent);
}),
@@ -124,6 +122,7 @@ export class SignaturePositionComponent implements OnInit {
this.workingAreaHeight = data.target.naturalHeight;
};
img.src = imgContent;
+ document.getElementsByClassName('signatureContainer')[0].scrollTop = 0;
}
moveSign(event: any) {
--
GitLab