fixup! feat(metadata): add possibility to fill af form from query params

Author: VincentCauchois

frontend/src/app/metadataModule/actors/actors.component.ts

@@ -1,6 +1,7 @@
 import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
 import { UntypedFormArray, UntypedFormGroup, Validators } from '@angular/forms';
-import { BehaviorSubject } from 'rxjs';
+import { BehaviorSubject, combineLatest, Subject } from 'rxjs';
+import { startWith } from 'rxjs/operators';
 import { MatDialog } from '@angular/material/dialog';
 
 import { ConfirmationDialog } from '@geonature_common/others/modal-confirmation/confirmation.dialog';
@@ -102,6 +103,14 @@ export class ActorComponent implements OnInit {
     }
 
     this.setToggleButtonValue();
+
+    combineLatest([
+      this.actorForm.get('id_organism').valueChanges.pipe(startWith(null)),
+      this.actorForm.get('id_role').valueChanges.pipe(startWith(null)),
+    ]).subscribe((_) => {
+      const btn = this.computeButtonValue();
+      this._toggleButtonValue.next(btn);
+    });
   }
 
   toggleActorOrganismChoiceChange(event) {
@@ -132,14 +141,20 @@ export class ActorComponent implements OnInit {
     }
   }
 
-  setToggleButtonValue() {
+  computeButtonValue() {
     var btn =
       this.actorForm.get('id_organism').value && this.actorForm.get('id_role').value
         ? 'all'
         : this.actorForm.get('id_role').value
           ? 'person'
           : 'organism';
 
+    return btn;
+  }
+
+  setToggleButtonValue() {
+    var btn = this.computeButtonValue();
+
     this.toggleActorOrganismChoiceChange({ value: btn });
   }
 

frontend/src/app/metadataModule/af/af-form.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { AfterViewInit, Component, OnInit } from '@angular/core';
 import { UntypedFormArray, UntypedFormGroup, Validators } from '@angular/forms';
 import { Router, ActivatedRoute } from '@angular/router';
 import { NgbDateParserFormatter } from '@ng-bootstrap/ng-bootstrap';
@@ -20,7 +20,7 @@ import { TranslateService } from '@librairies/@ngx-translate/core';
   styleUrls: ['../form.component.scss'],
   providers: [AcquisitionFrameworkFormService],
 })
