From 9b596c538717c0899faa75b7ffa49b2bfb16e9ec Mon Sep 17 00:00:00 2001 From: Romuald Caplier Date: Thu, 20 Jun 2024 14:18:51 +0200 Subject: [PATCH] feature(metadata-editor): added FormFieldOverviews component to the FormFieldComponent. --- .../src/lib/+state/editor.selectors.spec.ts | 4 ++ .../overview-upload.component.html | 1 + .../overview-upload.component.ts | 25 ++++++++++++ .../form-field-overviews.component.css | 0 .../form-field-overviews.component.html | 5 +++ .../form-field-overviews.component.spec.ts | 40 +++++++++++++++++++ .../form-field-overviews.component.ts | 22 ++++++++++ .../form-field/form-field.component.html | 6 +++ .../form-field/form-field.component.spec.ts | 36 ++++++++++++++++- .../form-field/form-field.component.ts | 14 ++++++- libs/feature/editor/src/lib/fields.config.ts | 7 ++++ .../image-input/image-input.component.html | 1 + .../lib/image-input/image-input.component.ts | 3 ++ translations/de.json | 12 +++--- translations/en.json | 12 +++--- translations/es.json | 12 +++--- translations/fr.json | 12 +++--- translations/it.json | 12 +++--- translations/nl.json | 12 +++--- translations/pt.json | 12 +++--- translations/sk.json | 12 +++--- 21 files changed, 210 insertions(+), 50 deletions(-) create mode 100644 libs/feature/editor/src/lib/components/record-form/form-field/form-field-overviews/form-field-overviews.component.css create mode 100644 libs/feature/editor/src/lib/components/record-form/form-field/form-field-overviews/form-field-overviews.component.html create mode 100644 libs/feature/editor/src/lib/components/record-form/form-field/form-field-overviews/form-field-overviews.component.spec.ts create mode 100644 libs/feature/editor/src/lib/components/record-form/form-field/form-field-overviews/form-field-overviews.component.ts diff --git a/libs/feature/editor/src/lib/+state/editor.selectors.spec.ts b/libs/feature/editor/src/lib/+state/editor.selectors.spec.ts index 0d61773f97..7052491537 100644 --- a/libs/feature/editor/src/lib/+state/editor.selectors.spec.ts +++ b/libs/feature/editor/src/lib/+state/editor.selectors.spec.ts @@ -93,6 +93,10 @@ describe('Editor Selectors', () => { }, { config: DEFAULT_FIELDS[8], + value: DATASET_RECORDS[0].overviews, + }, + { + config: DEFAULT_FIELDS[9], value: DATASET_RECORDS[0].keywords, }, ]) diff --git a/libs/feature/editor/src/lib/components/overview-upload/overview-upload.component.html b/libs/feature/editor/src/lib/components/overview-upload/overview-upload.component.html index 54da3e35a7..78ac6cee4f 100644 --- a/libs/feature/editor/src/lib/components/overview-upload/overview-upload.component.html +++ b/libs/feature/editor/src/lib/components/overview-upload/overview-upload.component.html @@ -2,6 +2,7 @@ [maxSizeMB]="5" [previewUrl]="resourceUrl" [altText]="imageAltText" + [formControl]="formControl" (fileChange)="handleFileChange($event)" (urlChange)="handleUrlChange($event)" (delete)="handleDelete()" diff --git a/libs/feature/editor/src/lib/components/overview-upload/overview-upload.component.ts b/libs/feature/editor/src/lib/components/overview-upload/overview-upload.component.ts index 66535d5533..ed5c3221fe 100644 --- a/libs/feature/editor/src/lib/components/overview-upload/overview-upload.component.ts +++ b/libs/feature/editor/src/lib/components/overview-upload/overview-upload.component.ts @@ -2,12 +2,16 @@ import { ChangeDetectionStrategy, ChangeDetectorRef, Component, + EventEmitter, Input, OnInit, + Output, } from '@angular/core' import { CommonModule } from '@angular/common' import { RecordsApiService } from '@geonetwork-ui/data-access/gn4' import { UiInputsModule } from '@geonetwork-ui/ui/inputs' +import { FormControl } from '@angular/forms' +import { GraphicOverview } from '@geonetwork-ui/common/domain/model/record' @Component({ selector: 'gn-ui-overview-upload', @@ -19,6 +23,8 @@ import { UiInputsModule } from '@geonetwork-ui/ui/inputs' }) export class OverviewUploadComponent implements OnInit { @Input() metadataUuid: string + @Input() formControl!: FormControl + @Output() overViewChange = new EventEmitter() imageAltText: string resourceUrl: string @@ -34,6 +40,10 @@ export class OverviewUploadComponent implements OnInit { .subscribe((resources) => { this.imageAltText = resources[0]?.filename this.resourceUrl = resources[0]?.url + + this.resourceUrl = this.formControl.value?.[0]?.url.href + this.imageAltText = this.formControl.value?.[0]?.description + this.cd.markForCheck() }) } @@ -44,6 +54,12 @@ export class OverviewUploadComponent implements OnInit { .subscribe((resource) => { this.imageAltText = resource.filename this.resourceUrl = resource.url + + this.overViewChange.emit({ + url: new URL(resource.url), + description: resource.filename, + }) + this.cd.markForCheck() }) } @@ -54,6 +70,12 @@ export class OverviewUploadComponent implements OnInit { .subscribe((resource) => { this.imageAltText = resource.filename this.resourceUrl = resource.url + + this.overViewChange.emit({ + url: new URL(resource.url), + description: resource.filename, + }) + this.cd.markForCheck() }) } @@ -64,6 +86,9 @@ export class OverviewUploadComponent implements OnInit { .subscribe(() => { this.imageAltText = null this.resourceUrl = null + + this.overViewChange.emit(null) + this.cd.markForCheck() }) } diff --git a/libs/feature/editor/src/lib/components/record-form/form-field/form-field-overviews/form-field-overviews.component.css b/libs/feature/editor/src/lib/components/record-form/form-field/form-field-overviews/form-field-overviews.component.css new file mode 100644 index 0000000000..e69de29bb2 diff --git a/libs/feature/editor/src/lib/components/record-form/form-field/form-field-overviews/form-field-overviews.component.html b/libs/feature/editor/src/lib/components/record-form/form-field/form-field-overviews/form-field-overviews.component.html new file mode 100644 index 0000000000..e59778fe32 --- /dev/null +++ b/libs/feature/editor/src/lib/components/record-form/form-field/form-field-overviews/form-field-overviews.component.html @@ -0,0 +1,5 @@ + diff --git a/libs/feature/editor/src/lib/components/record-form/form-field/form-field-overviews/form-field-overviews.component.spec.ts b/libs/feature/editor/src/lib/components/record-form/form-field/form-field-overviews/form-field-overviews.component.spec.ts new file mode 100644 index 0000000000..95021ce4f5 --- /dev/null +++ b/libs/feature/editor/src/lib/components/record-form/form-field/form-field-overviews/form-field-overviews.component.spec.ts @@ -0,0 +1,40 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing' + +import { FormFieldOverviewsComponent } from './form-field-overviews.component' +import { HttpClientTestingModule } from '@angular/common/http/testing' +import { TranslateModule } from '@ngx-translate/core' +import { FormControl } from '@angular/forms' + +describe('FormFieldOverviewsComponent', () => { + let component: FormFieldOverviewsComponent + let fixture: ComponentFixture + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [ + FormFieldOverviewsComponent, + HttpClientTestingModule, + TranslateModule.forRoot(), + ], + }).compileComponents() + + fixture = TestBed.createComponent(FormFieldOverviewsComponent) + component = fixture.componentInstance + component.metadataUuid = '8505d991-e38f-4704-a47a-e7d335dfbef5' + const control = new FormControl() + control.setValue([ + { + description: 'doge.jpg', + url: new URL( + 'http://localhost:8080/geonetwork/srv/api/0.1/records/8505d991-e38f-4704-a47a-e7d335dfbef5/attachments/doge.jpg' + ), + }, + ]) + component.control = control + fixture.detectChanges() + }) + + it('should create', () => { + expect(component).toBeTruthy() + }) +}) diff --git a/libs/feature/editor/src/lib/components/record-form/form-field/form-field-overviews/form-field-overviews.component.ts b/libs/feature/editor/src/lib/components/record-form/form-field/form-field-overviews/form-field-overviews.component.ts new file mode 100644 index 0000000000..88af229862 --- /dev/null +++ b/libs/feature/editor/src/lib/components/record-form/form-field/form-field-overviews/form-field-overviews.component.ts @@ -0,0 +1,22 @@ +import { CommonModule } from '@angular/common' +import { ChangeDetectionStrategy, Component, Input } from '@angular/core' +import { OverviewUploadComponent } from '../../../overview-upload/overview-upload.component' +import { FormControl } from '@angular/forms' +import { GraphicOverview } from '@geonetwork-ui/common/domain/model/record' + +@Component({ + selector: 'gn-ui-form-field-overviews', + templateUrl: './form-field-overviews.component.html', + styleUrls: ['./form-field-overviews.component.css'], + changeDetection: ChangeDetectionStrategy.OnPush, + standalone: true, + imports: [CommonModule, OverviewUploadComponent], +}) +export class FormFieldOverviewsComponent { + @Input() metadataUuid: string + @Input() control!: FormControl + + handleOverViewChange(overView: GraphicOverview | null) { + this.control.setValue(overView ? [overView] : []) + } +} diff --git a/libs/feature/editor/src/lib/components/record-form/form-field/form-field.component.html b/libs/feature/editor/src/lib/components/record-form/form-field/form-field.component.html index 98f8503d27..56fd8d252a 100644 --- a/libs/feature/editor/src/lib/components/record-form/form-field/form-field.component.html +++ b/libs/feature/editor/src/lib/components/record-form/form-field/form-field.component.html @@ -76,6 +76,12 @@ + + + { let component: FormFieldComponent @@ -17,7 +27,18 @@ describe('FormFieldComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - imports: [FormFieldComponent, TranslateModule.forRoot()], + imports: [ + FormFieldComponent, + TranslateModule.forRoot(), + HttpClientTestingModule, + ], + schemas: [NO_ERRORS_SCHEMA], + providers: [ + { + provide: EditorFacade, + useClass: EditorFacadeMock, + }, + ], }).compileComponents() fixture = TestBed.createComponent(FormFieldComponent) @@ -150,4 +171,17 @@ describe('FormFieldComponent', () => { expect(formField).toBeTruthy() }) }) + describe('overviews field', () => { + let formField + beforeEach(() => { + component.model = 'overviews' + fixture.detectChanges() + formField = fixture.debugElement.query( + By.directive(FormFieldOverviewsComponent) + ).componentInstance + }) + it('creates an array form field', () => { + expect(formField).toBeTruthy() + }) + }) }) diff --git a/libs/feature/editor/src/lib/components/record-form/form-field/form-field.component.ts b/libs/feature/editor/src/lib/components/record-form/form-field/form-field.component.ts index 5077db478e..f55b225a1a 100644 --- a/libs/feature/editor/src/lib/components/record-form/form-field/form-field.component.ts +++ b/libs/feature/editor/src/lib/components/record-form/form-field/form-field.component.ts @@ -29,6 +29,9 @@ import { FormFieldConfig } from './form-field.model' import { FormFieldUpdateFrequencyComponent } from './form-field-update-frequency/form-field-update-frequency.component' import { CatalogRecordKeys } from '@geonetwork-ui/common/domain/model/record' import { FormFieldKeywordsComponent } from './form-field-keywords/form-field-keywords.component' +import { FormFieldOverviewsComponent } from './form-field-overviews/form-field-overviews.component' +import { map, take } from 'rxjs/operators' +import { EditorFacade } from '../../../+state/editor.facade' @Component({ selector: 'gn-ui-form-field', @@ -55,6 +58,7 @@ import { FormFieldKeywordsComponent } from './form-field-keywords/form-field-key FormFieldArrayComponent, FormFieldKeywordsComponent, TranslateModule, + FormFieldOverviewsComponent, ], }) export class FormFieldComponent { @@ -69,9 +73,14 @@ export class FormFieldComponent { @ViewChild('titleInput') titleInput: ElementRef + metadataUuid$ = this.facade.record$.pipe( + take(1), + map((record) => record.uniqueIdentifier) + ) + formControl = new FormControl() - constructor() { + constructor(private facade: EditorFacade) { this.valueChange = this.formControl.valueChanges } @@ -100,6 +109,9 @@ export class FormFieldComponent { get isSpatialExtentField() { return this.model === 'spatialExtents' } + get isGraphicOverview() { + return this.model === 'overviews' + } get isSimpleField() { return this.model === 'uniqueIdentifier' || this.model === 'recordUpdated' } diff --git a/libs/feature/editor/src/lib/fields.config.ts b/libs/feature/editor/src/lib/fields.config.ts index cda10b5196..8221924d2a 100644 --- a/libs/feature/editor/src/lib/fields.config.ts +++ b/libs/feature/editor/src/lib/fields.config.ts @@ -61,6 +61,13 @@ export const DEFAULT_FIELDS: EditorFieldsConfig = [ type: 'list', }, }, + { + model: 'overviews', + formFieldConfig: { + labelKey: marker('editor.record.form.overviews'), + type: 'list', + }, + }, { model: 'keywords', formFieldConfig: { diff --git a/libs/ui/inputs/src/lib/image-input/image-input.component.html b/libs/ui/inputs/src/lib/image-input/image-input.component.html index ceeb82456a..5dbee9df05 100644 --- a/libs/ui/inputs/src/lib/image-input/image-input.component.html +++ b/libs/ui/inputs/src/lib/image-input/image-input.component.html @@ -20,6 +20,7 @@