Merge branch 'fix/component/update-time-input' into 'dev'

fix(components): Input component time should update with onChange

See merge request !796

src/app/shared/components/hour-picker/hour-picker.component.html

@@ -18,7 +18,7 @@
           [type]="'time'"
           [label]="'De :'"
           [size]="'large'"
-          [status]="getStatus(hour)"
+          [status]="getStatus(hour.start)"
           [statusText]="getStatusText(hour)"
           [(value)]="hour.start"
           (valueChange)="submitForm()"
@@ -30,7 +30,7 @@
           [type]="'time'"
           [label]="'Jusqu’à :'"
           [size]="'large'"
-          [status]="getStatus(hour)"
+          [status]="getStatus(hour.start, hour.end)"
           [statusText]="getStatusText(hour)"
           [(value)]="hour.end"
           (valueChange)="submitForm()"

src/app/shared/components/hour-picker/hour-picker.component.ts

-import { Component, EventEmitter, Input, OnChanges, OnDestroy, Output } from '@angular/core';
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 import { AbstractControl, UntypedFormArray, UntypedFormControl, UntypedFormGroup, Validators } from '@angular/forms';
 import { Day, Time, WeekDayEnum } from '../../../models/week.model';
 import { CheckHours } from '../../validator/form';
@@ -8,7 +8,6 @@ interface DayHour {
   hours: {
     start: string;
     end: string;
-    error: string;
   }[];
   open: boolean;
 }
@@ -18,7 +17,7 @@ interface DayHour {
   templateUrl: './hour-picker.component.html',
   styleUrls: ['./hour-picker.component.scss'],
 })
