FEAT #15116 TIME 3 WIP date block options

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,

src/frontend/app/documentSignList/dateOption/date-option-modal.component.html

+<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

src/frontend/app/documentSignList/dateOption/date-option-modal.component.scss

+::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

src/frontend/app/documentSignList/dateOption/date-option-modal.component.ts

+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() {
+        
+    }
+
+}

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>

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;
 }
 

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();
+    }
 }

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);
             });