geonetwork-ui 2.4.0-dev.e97caaf2 → 2.4.0-dev.f5019723

package/src/libs/feature/editor/src/lib/components/record-form/form-field/form-field-contacts-for-resource/form-field-contacts-for-resource.component.html

@@ -1,16 +1,10 @@
 <div class="flex flex-col gap-3">
   <div class="flex flex-row flex-wrap gap-2" data-test="rolesToPick">
     <ng-container *ngFor="let role of rolesToPick">
-      <gn-ui-button
-        extraClass="px-2 py-1.5"
-        (buttonClick)="addRoleToDisplay(role)"
-      >
-        <div class="flex flex-row gap-1 items-center">
-          <span class="text-primary text-[20px] leading-[0] font-bold pb-[5px]"
-            >&#8330;</span
-          >
-          <span class="font-bold" translate>{{ roleToLabel(role) }}</span>
-        </div>
+      <gn-ui-button type="gray" (buttonClick)="addRoleToDisplay(role)">
+        <mat-icon class="material-symbols-outlined text-primary">add</mat-icon>
+        &nbsp;
+        <span translate>{{ roleToLabel(role) }}</span>
       </gn-ui-button>
     </ng-container>
   </div>
@@ -43,23 +37,19 @@
         [displayWithFn]="displayWithFn"
         [minCharacterCount]="1"
         [clearOnSelection]="true"
+        [allowSubmit]="false"
       >
       </gn-ui-autocomplete>
 
       <ng-container *ngIf="contactsForRessourceByRole.get(role) as contacts">
-        <ng-container *ngIf="contacts.length > 1">
-          <gn-ui-sortable-list
-            [elements]="contactsAsDynElemByRole.get(role)"
-            (elementsChange)="handleContactsChanged($event)"
-          ></gn-ui-sortable-list>
-        </ng-container>
-        <ng-container *ngIf="contacts.length === 1">
-          <ng-container *ngFor="let contact of contacts">
-            <gn-ui-contact-card
-              [contact]="contact"
-              (contactRemoved)="removeContact(index)"
-            ></gn-ui-contact-card> </ng-container
-        ></ng-container>
+        <gn-ui-sortable-list
+          [items]="contacts"
+          (itemsOrderChange)="handleContactsChanged($event, role)"
+          [elementTemplate]="contactTemplate"
+        ></gn-ui-sortable-list>
+        <ng-template #contactTemplate let-contact>
+          <gn-ui-contact-card [contact]="contact"></gn-ui-contact-card>
+        </ng-template>
       </ng-container>
 
       <hr class="border-t-[#D6D3D1] mt-4 mb-6" *ngIf="!isLast" />

package/src/libs/feature/editor/src/lib/components/record-form/form-field/form-field-contacts-for-resource/form-field-contacts-for-resource.component.ts

