Feat(mapping) controling entities controls and adding a badge

PnX-SI · Mar 18, 2024 · 6a7262f · 6a7262f
1 parent b52770b
commit 6a7262f
Show file tree

Hide file tree

Showing 5 changed files with 85 additions and 19 deletions.
diff --git a/.../imports/components/import_process/fields-mapping-step/fields-mapping-step.component.html b/.../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/.../imports/components/import_process/fields-mapping-step/fields-mapping-step.component.scss b/.../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/...es/imports/components/import_process/fields-mapping-step/fields-mapping-step.component.ts b/...es/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.

diff --git a/frontend/src/app/modules/imports/models/cruved.model.ts b/frontend/src/app/modules/imports/models/cruved.model.ts
@@ -16,12 +16,13 @@ export interface CruvedWithScope {
   D: number;
 }
 
-export function toBooleanCruved(cruved: CruvedWithScope,compare_function:Function = (c)=> c>0): Cruved {
+export function toBooleanCruved(
+  cruved: CruvedWithScope,
+  compare_function: Function = (c) => c > 0
+): Cruved {
   return Object.assign(
     {},
-    ...Object.entries(
-      cruved as CruvedWithScope
-    ).map(([key, value]) => ({
+    ...Object.entries(cruved as CruvedWithScope).map(([key, value]) => ({
       [key]: value > 0,
     }))
   );

diff --git a/frontend/src/app/modules/imports/services/data.service.ts b/frontend/src/app/modules/imports/services/data.service.ts
@@ -85,7 +85,10 @@ export class ImportDataService {
   }
 
   updateImport(idImport, data): Observable<Import> {
-    return this._http.post<Import>(`${this.getUrlApiForADestination()}/imports/${idImport}/update`, data);
+    return this._http.post<Import>(
+      `${this.getUrlApiForADestination()}/imports/${idImport}/update`,
+      data
+    );
   }
 
   createFieldMapping(name: string, values: FieldMappingValues): Observable<FieldMapping> {
@@ -107,15 +110,21 @@ export class ImportDataService {
   }
 
   getContentMappings(): Observable<Array<ContentMapping>> {
-    return this._http.get<Array<ContentMapping>>(`${this.getUrlApiForADestination()}/contentmappings/`);
+    return this._http.get<Array<ContentMapping>>(
+      `${this.getUrlApiForADestination()}/contentmappings/`
+    );
   }
 
   getFieldMapping(id_mapping: number): Observable<FieldMapping> {
-    return this._http.get<FieldMapping>(`${this.getUrlApiForADestination()}/fieldmappings/${id_mapping}/`);
+    return this._http.get<FieldMapping>(
+      `${this.getUrlApiForADestination()}/fieldmappings/${id_mapping}/`
+    );
   }
 
   getContentMapping(id_mapping: number): Observable<ContentMapping> {
-    return this._http.get<ContentMapping>(`${this.getUrlApiForADestination()}/contentmappings/${id_mapping}/`);
+    return this._http.get<ContentMapping>(
+      `${this.getUrlApiForADestination()}/contentmappings/${id_mapping}/`
+    );
   }
 
   updateFieldMapping(
@@ -157,11 +166,15 @@ export class ImportDataService {
   }
 
   deleteFieldMapping(id_mapping: number): Observable<null> {
-    return this._http.delete<null>(`${this.getUrlApiForADestination()}/fieldmappings/${id_mapping}/`);
+    return this._http.delete<null>(
+      `${this.getUrlApiForADestination()}/fieldmappings/${id_mapping}/`
+    );
   }
 
   deleteContentMapping(id_mapping: number): Observable<null> {
-    return this._http.delete<null>(`${this.getUrlApiForADestination()}/contentmappings/${id_mapping}/`);
+    return this._http.delete<null>(
+      `${this.getUrlApiForADestination()}/contentmappings/${id_mapping}/`
+    );
   }
 
   /**
@@ -184,19 +197,26 @@ export class ImportDataService {
    * @param idImport : integer
    */
   getColumnsImport(idImport: number): Observable<Array<string>> {
-    return this._http.get<Array<string>>(`${this.getUrlApiForADestination()}/imports/${idImport}/columns`);
+    return this._http.get<Array<string>>(
+      `${this.getUrlApiForADestination()}/imports/${idImport}/columns`
+    );
   }
 
   getImportValues(idImport: number): Observable<ImportValues> {
-    return this._http.get<ImportValues>(`${this.getUrlApiForADestination()}/imports/${idImport}/values`);
+    return this._http.get<ImportValues>(
+      `${this.getUrlApiForADestination()}/imports/${idImport}/values`
+    );
   }
 
   getBibFields(): Observable<Array<EntitiesThemesFields>> {
     return this._http.get<Array<EntitiesThemesFields>>(`${this.getUrlApiForADestination()}/fields`);
   }
 
   setImportFieldMapping(idImport: number, values: FieldMappingValues): Observable<Import> {
-    return this._http.post<Import>(`${this.getUrlApiForADestination()}/imports/${idImport}/fieldmapping`, values);
+    return this._http.post<Import>(
+      `${this.getUrlApiForADestination()}/imports/${idImport}/fieldmapping`,
+      values
+    );
   }
 
   setImportContentMapping(idImport: number, values: ContentMappingValues): Observable<Import> {
@@ -207,15 +227,22 @@ export class ImportDataService {
   }
 
   getNomencInfo(id_import: number) {
-    return this._http.get<any>(`${this.getUrlApiForADestination()}/imports/${id_import}/contentMapping`);
+    return this._http.get<any>(
+      `${this.getUrlApiForADestination()}/imports/${id_import}/contentMapping`
+    );
   }
 
   prepareImport(import_id: number): Observable<Import> {
-    return this._http.post<Import>(`${this.getUrlApiForADestination()}/imports/${import_id}/prepare`, {});
+    return this._http.post<Import>(
+      `${this.getUrlApiForADestination()}/imports/${import_id}/prepare`,
+      {}
+    );
   }
 
   getValidData(import_id: number): Observable<ImportPreview> {
-    return this._http.get<any>(`${this.getUrlApiForADestination()}/imports/${import_id}/preview_valid_data`);
+    return this._http.get<any>(
+      `${this.getUrlApiForADestination()}/imports/${import_id}/preview_valid_data`
+    );
   }
 
   getBbox(sourceId: number): Observable<any> {
@@ -225,7 +252,10 @@ export class ImportDataService {
   }
 
   finalizeImport(import_id): Observable<Import> {
-    return this._http.post<Import>(`${this.getUrlApiForADestination()}/imports/${import_id}/import`, {});
+    return this._http.post<Import>(
+      `${this.getUrlApiForADestination()}/imports/${import_id}/import`,
+      {}
+    );
   }
 
   getErrorCSV(importId: number) {
@@ -241,7 +271,9 @@ export class ImportDataService {
   }
 
   getImportErrors(importId): Observable<Array<ImportError>> {
-    return this._http.get<Array<ImportError>>(`${this.getUrlApiForADestination()}/imports/${importId}/errors`);
+    return this._http.get<Array<ImportError>>(
+      `${this.getUrlApiForADestination()}/imports/${importId}/errors`
+    );
   }
 
   getTaxaRepartition(sourceId: number, taxa_rank: string) {