From b89a10ebbe4edc78b26189ee63e7acdc5ca1c139 Mon Sep 17 00:00:00 2001
From: Pierre Narcisi <pierre.narcisi@mnhn.fr>
Date: Mon, 18 Mar 2024 16:14:16 +0100
Subject: [PATCH] Feat(mapping) controling entities controls and adding a badge

---
 .../fields-mapping-step.component.html          | 13 ++++++++++++-
 .../fields-mapping-step.component.scss          |  5 +++++
 .../fields-mapping-step.component.ts            | 17 +++++++++++++++++
 3 files changed, 34 insertions(+), 1 deletion(-)

diff --git a/frontend/src/app/modules/imports/components/import_process/fields-mapping-step/fields-mapping-step.component.html b/frontend/src/app/modules/imports/components/import_process/fields-mapping-step/fields-mapping-step.component.html
index efc06d7332..691717c737 100644
--- a/frontend/src/app/modules/imports/components/import_process/fields-mapping-step/fields-mapping-step.component.html
+++ b/frontend/src/app/modules/imports/components/import_process/fields-mapping-step/fields-mapping-step.component.html
@@ -168,7 +168,18 @@ <h5 class="card-title mb-0">Correspondance des champs avec le modèle</h5>
     </form>
     <form [formGroup]="mappingFormControl">
       <mat-tab-group [(selectedIndex)]="selectedIndex" animationDuration="0ms" class="entities-tab">
-        <mat-tab *ngFor="let entitythemes of targetFields" label="{{ entitythemes.entity.label }}">
+        <mat-tab *ngFor="let entitythemes of targetFields">
+          <ng-template mat-tab-label>
+            <span
+              [matBadge]="this.invalidEntityControls(entitythemes.entity.label)"
+              matBadgeColor="warn"
+              matBadgeSize="small"
+              [matBadgeHidden]="entitiesForms[entitythemes.entity.label].valid"
+              class="entity-tab-label"
+            >
+              {{ entitythemes.entity.label }}
+            </span>
+          </ng-template>
           <div *ngFor="let themefields of entitythemes.themes" class="entities-tab__content">
             <fieldset>
               <legend class="px-1">
diff --git a/frontend/src/app/modules/imports/components/import_process/fields-mapping-step/fields-mapping-step.component.scss b/frontend/src/app/modules/imports/components/import_process/fields-mapping-step/fields-mapping-step.component.scss
index 39796ad922..f8e9f499f8 100644
--- a/frontend/src/app/modules/imports/components/import_process/fields-mapping-step/fields-mapping-step.component.scss
+++ b/frontend/src/app/modules/imports/components/import_process/fields-mapping-step/fields-mapping-step.component.scss
@@ -110,4 +110,9 @@ ng-select span.in_use {
   &__content {
     padding: 1em;
   }
+
+  .entity-tab-label {
+    padding: 4px;
+  }  
+
 }
diff --git a/frontend/src/app/modules/imports/components/import_process/fields-mapping-step/fields-mapping-step.component.ts b/frontend/src/app/modules/imports/components/import_process/fields-mapping-step/fields-mapping-step.component.ts
index 943e052445..1cb3e617a7 100644
--- a/frontend/src/app/modules/imports/components/import_process/fields-mapping-step/fields-mapping-step.component.ts
+++ b/frontend/src/app/modules/imports/components/import_process/fields-mapping-step/fields-mapping-step.component.ts
@@ -48,6 +48,7 @@ export class FieldsMappingStepComponent implements OnInit {
   public fieldMappingForm = new FormControl(); // form to select the mapping to use
   public mappingFormControl: FormGroup; // form group to associate each source fields to import fields
   public createOrRenameMappingForm = new FormControl(null, [Validators.required]); // form to add a new mapping
+  public entitiesForms: Record<string, FormGroup> = {};
   public modalCreateMappingForm = new FormControl('');
 
   public displayAllValues: boolean = false; // checkbox to (not) show fields associated by the selected mapping
@@ -144,11 +145,26 @@ export class FieldsMappingStepComponent implements OnInit {
     );
   }
 
+  /**
+   * Count the number of invalid controls
+   * in an entity FormGroup
+   */
+  invalidEntityControls(entityFormLabel: string) {
+    let result: number = 0;
+    let entityForm = this.entitiesForms[entityFormLabel];
+
+    Object.values(entityForm.controls).forEach((c) => {
+      result += c.invalid ? 1 : 0;
+    });
+    return result;
+  }
+
   /**
    * A function to populate the mapping form based on target fields.
    */
   populateMappingForm() {
     this.targetFields.forEach((entity) => {
+      this.entitiesForms[entity.entity.label] = this._fb.group({});
       entity.themes.forEach(({ fields }) => {
         fields.forEach((field) => {
           const { name_field, autogenerated } = field;
@@ -162,6 +178,7 @@ export class FieldsMappingStepComponent implements OnInit {
               this.onFieldMappingChange(name_field, value);
             });
             this.mappingFormControl.addControl(name_field, control);
+            this.entitiesForms[entity.entity.label].addControl(name_field, control);
           } else {
             // If a control with a given name already exists, it would not be replaced with a new one.
             // The existing one will be updated with a new obser. We make sure to sync the references of it.