feat: years validator

690pmb · Jan 20, 2024 · 818c388 · 818c388
1 parent d22a195
commit 818c388
Show file tree

Hide file tree

Showing 6 changed files with 87 additions and 24 deletions.
diff --git a/src/app/list-composition/list-composition.component.html b/src/app/list-composition/list-composition.component.html
@@ -42,6 +42,15 @@
         placeholder="Année de fin"
       ></app-filter-year>
     </div>
+    <div
+      *ngIf="
+    filters.errors?.['invalidYears'] &&
+    (filters.touched || filters.dirty)
+  "
+      class="mat-mdc-form-field-error years-error"
+    >
+      L'année de fin doit être supérieure à l'année de début
+    </div>
   </div>
   <fa-icon
     class="reset-btn pointer"

diff --git a/src/app/list-composition/list-composition.component.ts b/src/app/list-composition/list-composition.component.ts
@@ -13,6 +13,7 @@ import {UtilsService} from '@services/utils.service';
 import {ListDirective} from '../list/list.component';
 import {DexieService} from '@services/dexie.service';
 import {Dropbox} from '@utils/dropbox';
+import {yearsValidator} from '@utils/year.validator';
 
 @Component({
   selector: 'app-list-composition',
@@ -65,20 +66,29 @@ export class ListCompositionComponent
     category: FormControl<string[] | undefined>;
     begin: FormControl<number | undefined>;
     end: FormControl<number | undefined>;
-  }>({
-    artist: new FormControl<string | undefined>(undefined, {nonNullable: true}),
-    title: new FormControl<string | undefined>(undefined, {nonNullable: true}),
-    filename: new FormControl<string | undefined>(undefined, {
-      nonNullable: true,
-    }),
-    type: new FormControl<string | undefined>(undefined, {nonNullable: true}),
-    deleted: new FormControl<boolean>(false, {nonNullable: true}),
-    category: new FormControl<string[] | undefined>(undefined, {
-      nonNullable: true,
-    }),
-    begin: new FormControl<number | undefined>(undefined, {nonNullable: true}),
-    end: new FormControl<number | undefined>(undefined, {nonNullable: true}),
-  });
+  }>(
+    {
+      artist: new FormControl<string | undefined>(undefined, {
+        nonNullable: true,
+      }),
+      title: new FormControl<string | undefined>(undefined, {
+        nonNullable: true,
+      }),
+      filename: new FormControl<string | undefined>(undefined, {
+        nonNullable: true,
+      }),
+      type: new FormControl<string | undefined>(undefined, {nonNullable: true}),
+      deleted: new FormControl<boolean>(false, {nonNullable: true}),
+      category: new FormControl<string[] | undefined>(undefined, {
+        nonNullable: true,
+      }),
+      begin: new FormControl<number | undefined>(undefined, {
+        nonNullable: true,
+      }),
+      end: new FormControl<number | undefined>(undefined, {nonNullable: true}),
+    },
+    {validators: yearsValidator}
+  );
 
   constructor(
     private myCompositionsService: DataService<Composition>,

diff --git a/src/app/list-fichier/list-fichier.component.html b/src/app/list-fichier/list-fichier.component.html
@@ -41,6 +41,14 @@
         <mat-checkbox [formControl]="filters.controls.top"> </mat-checkbox>
       </span>
     </div>
+    <div
+      *ngIf="
+        filters.errors?.['invalidYears'] && (filters.touched || filters.dirty)
+      "
+      class="mat-mdc-form-field-error years-error"
+    >
+      L'année de fin doit être supérieure à l'année de début
+    </div>
   </div>
   <fa-icon
     class="reset-btn pointer"

diff --git a/src/app/list-fichier/list-fichier.component.ts b/src/app/list-fichier/list-fichier.component.ts
@@ -13,6 +13,7 @@ import {DexieService} from '@services/dexie.service';
 import {Utils} from '@utils/utils';
 import {Dropbox} from '@utils/dropbox';
 import {FormGroup, FormControl} from '@angular/forms';
+import {yearsValidator} from '@utils/year.validator';
 
 @Component({
   selector: 'app-list-fichier',
@@ -59,16 +60,19 @@ export class ListFichierComponent
     top: FormControl<boolean>;
     begin: FormControl<number | undefined>;
     end: FormControl<number | undefined>;
-  }>({
-    author: new FormControl(),
-    name: new FormControl(),
-    type: new FormControl(),
-    deleted: new FormControl(),
-    category: new FormControl(),
-    top: new FormControl(),
-    begin: new FormControl(),
-    end: new FormControl(),
-  });
+  }>(
+    {
+      author: new FormControl(),
+      name: new FormControl(),
+      type: new FormControl(),
+      deleted: new FormControl(),
+      category: new FormControl(),
+      top: new FormControl(),
+      begin: new FormControl(),
+      end: new FormControl(),
+    },
+    {validators: yearsValidator}
+  );
 
   constructor(
     private myFichiersService: DataService<Fichier>,

diff --git a/src/app/list/list.component.scss b/src/app/list/list.component.scss
@@ -42,6 +42,14 @@
   }
 }
 
+.years-error {
+  float: right;
+  width: 424px;
+  display: flex;
+  justify-content: center;
+  padding-bottom: 15px;
+}
+
 ::ng-deep.mat-mdc-paginator-container {
   justify-content: center !important;
 }
@@ -130,6 +138,11 @@
     flex-direction: column;
   }
 
+  .years-error {
+    float: unset;
+    justify-content: start;
+  }
+
   .reset-btn {
     margin-bottom: 22px;
   }

diff --git a/src/app/utils/year.validator.ts b/src/app/utils/year.validator.ts
@@ -0,0 +1,19 @@
+import {AbstractControl, ValidationErrors, ValidatorFn} from '@angular/forms';
+
+/** Begin year must be lower than end year */
+export const yearsValidator: ValidatorFn = (
+  control: AbstractControl
+): ValidationErrors | null => {
+  const begin = control.get('begin');
+  const end = control.get('end');
+
+  return begin?.value &&
+    end?.value &&
+    !begin.pristine &&
+    !end.pristine &&
+    !begin.errors &&
+    !end.errors &&
+    begin.value > end.value
+    ? {invalidYears: true}
+    : null;
+};