@@ -1,7 +1,6 @@
 import { CommonModule } from '@angular/common'
 import {
   ChangeDetectionStrategy,
-  ChangeDetectorRef,
   Component,
   EventEmitter,
   Input,
@@ -18,10 +17,7 @@ import {
 import { UserModel } from '../../../../../../../../../libs/common/domain/src/lib/model/user'
 import { OrganizationsServiceInterface } from '../../../../../../../../../libs/common/domain/src/lib/organizations.service.interface'
 import { PlatformServiceInterface } from '../../../../../../../../../libs/common/domain/src/lib/platform.service.interface'
-import {
-  DynamicElement,
-  SortableListComponent,
-} from '../../../../../../../../../libs/ui/elements/src'
+import { SortableListComponent } from '../../../../../../../../../libs/ui/layout/src'
 import {
   AutocompleteComponent,
   DropdownSelectorComponent,
@@ -34,11 +30,11 @@ import {
   debounceTime,
   distinctUntilChanged,
   firstValueFrom,
-  Observable,
   switchMap,
 } from 'rxjs'
 import { map } from 'rxjs/operators'
 import { ContactCardComponent } from '../../../contact-card/contact-card.component'
+import { MatIconModule } from '@angular/material/icon'
 
 @Component({
   selector: 'gn-ui-form-field-contacts-for-resource',
@@ -55,6 +51,7 @@ import { ContactCardComponent } from '../../../contact-card/contact-card.compone
     TranslateModule,
     ContactCardComponent,
     SortableListComponent,
+    MatIconModule,
   ],
 })
 export class FormFieldContactsForResourceComponent
@@ -65,8 +62,6 @@ export class FormFieldContactsForResourceComponent
 
   contactsForRessourceByRole: Map<Role, Individual[]> = new Map()
 
-  contactsAsDynElemByRole: Map<Role, DynamicElement[]> = new Map()
-
   rolesToPick: Role[] = [
     'resource_provider',
     'custodian',
@@ -114,15 +109,14 @@ export class FormFieldContactsForResourceComponent
 
   updateContactsForRessource() {
     this.contactsForRessourceByRole = this.value.reduce((acc, contact) => {
-      const completeOrganization = this.allOrganizations.get(
-        contact.organization.name
-      )
+      const completeOrganization = contact.organization
+        ? this.allOrganizations.get(contact.organization.name)
+        : null
+      const organization = completeOrganization ?? contact.organization
 
       const updatedContact = {
         ...contact,
-        organization:
-          completeOrganization ??
-          ({ name: contact.organization.name } as Organization),
+        ...(organization && { organization }),
       }
 
       if (!acc.has(contact.role)) {
@@ -133,35 +127,6 @@ export class FormFieldContactsForResourceComponent
 
       return acc
     }, new Map<Role, Individual[]>())
-
-    this.contactsAsDynElemByRole = this.value.reduce((acc, contact) => {
-      const completeOrganization = this.allOrganizations.get(
-        contact.organization.name
-      )
-
-      const updatedContact = {
-        ...contact,
-        organization:
-          completeOrganization ??
-          ({ name: contact.organization.name } as Organization),
-      }
-
-      const contactAsDynElem = {
-        component: ContactCardComponent,
-        inputs: {
-          contact: updatedContact,
-          removable: false,
-        },
-      } as DynamicElement
-
-      if (!acc.has(contact.role)) {
-        acc.set(contact.role, [])
-      }
-
-      acc.get(contact.role).push(contactAsDynElem)
-
-      return acc
-    }, new Map<Role, DynamicElement[]>())
   }
 
   manageRoleSectionsToDisplay(contactsForResource: Individual[]) {
@@ -181,14 +146,10 @@ export class FormFieldContactsForResourceComponent
     this.valueChange.emit(newContactsforRessource)
   }
 
-  handleContactsChanged(event: DynamicElement[]) {
-    const newContactsOrdered = event.map(
-      (contactAsDynElem) => contactAsDynElem.inputs['contact']
-    ) as Individual[]
-
-    const role = newContactsOrdered[0].role
+  handleContactsChanged(items: unknown[], role: Role) {
+    const contacts = items as Individual[]
 
-    this.contactsForRessourceByRole.set(role, newContactsOrdered)
+    this.contactsForRessourceByRole.set(role, contacts)
 
     const newControlValue = Array.from(
       this.contactsForRessourceByRole.values()

package/src/libs/feature/editor/src/lib/components/record-form/form-field/{form-field-resource-updated/form-field-resource-updated.component.ts → form-field-date-updated/form-field-date-updated.component.ts}

@@ -8,14 +8,14 @@ import {
 import { DatePickerComponent } from '../../../../../../../../../libs/ui/inputs/src'
 
 @Component({
-  selector: 'gn-ui-form-field-resource-updated',
-  templateUrl: './form-field-resource-updated.component.html',
-  styleUrls: ['./form-field-resource-updated.component.css'],
+  selector: 'gn-ui-form-field-date-updated',
+  templateUrl: './form-field-date-updated.component.html',
+  styleUrls: ['./form-field-date-updated.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
   imports: [DatePickerComponent],
 })
-export class FormFieldResourceUpdatedComponent {
+export class FormFieldDateUpdatedComponent {
   @Input() value: Date
   @Output() valueChange: EventEmitter<Date> = new EventEmitter()
 }

package/src/libs/feature/editor/src/lib/components/record-form/form-field/form-field-keywords/form-field-keywords.component.html

@@ -1,9 +1,10 @@
 <div class="flex flex-col gap-3">
   <gn-ui-generic-keywords
-    [keywords]="value"
+    [keywords]="filteredKeywords"
     [keywordTypes]="keywordTypes"
-    [placeholder]="placeholder | translate"
+    [placeholder]="'editor.form.keywords.placeholder' | translate"
     (changedKeywords)="handleKeywordsChange($event)"
+    [allowSubmit]="false"
   >
   </gn-ui-generic-keywords>
 </div>

package/src/libs/feature/editor/src/lib/components/record-form/form-field/form-field-keywords/form-field-keywords.component.ts

@@ -16,6 +16,10 @@ import { Keyword } from '../../../../../../../../../libs/common/domain/src/lib/m
 import { GenericKeywordsComponent } from '../../../generic-keywords/generic-keywords.component'
 import { TranslateModule } from '@ngx-translate/core'
 import { KeywordType } from '../../../../../../../../../libs/common/domain/src/lib/model/thesaurus'
+import { EditorFacade } from '../../../../+state/editor.facade'
+import { firstValueFrom, map } from 'rxjs'
+import { SPATIAL_SCOPES } from '../../../../fields.config'
+import { all } from 'ol/loadingstrategy'
 
 @Component({
   selector: 'gn-ui-form-field-keywords',
@@ -38,9 +42,37 @@ export class FormFieldKeywordsComponent {
   @Output() valueChange: EventEmitter<Keyword[]> = new EventEmitter()
 
   keywordTypes = ['temporal', 'theme', 'other'] as KeywordType[]
-  placeholder = 'editor.form.keywords.placeholder'
 
-  handleKeywordsChange(keywords: Keyword[]) {
-    this.valueChange.emit(keywords)
+  get filteredKeywords(): Keyword[] {
+    return (
+      this.value?.filter(
+        (keyword) =>
+          keyword.type !== 'place' && // filter out place keywords
+          !SPATIAL_SCOPES.some(
+            (spatialScope) => spatialScope.label === keyword.label
+          ) // filter out keywords matching spatialScope keys
+      ) || []
+    )
+  }
+
+  constructor(private editorFacade: EditorFacade) {}
+
+  async handleKeywordsChange(keywords: Keyword[]) {
+    const filteredKeywords = await firstValueFrom(
+      this.editorFacade.record$.pipe(
+        map((record) =>
+          record.keywords.filter(
+            (k) =>
+              k.type === 'place' || // get back place keyword
+              SPATIAL_SCOPES.some(
+                (spatialScope) => spatialScope.label === k.label // get back spatialScope keywords
+              )
+          )
+        )
+      )
+    )
+
+    const allKeywords = [...filteredKeywords, ...keywords]
+    this.valueChange.emit(allKeywords)
   }
 }

package/src/libs/feature/editor/src/lib/components/record-form/form-field/form-field-license/form-field-license.component.css

@@ -0,0 +1,8 @@
+:host {
+  display: grid; /* this is required to be able to size the dropdown */
+}
+
+gn-ui-dropdown-selector {
+  /* FIXME: this includes the grid gap from the editor form, but there should be no dependency */
+  max-width: calc(50% - 16px);
+}

package/src/libs/feature/editor/src/lib/components/record-form/form-field/form-field-map-container/form-field-map-container.component.html

@@ -1,4 +1 @@
-<gn-ui-map-context
-  [context]="mapContext$ | async"
-  [mapConfig]="mapConfig"
-></gn-ui-map-context>
+<gn-ui-map-container [context]="mapContext$ | async"></gn-ui-map-container>

package/src/libs/feature/editor/src/lib/components/record-form/form-field/form-field-map-container/form-field-map-container.component.ts

@@ -1,95 +1,41 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  Input,
-  OnChanges,
-} from '@angular/core'
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
 import { CommonModule } from '@angular/common'
-import { catchError, from, map, Observable, of, switchMap } from 'rxjs'
-import {
-  DEFAULT_BASELAYER_CONTEXT,
-  FeatureMapModule,
-  MapContextLayerTypeEnum,
-  MapContextModel,
-  MapFacade,
-  MapStyleService,
-  MapUtilsService,
-} from '../../../../../../../../../libs/feature/map/src'
-import { Fill, Stroke, Style } from 'ol/style'
-import { getOptionalMapConfig, MapConfig } from '../../../../../../../../../libs/util/app-config/src'
 import { Geometry } from 'geojson'
-import { GeoJSONFeatureCollection } from 'ol/format/GeoJSON'
+import GeoJSON, { GeoJSONFeatureCollection } from 'ol/format/GeoJSON'
 import { DatasetSpatialExtent } from '../../../../../../../../../libs/common/domain/src/lib/model/record'
 import { Polygon } from 'ol/geom'
-import GeoJSON from 'ol/format/GeoJSON'
+import {
+  createViewFromLayer,
+  MapContext,
+  MapContextLayer,
+} from '@geospatial-sdk/core'
+import { MapContainerComponent } from '../../../../../../../../../libs/ui/map/src'
+import { BehaviorSubject, Observable } from 'rxjs'
+import { switchMap } from 'rxjs/operators'
 
 @Component({
   selector: 'gn-ui-form-field-map-container',
   standalone: true,
-  imports: [CommonModule, FeatureMapModule],
+  imports: [CommonModule, MapContainerComponent],
   templateUrl: './form-field-map-container.component.html',
   styleUrls: ['./form-field-map-container.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class FormFieldMapContainerComponent implements OnChanges {
-  @Input() spatialExtents: DatasetSpatialExtent[]
-
-  error = ''
-  mapContext$: Observable<MapContextModel> = this.mapFacade.layers$.pipe(
-    switchMap((layers) =>
-      from(this.mapUtils.getLayerExtent(layers[0])).pipe(
-        catchError(() => {
-          this.error = 'The layer has no extent'
-          return of(undefined)
-        }),
-        map((extent) => {
-          return {
-            layers: [DEFAULT_BASELAYER_CONTEXT, ...layers],
-            view: {
-              extent: extent,
-            },
-          } as MapContextModel
-        })
-      )
-    )
-  )
-
-  mapConfig: MapConfig = getOptionalMapConfig()
-
-  constructor(
-    private mapFacade: MapFacade,
-    private mapUtils: MapUtilsService,
-    private styleService: MapStyleService
-  ) {
-    const fill = new Fill({
-      color: 'transparent',
-    })
-    const stroke = new Stroke({
-      color: 'black',
-      width: 2,
-    })
-    const styles = [
-      new Style({
-        fill: fill,
-        stroke: stroke,
-      }),
-    ]
-    this.styleService.styles.default = this.styleService.createStyleFunction({
-      ...this.styleService.createGeometryStyles({ color: 'black' }),
-      polygon: styles,
-    })
+export class FormFieldMapContainerComponent {
+  @Input() set spatialExtents(value: DatasetSpatialExtent[]) {
+    this.spatialExtents$.next(value)
   }
-
-  ngOnChanges(): void {
-    this.mapFacade.removeLayer(0)
-
-    if (this.spatialExtents) {
+  spatialExtents$ = new BehaviorSubject<DatasetSpatialExtent[]>([])
+  mapContext$: Observable<MapContext> = this.spatialExtents$.pipe(
+    switchMap(async (extents) => {
+      if (extents.length === 0) {
+        return null // null extent means default view
+      }
       const featureCollection: GeoJSONFeatureCollection = {
         type: 'FeatureCollection',
         features: [],
       }
-
-      this.spatialExtents.forEach((extent) => {
+      extents.forEach((extent) => {
         if (extent.geometry) {
           featureCollection.features.push({
             type: 'Feature',
@@ -104,13 +50,26 @@ export class FormFieldMapContainerComponent implements OnChanges {
           })
         }
       })
-      this.mapFacade.addLayer({
-        type: MapContextLayerTypeEnum.GEOJSON,
+
+      const layer: MapContextLayer = {
+        type: 'geojson',
         data: featureCollection,
-        title: 'Spatial extents',
-      })
-    }
-  }
+        label: 'Spatial extents',
+        style: {
+          'stroke-color': 'black',
+          'stroke-width': 2,
+        },
+      }
+      const view = await createViewFromLayer(layer)
+      return {
+        view,
+        layers: [layer],
+      }
+    })
+  )
+
+  error = ''
+
   bboxCoordsToGeometry(bbox: [number, number, number, number]): Geometry {
     const geometry = new Polygon([
       [
@@ -122,7 +81,6 @@ export class FormFieldMapContainerComponent implements OnChanges {
       ],
     ])
 
-    const geoJSONGeom = new GeoJSON().writeGeometryObject(geometry)
-    return geoJSONGeom
+    return new GeoJSON().writeGeometryObject(geometry)
   }
 }

package/src/libs/feature/editor/src/lib/components/record-form/form-field/form-field-online-link-resources/form-field-online-link-resources.component.html

@@ -0,0 +1,34 @@
+<gn-ui-file-input
+  [maxSizeMB]="MAX_UPLOAD_SIZE_MB"
+  (fileChange)="handleFileChange($event)"
+  (uploadCancel)="handleUploadCancel()"
+  [uploadProgress]="uploadProgress"
+  (urlChange)="handleUrlChange($event)"
+></gn-ui-file-input>
+<div class="h-[8px]"></div>
+<gn-ui-sortable-list
+  [items]="linkResources"
+  (itemsOrderChange)="handleResourcesChange($event)"
+  [elementTemplate]="template"
+>
+</gn-ui-sortable-list>
+<ng-template #template let-onlineResource let-index="index">
+  <gn-ui-online-resource-card
+    [onlineResource]="onlineResource"
+    (modifyClick)="handleResourceModify(onlineResource, index)"
+  ></gn-ui-online-resource-card>
+</ng-template>
+
+<ng-template #dialogTemplate let-onlineResource>
+  <h3 class="text-[16px] font-bold text-main mb-[12px]" translate>
+    editor.record.form.field.onlineResource.edit.title
+  </h3>
+  <gn-ui-text-input
+    extraClass="mb-[16px]"
+    [(value)]="onlineResource.name"
+  ></gn-ui-text-input>
+  <h3 class="text-[16px] font-bold text-main mb-[12px]" translate>
+    editor.record.form.field.onlineResource.edit.description
+  </h3>
+  <gn-ui-text-area [(value)]="onlineResource.description"></gn-ui-text-area>
+</ng-template>

package/src/libs/feature/editor/src/lib/components/record-form/form-field/form-field-online-link-resources/form-field-online-link-resources.component.ts

@@ -0,0 +1,182 @@
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  EventEmitter,
+  Input,
+  Output,
+  TemplateRef,
+  ViewChild,
+} from '@angular/core'
+import {
+  OnlineLinkResource,
+  OnlineResource,
+} from '../../../../../../../../../libs/common/domain/src/lib/model/record'
+import {
+  FileInputComponent,
+  TextAreaComponent,
+  TextInputComponent,
+} from '../../../../../../../../../libs/ui/inputs/src'
+import { CommonModule } from '@angular/common'
+import { OnlineResourceCardComponent } from '../../../online-resource-card/online-resource-card.component'
+import {
+  ModalDialogComponent,
+  SortableListComponent,
+} from '../../../../../../../../../libs/ui/layout/src'
+import { NotificationsService } from '../../../../../../../../../libs/feature/notifications/src'
+import { TranslateModule, TranslateService } from '@ngx-translate/core'
+import { PlatformServiceInterface } from '../../../../../../../../../libs/common/domain/src/lib/platform.service.interface'
+import { Subscription } from 'rxjs'
+import { MatDialog } from '@angular/material/dialog'
+import { MAX_UPLOAD_SIZE_MB } from '../../../../fields.config'
+
+@Component({
+  selector: 'gn-ui-form-field-online-link-resources',
+  templateUrl: './form-field-online-link-resources.component.html',
+  styleUrls: ['./form-field-online-link-resources.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [
+    FileInputComponent,
+    CommonModule,
+    SortableListComponent,
+    OnlineResourceCardComponent,
+    TextInputComponent,
+    TextAreaComponent,
+    TranslateModule,
+  ],
+})
+export class FormFieldOnlineLinkResourcesComponent {
+  @Input() metadataUuid: string
+  @Input() set value(onlineResources: Array<OnlineResource>) {
+    this.allResources = onlineResources
+    this.linkResources = onlineResources.filter(
+      (res): res is OnlineLinkResource => res.type === 'link'
+    )
+  }
+  @Output() valueChange: EventEmitter<Array<OnlineResource>> =
+    new EventEmitter()
+
+  @ViewChild('dialogTemplate') dialogTemplate: TemplateRef<OnlineResource>
+
+  private allResources: OnlineResource[] = []
+  linkResources: OnlineLinkResource[] = []
+  uploadProgress = undefined
+  uploadSubscription: Subscription = null
+
+  protected MAX_UPLOAD_SIZE_MB = MAX_UPLOAD_SIZE_MB
+
+  constructor(
+    private notificationsService: NotificationsService,
+    private translateService: TranslateService,
+    private platformService: PlatformServiceInterface,
+    private cd: ChangeDetectorRef,
+    private dialog: MatDialog
+  ) {}
+
+  handleFileChange(file: File) {
+    this.uploadProgress = 0
+    this.uploadSubscription = this.platformService
+      .attachFileToRecord(this.metadataUuid, file)
+      .subscribe({
+        next: (event) => {
+          if (event.type === 'progress') {
+            this.uploadProgress = event.progress
+            this.cd.detectChanges()
+          } else if (event.type === 'success') {
+            this.uploadProgress = undefined
+            this.cd.detectChanges()
+            const newResource: OnlineLinkResource = {
+              type: 'link',
+              url: new URL(event.attachment.url),
+              name: event.attachment.fileName,
+            }
+            this.valueChange.emit([...this.allResources, newResource])
+          }
+        },
+        error: (error: Error) => this.handleError(error.message),
+      })
+  }
+
+  handleUploadCancel() {
+    if (this.uploadSubscription) {
+      this.uploadProgress = undefined
+      this.uploadSubscription.unsubscribe()
+    }
+  }
+
+  handleUrlChange(url: string) {
+    try {
+      const name = url.split('/').pop()
+      const newLink: OnlineLinkResource = {
+        type: 'link',
+        url: new URL(url),
+        name,
+      }
+      this.valueChange.emit([...this.allResources, newLink])
+    } catch (e) {
+      this.handleError((e as Error).message)
+    }
+  }
+
+  handleResourcesChange(items: unknown[]) {
+    const links = items as OnlineResource[]
+    const newResources = [
+      ...this.allResources.filter((r) => r.type !== 'link'),
+      ...links,
+    ]
+    this.valueChange.emit(newResources)
+  }
+
+  handleResourceModify(resource: OnlineLinkResource, index: number) {
+    this.openEditDialog(resource, index)
+  }
+
+  private handleError(error: string) {
+    this.uploadProgress = undefined
+    this.notificationsService.showNotification({
+      type: 'error',
+      title: this.translateService.instant(
+        'editor.record.onlineResourceError.title'
+      ),
+      text: `${this.translateService.instant(
+        'editor.record.onlineResourceError.body'
+      )} ${error}`,
+      closeMessage: this.translateService.instant(
+        'editor.record.onlineResourceError.closeMessage'
+      ),
+    })
+  }
+
+  private openEditDialog(resource: OnlineLinkResource, index: number) {
+    const resourceCopy = {
+      ...resource,
+    }
+    this.dialog
+      .open(ModalDialogComponent, {
+        data: {
+          title: this.translateService.instant(
+            'editor.record.form.field.onlineResource.dialogTitle'
+          ),
+          body: this.dialogTemplate,
+          bodyContext: resourceCopy,
+          confirmText: this.translateService.instant(
+            'editor.record.form.field.onlineResource.confirm'
+          ),
+          cancelText: this.translateService.instant(
+            'editor.record.form.field.onlineResource.cancel'
+          ),
+        },
+      })
+      .afterClosed()
+      .subscribe((confirmed: boolean) => {
+        if (!confirmed) return
+        const newLinks = [...this.linkResources]
+        newLinks.splice(index, 1, resourceCopy)
+        this.valueChange.emit([
+          ...this.allResources.filter((r) => r.type !== 'link'),
+          ...newLinks,
+        ])
+      })
+  }
+}

package/src/libs/feature/editor/src/lib/components/record-form/form-field/form-field-overviews/form-field-overviews.component.html

@@ -1,5 +1,11 @@
-<gn-ui-overview-upload
-  [metadataUuid]="metadataUuid"
-  [overview]="firstOverview"
-  (overviewChange)="handleOverviewChange($event)"
-></gn-ui-overview-upload>
+<gn-ui-image-input
+  [maxSizeMB]="MAX_UPLOAD_SIZE_MB"
+  [previewUrl]="firstOverview.url"
+  [altText]="firstOverview.description"
+  (fileChange)="handleFileChange($event)"
+  (urlChange)="handleUrlChange($event)"
+  (altTextChange)="handleAltTextChange($event)"
+  (delete)="handleDelete()"
+  [uploadProgress]="uploadProgress"
+  (uploadCancel)="handleUploadCancel()"
+></gn-ui-image-input>