Skip to content
Snippets Groups Projects
Commit 7fb228de authored by Alex ORLUC's avatar Alex ORLUC
Browse files

FEAT #12026 TIME 1 add page nav + display page

parent 9e243743
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
src/frontend/app/actions/send-external-signatory-book-action/maarch-paraph/signature-position/signature-position.component.html
+ 51
− 40
View file @ 7fb228de
...@@ -19,7 +19,8 @@ ...@@ -19,7 +19,8 @@
padding-top: 0px; padding-top: 0px;
padding-bottom: 0px; padding-bottom: 0px;
min-height: 20px;cursor: pointer;" (click)="goToSignUserPage(i,sign.page)" 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> {{sign.page}}</mat-chip>
</ng-container> </ng-container>
<ng-container *ngFor="let date of dateList"> <ng-container *ngFor="let date of dateList">
...@@ -27,7 +28,8 @@ ...@@ -27,7 +28,8 @@
padding-top: 0px; padding-top: 0px;
padding-bottom: 0px; padding-bottom: 0px;
min-height: 20px;cursor: pointer;" (click)="goToSignUserPage(i,date.page)" 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> {{date.page}}</mat-chip>
</ng-container> </ng-container>
</mat-chip-list> </mat-chip-list>
...@@ -53,54 +55,63 @@ ...@@ -53,54 +55,63 @@
</div> </div>
</ng-container> </ng-container>
<ng-container *ngFor="let date of dateList;let indexSign=index;"> <ng-container *ngFor="let date of dateList;let indexSign=index;">
<div <div *ngIf="date.page === currentPage" [class.signDisabled]="currentUser!==date.sequence"
*ngIf="date.page === currentPage" [position]="{x: (date.positionX*workingAreaWidth)/100, y:(date.positionY*workingAreaHeight)/100}"
[class.signDisabled]="currentUser!==date.sequence" [ngDraggable]="currentUser===date.sequence && !resizing" (endOffset)="moveDate($event);"
[position]="{x: (date.positionX*workingAreaWidth)/100, y:(date.positionY*workingAreaHeight)/100}" [preventDefaultEvent]="false" [bounds]="myBounds" [inBounds]="true" class="dateBlock"
[ngDraggable]="currentUser===date.sequence && !resizing" [style.width.%]="date.width" [style.height.%]="date.height"
(endOffset)="moveDate($event);" (click)="$event.stopPropagation();currentUser!=date.sequence ? goToSignUserPage(date.sequence, currentPage) : false"
[preventDefaultEvent]="false" ngResizable [rzAspectRatio]="true" (rzStart)="resizing=true"
[bounds]="myBounds" (rzStop)="onResizeDateStop($event, indexSign);resizing=false;">
[inBounds]="true" <div style="position: absolute;top: -40px;right: 0px;">
class="dateBlock" <button mat-icon-button color="primary" [matMenuTriggerFor]="menu">
[style.width.%]="date.width" <mat-icon class="fas fa-cog"></mat-icon>
[style.height.%]="date.height" </button>
(click)="$event.stopPropagation();currentUser!=date.sequence ? goToSignUserPage(date.sequence, currentPage) : false" <mat-menu #menu="matMenu">
ngResizable <button mat-menu-item
[rzAspectRatio]="true" (click)="openDateSettings(indexSign)">{{'lang.options' | translate}}</button>
(rzStart)="resizing=true" <button mat-menu-item
(rzStop)="onResizeDateStop($event, indexSign);resizing=false;" (click)="deleteDate(indexSign)">{{'lang.delete' | translate}}</button>
> </mat-menu>
<div style="position: absolute;top: -40px;right: 0px;"> </div>
<button mat-icon-button color="primary" [matMenuTriggerFor]="menu"> <svg viewBox="0 0 130 30" preserveAspectRatio="xMinYMin meet">
<mat-icon class="fas fa-cog"></mat-icon> <text y="15" [attr.font-size]="date.size" dy=".3em" [style.font-family]="date.font"
</button> [style.fill]="date.color">{{today | date : date.format : undefined : ('lang.langISO' | translate)}}</text></svg>
<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> </div>
</ng-container> </ng-container>
</div> </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> <mat-icon class="fas fa-plus" style="height: auto"></mat-icon>
</button> </button>
<mat-menu #actionPosMenu="matMenu"> <mat-menu #actionPosMenu="matMenu">
<button mat-menu-item [disabled]="!emptyDate()" (click)="initDateBlock()">{{'lang.addDateBlock' | translate}}</button> <button mat-menu-item [disabled]="!emptyDate()"
<button mat-menu-item [disabled]="!emptySign()" (click)="initSign()">{{'lang.addSignaturePosition' | translate}}</button> (click)="initDateBlock()">{{'lang.addDateBlock' | translate}}</button>
<button mat-menu-item [disabled]="!emptySign()"
(click)="initSign()">{{'lang.addSignaturePosition' | translate}}</button>
</mat-menu> </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()" /> <img class="img-content" [src]="imgContent" (load)="imgLoaded()" />
</div> </div>
</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> </div>
<span class="divider-modal"></span> <span class="divider-modal"></span>
<div mat-dialog-actions class="actions"> <div mat-dialog-actions class="actions">
......
src/frontend/app/actions/send-external-signatory-book-action/maarch-paraph/signature-position/signature-position.component.scss
+ 70
− 1
View file @ 7fb228de
...@@ -118,4 +118,73 @@ ...@@ -118,4 +118,73 @@
.selected { .selected {
background: rgba($secondary, 0.3); 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
src/frontend/app/actions/send-external-signatory-book-action/maarch-paraph/signature-position/signature-position.component.ts
+ 3
− 4
View file @ 7fb228de
...@@ -88,12 +88,10 @@ export class SignaturePositionComponent implements OnInit { ...@@ -88,12 +88,10 @@ export class SignaturePositionComponent implements OnInit {
} }
getPageAttachment() { getPageAttachment() {
console.log(this.data.resource);
if (this.data.resource.mainDocument) { if (this.data.resource.mainDocument) {
this.http.get(`../rest/resources/${this.data.resource.resId}/thumbnail/${this.currentPage}`).pipe( this.http.get(`../rest/resources/${this.data.resource.resId}/thumbnail/${this.currentPage}`).pipe(
tap((data: any) => { 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.imgContent = 'data:image/png;base64,' + data.fileContent;
this.getImageDimensions(this.imgContent); this.getImageDimensions(this.imgContent);
}), }),
...@@ -105,7 +103,7 @@ export class SignaturePositionComponent implements OnInit { ...@@ -105,7 +103,7 @@ export class SignaturePositionComponent implements OnInit {
} else { } else {
this.http.get(`../rest/attachments/${this.data.resource.resId}/thumbnail/${this.currentPage}`).pipe( this.http.get(`../rest/attachments/${this.data.resource.resId}/thumbnail/${this.currentPage}`).pipe(
tap((data: any) => { 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.imgContent = 'data:image/png;base64,' + data.fileContent;
this.getImageDimensions(this.imgContent); this.getImageDimensions(this.imgContent);
}), }),
...@@ -124,6 +122,7 @@ export class SignaturePositionComponent implements OnInit { ...@@ -124,6 +122,7 @@ export class SignaturePositionComponent implements OnInit {
this.workingAreaHeight = data.target.naturalHeight; this.workingAreaHeight = data.target.naturalHeight;
}; };
img.src = imgContent; img.src = imgContent;
document.getElementsByClassName('signatureContainer')[0].scrollTop = 0;
} }
moveSign(event: any) { moveSign(event: any) {
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment