Feat(mapping) controling entities controls and adding a badge

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

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

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.