feat: edit site (init value btn-select)

- Change button select to accept incoming intial values
- Change visit component to add btn-select and form-g inside html

- WIP: update form component when initial values is up to date

Reviewed-by: andriac
[Refs_ticket] :  #5 , #6

backend/gn_module_monitoring/monitoring/schemas.py

@@ -45,6 +45,19 @@ def serialize_geojson(self, obj):
             return json.loads(obj.geom_geojson)
 
 
+class BibTypeSiteSchema(MA.SQLAlchemyAutoSchema):
+    label = fields.Method("get_label_from_type_site")
+    # See if useful in the future:
+    # type_site = fields.Nested(NomenclatureSchema(only=("label_fr",)), dump_only=True)
+
+    def get_label_from_type_site(self, obj):
+        return obj.nomenclature.label_fr
+
+    class Meta:
+        model = BibTypeSite
+        include_fk = True
+        load_instance = True
+
 
 class MonitoringSitesSchema(MA.SQLAlchemyAutoSchema):
     class Meta:
@@ -53,6 +66,7 @@ class Meta:
 
     geometry = fields.Method("serialize_geojson", dump_only=True)
     pk = fields.Method("set_pk",dump_only=True)
+    types_site = MA.Nested(BibTypeSiteSchema, many=True)
 
     def serialize_geojson(self, obj):
         if obj.geom is not None:
@@ -61,19 +75,6 @@ def serialize_geojson(self, obj):
     def set_pk(self,obj):
         return self.Meta.model.get_id()
 
-class BibTypeSiteSchema(MA.SQLAlchemyAutoSchema):
-    label = fields.Method("get_label_from_type_site")
-    # See if useful in the future:
-    # type_site = fields.Nested(NomenclatureSchema(only=("label_fr",)), dump_only=True)
-
-    def get_label_from_type_site(self, obj):
-        return obj.nomenclature.label_fr
-
-    class Meta:
-        model = BibTypeSite
-        include_fk = True
-        load_instance = True
-
 class MonitoringVisitsSchema(MA.SQLAlchemyAutoSchema):
     class Meta:
         model = TMonitoringVisits

frontend/app/components/btn-select/btn-select.component.ts

