From b95a5bae961265a1b8c033f0243a9125561592e5 Mon Sep 17 00:00:00 2001 From: Angelika Kinas Date: Thu, 25 Jul 2024 16:33:47 +0200 Subject: [PATCH] Handle sptialExtents field in a different manner --- .../form-field-spatial-extent.component.ts | 38 ++++++++++-------- .../record-form/record-form.component.html | 15 ++++++- .../record-form/record-form.component.ts | 39 ++++++++++++++++++- libs/feature/editor/src/lib/fields.config.ts | 10 ++++- .../src/lib/models/editor-config.model.ts | 1 + 5 files changed, 82 insertions(+), 21 deletions(-) diff --git a/libs/feature/editor/src/lib/components/record-form/form-field/form-field-spatial-extent/form-field-spatial-extent.component.ts b/libs/feature/editor/src/lib/components/record-form/form-field/form-field-spatial-extent/form-field-spatial-extent.component.ts index b4d124795d..8899b2cf6e 100644 --- a/libs/feature/editor/src/lib/components/record-form/form-field/form-field-spatial-extent/form-field-spatial-extent.component.ts +++ b/libs/feature/editor/src/lib/components/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 - @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 = new EventEmitter() + // keywordsLinkedToExtents = new Set({key: 'uri', values: {bbox: 'bbox'}}) + error = '' viewExtent: Extent mapContext$: Observable = 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,23 +227,25 @@ 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) @@ -249,13 +253,13 @@ export class FormFieldSpatialExtentComponent implements OnInit { 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 index 277b79d049..1f3a4995b6 100644 --- 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 @@ @@ -44,6 +44,19 @@ > + + + + 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 index 54d4e59b87..aa79a16ee7 100644 --- 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 index 0c3909ba7f..077a0eab8d 100644 --- 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 index 5e420e1893..4b02d0beb3 100644 --- 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