Feat(mapping) adding mapping-themes

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

@@ -1 +1,72 @@
-<p>mapping-theme works!</p>
+<div class="entities-tab__content" [formGroup]="mappingFormControl">
+  <fieldset>
+    <legend class="px-1">
+      {{ themeLabel }}
+    </legend>
+    <div class="row m-0">
+      <ng-container *ngFor="let field of fieldsData">
+        <!-- *ngIf="!getValue(field) || displayAllValues" -->
+        <div class="col-6">
+          <div *ngIf="!field.autogenerated" class="form-group">
+            <small
+              >{{ field.fr_label }} :
+              <i
+                *ngIf="field.comment"
+                matTooltip="{{ field.comment }}"
+                matTooltipClass="custom-tooltip"
+                class="fa fa-info-circle"
+                aria-hidden="true"
+              ></i>
+            </small>
+            <ng-select
+              id="{{ field.name_field }}"
+              [items]="sourceFields"
+              [multiple]="field.multi"
+              [clearable]="true"
+              [virtualScroll]="true"
+              formControlName="{{ field.name_field }}"
+            >
+              <ng-template ng-option-tmp let-item="item" let-index="index" let-search="searchTerm">
+                <div>
+                  <span [ngClass]="{ in_use: mappedSourceFields.has(item) }" class="pre-wrap">
+                    {{ item }}
+                  </span>
+                </div>
+              </ng-template>
+            </ng-select>
+            <div
+              *ngIf="mappingFormControl.controls[field.name_field].hasError('required')"
+              class="invalid-feedback d-block"
+            >
+              Sélectionnez {{ field.name_field }}
+            </div>
+            <div *ngIf="field.name_field == 'WKT'">
+              <small>*si pas de WKT, indiquez longitude et latitude.</small>
+            </div>
+
+            <div
+              *ngIf="mappingFormControl.controls[field.name_field].hasError('conflict')"
+              class="invalid-feedback d-block"
+            >
+              {{ mappingFormControl.controls[field.name_field].getError('conflict') }}
+            </div>
+          </div>
+          <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>
+            <label for="{{ field.name_field }}">
+              <small>{{ field.fr_label }} :</small>
+            </label>
+            <input
+              class="ml-1"
+              type="checkbox"
+              id="{{ field.name_field }}"
+              formControlName="{{ field.name_field }}"
+            />
+          </div>
+        </div>
+      </ng-container>
+    </div>
+  </fieldset>
+</div>

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

@@ -1,10 +1,20 @@
-import { Component } from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
+import { FormControl, FormGroup } from '@angular/forms';
+import { Field } from '@geonature/modules/imports/models/mapping.model';
 
 @Component({
   selector: 'pnx-mapping-theme',
   templateUrl: './mapping-theme.component.html',
-  styleUrls: ['./mapping-theme.component.scss']
+  styleUrls: ['./mapping-theme.component.scss'],
 })
-export class MappingThemeComponent {
+export class MappingThemeComponent implements OnInit {
+  @Input() fieldsData: Field[];
+  @Input() themeLabel: string;
+  @Input() sourceFields: any;
+  @Input() mappingFormControl: FormGroup;
 
+  ngOnInit() {
+    console.log(this.sourceFields);
+    console.log('HAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA');
+  }
 }

frontend/src/app/modules/imports/models/mapping.model.ts

@@ -10,6 +10,19 @@ interface Mapping {
   cruved: Cruved;
 }
 
+export interface Field {
+  id_field: number;
+  autogenerated: boolean;
+  eng_label: string;
+  fr_label: string;
+  comment: string;
+  desc_field: string;
+  mandatory: boolean;
+  multi: boolean;
+  name_field: string;
+  mapping_condition: string;
+}
+
 export interface FieldMappingValues {
   [propName: string]: string | string[];
 }