fix: specific form and properties types site (#90)

IMPORTANT : need dev from GeoNature (see demo test VM)

Fix problem loading specific config (types site) entrance through
protocol

Fix problem loading specific fields in creation form site

Reviewed-by: andriacap

backend/gn_module_monitoring/config/generic/site.json

@@ -96,6 +96,7 @@
         "api" : "__MONITORINGS_PATH/modules/__MODULE.MODULE_CODE/types_sites",
         "application": "GeoNature",
         "required": true,
+        "nullDefault":true,
         "definition": "Permet de n'avoir que les types de site lié au module"
       },
       "id_sites_group": {

frontend/app/class/monitoring-object-base.ts

@@ -33,6 +33,7 @@ export class MonitoringObjectBase {
   siteId;
 
   template = {};
+  template_specific = {};
 
   // configParams = ["geometry_type", "chained"];
   config = {};
@@ -171,6 +172,10 @@ export class MonitoringObjectBase {
   setResolvedProperties(): Observable<any> {
     const observables = {};
     const schema = this.schema();
+
+    if (Object.keys(this.template_specific).length > 0) {
+      Object.assign(schema, this.template_specific['schema']);
+    }
     for (const attribut_name of Object.keys(schema)) {
       observables[attribut_name] = this.resolveProperty(
         schema[attribut_name],

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

@@ -9,7 +9,15 @@ import { DynamicFormService } from '@geonature_common/form/dynamic-form-generato
 import { ActivatedRoute } from '@angular/router';
 import { JsonData } from '../../types/jsondata';
 import { SitesService } from '../../services/api-geom.service';
-import { distinctUntilChanged, mergeMap, switchMap, toArray } from 'rxjs/operators';
+import {
+  concatMap,
+  distinctUntilChanged,
+  exhaustMap,
+  mergeMap,
+  switchMap,
+  tap,
+  toArray,
+} from 'rxjs/operators';
 import { EMPTY, from, iif, of } from 'rxjs';
 import { FormService } from '../../services/form.service';
 import { Router } from '@angular/router';
@@ -138,9 +146,8 @@ export class MonitoringFormComponent implements OnInit {
         }
 
         // pour donner la valeur de idParent
-        this.initForm();
         this.obj.objectType == 'site' ? this.initObjFormDef() : null;
-        this.obj.objectType == 'site' ? this.initFormDynamic() : null;
+        this.obj.objectType == 'site' ? this.firstInitForm() : this.initForm();
       });
   }
 
@@ -179,6 +186,36 @@ export class MonitoringFormComponent implements OnInit {
     });
   }
 
+  firstInitForm() {
+    if (
+      !(this.objFormDynamic && this.obj.bIsInitialized) &&
+      !(this.objForm && this.obj.bIsInitialized)
+    ) {
+      return;
+    }
+
+    this.setQueryParams();
+    // pour donner la valeur de l'objet au formulaire
+    this.obj
+      .formValues()
+      .pipe(
+        exhaustMap((formValue) => {
+          this.objForm.patchValue(formValue);
+          this.setDefaultFormValue();
+          return of(true);
+        }),
+        concatMap(() => {
+          return this.obj.formValues(this.schemaUpdate);
+        })
+      )
+      .subscribe((formValue) => {
+        formValue.types_site = this.idsTypesSite;
+        this.objFormDynamic.disable();
+        this.objFormDynamic.patchValue(formValue, { onlySelf: true, emitEvent: false });
+        this.objFormDynamic.enable();
+      });
+  }
+
   initFormDynamic() {
     if (!(this.objFormDynamic && this.obj.bIsInitialized)) {
       return;
@@ -612,7 +649,6 @@ export class MonitoringFormComponent implements OnInit {
       .formDefinitionsdictToArray(this.schemaUpdate, this.meta)
       .filter((formDef) => formDef.type_widget)
       .sort((a, b) => {
-        // medias à la fin
         return a.attribut_name === 'types_site' ? -1 : b.attribut_name === 'types_site' ? +1 : 0;
       });
   }

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

@@ -26,6 +26,7 @@ import { MapService } from '@geonature_common/map/map.service';
 import { ObjectService } from '../../services/object.service';
 
 import { Utils } from '../../utils/utils';
+import { ConfigJsonService } from '../../services/config-json.service';
 @Component({
   selector: 'pnx-object',
   templateUrl: './monitoring-object.component.html',
@@ -261,6 +262,22 @@ export class MonitoringObjectComponent implements OnInit {
 
   initConfig(): Observable<any> {
     return this._configService.init(this.obj.moduleCode).pipe(
+      concatMap(() => {
+        if (this.obj.objectType == 'site' && this.obj.id != null) {
+          return this._objService
+            .configService()
+            .loadConfigSpecificConfig(this.obj)
+            .pipe(
+              tap((config) => {
+                this.obj.template_specific = this._objService
+                  .configService()
+                  .addSpecificConfig(config);
+              })
+            );
+        } else {
+          return of(null);
+        }
+      }),
       mergeMap(() => {
         this.frontendModuleMonitoringUrl = this._configService.frontendModuleMonitoringUrl();
         this.backendUrl = this._configService.backendUrl();

frontend/app/components/monitoring-properties-g/monitoring-properties-g.component.html

@@ -23,9 +23,9 @@
       <mat-tab *ngIf="selectedObj.data != null" label="Propriétés spécifiques">
         <div class="mt-2">
           <table class="table table-striped table-sm">
-            <tr *ngFor="let fieldName of specificFields | keyvalue; let i = index">
+            <tr *ngFor="let fieldName of specificFieldsNames | keyvalue; let i = index">
               <td style="width: 50%" class="key text-muted">
-                {{ fieldName.value }}
+                {{ specificFields[fieldName.value] }}
                 <i
                   *ngIf="specificFieldDefinitions[fieldName]"
                   class="material-icons small-icon"
@@ -36,7 +36,7 @@
                   >help</i
                 >
               </td>
-              <td class="td-value">{{ selectedObj.data[fieldName.key] }}</td>
+              <td class="td-value">{{ selectedObj.data[fieldName.value] }}</td>
             </tr>
           </table>
         </div>

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

@@ -23,6 +23,31 @@
         </table>
       </div>
     </mat-tab>
+    <mat-tab *ngIf="(obj.template_specific | json) != ({} | json)" label="Propriétés Spécifiques">
+      <div class="mt-2">
+        <table class="table table-striped table-sm">
+          <tr
+            *ngFor="let fieldName of obj.template_specific['fieldLabels'] | keyvalue; let i = index"
+          >
+            <td style="width: 50%" class="key text-muted">
+              {{ fieldName.value }}
+              <i
+                *ngIf="obj.template_specific['fieldDefinitions'][fieldName]"
+                class="material-icons small-icon"
+                [matTooltip]="
+                  obj.template_specific['fieldLabels'][fieldName.key] +
+                  ' : ' +
+                  obj.template_specific['fieldDefinitions'][fieldName.key]
+                "
+                matTooltipPosition="above"
+                >help</i
+              >
+            </td>
+            <td class="td-value">{{ obj.resolvedProperties[fieldName.key] }}</td>
+          </tr>
+        </table>
+      </div>
+    </mat-tab>
     <mat-tab
       *ngIf="obj.properties['medias'] && obj.properties['medias'].length"
       label="Médias ({{ (obj.properties['medias'] && obj.properties['medias'].length) || 0 }})"

frontend/app/services/config-json.service.ts

@@ -40,34 +40,6 @@ export class ConfigJsonService extends ConfigService {
     return `${api_url}${this._moduleService.currentModule.module_path}`;
   }
 
-  fieldLabels(schema) {
-    const fieldLabels = {};
-    for (const key of Object.keys(schema)) {
-      fieldLabels[key] = schema[key]['attribut_label'];
-    }
-    return fieldLabels;
-  }
-
-  fieldNames(moduleCode, objectType, typeDisplay = '', confObject = {}) {
-    if (['display_properties', 'display_list'].includes(typeDisplay)) {
-      if (Object.keys(confObject).length > 0) {
-        return confObject[typeDisplay];
-      }
-      return this.configModuleObjectParam(moduleCode, objectType, typeDisplay);
-    }
-    if (typeDisplay === 'schema') {
-      return Object.keys(this.schema(moduleCode, objectType));
-    }
-  }
-
-  fieldDefinitions(schema) {
-    const fieldDefinitions = {};
-    for (const key of Object.keys(schema)) {
-      fieldDefinitions[key] = schema[key]['definition'];
-    }
-    return fieldDefinitions;
-  }
-
   //NEW - récup setResolvedProperties from monitoring-object-base.ts
 
   resolveProperty(elem, val, moduleCode): Observable<any> {

frontend/app/services/config.service.ts

@@ -46,6 +46,11 @@ export class ConfigService {
     );
   }
 
+  loadConfigSpecificConfig(obj) {
+    const urlConfig = `${this.backendModuleUrl()}/sites/${obj.id}/types`;
+    return this._http.get<any>(urlConfig);
+  }
+
   /** Backend Url et static dir ??*/
   backendUrl() {
     return `${this.appConfig.API_ENDPOINT}`;
@@ -225,4 +230,68 @@ export class ConfigService {
   cache() {
     return this._config;
   }
+
+  addSpecificConfig(types_site) {
+    let schemaSpecificType = {};
+    let schemaTypeMerged = {};
+    let keyHtmlToPop = '';
+    for (let type_site of types_site) {
+      if ('specific' in type_site['config']) {
+        for (const prop in type_site['config']['specific']) {
+          if (
+            'type_widget' in type_site['config']['specific'][prop] &&
+            type_site['config']['specific'][prop]['type_widget'] == 'html'
+          ) {
+            keyHtmlToPop = prop;
+          }
+        }
+        const { [keyHtmlToPop]: _, ...specificObjWithoutHtml } = type_site['config']['specific'];
+        Object.assign(schemaSpecificType, specificObjWithoutHtml);
+        Object.assign(schemaTypeMerged, type_site['config']);
+      }
+    }
+
+    const fieldNames = schemaTypeMerged['display_properties'];
+    const fieldNamesList = schemaTypeMerged['display_list'];
+    const fieldLabels = this.fieldLabels(schemaSpecificType);
+    const fieldDefinitions = this.fieldDefinitions(schemaSpecificType);
+    const obj = {};
+    obj['template_specific'] = {};
+    obj['template_specific']['fieldNames'] = fieldNames;
+    obj['template_specific']['fieldNamesList'] = fieldNamesList;
+    obj['template_specific']['schema'] = schemaSpecificType;
+    obj['template_specific']['fieldLabels'] = fieldLabels;
+    obj['template_specific']['fieldDefinitions'] = fieldDefinitions;
+    obj['template_specific']['fieldNamesList'] = fieldNamesList;
+
+    return obj['template_specific'];
+  }
+
+  fieldLabels(schema) {
+    const fieldLabels = {};
+    for (const key of Object.keys(schema)) {
+      fieldLabels[key] = schema[key]['attribut_label'];
+    }
+    return fieldLabels;
+  }
+
+  fieldNames(moduleCode, objectType, typeDisplay = '', confObject = {}) {
+    if (['display_properties', 'display_list'].includes(typeDisplay)) {
+      if (Object.keys(confObject).length > 0) {
+        return confObject[typeDisplay];
+      }
+      return this.configModuleObjectParam(moduleCode, objectType, typeDisplay);
+    }
+    if (typeDisplay === 'schema') {
+      return Object.keys(this.schema(moduleCode, objectType));
+    }
+  }
+
+  fieldDefinitions(schema) {
+    const fieldDefinitions = {};
+    for (const key of Object.keys(schema)) {
+      fieldDefinitions[key] = schema[key]['definition'];
+    }
+    return fieldDefinitions;
+  }
 }