working in progress

frontend/src/app/modules/imports/components/import_process/fields-mapping-step/field-mapping-test/field-mapping-test.component.html

@@ -0,0 +1,29 @@
+<div>
+    <pnx-mapping-selection></pnx-mapping-selection>
+    pouet
+    <ng-container *ngIf="isReady">
+        <mat-tab-group [(selectedIndex)]="selectedIndex" animationDuration="0ms" class="entities-tab">
+        <mat-tab *ngFor="let entitythemes of targetFields">
+            test
+            {{entitythemes|json}}
+            <ng-template mat-tab-label>
+              <span
+                [matBadge]="this.invalidEntityControls(entitythemes.entity.label)"
+                matBadgeColor="warn"
+                matBadgeSize="small"
+                [matBadgeHidden]="this.invalidEntityControls(entitythemes.entity.label)<1"
+                class="entity-tab-label"
+              >
+                {{ entitythemes.entity.label }}
+              </span>
+            </ng-template>
+            <div *ngFor="let themefields of entitythemes.themes" class="entities-tab__content">
+              <pnx-mapping-theme
+                [themeData]="themefields"
+              ></pnx-mapping-theme>
+            </div>
+          </mat-tab>
+        </mat-tab-group>
+    </ng-container>
+
+</div>

frontend/src/app/modules/imports/components/import_process/fields-mapping-step/field-mapping-test/field-mapping-test.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FieldMappingTestComponent } from './field-mapping-test.component';
+
+describe('FieldMappingTestComponent', () => {
+  let component: FieldMappingTestComponent;
+  let fixture: ComponentFixture<FieldMappingTestComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ FieldMappingTestComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(FieldMappingTestComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

frontend/src/app/modules/imports/components/import_process/fields-mapping-step/field-mapping-test/field-mapping-test.component.ts

@@ -0,0 +1,26 @@
+import { Component, OnInit } from '@angular/core';
+import { ImportDataService } from '../../../../services/data.service';
+import { FieldMappingService } from '@geonature/modules/imports/services/mappings/field-mapping.service';
+
+@Component({
+  selector: 'pnx-field-mapping-test',
+  templateUrl: './field-mapping-test.component.html',
+  styleUrls: ['./field-mapping-test.component.scss']
+})
+export class FieldMappingTestComponent implements OnInit {
+  public targetFields;
+  public isReady:boolean=false;
+  constructor(public _fm: FieldMappingService) {}
+
+  ngOnInit() {
+    // subscribe(({ fieldMappings, targetFields, sourceFields }) => {
+
+    this._fm.retrieveData().subscribe(({ fieldMappings, targetFields, sourceFields })=>{
+      this._fm.parseData({ fieldMappings, targetFields, sourceFields });
+      this.targetFields = this._fm.getTargetFieldsData();
+      this._fm.initForm();
+      this._fm.populateMappingForm();
+      this.isReady = true;
+    });
+  }
+}

frontend/src/app/modules/imports/components/import_process/fields-mapping-step/fields-mapping-step.component.ts

@@ -38,7 +38,7 @@ export class FieldsMappingStepComponent implements OnInit {
   public mappedTargetFields: Set<string>;
   public unmappedTargetFields: Set<string>;
 
-  public sourceFields: Array<string>; // list of all source fields of the import
+  public sourceFields: Array<string>; // list of all source fields of the importY'en 
   public autogeneratedFields: Array<string> = [];
   public mappedSourceFields: Set<string>;
   public unmappedSourceFields: Set<string>;

frontend/src/app/modules/imports/components/import_process/fields-mapping-step/mapping-theme/mapping-theme.component.html

@@ -1,10 +1,13 @@
-<div class="entities-tab__content" [formGroup]="mappingFormControl">
+<div class="entities-tab__content" [formGroup]="_fm.mappingFormGroup">
   <fieldset>
     <legend class="px-1">
-      {{ themeLabel }}
+      {{ themeData.theme.label }}
     </legend>
     <div class="row m-0">
-      <ng-container *ngFor="let field of fieldsData">
+      tes2
+      <ng-container *ngFor="let field of themeData.fields">
+        {{field}}
+        test3
         <!-- *ngIf="!getValue(field) || displayAllValues" -->
         <div class="col-6">
           <div *ngIf="!field.autogenerated" class="form-group">
@@ -34,8 +37,8 @@
                 </div>
               </ng-template>
             </ng-select>
-            <div
-              *ngIf="mappingFormControl.controls[field.name_field].hasError('required')"
+            <!-- <div
+              *ngIf="_fm.mappingFormGroup[field.name_field].hasError('required')"
               class="invalid-feedback d-block"
             >
               Sélectionnez {{ field.name_field }}
@@ -45,13 +48,13 @@
             </div>
 
             <div
-              *ngIf="mappingFormControl.controls[field.name_field].hasError('conflict')"
+              *ngIf="_fm.mappingFormGroup.controls[field.name_field].hasError('conflict')"
               class="invalid-feedback d-block"
             >
-              {{ mappingFormControl.controls[field.name_field].getError('conflict') }}
-            </div>
+              {{ _fm.mappingFormGroup.controls[field.name_field].getError('conflict') }}
+            </div> -->
           </div>
-          <div *ngIf="field.autogenerated" class="form-group">
+          <!-- <div *ngIf="field.autogenerated" class="form-group">
             <p *ngIf="displayAlert(field)" class="text-warning text-sm">
               Attention les identifiants SINP ne seront pas générés
             </p>
@@ -64,7 +67,7 @@
               id="{{ field.name_field }}"
               formControlName="{{ field.name_field }}"
             />
-          </div>
+          </div> -->
         </div>
       </ng-container>
     </div>

frontend/src/app/modules/imports/components/import_process/fields-mapping-step/mapping-theme/mapping-theme.component.ts

@@ -1,21 +1,19 @@
 import { Component, Input, OnInit } from '@angular/core';
 import { FormControl, FormGroup } from '@angular/forms';
 import { Field } from '@geonature/modules/imports/models/mapping.model';
-import { FieldMappingService } from 'external_modules/WA/app/services/mappings/field-mapping.service';
+import { FieldMappingService } from '@geonature/modules/imports/services/mappings/field-mapping.service';
+
 
 @Component({
   selector: 'pnx-mapping-theme',
   templateUrl: './mapping-theme.component.html',
   styleUrls: ['./mapping-theme.component.scss'],
 })
 export class MappingThemeComponent implements OnInit {
-  @Input() fieldsData: Field[];
-  @Input() themeLabel: string;
-  @Input() sourceFields: any;
-  @Input() mappingFormControl: FormGroup;
-  @Input() mappedSourceFields: any;
+  @Input() themeData;
 
   constructor(public _fm: FieldMappingService) {}
 
   ngOnInit() {}
 }
+FieldMappingService

frontend/src/app/modules/imports/imports.module.ts

@@ -33,6 +33,7 @@ import { FooterStepperComponent } from './components/import_process/footer-stepp
 import { Step } from './models/enums.model';
 import { ImportReportComponent } from './components/import_report/import_report.component';
 import { DestinationsComponent } from './components/destinations/destinations.component';
+import { FieldMappingTestComponent } from './components/import_process/fields-mapping-step/field-mapping-test/field-mapping-test.component';
 
 const routes: Routes = [
   { path: '', component: ImportListComponent },
@@ -70,7 +71,7 @@ const routes: Routes = [
       },
       {
         path: ':id_import/fieldmapping',
-        component: FieldsMappingStepComponent,
+        component: FieldMappingTestComponent,
         data: { step: Step.FieldMapping },
         resolve: { importData: ImportProcessResolver },
       },
@@ -110,6 +111,7 @@ const routes: Routes = [
     ImportProcessComponent,
     ImportReportComponent,
     DestinationsComponent,
+    FieldMappingTestComponent,
   ],
   imports: [
     NgChartsModule,

frontend/src/app/modules/imports/services/mappings/field-mapping.service.ts

@@ -6,15 +6,75 @@ import {
   AbstractControl,
   ValidationErrors,
   FormBuilder,
+  ValidatorFn,
 } from '@angular/forms';
 import { ImportDataService } from '../data.service';
-import { CommonService } from '@geonature_common/service/common.service';
+import { FieldMapping, FieldMappingValues } from '../../models/mapping.model';
+import { forkJoin } from 'rxjs';
+import { ImportProcessService } from '../../components/import_process/import-process.service';
+import { ConfigService } from '@geonature/services/config.service';
+import { TaxonTreeComponent } from '@geonature_common/form/taxon-tree/taxon-tree.component';
+
+interface FieldsMappingStatus {
+  mapped: Set<String>;
+  unmapped: Set<String>;
+  autogenerated: Set<String>;
+}
 
 @Injectable()
 export class FieldMappingService {
   public mappingFormGroup: FormGroup;
+  private mappingData: Array<FieldMapping>; // Contains all field mappings
+  private targetFieldsData: any;
+  private sourceFields: Array<string>;
+  private fieldMappingStatus: FieldsMappingStatus = {
+    mapped: new Set<String>(),
+    unmapped: new Set<String>(),
+    autogenerated: new Set<String>(),
+  };
+  public isReady: boolean = false;
+
+  constructor(
+    private _fb: FormBuilder,
+    private _importDataService: ImportDataService,
+    private _importProcessService: ImportProcessService,
+    private _configService: ConfigService
+  ) {
+  }
 
-  constructor(private _fb: FormBuilder) {}
+  parseData({ fieldMappings, targetFields, sourceFields }) {
+    this.targetFieldsData = targetFields;
+    this.mappingData = fieldMappings;
+    this.sourceFields = sourceFields;
+
+    this.fieldMappingStatus.unmapped = new Set(this.sourceFields);
+    this.targetFieldsData.forEach(({ autogenerated, name_field }) => {
+      if (autogenerated) {
+        this.fieldMappingStatus.autogenerated.add(name_field);
+      } else {
+        this.fieldMappingStatus.unmapped.add(name_field);
+      }
+    });
+  }
+
+  retrieveData() {
+    return forkJoin({
+      fieldMappings: this._importDataService.getFieldMappings(),
+      targetFields: this._importDataService.getBibFields(),
+      sourceFields: this._importDataService.getColumnsImport(
+        this._importProcessService.getImportData().id_import
+      ),
+    })
+  }
+  getTargetFieldsData() {
+    return this.targetFieldsData;
+  }
+  getSourceFieldsData() {
+    return this.sourceFields;
+  }
+  getMappings() {
+    return this.mappingData;
+  }
 
   initForm() {
     this.mappingFormGroup = this._fb.group({});
@@ -25,6 +85,113 @@ export class FieldMappingService {
   createMappingFormValidators(): ValidationErrors | null {
     return null;
   }
+  /**
+   * Flattens the field mapping data from the given target fields array.
+   *
+   * @param {any[]} targetFields - The array of target fields containing themes and fields.
+   * @return {any[]} The flattened array of field mapping data.
+   */
+  flattenTargetFieldData(targetFields: any) {
+    let flattened = [];
+    targetFields.forEach((entity) => {
+      entity.themes.forEach(({ fields, theme }) => {
+        fields.forEach((field) => {
+          flattened.push({ ...field, ...{ entity: entity.label, theme: theme.fr_label_theme } });
+        });
+      });
+    });
+    return flattened;
+  }
+
+  populateMappingForm() {
+    this.flattenTargetFieldData(this.targetFieldsData).forEach(({ name_field, autogenerated, mandatory }) => {
+      let control: AbstractControl;
+      if (!(name_field in this.fieldMappingStatus.mapped)) {
+        // If a control with a given name doesn't exist, create a new one
+        const validator: ValidatorFn[] = mandatory ? [Validators.required] : [];
+        control = new FormControl(null, validator);
+        control.valueChanges.subscribe((value) => {
+          this.onFieldMappingChange(name_field, value);
+        });
+      } 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.
+        this.mappingFormGroup.controls[name_field].valueChanges.subscribe((value) => {
+          this.mappingFormGroup.controls[name_field].setValue(value, {
+            onlySelf: true,
+            emitEvent: false,
+            emitModelToViewChange: true,
+          });
+        });
+        control = this.mappingFormGroup.controls[name_field];
+      }
+      this.mappingFormGroup.addControl(name_field, control);
+    });
+  }
+
+  /**
+   * Fill the field form with the value define in the given mapping
+   * @param mapping : id of the mapping
+   */
+  fillFormWithMapping(mappingvalues: FieldMappingValues, fromMapping = false) {
+    // Retrieve fields for this mapping
+    this.mappingFormGroup.reset();
+    Object.entries(mappingvalues as FieldMappingValues).forEach(([target, source]) => {
+      let control = this.mappingFormGroup.get(target);
+      if (control) {
+        if (typeof source === 'object') {
+          let value = source;
+          let filtered = source.filter((x) => this.sourceFields.includes(x));
+          if (filtered.length > 0) {
+            value = filtered;
+          }
+          control.setValue(value);
+        } else {
+          if (source in this.sourceFields && target in this.fieldMappingStatus.autogenerated) {
+            control.setValue(source);
+          }
+        }
+
+        if (fromMapping) {
+          // this.autoMappedFields.push(target);
+        }
+      }
+    });
+  }
+
+  onFieldMappingChange(name_field, value) {
+    if (value) {
+      this.fieldMappingStatus.mapped.add(name_field);
+      this.fieldMappingStatus.unmapped.delete(name_field);
+    } else {
+      this.fieldMappingStatus.mapped.delete(name_field);
+      this.fieldMappingStatus.unmapped.add(name_field);
+    }
+  }
+
+  /**
+   * Callback when a new mapping is selected
+   *
+   * @param {FieldMapping} mapping - the selected mapping
+   */
+  onNewMappingSelected(mapping: FieldMapping = null): void {
+    if (mapping === null) {
+      this.mappingFormGroup.reset();
+      this.fieldMappingStatus.autogenerated.forEach;
+    //   for (const field of this.fieldMappingStatus.autogenerated) {
+    //     const control = this.mappingFormGroup.get(field);
+    //     if (
+    //       field !== 'unique_id_sinp_generate' ||
+    //       this._configService.IMPORT.DEFAULT_GENERATE_MISSING_UUID
+    //     ) {
+    //       control.setValue(true);
+    //     }
+    //   }
+    // } else {
+    //   this.fillFormWithMapping(mapping.values, true);
+    //   this.mappingSelected = true;
+    }
+  }
 
   // add a form control for each target field in the mappingForm
   // mandatory target fields have a required validator