diff --git a/lang/fr.json b/lang/fr.json index a947792fdf355efc72bc304413fd89564d34b65e..2d17ec685f770b70f475ef663d6165bc2eaa9a04 100755 --- a/lang/fr.json +++ b/lang/fr.json @@ -523,6 +523,32 @@ "internalUserOtpMsg": "Les autres modes de signatures ne seront plus disponibles pour <b>{{user}}</b> après validation.", "externalUser": "Mode externe", "external": "Externe", - "otpSignaturePositionMandatory": "La position de signature pour les utilisateurs externes est obligatoire." + "otpSignaturePositionMandatory": "La position de signature pour les utilisateurs externes est obligatoire.", + "january": "Janvier", + "february": "Février", + "march": "Mars", + "april": "Avril", + "may": "Mai", + "june": "Juin", + "july": "Juillet", + "august": "Août", + "september": "Septembre", + "october": "Octobre", + "november": "Novembre", + "december": "Décembre", + "monday": "Lundi", + "tuesday": "Mardi", + "wednesday": "Mercredi", + "thursday": "Jeudi", + "friday": "Vendredi", + "saturday": "Samedi", + "sunday": "Dimanche", + "months": "Mois", + "execDate": "Date d'exécution", + "endFrequencyDate": "Fin de la répétition", + "daily": "Hebdomadaire", + "monthly": "Mensuelle", + "daysOfWeek": "Jour(s) de la semaine", + "hours": "Heure(s)" } } diff --git a/src/frontend/app/administration/notification/notification.component.html b/src/frontend/app/administration/notification/notification.component.html index da295fc3a1551527e5ff286588b2567b7792de9a..47c4394ba5c7da5b6927d0b88d855c5a8e7af020 100644 --- a/src/frontend/app/administration/notification/notification.component.html +++ b/src/frontend/app/administration/notification/notification.component.html @@ -28,9 +28,6 @@ <ion-item> <ion-label color="secondary">{{'lang.frequency' | translate}}</ion-label> <ion-segment (ionChange)="frequencyChanged($event.detail.value)" [value]="currentFrequencyMode"> - <ion-segment-button value="hourly"> - <ion-label>{{'lang.hourly' | translate}}</ion-label> - </ion-segment-button> <ion-segment-button value="daily"> <ion-label>{{'lang.daily' | translate}}</ion-label> </ion-segment-button> @@ -42,26 +39,50 @@ <ion-card> <ion-card-content> <div *ngIf="currentFrequencyMode === 'daily'" style="text-align: center;"> - <ion-label color="secondary">{{'lang.dayOfWeek' | translate}} : </ion-label> - <app-grid-buttons name="test" [(ngModel)]="test" [array]="days"></app-grid-buttons> + <ion-label color="secondary">{{'lang.daysOfWeek' | translate}} : </ion-label> + <app-grid-buttons name="daysOfWeek" [(ngModel)]="notification.daysOfWeek" [array]="days"></app-grid-buttons> </div> <div *ngIf="currentFrequencyMode === 'monthly'" style="text-align: center;"> <ion-label color="secondary">{{'lang.months' | translate}} : </ion-label> - <app-grid-buttons name="test" [(ngModel)]="test" [array]="months"></app-grid-buttons> + <app-grid-buttons name="months" [(ngModel)]="notification.months" [array]="months"></app-grid-buttons> + </div> + <div *ngIf="currentFrequencyMode === 'monthly'" style="text-align: center;"> + <ion-label color="secondary">{{'lang.days' | translate | titlecase}} : </ion-label> + <app-grid-buttons name="daysOfMonth" [(ngModel)]="notification.daysOfMonth" [array]="daysMonth"></app-grid-buttons> </div> <ion-item> - <ion-label color="secondary" position="floating">{{'lang.startDate' | translate}} *</ion-label> - <ion-datetime displayFormat="HH:mm"></ion-datetime> + <ion-label color="secondary" position="floating">{{'lang.execDate' | translate}} *</ion-label> + <ion-datetime name="startTime" [(ngModel)]="notification.startTime" displayFormat="HH:mm"></ion-datetime> </ion-item> <ion-item> - <ion-label color="secondary">Répéter la tâche</ion-label> + <ion-label color="secondary">Répéter la tâche dans la journée</ion-label> <ion-toggle slot="start" name="repeatFrequency" [(ngModel)]="repeatFrequency"></ion-toggle> </ion-item> <ion-item *ngIf="repeatFrequency"> <ion-label color="secondary">Toutes les</ion-label> - <ion-input type="number" name="freqH" min="1" [(ngModel)]="notification.m" required> + <ion-input type="number" name="freqH" min="1" [(ngModel)]="notification.frequency" required> </ion-input> - <ion-label slot="end">minute(s)</ion-label> + <ion-buttons slot="end"> + <ion-button fill="clear" slot="icon-only" shape="round" color="primary" [matMenuTriggerFor]="menu"> + <ion-label>{{'lang.' + notification.frequencyMode | translate}}</ion-label> + </ion-button> + </ion-buttons> + <mat-menu #menu="matMenu"> + <button mat-menu-item (click)="notification.frequencyMode='minutes'">{{'lang.minutes' | translate | titlecase}}</button> + <button mat-menu-item (click)="notification.frequencyMode='hours'">{{'lang.hours' | translate}}</button> + </mat-menu> + </ion-item> + <ion-item *ngIf="repeatFrequency"> + <ion-label color="secondary" position="floating">{{'lang.endFrequencyDate' | translate}} *</ion-label> + <ion-datetime name="endTime" [(ngModel)]="notification.endTime" displayFormat="HH:mm"></ion-datetime> + </ion-item> + <ion-item text-center lines="none" style="position: sticky;bottom:0px;z-index:1;"> + <div style="display: flex;align-items: center;justify-content: center;width: 100%;background: white;"> + <ion-button type="submit" shape="round" size="large" fill="outline" color="primary" + [disabled]="!notificationForm.form.valid"> + <ion-label style="font-size: 13px;">{{'lang.validate' | translate}}</ion-label> + </ion-button> + </div> </ion-item> </ion-card-content> </ion-card> diff --git a/src/frontend/app/administration/notification/notification.component.ts b/src/frontend/app/administration/notification/notification.component.ts index 33346baef6b3bec2495c8bb5d05739f696d52552..3cbf04501818e690a773bfab2c1a3f003da46264 100644 --- a/src/frontend/app/administration/notification/notification.component.ts +++ b/src/frontend/app/administration/notification/notification.component.ts @@ -21,45 +21,107 @@ export class NotificationComponent implements OnInit { id: null, label: '', type: 'all', - m: '', - h: '', - dom: '', - mon: '', + startTime: null, + daysOfWeek: [], + months: [], + daysOfMonth: [], + frequency: null, + frequencyMode: 'hours', + endTime: null, }; - frequencyList: [ - 'oneADay', - 'twoADay', - 'oneAMonth' + frequencyModes: [ + 'minutes', + 'hours', ]; days = [ - 'monday', - 'Tuesday', - 'wednesday', - 'thursday', - 'friday', - 'saturday' + { + id: 1, + label : 'lang.monday' + }, + { + id: 2, + label : 'lang.tuesday' + }, + { + id: 3, + label : 'lang.wednesday' + }, + { + id: 4, + label : 'lang.thursday' + }, + { + id: 5, + label : 'lang.friday' + }, + { + id: 6, + label : 'lang.saturday' + }, + { + id: 7, + label : 'lang.sunday' + } ]; months = [ - 'january', - 'february', - 'march', - 'april', - 'may', - 'june', - 'july', - 'august', - 'september', - 'october', - 'november', - 'december' + { + id: 1, + label : 'lang.january' + }, + { + id: 2, + label : 'lang.february' + }, + { + id: 3, + label : 'lang.march' + }, + { + id: 4, + label : 'lang.april' + }, + { + id: 5, + label : 'lang.may' + }, + { + id: 6, + label : 'lang.june' + }, + { + id: 7, + label : 'lang.july' + }, + { + id: 8, + label : 'lang.august' + }, + { + id: 9, + label : 'lang.september' + }, + { + id: 10, + label : 'lang.october' + }, + { + id: 11, + label : 'lang.november' + }, + { + id: 12, + label : 'lang.december' + } ]; + daysMonth: any = []; + test: any = []; - currentFrequencyMode = 'hourly'; + currentFrequencyMode = 'daily'; repeatFrequency: boolean = false; constructor( @@ -72,10 +134,11 @@ export class NotificationComponent implements OnInit { ) { } ngOnInit() { - + this.genDaysOfMonth(); this.route.params.subscribe((params: any) => { if (params['id'] === undefined) { this.loading = false; + console.log(this.daysMonth); } else { this.creationMode = false; // TO DO : GET NOTIFICATION @@ -84,10 +147,28 @@ export class NotificationComponent implements OnInit { } onSubmit() { + console.log(this.notification); + } + genDaysOfMonth() { + for (let index = 1; index <= 31; index++) { + this.daysMonth.push({ + id: index, + label: index + }); + } } frequencyChanged(mode: string) { + if (mode === 'daily') { + this.notification.daysOfWeek = []; + this.notification.months = ['*']; + this.notification.daysOfMonth = ['*']; + } else if (mode === 'monthly'){ + this.notification.daysOfWeek = ['*']; + this.notification.months = []; + this.notification.daysOfMonth = []; + } this.currentFrequencyMode = mode; } } diff --git a/src/frontend/app/plugins/gridButton/grid-button.component.html b/src/frontend/app/plugins/gridButton/grid-button.component.html index f173a2a35391cf852ce89fe956b1e8cf249d9f0c..207b3e92c90688e6e51219738987a10a50f34e7f 100644 --- a/src/frontend/app/plugins/gridButton/grid-button.component.html +++ b/src/frontend/app/plugins/gridButton/grid-button.component.html @@ -1,5 +1,5 @@ <div class="container"> <button *ngFor="let item of array" class="item" [class.isSelected]="isSelected(item)" (click)="toggleItem(item)"> - {{item}} + {{item.label | translate}} </button> </div> diff --git a/src/frontend/app/plugins/gridButton/grid-button.component.scss b/src/frontend/app/plugins/gridButton/grid-button.component.scss index b7b3963830fc30106367cdbb1a34d4996652350f..4f5e307c6746fb22725304a65d8a0c5d783b2928 100644 --- a/src/frontend/app/plugins/gridButton/grid-button.component.scss +++ b/src/frontend/app/plugins/gridButton/grid-button.component.scss @@ -8,6 +8,12 @@ max-width: 100%; } + +.grid-7 { + display: inline-grid; + grid-template-columns: repeat(7, 1fr); +} + .item:not(:first-child) { border-left: solid 1px #d9d9d9; diff --git a/src/frontend/app/plugins/gridButton/grid-button.component.ts b/src/frontend/app/plugins/gridButton/grid-button.component.ts index be300c1bf3f4fa89d835cb0e918000cb23741ad1..8cc91a50608dfcc896db6208c795649fc9ae9493 100644 --- a/src/frontend/app/plugins/gridButton/grid-button.component.ts +++ b/src/frontend/app/plugins/gridButton/grid-button.component.ts @@ -30,9 +30,7 @@ export class GridButtonComponent implements OnInit { public onTouchedFn = () => { }; - ngOnInit() { - console.log(this.array); - } + ngOnInit() { } public get invalid(): boolean { return this.control ? this.control.invalid : false; @@ -61,19 +59,21 @@ export class GridButtonComponent implements OnInit { } public writeValue(obj: any): void { - this.data.push(obj); + this.data = obj; } - isSelected(id: any) { - return this.data.indexOf(id) > -1; + isSelected(item: any) { + return this.data.indexOf(item.id) > -1; } toggleItem(item: any) { if (this.isSelected(item)) { - const index = this.data.indexOf(item); + const index = this.data.indexOf(item.id); this.data.splice(index, 1); } else { - this.writeValue(item); + // this.writeValue(item.id); + this.data.push(item.id); } + this.onChangeFn(this.data); } }