-export class AfFormComponent implements OnInit {
+export class AfFormComponent implements OnInit, AfterViewInit {
   public form: UntypedFormGroup;
   //observable pour la liste déroulantes HTML des AF parents
   public acquisitionFrameworkParents: Observable<any>;

frontend/src/app/metadataModule/services/af-form.service.ts

@@ -1,28 +1,30 @@
 import { Injectable } from '@angular/core';
 import { UntypedFormGroup, UntypedFormArray, UntypedFormBuilder, Validators } from '@angular/forms';
-import { BehaviorSubject, forkJoin, Observable, of } from 'rxjs';
+import { BehaviorSubject, combineLatest, forkJoin, Observable, of } from 'rxjs';
 import { tap, filter, switchMap, map } from 'rxjs/operators';
 
 import { ActorFormService } from './actor-form.service';
 import { FormService } from '@geonature_common/form/form.service';
 import { DataFormService } from '@geonature_common/form/data-form.service';
 import { ModuleService } from '@geonature/services/module.service';
 
+import { NgbDateParserFormatter } from '@ng-bootstrap/ng-bootstrap';
+
 @Injectable()
 export class AcquisitionFrameworkFormService {
   public form: UntypedFormGroup;
   public acquisition_framework: BehaviorSubject<any> = new BehaviorSubject(null);
   // Custom additional fields
   public additionalFieldsForm: Array<any> = [];
   public queryParamsSource: BehaviorSubject<Object> = new BehaviorSubject({});
-  private queryParams$: Observable<Object> = this.queryParamsSource.asObservable();
 
   constructor(
     private fb: UntypedFormBuilder,
     private actorFormS: ActorFormService,
     private formS: FormService,
     private dataFormService: DataFormService,
-    private _moduleService: ModuleService
+    private _moduleService: ModuleService,
+    private dateParser: NgbDateParserFormatter
   ) {
     this.initForm();
     this.setObservables();
@@ -106,9 +108,8 @@ export class AcquisitionFrameworkFormService {
    **/
   private setObservables() {
     //Observable de this.dataset pour adapter le formulaire selon la donnée
-    this.acquisition_framework
-      .asObservable()
-      .pipe(
+    combineLatest([
+      this.acquisition_framework.asObservable().pipe(
         tap(() => this.reset()),
         tap(() => {
           this.additionalFieldsForm = [];
@@ -156,8 +157,12 @@ export class AcquisitionFrameworkFormService {
         }),
         // Map to return acquisition framework data only
         map(([acquisition_framework, additional_data]) => acquisition_framework)
-      )
-      .subscribe((value: any) => this.form.patchValue(value));
+      ),
+      this.queryParamsSource,
+    ]).subscribe(([value, params]) => {
+      setTimeout(() => this.form.patchValue(value), 0);
+      this.setFromParams(params);
+    });
 
     //gère lactivation/désactivation de la zone de saisie du framework Parent
     this.form.get('is_parent').valueChanges.subscribe((value: boolean) => {
@@ -167,61 +172,39 @@ export class AcquisitionFrameworkFormService {
         this.form.get('acquisition_framework_parent_id').enable();
       }
     });
-
-    // Update form from query params on every update of the latter
-    this.queryParams$.subscribe((params) => {
-      this.setFromParams(params);
-    });
   }
 
   setFromParams(params: any) {
     // Supported query params
-    //  with query param name as key
     const supportedQueryParams = {
       basicFields: [
-        {
-          paramName: 'name',
-          fieldName: 'acquisition_framework_name',
-        },
-        {
-          paramName: 'description',
-          fieldName: 'acquisition_framework_desc',
-        },
-        {
-          paramName: 'end_date',
-          fieldName: 'acquisition_framework_end_date',
-        },
-      ],
-      additionalFields: [
-        {
-          paramName: 'dossier',
-          fieldName: 'identifiant_dossier',
-        },
+        'acquisition_framework_name',
+        'acquisition_framework_description',
+        'acquisition_framework_end_date',
       ],
+      actorFields: ['id_role', 'id_organism'],
     };
 
     Object.keys(params).forEach((key) => {
-      const keyAsBasicField = supportedQueryParams.basicFields.find(
-        (field) => field.paramName == key
-      );
+      // Basic fields
+      const keyAsBasicField = supportedQueryParams.basicFields.find((field) => field == key);
       if (keyAsBasicField) {
-        this.form.get(keyAsBasicField.fieldName).setValue(params[key]);
-      }
-      const keyAsAdditionalField = supportedQueryParams.additionalFields.find(
-        (field) => field.paramName == key
-      );
-      if (keyAsAdditionalField) {
-        this.form.get('additional_data').get(keyAsAdditionalField.fieldName).setValue(params[key]);
-      }
-      if (key == 'id_role') {
-        this.form.get('cor_af_actor').patchValue([{ id_role: params[key] }]);
+        let value = params[key];
+        if (keyAsBasicField == 'acquisition_framework_end_date') {
+          value = this.dateParser.parse(value);
+        }
+        this.form.get(keyAsBasicField).setValue(value);
       }
-      if (key == 'id_organism') {
-        this.form.get('cor_af_actor').patchValue([{ id_organism: params[key] }]);
+      // Contact principal
+      const keyAsActorField = supportedQueryParams.actorFields.find((field) => field == key);
+      if (keyAsActorField) {
+        this.form.get('cor_af_actor').patchValue([{ [keyAsActorField]: +params[key] }]);
       }
+      // Additional fields
+      setTimeout(() => {
+        this.form.get('additional_data').patchValue({ [key]: params[key] });
+      }, 0);
     });
-    
-    console.log(this.form.value);
   }
 
   get actors(): UntypedFormArray {