From 5b832bb4e1ce7cf3886a6a763e608f12adbca02b Mon Sep 17 00:00:00 2001
From: Alex ORLUC <alex.orluc@maarch.org>
Date: Mon, 28 Dec 2020 18:08:26 +0100
Subject: [PATCH] FEAT #15116 TIME 3 WIP date block options
---
src/frontend/app/app.module.ts | 4 +-
.../date-option-modal.component.html | 46 ++++++++++++++++
.../date-option-modal.component.scss | 23 ++++++++
.../dateOption/date-option-modal.component.ts | 54 +++++++++++++++++++
.../document-sign-list.component.html | 17 +++---
.../document-sign-list.component.scss | 2 +-
.../document-sign-list.component.ts | 16 +++++-
.../app/signatures/signatures.component.ts | 21 +++++---
8 files changed, 165 insertions(+), 18 deletions(-)
create mode 100644 src/frontend/app/documentSignList/dateOption/date-option-modal.component.html
create mode 100644 src/frontend/app/documentSignList/dateOption/date-option-modal.component.scss
create mode 100644 src/frontend/app/documentSignList/dateOption/date-option-modal.component.ts
diff --git a/src/frontend/app/app.module.ts b/src/frontend/app/app.module.ts
index d4a2600530..aaba39142a 100755
--- a/src/frontend/app/app.module.ts
+++ b/src/frontend/app/app.module.ts
@@ -55,6 +55,7 @@ import { SearchComponent } from './search/search.component';
import { SignaturePositionComponent } from './indexation/signature-position/signature-position.component';
import { DevToolComponent } from './service/debug/dev-tool.component';
import { DevLangComponent } from './service/debug/dev-lang.component';
+import { DateOptionModalComponent } from './documentSignList/dateOption/date-option-modal.component';
// ADMINISTRATION
@@ -139,7 +140,8 @@ import { SortPipe } from './plugins/sorting.pipe';
DevToolComponent,
DevLangComponent,
SignatureMethodModalComponent,
- HistoryListComponent
+ HistoryListComponent,
+ DateOptionModalComponent
],
imports: [
FormsModule,
diff --git a/src/frontend/app/documentSignList/dateOption/date-option-modal.component.html b/src/frontend/app/documentSignList/dateOption/date-option-modal.component.html
new file mode 100644
index 0000000000..cf931d049a
--- /dev/null
+++ b/src/frontend/app/documentSignList/dateOption/date-option-modal.component.html
@@ -0,0 +1,46 @@
+<ion-header [translucent]="true">
+ <ion-toolbar color="primary">
+ <ion-title>{{'lang.options' | translate}}</ion-title>
+ <ion-buttons slot="end">
+ <ion-button (click)="dismissModal()">
+ <ion-icon slot="icon-only" name="close-outline"></ion-icon>
+ </ion-button>
+ </ion-buttons>
+ </ion-toolbar>
+</ion-header>
+<ion-content>
+ <ion-toolbar>
+ <ion-title style="text-align: center;font-weight: normal;font-size: 50px;padding: 50px;"
+ [class]="getFontLabel(date.font)" [style.color]="date.color">{{today | date : date.format}}</ion-title>
+ </ion-toolbar>
+ <ion-item>
+ <ion-label color="secondary">{{'lang.format' | translate}}</ion-label>
+ <ion-select [(ngModel)]="date.format">
+ <ion-select-option *ngFor="let format of dateformats" [value]="format">
+ {{today | date : format}}
+ </ion-select-option>
+ </ion-select>
+ </ion-item>
+ <ion-item button lines="full" (click)="colorPicker.click()">
+ <input type="color" #colorPicker [(ngModel)]="date.color" style="display: none;"/>
+ <ion-label color="secondary">{{'lang.color' | translate}}</ion-label>
+ <ion-icon slot="end" name="ellipse" [style.color]="date.color"></ion-icon>
+ </ion-item>
+ <ion-item>
+ <ion-label color="secondary">{{'lang.font' | translate}}</ion-label>
+ <ion-select [(ngModel)]="date.font" [interfaceOptions]="{cssClass:'selectFormat'}">
+ <ion-select-option *ngFor="let font of datefonts" [value]="font" [class]="getFontLabel(font)">
+ {{font}}
+ </ion-select-option>
+ </ion-select>
+ </ion-item>
+</ion-content>
+<ion-footer class="ion-no-border">
+ <ion-toolbar>
+ <ion-buttons class="ion-justify-content-center">
+ <ion-button type="submit" color="primary">
+ <ion-label>{{'lang.save' | translate}}</ion-label>
+ </ion-button>
+ </ion-buttons>
+ </ion-toolbar>
+</ion-footer>
\ No newline at end of file
diff --git a/src/frontend/app/documentSignList/dateOption/date-option-modal.component.scss b/src/frontend/app/documentSignList/dateOption/date-option-modal.component.scss
new file mode 100644
index 0000000000..82809f585b
--- /dev/null
+++ b/src/frontend/app/documentSignList/dateOption/date-option-modal.component.scss
@@ -0,0 +1,23 @@
+::ng-deep.Arial {
+ font-family: Arial, sans-serif;
+}
+
+::ng-deep.Verdana {
+ font-family: Verdana, sans-serif;
+}
+
+::ng-deep.Helvetica {
+ font-family: Helvetica, sans-serif;
+}
+
+::ng-deep.Tahoma {
+ font-family: Tahoma, sans-serif;
+}
+
+::ng-deep.Times_New_Roman {
+ font-family: 'Times New Roman', serif;
+}
+
+::ng-deep.Courier_New {
+ font-family: 'Courier New', monospace;
+}
\ No newline at end of file
diff --git a/src/frontend/app/documentSignList/dateOption/date-option-modal.component.ts b/src/frontend/app/documentSignList/dateOption/date-option-modal.component.ts
new file mode 100644
index 0000000000..b092f977df
--- /dev/null
+++ b/src/frontend/app/documentSignList/dateOption/date-option-modal.component.ts
@@ -0,0 +1,54 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { ModalController } from '@ionic/angular';
+import { TranslateService } from '@ngx-translate/core';
+
+@Component({
+ templateUrl: 'date-option-modal.component.html',
+ styleUrls: ['date-option-modal.component.scss'],
+})
+export class DateOptionModalComponent implements OnInit {
+
+ @Input() date: any;
+
+ today: Date = new Date();
+
+ dateformats: any[] = [
+ 'dd/MM/y',
+ 'dd-MM-y',
+ 'dd.MM.y',
+ 'd MMM y',
+ 'd MMMM y',
+ ];
+
+ datefonts: any[] = [
+ 'Arial',
+ 'Verdana',
+ 'Helvetica',
+ 'Tahoma',
+ 'Times New Roman',
+ 'Courier New',
+ ];
+
+ constructor(
+ private translate: TranslateService,
+ public modalController: ModalController
+ ) { }
+
+ ngOnInit(): void {
+ console.log(this.date);
+
+ }
+
+ dismissModal() {
+ this.modalController.dismiss('cancel');
+ }
+
+ getFontLabel(label: string) {
+ return label.replace(' ', '_');
+ }
+
+ test() {
+
+ }
+
+}
diff --git a/src/frontend/app/documentSignList/document-sign-list.component.html b/src/frontend/app/documentSignList/document-sign-list.component.html
index 9f045e1eb0..fc4bccf125 100644
--- a/src/frontend/app/documentSignList/document-sign-list.component.html
+++ b/src/frontend/app/documentSignList/document-sign-list.component.html
@@ -24,14 +24,15 @@
<div *ngFor="let date of this.signaturesService.datesContent[this.signaturesService.currentPage];let i = index;"
class="test"
[position]="{x: (date.positionX*this.signaturesService.workingAreaWidth)/100, y:(date.positionY*this.signaturesService.workingAreaHeight)/100}"
- [style.width.%]="date.width"
- [style.height.%]="date.height"
- [ngDraggable]="!signaturesService.resizing" ngResizable [rzAspectRatio]="true"
- (rzStart)="signaturesService.resizing=true"
- (movingOffset)="signaturesService.dragging=true" (endOffset)="moveDate($event, i);"
- (rzStop)="onResizeDateStop($event, i);signaturesService.resizing=false;" [preventDefaultEvent]="false" [bounds]="bounds"
- [inBounds]="true"
- (click)="$event.stopPropagation();">
+ [style.width.%]="date.width" [style.height.%]="date.height" [ngDraggable]="!signaturesService.resizing" ngResizable
+ [rzAspectRatio]="true" (rzStart)="signaturesService.resizing=true" (movingOffset)="signaturesService.dragging=true"
+ (endOffset)="moveDate($event, i);" (rzStop)="onResizeDateStop($event, i);signaturesService.resizing=false;"
+ [preventDefaultEvent]="false" [bounds]="bounds" [inBounds]="true" (click)="$event.stopPropagation();">
+ <ion-buttons style="position:absolute;top: -30px;">
+ <ion-button slot="icon-only" shape="round" (click)="openDateSettings(date)">
+ <ion-icon name="construct-outline"></ion-icon>
+ </ion-button>
+ </ion-buttons>
<svg [id]="'testSVG_'+ i" viewBox="0 0 130 30" preserveAspectRatio="xMinYMin meet">
<text y="10" font-size="16" dy=".3em" style="fill: #0000ff;">25 décembre 2020</text></svg>
</div>
diff --git a/src/frontend/app/documentSignList/document-sign-list.component.scss b/src/frontend/app/documentSignList/document-sign-list.component.scss
index b1fe6cd279..4e3264163c 100644
--- a/src/frontend/app/documentSignList/document-sign-list.component.scss
+++ b/src/frontend/app/documentSignList/document-sign-list.component.scss
@@ -11,7 +11,7 @@
// margin-right: 10px;
background: none;
font: sans-serif;
- overflow: hidden;
+ // overflow: hidden;
// margin-bottom: 26px;
}
diff --git a/src/frontend/app/documentSignList/document-sign-list.component.ts b/src/frontend/app/documentSignList/document-sign-list.component.ts
index 926b39c28b..dbecb4261c 100644
--- a/src/frontend/app/documentSignList/document-sign-list.component.ts
+++ b/src/frontend/app/documentSignList/document-sign-list.component.ts
@@ -7,7 +7,8 @@ import { DomSanitizer } from '@angular/platform-browser';
import { TranslateService } from '@ngx-translate/core';
import { LocalStorageService } from '../service/local-storage.service';
import { ConfirmComponent } from '../plugins/confirm.component';
-import { PopoverController } from '@ionic/angular';
+import { ModalController, PopoverController } from '@ionic/angular';
+import { DateOptionModalComponent } from './dateOption/date-option-modal.component';
@Component({
selector: 'app-document-sign-list',
@@ -28,7 +29,8 @@ export class DocumentSignListComponent implements OnInit {
public notificationService: NotificationService,
private localStorage: LocalStorageService,
public dialog: MatDialog,
- public popoverController: PopoverController
+ public popoverController: PopoverController,
+ public modalController: ModalController,
) { }
ngOnInit(): void { }
@@ -122,4 +124,14 @@ export class DocumentSignListComponent implements OnInit {
}
this.localStorage.save(this.signaturesService.mainDocumentId.toString(), JSON.stringify({ 'sign': this.signaturesService.signaturesContent, 'note': this.signaturesService.notesContent }));
}
+
+ async openDateSettings(date: any) {
+ const modal = await this.modalController.create({
+ component: DateOptionModalComponent,
+ componentProps: {
+ 'date': date,
+ }
+ });
+ await modal.present();
+ }
}
diff --git a/src/frontend/app/signatures/signatures.component.ts b/src/frontend/app/signatures/signatures.component.ts
index 26fa8f4195..b5f1baf368 100755
--- a/src/frontend/app/signatures/signatures.component.ts
+++ b/src/frontend/app/signatures/signatures.component.ts
@@ -156,11 +156,14 @@ export class SignaturesComponent implements OnInit {
const datePosOtherPage = this.currentWorflow.datePositions.filter((item: any) => item.page !== this.signaturesService.currentPage);
if (datePosCurrentPage.length === 0 && datePosOtherPage.length === 0) {
- let dateBlock: any = {
+ const dateBlock: any = {
width: (130 * 100) / this.signaturesService.workingAreaWidth,
height: (30 * 100) / this.signaturesService.workingAreaHeight,
positionX: 0,
- positionY: 0
+ positionY: 0,
+ font: 'Arial',
+ color: '#666',
+ format : 'd MMMM y'
};
dateBlock.positionX = 130;
@@ -174,21 +177,27 @@ export class SignaturesComponent implements OnInit {
this.modalController.dismiss('success');
} else {
if (datePosCurrentPage.length > 0) {
- let dateBlock: any = {
+ const dateBlock: any = {
width: datePosCurrentPage[0].width,
height: datePosCurrentPage[0].height,
positionX: datePosCurrentPage[0].positionX,
- positionY: datePosCurrentPage[0].positionY
+ positionY: datePosCurrentPage[0].positionY,
+ font: 'Arial',
+ color: '#666',
+ format : 'd MMMM y'
};
this.storeDate(dateBlock, this.signaturesService.currentPage);
}
datePosOtherPage.forEach((position: any) => {
- let dateBlock: any = {
+ const dateBlock: any = {
width: position.width,
height: position.height,
positionX: position.positionX,
- positionY: position.positionY
+ positionY: position.positionY,
+ font: 'Arial',
+ color: '#666',
+ format : 'd MMMM y'
};
this.storeDate(dateBlock, position.page);
});
--
GitLab