Handle sptialExtents field in a different manner

geonetwork · Jul 25, 2024 · b95a5ba · b95a5ba
1 parent 222acb4
commit b95a5ba
Show file tree

Hide file tree

Showing 5 changed files with 82 additions and 21 deletions.
diff --git a/...s/record-form/form-field/form-field-spatial-extent/form-field-spatial-extent.component.ts b/...s/record-form/form-field/form-field-spatial-extent/form-field-spatial-extent.component.ts
@@ -69,8 +69,8 @@ type Coverage = {
   ],
 })
 export class FormFieldSpatialExtentComponent implements OnInit {
-  @Input() control: FormControl<Keyword[]>
-  @Input() geogrExtent?: DatasetSpatialExtent[] = []
+  @Input() placeKeywords: Keyword[]
+  @Input() spatialExtents: DatasetSpatialExtent[]
   // @Input()
   coverage = [
     {
@@ -90,6 +90,8 @@ export class FormFieldSpatialExtentComponent implements OnInit {
     new EventEmitter()
   // @Output() coverageChange: EventEmitter<Coverage> = new EventEmitter()
 
+  // keywordsLinkedToExtents = new Set({key: 'uri', values: {bbox: 'bbox'}})
+
   error = ''
   viewExtent: Extent
   mapContext$: Observable<MapContextModel> = this.mapFacade.layers$.pipe(
@@ -161,10 +163,10 @@ export class FormFieldSpatialExtentComponent implements OnInit {
 
   ngOnInit(): void {
     // add initial keywords of type place to map //
-    this.control?.value.forEach((keyword) => {
-      this.addGeogrExtent(keyword.label, keyword.coords)
-    })
-    this.keywordChange.emit(this.control.value)
+    // this.placeKeywords?.value.forEach((keyword) => {
+    //   this.addGeogrExtent(keyword.label, keyword.coords)
+    // })
+    // this.keywordChange.emit(this.placeKeywords.value)
 
     // handle initial values coming as Input from geogrExtent
 
@@ -173,7 +175,7 @@ export class FormFieldSpatialExtentComponent implements OnInit {
     // if an extent comes with no description: same, an “Unknown location” badge appears
     // if an extent comes with a description that is NOT a URI, the description is shown in the badge
 
-    this.geogrExtent.forEach((extent) => {
+    this.spatialExtents.forEach((extent) => {
       // add to keywords (in html)
       // add to map
       // link to keyword of type place
@@ -210,7 +212,7 @@ export class FormFieldSpatialExtentComponent implements OnInit {
   }
 
   addKeyword(keyword: Keyword) {
-    const addedKeywords = [...this.control.value, keyword]
+    const addedKeywords = [...this.placeKeywords.value, keyword]
 
     // remove duplicates from keyword
     const filteredKeywords = addedKeywords.filter((value, index, self) => {
@@ -225,37 +227,39 @@ export class FormFieldSpatialExtentComponent implements OnInit {
       )
     })
 
-    this.control.setValue(filteredKeywords)
+    this.placeKeywords.setValue(filteredKeywords)
     this.keywordChange.emit(filteredKeywords)
   }
 
   removeKeyword(index: number, label: string) {
-    const removedKeywords = this.control.value.filter((_, i) => i !== index)
-    this.control.setValue(removedKeywords)
+    const removedKeywords = this.placeKeywords.value.filter(
+      (_, i) => i !== index
+    )
+    this.placeKeywords.setValue(removedKeywords)
     this.keywordChange.emit(removedKeywords)
 
     this.deleteLayer(index)
 
     // remove from geogrExtent
-    this.geogrExtent = this.geogrExtent.filter(
+    this.spatialExtents = this.spatialExtents.filter(
       (extent) => extent.description !== label
     )
-    this.geogrExtentChange.emit(this.geogrExtent)
-    console.log('geogrExtent', this.geogrExtent)
+    this.geogrExtentChange.emit(this.spatialExtents)
+    console.log('geogrExtent', this.spatialExtents)
   }
   addGeogrExtent(description: string, coords: GeogrCoords) {
     const coordWest = parseFloat(coords.coordWest)
     const coordSouth = parseFloat(coords.coordSouth)
     const coordEast = parseFloat(coords.coordEast)
     const coordNorth = parseFloat(coords.coordNorth)
     // bbox: minx, miny, maxx, maxy
-    this.geogrExtent.push({
+    this.spatialExtents.push({
       description,
       bbox: [coordWest, coordSouth, coordEast, coordNorth],
     })
 
-    this.geogrExtentChange.emit(this.geogrExtent)
-    console.log('geogrExtent', this.geogrExtent)
+    this.geogrExtentChange.emit(this.spatialExtents)
+    console.log('geogrExtent', this.spatialExtents)
 
     const bboxGeom = this.bboxCoordsToGeometry(
       coordWest,

diff --git a/libs/feature/editor/src/lib/components/record-form/record-form.component.html b/libs/feature/editor/src/lib/components/record-form/record-form.component.html
@@ -29,7 +29,7 @@
           </div>
           <ng-container
             *ngFor="
-              let field of section.fieldsWithValues;
+              let field of filterSpatialExtentsFields(section.fieldsWithValues);
               trackBy: fieldTracker
             "
           >
@@ -44,6 +44,19 @@
               ></gn-ui-form-field>
             </ng-container>
           </ng-container>
+
+          <ng-container
+            *ngIf="
+              extractSpatialExtentsFields(
+                section.fieldsWithValues
+              ) as spatialExtendsFields
+            "
+          >
+            <gn-ui-form-field-spatial-extent
+              [placeKeywords]=""
+              [spatialExtents]=""
+            ></gn-ui-form-field-spatial-extent>
+          </ng-container>
         </div>
       </ng-container>
     </ng-container>

diff --git a/libs/feature/editor/src/lib/components/record-form/record-form.component.ts b/libs/feature/editor/src/lib/components/record-form/record-form.component.ts
@@ -2,7 +2,10 @@ import { CommonModule } from '@angular/common'
 import { ChangeDetectionStrategy, Component } from '@angular/core'
 import { EditorFacade } from '../../+state/editor.facade'
 import { EditorFieldValue } from '../../models'
-import { FormFieldComponent } from './form-field'
+import {
+  FormFieldComponent,
+  FormFieldSpatialExtentComponent,
+} from './form-field'
 import { TranslateModule } from '@ngx-translate/core'
 import {
   EditorFieldWithValue,
@@ -15,7 +18,12 @@ import {
   styleUrls: ['./record-form.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
-  imports: [CommonModule, FormFieldComponent, TranslateModule],
+  imports: [
+    CommonModule,
+    FormFieldComponent,
+    TranslateModule,
+    FormFieldSpatialExtentComponent,
+  ],
 })
 export class RecordFormComponent {
   constructor(public facade: EditorFacade) {}
@@ -34,4 +42,31 @@ export class RecordFormComponent {
   sectionTracker(index: number, section: EditorSectionWithValues): any {
     return section.labelKey
   }
+
+  filterSpatialExtentsFields(
+    fieldsWithValues: EditorFieldWithValue[]
+  ): EditorFieldWithValue[] {
+    return fieldsWithValues.filter(
+      (field) =>
+        field.config.model !== 'spatialExtents' ||
+        field.config.id !== 'placeKeywords'
+    )
+  }
+
+  extractSpatialExtentsFields(fieldsWithValues: EditorFieldWithValue[]) {
+    const spatialExtentsField = fieldsWithValues.find(
+      (field) => field.config.model === 'spatialExtents'
+    )
+    const placeKeywordsField = fieldsWithValues.find(
+      (field) => field.config.id === 'placeKeywords'
+    )
+    if (spatialExtentsField && placeKeywordsField) {
+      return {
+        spatialExtentsField,
+        placeKeywordsField,
+      }
+    } else {
+      return null
+    }
+  }
 }
diff --git a/libs/feature/editor/src/lib/fields.config.ts b/libs/feature/editor/src/lib/fields.config.ts
@@ -90,6 +90,14 @@ export const RECORD_SPATIAL_EXTENTS_FIELD: EditorField = {
   },
 }
 
+export const RECORD_PLACE_KEYWORDS_FIELD: EditorField = {
+  model: 'keywords',
+  id: 'placeKeywords',
+  formFieldConfig: {
+    labelKey: marker('editor.record.form.field.keywords'),
+  },
+}
+
 /************************************************************
  ***************          SECTIONS          *****************
  ************************************************************
@@ -116,7 +124,7 @@ export const ABOUT_SECTION: EditorSection = {
 export const GEOGRAPHICAL_COVERAGE_SECTION: EditorSection = {
   labelKey: marker('editor.record.form.section.geographicalCoverage.label'),
   hidden: false,
-  fields: [RECORD_SPATIAL_EXTENTS_FIELD],
+  fields: [RECORD_PLACE_KEYWORDS_FIELD, RECORD_SPATIAL_EXTENTS_FIELD],
 }
 
 export const ASSOCIATED_RESOURCES_SECTION: EditorSection = {

diff --git a/libs/feature/editor/src/lib/models/editor-config.model.ts b/libs/feature/editor/src/lib/models/editor-config.model.ts
@@ -17,6 +17,7 @@ export interface FormFieldConfig {
 }
 
 export interface EditorField {
+  id?: string
   // configuration of the form field used as presentation
   formFieldConfig: FormFieldConfig