From f579efdd385ccbf23d2ebc27e4971204a31da871 Mon Sep 17 00:00:00 2001
From: Alex ORLUC <alex.orluc@maarch.org>
Date: Thu, 10 Jun 2021 18:48:56 +0200
Subject: [PATCH] FEAT #17150 TIME 2:30 WIP front admin notifications
---
lang/fr.json | 28 +++-
.../notification/notification.component.html | 43 ++++--
.../notification/notification.component.ts | 137 ++++++++++++++----
.../gridButton/grid-button.component.html | 2 +-
.../gridButton/grid-button.component.scss | 6 +
.../gridButton/grid-button.component.ts | 16 +-
6 files changed, 183 insertions(+), 49 deletions(-)
diff --git a/lang/fr.json b/lang/fr.json
index a947792fdf..2d17ec685f 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 da295fc3a1..47c4394ba5 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 33346baef6..3cbf045018 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 f173a2a353..207b3e92c9 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 b7b3963830..4f5e307c67 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 be300c1bf3..8cc91a5060 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);
}
}
--
GitLab