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>;
@@ -63,6 +63,18 @@ export class AfFormComponent implements OnInit {
     this.entityLabel = this.translation_service.instant('AcquisitionFramework');
   }
 
+  ngAfterViewInit() {
+    this.setFromQueryParams();
+  }
+
+  setFromQueryParams() {
+    this._route.queryParams.subscribe((params) => {
+      this.afFormS.queryParamsSource.next(params);
+    });
+
+    // TODO?: Clean route from unsupported query params ?
+  }
+
   handleDates(af, isParseElseFormat = false) {
     const handlingFunction = isParseElseFormat ? this.dateParser.parse : this.dateParser.format;
 

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

@@ -1,26 +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({});
 
   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();
@@ -104,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 = [];
@@ -154,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,6 +174,40 @@ export class AcquisitionFrameworkFormService {
     });
   }
 
+  setFromParams(params: any) {
+    // Supported query params
+    const supportedQueryParams = {
+      basicFields: [
+        'acquisition_framework_name',
+        'acquisition_framework_description',
+        'acquisition_framework_end_date',
+      ],
+      actorFields: ['id_role', 'id_organism'],
+    };
+
+    Object.keys(params).forEach((key) => {
+      // Basic fields
+      const keyAsBasicField = supportedQueryParams.basicFields.find((field) => field == key);
+      if (keyAsBasicField) {
+        let value = params[key];
+        if (keyAsBasicField == 'acquisition_framework_end_date') {
+          value = this.dateParser.parse(value);
+        }
+        this.form.get(keyAsBasicField).setValue(value);
+      }
+      // Contact principal
+      const keyAsActorField = supportedQueryParams.actorFields.find((field) => field == key);
+      if (keyAsActorField) {
+        this.form.get('cor_af_actor').patchValue([{ [keyAsActorField]: +params[key] }]);
+      }
+      // Additional fields
+      //  /!\ Tested only for Number field type
+      setTimeout(() => {
+        this.form.get('additional_data').patchValue({ [key]: params[key] });
+      }, 0);
+    });
+  }
+
   get actors(): UntypedFormArray {
     return this.form.get('cor_af_actor') as UntypedFormArray;
   }