-export class HourPickerComponent implements OnChanges, OnDestroy {
+export class HourPickerComponent implements OnInit {
   @Input() structureInput: UntypedFormGroup;
 
   @Output() updateFormError = new EventEmitter<any>();
@@ -27,92 +26,38 @@ export class HourPickerComponent implements OnChanges, OnDestroy {
   public structure = {
     hours: this.initHoursDefault(),
   };
-  public structureHoursDefault: DayHour[] = this.initHoursDefault();
 
-  ngOnChanges(): void {
+  ngOnInit(): void {
     this.formatHoursForEdition();
   }
 
-  ngOnDestroy(): void {
-    this.formatHoursForSave();
-  }
-
   public getStructureControl(nameControl: string): AbstractControl {
     return this.structureInput.get(nameControl);
   }
 
   private initHoursDefault(): DayHour[] {
-    return [
-      {
-        name: WeekDayEnum.monday,
-        hours: [{ start: '', end: '', error: 'incomplete' }],
-        open: false,
-      },
-      {
-        name: WeekDayEnum.tuesday,
-        hours: [{ start: '', end: '', error: 'incomplete' }],
-        open: false,
-      },
-      {
-        name: WeekDayEnum.wednesday,
-        hours: [{ start: '', end: '', error: 'incomplete' }],
-        open: false,
-      },
-      {
-        name: WeekDayEnum.thursday,
-        hours: [{ start: '', end: '', error: 'incomplete' }],
-        open: false,
-      },
-      {
-        name: WeekDayEnum.friday,
-        hours: [{ start: '', end: '', error: 'incomplete' }],
-        open: false,
-      },
-      {
-        name: WeekDayEnum.saturday,
-        hours: [{ start: '', end: '', error: 'incomplete' }],
+    const defaultHours: DayHour[] = [];
+    for (const day of Object.values(WeekDayEnum)) {
+      defaultHours.push({
+        name: day,
+        hours: [{ start: '', end: '' }],
         open: false,
-      },
-      {
-        name: WeekDayEnum.sunday,
-        hours: [{ start: '', end: '', error: 'incomplete' }],
-        open: false,
-      },
-    ];
+      });
+    }
+    return defaultHours;
   }
 
   /** Convert data from to component structure */
   private parseFormToHours(day: Day, key: string): void {
-    this.structureHoursDefault.forEach((element) => {
+    this.structure.hours.forEach((element) => {
       if (element.name.toLowerCase() === key) {
         element.open = day.open;
-        element.hours = day.time.map((hour) => {
-          if (hour.opening && hour.closing) {
-            return {
-              start: hour.opening,
-              end: hour.closing,
-              error: null,
-            };
-          } else {
-            if (hour.opening) {
-              return {
-                start: hour.opening,
-                end: '',
-                error: 'incomplete',
-              };
-            } else {
-              return {
-                start: '',
-                end: hour.closing,
-                error: 'incomplete',
-              };
-            }
-          }
-        });
+        element.hours = day.time.map((hour) => ({
+          start: hour.opening ?? '',
+          end: hour.closing ?? '',
+        }));
       }
     });
-    this.checkHoursValid();
-    this.structure.hours = this.structureHoursDefault;
   }
 
   private parseToDay(data: DayHour): Day {
@@ -155,31 +100,13 @@ export class HourPickerComponent implements OnChanges, OnDestroy {
     }
   }
 
-  /**
-   * Formater les horaires pour l'enregistrement en base :
-   * supprimer les données inutiles
-   */
-  public formatHoursForSave(): void {
-    if (!this.structure.hours) {
-      return;
-    }
-
-    this.structure.hours = this.structure.hours.filter((day) => day.open === true);
-
-    for (const day of this.structure.hours) {
-      delete day.open;
-
-      for (const hour of day.hours) {
-        delete hour.error;
-      }
-    }
-  }
-
   public toggleOpenDay(day: DayHour, checked: boolean): void {
     day.open = checked;
 
     if (!checked) {
       day.hours = [];
+    } else {
+      this.addHours(day);
     }
     this.submitForm();
   }
@@ -193,7 +120,6 @@ export class HourPickerComponent implements OnChanges, OnDestroy {
     day.hours.push({
       start: '',
       end: '',
-      error: 'incomplete',
     });
     this.submitForm();
   }
@@ -208,30 +134,15 @@ export class HourPickerComponent implements OnChanges, OnDestroy {
 
   /** Vérifier que le format des horaires est correct */
   public checkHoursValid(): boolean {
-    let error = false;
     for (const day of this.structure.hours) {
-      if (day.open) {
-        // Init if no data
-        if (day.hours.length === 0) {
-          this.addHours(day);
-        }
-        for (const hour of day.hours) {
-          if (hour.start === '' || hour.end === '') {
-            hour.error = 'incomplete';
-            error = true;
-          } else if (hour.end <= hour.start) {
-            hour.error = 'wrong';
-            error = true;
-          } else {
-            hour.error = null;
-          }
+      if (!day.open) continue;
+      for (const hour of day.hours) {
+        if (this.getStatus(hour.start, hour.end) !== 'success') {
+          return false;
         }
       }
     }
-    // Émettre l'erreur à ajouter au formulaire pour autoriser
-    // ou empêcher de passer à l'étape suivante
-
-    return !error;
+    return true;
   }
 
   public submitForm(): void {
@@ -256,19 +167,14 @@ export class HourPickerComponent implements OnChanges, OnDestroy {
     });
   }
 
-  getStatus(hour: { start: string; end: string; error: string }): 'error' | 'success' | null {
-    if (hour.error === 'wrong' || hour.error === 'incomplete') {
-      return 'error';
-    } else if (hour.error === null) {
-      return 'success';
+  getStatus(start: string, end?: string): 'error' | 'success' {
+    if (end === undefined) {
+      return start !== '' ? 'success' : 'error';
     }
+    return end && end > start ? 'success' : 'error';
   }
 
-  getStatusText(hour: { start: string; end: string; error: string }): 'Horaire invalide' | 'Horaire valide' {
-    if (hour.error === 'wrong' || hour.error === 'incomplete') {
-      return 'Horaire invalide';
-    } else if (hour.error === null) {
-      return 'Horaire valide';
-    }
+  getStatusText(hour: { start: string; end: string }): string {
+    return 'Horaire ' + (this.getStatus(hour.start, hour.end) === 'error' ? 'invalide' : 'valide');
   }
 }