feature(metadata-editor): added FormFieldOverviews component to the F…

…ormFieldComponent.
geonetwork · Jul 24, 2024 · 21acdd2 · 21acdd2
1 parent 37feab8
commit 21acdd2
Show file tree

Hide file tree

Showing 13 changed files with 239 additions and 26 deletions.
diff --git a/libs/data-access/gn4/src/openapi/model/metadataResource.api.model.ts b/libs/data-access/gn4/src/openapi/model/metadataResource.api.model.ts
@@ -19,7 +19,7 @@ export interface MetadataResourceApiModel {
   metadataResourceExternalManagementProperties?: MetadataResourceExternalManagementPropertiesApiModel
   lastModification?: string
   version?: string
-  url?: string
+  url?: URL
   filename?: string
   id?: string
   size?: number

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
@@ -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
@@ -2,12 +2,27 @@ import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
+  EventEmitter,
   Input,
+  OnDestroy,
   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'
+import { Subject, takeUntil } from 'rxjs'
+
+const extractFileNameFormUrl = (url: URL, metadataUuid: string): string => {
+  const pattern = new RegExp(
+    `records/${metadataUuid}/attachments/([^/?#]+)(?:[/?#]|$)`,
+    'i'
+  )
+  const match = url.href.match(pattern)
+  return match ? match[1] : ''
+}
 
 @Component({
   selector: 'gn-ui-overview-upload',
@@ -17,11 +32,15 @@ import { UiInputsModule } from '@geonetwork-ui/ui/inputs'
   styleUrls: ['./overview-upload.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class OverviewUploadComponent implements OnInit {
+export class OverviewUploadComponent implements OnInit, OnDestroy {
   @Input() metadataUuid: string
+  @Input() formControl!: FormControl
+  @Output() overviewChange = new EventEmitter<GraphicOverview | null>()
 
   imageAltText: string
-  resourceUrl: string
+  resourceUrl: URL
+
+  private destroy$ = new Subject<void>()
 
   constructor(
     private recordsApiService: RecordsApiService,
@@ -31,40 +50,98 @@ export class OverviewUploadComponent implements OnInit {
   ngOnInit(): void {
     this.recordsApiService
       .getAllResources(this.metadataUuid)
-      .subscribe((resources) => {
-        this.imageAltText = resources[0]?.filename
-        this.resourceUrl = resources[0]?.url
-        this.cd.markForCheck()
+      .pipe(takeUntil(this.destroy$))
+      .subscribe({
+        next: (resources) => {
+          if (resources && resources.length > 0) {
+            this.resourceUrl = new URL(resources[0]?.url)
+            this.imageAltText = resources[0].filename
+          } else if (this.formControl.value[0]) {
+            this.resourceUrl = new URL(this.formControl.value[0].url.href)
+            this.imageAltText = this.formControl.value[0].description
+          } else {
+            this.resourceUrl = null
+            this.imageAltText = ''
+          }
+
+          this.cd.markForCheck()
+        },
+        error: this.errorHandle,
       })
   }
 
   handleFileChange(file: File) {
     this.recordsApiService
       .putResource(this.metadataUuid, file, 'public')
-      .subscribe((resource) => {
-        this.imageAltText = resource.filename
-        this.resourceUrl = resource.url
-        this.cd.markForCheck()
+      .pipe(takeUntil(this.destroy$))
+      .subscribe({
+        next: (resource) => {
+          this.resourceUrl = new URL(resource.url)
+          this.imageAltText = resource.filename
+
+          this.overviewChange.emit({
+            url: new URL(resource.url),
+            description: resource.filename,
+          })
+
+          this.cd.markForCheck()
+        },
+        error: this.errorHandle,
       })
   }
 
   handleUrlChange(url: string) {
     this.recordsApiService
       .putResourceFromURL(this.metadataUuid, url, 'public')
-      .subscribe((resource) => {
-        this.imageAltText = resource.filename
-        this.resourceUrl = resource.url
-        this.cd.markForCheck()
+      .pipe(takeUntil(this.destroy$))
+      .subscribe({
+        next: (resource) => {
+          this.resourceUrl = new URL(resource.url)
+          this.imageAltText = resource.filename
+
+          this.overviewChange.emit({
+            url: new URL(resource.url),
+            description: resource.filename,
+          })
+
+          this.cd.markForCheck()
+        },
+        error: this.errorHandle,
       })
   }
 
   handleDelete() {
+    const fileName = extractFileNameFormUrl(this.resourceUrl, this.metadataUuid)
+
     this.recordsApiService
-      .delResource(this.metadataUuid, this.imageAltText)
-      .subscribe(() => {
-        this.imageAltText = null
-        this.resourceUrl = null
-        this.cd.markForCheck()
+      .delResource(this.metadataUuid, fileName)
+      .pipe(takeUntil(this.destroy$))
+      .subscribe({
+        next: () => {
+          this.imageAltText = null
+          this.resourceUrl = null
+
+          this.overviewChange.emit(null)
+
+          this.cd.markForCheck()
+        },
+        error: this.errorHandle,
       })
   }
+
+  private errorHandle = (error: never) => {
+    console.error(error)
+
+    this.resourceUrl = null
+    this.imageAltText = ''
+
+    this.overviewChange.emit(null)
+
+    this.cd.markForCheck()
+  }
+
+  ngOnDestroy(): void {
+    this.destroy$.next()
+    this.destroy$.complete()
+  }
 }
diff --git a/...components/record-form/form-field/form-field-overviews/form-field-overviews.component.css b/...components/record-form/form-field/form-field-overviews/form-field-overviews.component.css
diff --git a/...omponents/record-form/form-field/form-field-overviews/form-field-overviews.component.html b/...omponents/record-form/form-field/form-field-overviews/form-field-overviews.component.html
@@ -0,0 +1,5 @@
+<gn-ui-overview-upload
+  [metadataUuid]="metadataUuid"
+  [formControl]="control"
+  (overviewChange)="handleOverViewChange($event)"
+></gn-ui-overview-upload>
diff --git a/...onents/record-form/form-field/form-field-overviews/form-field-overviews.component.spec.ts b/...onents/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<FormFieldOverviewsComponent>
+
+  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/.../components/record-form/form-field/form-field-overviews/form-field-overviews.component.ts b/.../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
@@ -76,6 +76,12 @@
   <ng-container *ngIf="isSpatialExtentField">
     <gn-ui-form-field-spatial-extent></gn-ui-form-field-spatial-extent>
   </ng-container>
+  <ng-container *ngIf="isGraphicOverview">
+    <gn-ui-form-field-overviews
+      [control]="formControl"
+      [metadataUuid]="metadataUuid$ | async"
+    ></gn-ui-form-field-overviews>
+  </ng-container>
   <ng-container *ngIf="isKeywords">
     <gn-ui-form-field-keywords
       [control]="formControl"

diff --git a/libs/feature/editor/src/lib/components/record-form/form-field/form-field.component.spec.ts b/libs/feature/editor/src/lib/components/record-form/form-field/form-field.component.spec.ts
@@ -10,14 +10,35 @@ import { FormFieldSpatialExtentComponent } from './form-field-spatial-extent/for
 import { FormFieldUpdateFrequencyComponent } from './form-field-update-frequency/form-field-update-frequency.component'
 import { FormFieldComponent } from './form-field.component'
 import { FormFieldTemporalExtentsComponent } from './form-field-temporal-extents/form-field-temporal-extents.component'
+import { FormFieldOverviewsComponent } from './form-field-overviews/form-field-overviews.component'
+import { BehaviorSubject } from 'rxjs'
+import { EditorFacade } from '../../../+state/editor.facade'
+import { DATASET_RECORDS } from '@geonetwork-ui/common/fixtures'
+import { NO_ERRORS_SCHEMA } from '@angular/core'
+import { HttpClientTestingModule } from '@angular/common/http/testing'
+
+class EditorFacadeMock {
+  record$ = new BehaviorSubject(DATASET_RECORDS[0])
+}
 
 describe('FormFieldComponent', () => {
   let component: FormFieldComponent
   let fixture: ComponentFixture<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)
@@ -149,4 +170,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
@@ -28,7 +28,9 @@ import { FormFieldSpatialExtentComponent } from './form-field-spatial-extent/for
 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 { FormFieldConfig } from '../../../models'
+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 +57,7 @@ import { FormFieldConfig } from '../../../models'
     FormFieldArrayComponent,
     FormFieldKeywordsComponent,
     TranslateModule,
+    FormFieldOverviewsComponent,
   ],
 })
 export class FormFieldComponent {
@@ -70,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
   }
 
@@ -101,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
@@ -167,6 +167,18 @@ export const DEFAULT_CONFIGURATION: EditorConfig = {
     {
       labelKey: marker('editor.record.form.page.description'),
       sections: [TITLE_SECTION, ABOUT_SECTION, GEOGRAPHICAL_COVERAGE_SECTION],
+  {
+    model: 'overviews',
+    formFieldConfig: {
+      labelKey: marker('editor.record.form.overviews'),
+      type: 'list',
+    },
+  },
+  {
+    model: 'keywords',
+    formFieldConfig: {
+      labelKey: marker('editor.record.form.keywords'),
+      type: 'list',
     },
     {
       labelKey: marker('editor.record.form.page.ressources'),

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
@@ -51,7 +51,7 @@
   <div class="w-full h-full flex flex-col gap-2">
     <label
       gnUiFilesDrop
-      class="block flex-1 border-2 border-dashed border-gray-300 rounded-lg p-6 flex flex-col items-center justify-center gap-4"
+      class="block flex-1 border-2 border-dashed border-gray-300 rounded-lg p-6 flex flex-col items-center justify-center gap-4 hover:cursor-pointer"
       (dragFilesOver)="handleDragFilesOver($event)"
       (dropFiles)="handleDropFiles($event)"
     >