@@ -27,6 +27,7 @@ export interface EmptyObject {
 export class BtnSelectComponent implements OnInit {
   selectable = true;
   removable = true;
+  isInit = false;
   separatorKeysCodes: number[] = [ENTER, COMMA];
   myControl = new FormControl();
   @Input() placeholderText: string = 'Selectionnez vos options dans la liste';
@@ -36,20 +37,29 @@ export class BtnSelectComponent implements OnInit {
   listOptionChosen: string[] = [];
   configObjAdded: JsonData = {};
   genericResponse: JsonData = {};
+  objToEdit: JsonData;
 
+  @Input() bEdit: boolean;
+  @Input() isInitialValues:boolean;
   @Input() paramToFilt: string;
   @Input() callBackFunction: (
     pageNumber: number,
     limit: number,
     valueToFilter: string
   ) => Observable<any>;
+  @Input() initValueFunction : ()=> JsonData;
   @ViewChild('optionInput') optionInput: ElementRef<HTMLInputElement>;
 
   @Output() public sendobject = new EventEmitter<JsonData>();
 
   constructor() {}
 
   ngOnInit() {
+    if(this.isInitialValues && !this.isInit){
+      this.initFromExistingObj(this.paramToFilt)
+      this.objToEdit.map(val => this.addObject(val))
+      this.isInit = true
+    }
     this.filteredOptions = this.myControl.valueChanges.pipe(
       startWith(''),
       debounceTime(400),
@@ -120,4 +130,16 @@ export class BtnSelectComponent implements OnInit {
     this.configObjAdded[name] = configAndId;
     this.sendobject.emit(this.configObjAdded);
   }
+
+  initFromExistingObj(keyToFilt: string){
+  const objInput = this.initValueFunction()
+  this.objToEdit = objInput .filter((obj) => {
+    Object.assign(obj, { name: obj[keyToFilt] })[keyToFilt];
+    delete obj[keyToFilt];
+    return obj;
+  })
+  this.objToEdit.map(obj => this.listOptionChosen.push(obj.name))
+
+  }
+
 }

frontend/app/components/monitoring-visits/monitoring-visits.component.html

@@ -1,10 +1,42 @@
 <!-- IF prefered observable compare to ngOnChanges we can remove rows and colsname-->
-<div>
+<!-- 
   <pnx-monitoring-properties-g [newParentType]="objParent" [objectType]="objectType" *ngIf="!bEdit" [(bEdit)]="bEdit" [selectedObj]="site">
-  </pnx-monitoring-properties-g>
-  <pnx-monitoring-datatable-g [rows]="visits" [colsname]="colsname" (onSort)="setSort($event)" [page]="page"
-    (onFilter)="setFilter($event)" (onSetPage)="setPage($event)" [obj]="visits" (onDetailsRow)="seeDetails($event)">
-    <option-list-btn add-button placeholder="Sélectionner le protocole" label="Ajouter une visite" [optionList]="modules"
-      (onDeployed)="getModules()" (onSaved)="addNewVisit($event)"></option-list-btn>
-  </pnx-monitoring-datatable-g>
-</div>
+  </pnx-monitoring-properties-g> -->
+
+<btn-select
+  *ngIf="bEdit"
+  (sendobject)="onSendConfig($event)"
+  [titleBtn]="titleBtn"
+  [placeholderText]="placeholderText"
+  [callBackFunction]="funcToFilt"
+  [initValueFunction]="funcInitValues"
+  [paramToFilt]="paramToFilt"
+  [isInitialValues]="isInitialValues"
+></btn-select>
+<pnx-monitoring-form-g
+  [objForm]="form"
+  #subscritionObjConfig
+  [obj]="site"
+  (objChanged)="onObjChanged($event)"
+  *ngIf="bEdit"
+  [(bEdit)]="bEdit"
+></pnx-monitoring-form-g>
+<pnx-monitoring-properties-g
+  *ngIf="!bEdit"
+  [(bEdit)]="bEdit"
+  [newParentType]="objParent"
+  [objectType]="objectType"
+  [(bEdit)]="bEdit"
+  [selectedObj]="site"
+></pnx-monitoring-properties-g>
+<pnx-monitoring-datatable-g
+  *ngIf="!bEdit"
+  [rows]="visits"
+  [colsname]="colsname"
+  (onSort)="setSort($event)"
+  [page]="page"
+  (onFilter)="setFilter($event)"
+  (onSetPage)="setPage($event)"
+  [obj]="visits"
+  (onDetailsRow)="seeDetails($event)"
+></pnx-monitoring-datatable-g>

frontend/app/components/monitoring-visits/monitoring-visits.component.ts

@@ -1,11 +1,11 @@
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, Input, OnInit, ViewChild } from '@angular/core';
 import { FormBuilder, FormGroup } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
-import { forkJoin } from 'rxjs';
+import { Observable, forkJoin } from 'rxjs';
 import { map, mergeMap } from 'rxjs/operators';
 
 import { MonitoringGeomComponent } from '../../class/monitoring-geom-component';
-import { ISite } from '../../interfaces/geom';
+import { ISite, ISiteType } from '../../interfaces/geom';
 import { IPage, IPaginated } from '../../interfaces/page';
 import { IVisit } from '../../interfaces/visit';
 import { SitesService, VisitsService } from '../../services/api-geom.service';
@@ -15,24 +15,37 @@ import { JsonData } from '../../types/jsondata';
 import { SelectObject } from '../../interfaces/object';
 import { Module } from '../../interfaces/module';
 import { ConfigService } from '../../services/config.service';
+import { MonitoringFormComponentG } from '../monitoring-form-g/monitoring-form.component-g';
 
 @Component({
   selector: 'monitoring-visits',
   templateUrl: './monitoring-visits.component.html',
   styleUrls: ['./monitoring-visits.component.css'],
 })
 export class MonitoringVisitsComponent extends MonitoringGeomComponent implements OnInit {
+  @ViewChild('subscritionObjConfig')
+  monitoringFormComponentG: MonitoringFormComponentG;
   site: ISite;
   @Input() visits: IVisit[];
   @Input() page: IPage;
   // colsname: typeof columnNameVisit = columnNameVisit;
   objectType: string;
-  bEdit: boolean;
-  objForm: FormGroup;
-  @Input() colsname;
+  @Input() bEdit: boolean;
+  form: FormGroup;
+  colsname: {};
   objParent: any;
   modules: SelectObject[];
 
+  isInitialValues:boolean;
+  paramToFilt: string = 'label';
+  funcToFilt: Function;
+  funcInitValues: Function;
+  titleBtn: string = 'Choix des types de sites';
+  placeholderText: string = 'Sélectionnez les types de site';
+  id_sites_group: number;
+  types_site: string[];
+
+
   constructor(
     private _sites_service: SitesService,
     private _visits_service: VisitsService,
@@ -41,15 +54,18 @@ export class MonitoringVisitsComponent extends MonitoringGeomComponent implement
     private router: Router,
     private _Activatedroute: ActivatedRoute,
     private _formBuilder: FormBuilder,
-    private _configService: ConfigService
+    private _configService: ConfigService,
+    private siteService: SitesService,
   ) {
     super();
     this.getAllItemsCallback = this.getVisits;
     this.objectType = 'sites';
   }
 
   ngOnInit() {
-    this.objForm = this._formBuilder.group({});
+    this.funcInitValues = this.initValueToSend.bind(this)
+    this.funcToFilt = this.partialfuncToFilt.bind(this);
+    this.form = this._formBuilder.group({});
     this._objService.changeObjectTypeParent(this._sites_service.objectObs, true);
     this._objService.currentObjectTypeParent.subscribe((objParent) => (this.objParent = objParent));
 
@@ -71,6 +87,7 @@ export class MonitoringVisitsComponent extends MonitoringGeomComponent implement
         this.setVisits(data.visits);
         this.baseFilters = { id_base_site: this.site.id_base_site };
       });
+      this.isInitialValues = true;
   }
 
   getVisits(page: number, filters: JsonData) {
@@ -114,4 +131,35 @@ export class MonitoringVisitsComponent extends MonitoringGeomComponent implement
       ]);
     });
   }
+  partialfuncToFilt(
+    pageNumber: number,
+    limit: number,
+    valueToFilter: string
+  ): Observable<IPaginated<ISiteType>> {
+    return this.siteService.getTypeSites(pageNumber, limit, {
+      label_fr: valueToFilter,
+      sort_dir: 'desc',
+    });
+  }
+
+  onSendConfig(config: JsonData): void {
+    config = this.addTypeSiteListIds(config);
+    this.monitoringFormComponentG.getConfigFromBtnSelect(config);
+  }
+
+  addTypeSiteListIds(config: JsonData): JsonData {
+    if (config && config.length != 0) {
+      config.types_site = [];
+      for (const key in config) {
+        if ('id_nomenclature_type_site' in config[key]) {
+          config.types_site.push(config[key]['id_nomenclature_type_site']);
+        }
+      }
+    }
+    return config;
+  }
+
+  initValueToSend(){
+    return this.site['types_site']
+  }
 }