FEAT #17150 TIME 2:30 WIP front admin notifications

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

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>

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

src/frontend/app/plugins/gridButton/grid-button.component.html

 <div class="container">
     <button *ngFor="let item of array" class="item" [class.isSelected]="isSelected(item)" (click)="toggleItem(item)">
-        {{item}}
+        {{item.label | translate}}
     </button>
 </div>

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;

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