geonetwork-ui 2.4.0-dev.78565730 → 2.4.0-dev.7a893adc

package/src/libs/api/metadata-converter/src/lib/iso19139/write-parts.ts

@@ -14,7 +14,9 @@ import {
   UpdateFrequencyCode,
   UpdateFrequencyCustom,
 } from '../../../../../../libs/common/domain/src/lib/model/record'
+import { ThesaurusModel } from '../../../../../../libs/common/domain/src/lib/model/thesaurus'
 import format from 'date-fns/format'
+import { Geometry } from 'geojson'
 import {
   ChainableFunction,
   fallback,
@@ -44,8 +46,8 @@ import {
   setTextContent,
 } from '../xml-utils'
 import { readKind } from './read-parts'
+import { writeGeometry } from './utils/geometry'
 import { namePartsToFull } from './utils/individual-name'
-import { ThesaurusModel } from '../../../../../../libs/common/domain/src/lib/model/thesaurus'
 
 export function writeCharacterString(
   text: string
@@ -101,6 +103,14 @@ export function writeDate(
   )
 }
 
+export function writeDecimal(
+  decimal: number
+): ChainableFunction<XmlElement, XmlElement> {
+  return tap(
+    pipe(findChildOrCreate('gco:Decimal'), setTextContent(decimal.toString()))
+  )
+}
+
 export function getProgressCode(status: RecordStatus): string {
   switch (status) {
     case 'completed':
@@ -1184,3 +1194,62 @@ export function writeTemporalExtents(
     )
   )(rootEl)
 }
+
+export function writeSpatialExtents(record: DatasetRecord, rootEl: XmlElement) {
+  const appendBoundingPolygon = (geometry?: Geometry) => {
+    if (!geometry) return null
+    return pipe(
+      createElement('gmd:EX_BoundingPolygon'),
+      appendChildren(
+        pipe(
+          createElement('gmd:polygon'),
+          appendChildren(() => writeGeometry(geometry))
+        )
+      )
+    )
+  }
+
+  const appendGeographicBoundingBox = (
+    bbox?: [number, number, number, number]
+  ) => {
+    if (!bbox) return null
+    return pipe(
+      createElement('gmd:EX_GeographicBoundingBox'),
+      appendChildren(
+        pipe(createElement('gmd:westBoundLongitude'), writeDecimal(bbox[0])),
+        pipe(createElement('gmd:eastBoundLongitude'), writeDecimal(bbox[2])),
+        pipe(createElement('gmd:southBoundLatitude'), writeDecimal(bbox[1])),
+        pipe(createElement('gmd:northBoundLatitude'), writeDecimal(bbox[3]))
+      )
+    )
+  }
+
+  const appendGeographicDescription = (description?: string) => {
+    if (!description) return null
+    return pipe(
+      createElement('gmd:EX_GeographicDescription'),
+      createChild('gmd:geographicIdentifier'),
+      createChild('gmd:MD_Identifier'),
+      createChild('gmd:code'),
+      writeCharacterString(description)
+    )
+  }
+
+  pipe(
+    findOrCreateIdentification(),
+    findNestedChildOrCreate('gmd:extent', 'gmd:EX_Extent'),
+    removeChildrenByName('gmd:geographicElement'),
+    appendChildren(
+      ...record.spatialExtents.map((extent) =>
+        pipe(
+          createElement('gmd:geographicElement'),
+          appendChildren(
+            appendBoundingPolygon(extent.geometry),
+            appendGeographicBoundingBox(extent.bbox),
+            appendGeographicDescription(extent.description)
+          )
+        )
+      )
+    )
+  )(rootEl)
+}

package/src/libs/api/metadata-converter/src/lib/xml-utils.ts

@@ -6,6 +6,7 @@ import {
   XmlText,
 } from '@rgrove/parse-xml'
 import { ChainableFunction, fallback } from './function-utils'
+
 export { XmlDocument, XmlElement } from '@rgrove/parse-xml'
 
 export class XmlParseError extends Error {
@@ -115,6 +116,10 @@ export function allChildrenElement(element: XmlElement): Array<XmlElement> {
   ] as Array<XmlElement>
 }
 
+export function firstChildElement(element: XmlElement): XmlElement {
+  return allChildrenElement(element)[0] ?? null
+}
+
 /**
  * Will return all matching elements nested according to the given
  * names (similar to a path), starting form the input element;
@@ -175,11 +180,11 @@ export function findParent(
 
 export function readText(): ChainableFunction<XmlElement, string> {
   return (el) => {
-    const textNode =
-      el && Array.isArray(el.children)
-        ? (el.children.find((node) => node.type === 'text') as XmlText)
-        : null
-    return textNode ? textNode.text : null
+    if (!el) return null
+    const textNode = Array.isArray(el.children)
+      ? (el.children.find((node) => node.type === 'text') as XmlText)
+      : null
+    return textNode ? textNode.text : ''
   }
 }
 
@@ -228,6 +233,7 @@ export function xmlToString(
 ${padding}<${el.name}${attrs}/>
 ${parentPadding}`
   }
+
   return `
 ${padding}<${el.name}${attrs}>${children}</${el.name}>
 ${parentPadding}`
@@ -307,11 +313,13 @@ function getTreeRoot(element: XmlElement): XmlElement {
 
 // stays on the parent element
 // if the given elements are part of a subtree, will add the root of subtree
+// will filter out falsy elements
 export function appendChildren(
   ...childrenFns: Array<ChainableFunction<void, XmlElement>>
 ): ChainableFunction<XmlElement, XmlElement> {
   return (element) => {
     if (!element) return null
+    childrenFns = childrenFns.filter((fn) => fn)
     element.children.push(...childrenFns.map((fn) => fn()).map(getTreeRoot))
     element.children.forEach((el) => (el.parent = element))
     return element

package/src/libs/api/repository/src/lib/gn4/gn4-repository.ts

@@ -9,6 +9,7 @@ import {
   from,
   Observable,
   of,
+  Subject,
   switchMap,
   throwError,
 } from 'rxjs'
@@ -24,7 +25,6 @@ import {
 } from '../../../../../../libs/common/domain/src/lib/model/search'
 import { catchError, map, tap } from 'rxjs/operators'
 import {
-  BaseConverter,
   findConverterForDocument,
   Gn4Converter,
   Gn4SearchResults,
@@ -33,8 +33,13 @@ import {
 import { CatalogRecord } from '../../../../../../libs/common/domain/src/lib/model/record'
 import { HttpErrorResponse } from '@angular/common/http'
 
+const TEMPORARY_ID_PREFIX = 'TEMP-ID-'
+
 @Injectable()
 export class Gn4Repository implements RecordsRepositoryInterface {
+  _draftsChanged = new Subject<void>()
+  draftsChanged$ = this._draftsChanged.asObservable()
+
   constructor(
     private gn4SearchApi: SearchApiService,
     private gn4SearchHelper: ElasticsearchService,
@@ -238,13 +243,14 @@ export class Gn4Repository implements RecordsRepositoryInterface {
       switchMap(async (recordAsXml) => {
         const converter = findConverterForDocument(recordAsXml)
         const record = await converter.readRecord(recordAsXml)
-        record.uniqueIdentifier = `TEMP-ID-${Date.now()}`
+        record.uniqueIdentifier = `${TEMPORARY_ID_PREFIX}${Date.now()}`
         record.title = `${record.title} (Copy)`
         const xml = await converter.writeRecord(record, recordAsXml)
         window.localStorage.setItem(
           this.getLocalStorageKeyForRecord(record.uniqueIdentifier),
           xml
         )
+        this._draftsChanged.next()
         return [record, xml, false] as [CatalogRecord, string, false]
       })
     )
@@ -295,17 +301,26 @@ export class Gn4Repository implements RecordsRepositoryInterface {
     )
   }
 
+  deleteRecord(uniqueIdentifier: string): Observable<void> {
+    return this.gn4RecordsApi.deleteRecord(uniqueIdentifier)
+  }
+
+  generateTemporaryId(): string {
+    return `${TEMPORARY_ID_PREFIX}${Date.now()}`
+  }
+
   saveRecordAsDraft(
     record: CatalogRecord,
     referenceRecordSource?: string
   ): Observable<string> {
     return this.serializeRecordToXml(record, referenceRecordSource).pipe(
-      tap((recordXml) =>
+      tap((recordXml) => {
         window.localStorage.setItem(
           this.getLocalStorageKeyForRecord(record.uniqueIdentifier),
           recordXml
         )
-      )
+        this._draftsChanged.next()
+      })
     )
   }
 
@@ -313,6 +328,7 @@ export class Gn4Repository implements RecordsRepositoryInterface {
     window.localStorage.removeItem(
       this.getLocalStorageKeyForRecord(uniqueIdentifier)
     )
+    this._draftsChanged.next()
   }
 
   recordHasDraft(uniqueIdentifier: string): boolean {
@@ -323,6 +339,10 @@ export class Gn4Repository implements RecordsRepositoryInterface {
     )
   }
 
+  isRecordNotYetSaved(uniqueIdentifier: string): boolean {
+    return uniqueIdentifier.startsWith(TEMPORARY_ID_PREFIX)
+  }
+
   // generated by copilot
   getAllDrafts(): Observable<CatalogRecord[]> {
     const items = { ...window.localStorage }

package/src/libs/api/repository/src/lib/gn4/platform/gn4-platform.mapper.ts

@@ -79,6 +79,16 @@ export class Gn4PlatformMapper {
         (thes) => keyword.thesaurusKey === thes.key
       )
 
+      let bbox: [number, number, number, number]
+      if (keyword.coordWest) {
+        bbox = [
+          parseFloat(keyword.coordWest),
+          parseFloat(keyword.coordSouth),
+          parseFloat(keyword.coordEast),
+          parseFloat(keyword.coordNorth),
+        ]
+      }
+
       return {
         key,
         label,
@@ -90,7 +100,8 @@ export class Gn4PlatformMapper {
           url: new URL(matchedThesaurus?.url),
           type: matchedThesaurus?.dname as KeywordType,
         },
-      }
+        ...(bbox && { bbox }),
+      } as Keyword
     })
   }
 

package/src/libs/api/repository/src/lib/gn4/platform/gn4-platform.service.ts

@@ -1,5 +1,5 @@
 import { Injectable } from '@angular/core'
-import { Observable, combineLatest, of, switchMap } from 'rxjs'
+import { combineLatest, Observable, of, switchMap } from 'rxjs'
 import { catchError, map, shareReplay, tap } from 'rxjs/operators'
 import {
   MeApiService,
@@ -192,17 +192,16 @@ export class Gn4PlatformService implements PlatformServiceInterface {
     if (this.keywordsByThesauri[uri]) {
       return this.keywordsByThesauri[uri]
     }
-    const keywords$: Observable<KeywordApiResponse[]> =
-      this.registriesApiService.searchKeywords(
-        null,
-        this.langService.iso3,
-        1000,
-        0,
-        null,
-        null,
-        null,
-        `${uri}*`
-      ) as Observable<KeywordApiResponse[]>
+    const keywords$ = this.registriesApiService.searchKeywords(
+      null,
+      this.langService.iso3,
+      1000,
+      0,
+      null,
+      null,
+      null,
+      `${uri}*`
+    ) as Observable<KeywordApiResponse[]>
 
     this.keywordsByThesauri[uri] = combineLatest([
       keywords$,
@@ -221,6 +220,38 @@ export class Gn4PlatformService implements PlatformServiceInterface {
     return this.keywordsByThesauri[uri]
   }
 
+  searchKeywordsInThesaurus(query: string, thesaurusId: string) {
+    return this.allThesaurus$.pipe(
+      switchMap((thesauri) => {
+        const strippedThesaurusId = thesaurusId.replace(
+          'geonetwork.thesaurus.',
+          ''
+        )
+        if (!thesauri.find((thes) => thes.key === strippedThesaurusId))
+          return of([])
+        return this.registriesApiService
+          .searchKeywords(
+            query,
+            this.langService.iso3,
+            100,
+            0,
+            null,
+            [strippedThesaurusId],
+            null
+          )
+          .pipe(
+            map((keywords: KeywordApiResponse[]) =>
+              this.mapper.keywordsFromApi(
+                keywords,
+                thesauri,
+                this.langService.iso3
+              )
+            )
+          )
+      })
+    )
+  }
+
   getUserFeedbacks(uuid: string): Observable<UserFeedback[]> {
     return this.userfeedbackApiService.getUserComments(uuid).pipe(
       map((userFeedbacks) =>

package/src/libs/common/domain/src/lib/model/record/contact.model.ts

@@ -1,4 +1,5 @@
 import { Organization } from './organization.model'
+import { marker } from '@biesbjerg/ngx-translate-extract-marker'
 
 export const RoleValues = [
   'unspecified',
@@ -24,6 +25,33 @@ export const RoleValues = [
   'user', // Party who uses the resource
 ]
 
+export const RoleLabels = new Map<Role, string>([
+  ['unspecified', marker('domain.contact.role.unspecified')],
+  ['other', marker('domain.contact.role.other')],
+  ['author', marker('domain.contact.role.author')],
+  ['collaborator', marker('domain.contact.role.collaborator')],
+  ['contributor', marker('domain.contact.role.contributor')],
+  ['custodian', marker('domain.contact.role.custodian')],
+  ['distributor', marker('domain.contact.role.distributor')],
+  ['editor', marker('domain.contact.role.editor')],
+  ['funder', marker('domain.contact.role.funder')],
+  ['mediator', marker('domain.contact.role.mediator')],
+  ['originator', marker('domain.contact.role.originator')],
+  ['owner', marker('domain.contact.role.owner')],
+  ['point_of_contact', marker('domain.contact.role.point_of_contact')],
+  [
+    'principal_investigator',
+    marker('domain.contact.role.principal_investigator'),
+  ],
+  ['processor', marker('domain.contact.role.processor')],
+  ['publisher', marker('domain.contact.role.publisher')],
+  ['resource_provider', marker('domain.contact.role.resource_provider')],
+  ['rights_holder', marker('domain.contact.role.rights_holder')],
+  ['sponsor', marker('domain.contact.role.sponsor')],
+  ['stakeholder', marker('domain.contact.role.stakeholder')],
+  ['user', marker('domain.contact.role.user')],
+])
+
 export type Role = typeof RoleValues[number]
 
 export interface Individual {

package/src/libs/common/domain/src/lib/model/record/metadata.model.ts

@@ -67,6 +67,7 @@ export interface Keyword {
   description?: string
   type: KeywordType
   thesaurus?: ThesaurusModel
+  bbox?: [number, number, number, number]
 }
 // languages should be expressed using two-letters ISO 639-1 codes
 export type LanguageCode = string
@@ -159,7 +160,8 @@ export interface GraphicOverview {
 }
 
 export interface DatasetSpatialExtent {
-  geometry: Geometry
+  bbox?: [number, number, number, number]
+  geometry?: Geometry
   description?: string
 }
 

package/src/libs/common/domain/src/lib/platform.service.interface.ts

@@ -21,6 +21,10 @@ export abstract class PlatformServiceInterface {
     keywordTypes: KeywordType[]
   ): Observable<Keyword[]>
   abstract getKeywordsByUri(uri: string): Observable<Keyword[]>
+  abstract searchKeywordsInThesaurus(
+    query: string,
+    thesaurusId: string
+  ): Observable<Keyword[]>
   abstract getUserFeedbacks(recordUuid: string): Observable<UserFeedback[]>
   abstract postUserFeedbacks(recordUuid: UserFeedback): Observable<void>
 }

package/src/libs/common/domain/src/lib/repository/records-repository.interface.ts

@@ -52,6 +52,14 @@ export abstract class RecordsRepositoryInterface {
     referenceRecordSource?: string
   ): Observable<string>
 
+  /**
+   * @param uniqueIdentifier
+   * @returns Observable<void> Returns when record is deleted
+   */
+  abstract deleteRecord(uniqueIdentifier: string): Observable<void>
+
+  abstract generateTemporaryId(): string
+
   /**
    * @param record
    * @param referenceRecordSource
@@ -64,7 +72,9 @@ export abstract class RecordsRepositoryInterface {
 
   abstract clearRecordDraft(uniqueIdentifier: string): void
   abstract recordHasDraft(uniqueIdentifier: string): boolean
+  abstract isRecordNotYetSaved(uniqueIdentifier: string): boolean
 
   /** will return all pending drafts, both published and not published */
   abstract getAllDrafts(): Observable<CatalogRecord[]>
+  abstract draftsChanged$: Observable<void>
 }

package/src/libs/feature/editor/src/lib/+state/editor.actions.ts

@@ -29,6 +29,8 @@ export const saveRecordFailure = createAction(
 
 export const draftSaveSuccess = createAction('[Editor] Draft save success')
 
+export const undoRecordDraft = createAction('[Editor] Undo record draft')
+
 export const setCurrentPage = createAction(
   '[Editor] Set current page',
   props<{ page: number }>()

package/src/libs/feature/editor/src/lib/+state/editor.effects.ts

@@ -70,6 +70,21 @@ export class EditorEffects {
     )
   )
 
+  undoRecordDraft$ = createEffect(() =>
+    this.actions$.pipe(
+      ofType(EditorActions.undoRecordDraft),
+      withLatestFrom(this.store.select(selectRecord)),
+      switchMap(([, record]) => this.editorService.undoRecordDraft(record)),
+      map(([record, recordSource, alreadySavedOnce]) =>
+        EditorActions.openRecord({
+          record,
+          alreadySavedOnce,
+          recordSource,
+        })
+      )
+    )
+  )
+
   checkHasChangesOnOpen$ = createEffect(() =>
     this.actions$.pipe(
       ofType(EditorActions.openRecord),

package/src/libs/feature/editor/src/lib/+state/editor.facade.ts

@@ -46,6 +46,10 @@ export class EditorFacade {
     this.store.dispatch(EditorActions.saveRecord())
   }
 
+  undoRecordDraft() {
+    this.store.dispatch(EditorActions.undoRecordDraft())
+  }
+
   updateRecordField(field: string, value: unknown) {
     this.store.dispatch(EditorActions.updateRecordField({ field, value }))
   }

package/src/libs/feature/editor/src/lib/components/contact-card/contact-card.component.html

@@ -0,0 +1,25 @@
+<div class="flex flex-row gap-4 items-center">
+  <div class="flex flex-row border border-gray-200 rounded-xl p-4 gap-4 w-full">
+    <gn-ui-thumbnail
+      class="w-[56px] h-[56px] rounded-[4px]"
+      [thumbnailUrl]="contact.organization.logoUrl?.href"
+      [fit]="'contain'"
+    ></gn-ui-thumbnail>
+    <div class="flex flex-col w-full">
+      <div class="flex flex-row justify-between">
+        <span class="flex flex-wrap font-bold w-full"
+          >{{ contact.firstName }} {{ contact.lastName }}</span
+        >
+      </div>
+      <div>{{ contact.email }}</div>
+    </div>
+  </div>
+  <gn-ui-button
+    *ngIf="removable"
+    data-test="removeContactButton"
+    type="light"
+    extraClass="w-[20px] h-[20px] flex items-center justify-center"
+    (buttonClick)="removeContact(contact)"
+    ><span class="material-symbols-outlined"> close </span>
+  </gn-ui-button>
+</div>

package/src/libs/feature/editor/src/lib/components/contact-card/contact-card.component.ts

@@ -0,0 +1,30 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  EventEmitter,
+  Input,
+  Output,
+} from '@angular/core'
+import { Individual } from '../../../../../../../libs/common/domain/src/lib/model/record'
+import { MatIconModule } from '@angular/material/icon'
+import { CommonModule } from '@angular/common'
+import { ButtonComponent } from '../../../../../../../libs/ui/inputs/src'
+import { ThumbnailComponent } from '../../../../../../../libs/ui/elements/src'
+
+@Component({
+  selector: 'gn-ui-contact-card',
+  templateUrl: './contact-card.component.html',
+  styleUrls: ['./contact-card.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [CommonModule, MatIconModule, ButtonComponent, ThumbnailComponent],
+})
+export class ContactCardComponent {
+  @Input() contact: Individual
+  @Input() removable = true
+  @Output() contactRemoved = new EventEmitter<Individual>()
+
+  removeContact(contact: Individual) {
+    this.contactRemoved.emit(contact)
+  }
+}

package/src/libs/feature/editor/src/lib/components/generic-keywords/generic-keywords.component.html

@@ -0,0 +1,26 @@
+<div class="flex flex-col gap-3">
+  <gn-ui-autocomplete
+    [placeholder]="placeholder"
+    [displayWithFn]="displayWithFn"
+    [action]="autoCompleteAction"
+    (itemSelected)="handleItemSelection($event)"
+    [preventCompleteOnSelection]="true"
+    [minCharacterCount]="0"
+    [allowSubmit]="false"
+  ></gn-ui-autocomplete>
+  <div class="flex gap-2 flex-wrap">
+    <gn-ui-badge
+      *ngFor="let keyword of keywords"
+      [removable]="true"
+      (badgeRemoveClicked)="removeKeyword(keyword)"
+      >{{ keyword.label }}
+
+      <mat-icon
+        *ngIf="isPlaceWithoutExtent(keyword)"
+        [title]="'editor.form.placeKeywordWithoutExtent' | translate"
+        class="material-symbols-outlined"
+        >warning</mat-icon
+      >
+    </gn-ui-badge>
+  </div>
+</div>

package/src/libs/feature/editor/src/lib/components/generic-keywords/generic-keywords.component.ts

@@ -0,0 +1,89 @@
+import { CommonModule } from '@angular/common'
+import {
+  ChangeDetectionStrategy,
+  Component,
+  EventEmitter,
+  Input,
+  Output,
+} from '@angular/core'
+import { PlatformServiceInterface } from '../../../../../../../libs/common/domain/src/lib/platform.service.interface'
+import {
+  AutocompleteComponent,
+  DropdownSelectorComponent,
+  UiInputsModule,
+} from '../../../../../../../libs/ui/inputs/src'
+import { UiWidgetsModule } from '../../../../../../../libs/ui/widgets/src'
+import { map } from 'rxjs'
+import { Keyword } from '../../../../../../../libs/common/domain/src/lib/model/record'
+import { KeywordType } from '../../../../../../../libs/common/domain/src/lib/model/thesaurus'
+import { MatIconModule } from '@angular/material/icon'
+import { TranslateModule } from '@ngx-translate/core'
+
+type AutocompleteItem = { title: string; value: Keyword }
+
+@Component({
+  selector: 'gn-ui-generic-keywords',
+  templateUrl: './generic-keywords.component.html',
+  styleUrls: ['./generic-keywords.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [
+    DropdownSelectorComponent,
+    UiInputsModule,
+    CommonModule,
+    UiWidgetsModule,
+    AutocompleteComponent,
+    MatIconModule,
+    TranslateModule,
+  ],
+})
+export class GenericKeywordsComponent {
+  @Input() keywords: Keyword[]
+  @Input() keywordTypes: KeywordType[]
+  @Input() placeholder: string
+  @Output() changedKeywords: EventEmitter<Keyword[]> = new EventEmitter()
+  @Output() addedKeyword: EventEmitter<Keyword> = new EventEmitter()
+  @Output() deletedKeyword: EventEmitter<Keyword> = new EventEmitter()
+
+  displayWithFn = (item: AutocompleteItem) => {
+    return `${item.title} (${item.value.thesaurus?.name})`
+  }
+
+  autoCompleteAction = (query: string) => {
+    return this.platformService.searchKeywords(query, this.keywordTypes).pipe(
+      map((keywords) =>
+        keywords.map((keyword) => {
+          return { title: keyword.label, value: keyword }
+        })
+      )
+    )
+  }
+
+  constructor(private platformService: PlatformServiceInterface) {}
+
+  handleItemSelection(item: AutocompleteItem) {
+    this.addKeyword(item.value)
+  }
+
+  addKeyword(keyword: Keyword) {
+    const duplicatedKeyword = this.keywords.find(
+      (k) => k.label === keyword.label
+    )
+    if (!duplicatedKeyword) {
+      this.keywords = [...this.keywords, keyword]
+      this.changedKeywords.emit(this.keywords)
+      this.addedKeyword.emit(keyword)
+    }
+  }
+
+  removeKeyword(keyword: Keyword) {
+    this.keywords = this.keywords.filter((k) => k.label !== keyword.label)
+    this.changedKeywords.emit(this.keywords)
+    this.deletedKeyword.emit(keyword)
+  }
+
+  isPlaceWithoutExtent(keyword: Keyword): boolean {
+    if (keyword.type !== 'place') return false
+    return !keyword.bbox
+  }
+}

package/src/libs/feature/editor/src/lib/components/overview-upload/overview-upload.component.html

@@ -1,8 +1,9 @@
 <gn-ui-image-input
   [maxSizeMB]="5"
   [previewUrl]="resourceUrl"
-  [altText]="resourceFileName"
+  [altText]="altText"
   (fileChange)="handleFileChange($event)"
   (urlChange)="handleUrlChange($event)"
+  (altTextChange)="handleAltTextChange($event)"
   (delete)="handleDelete()"
 ></gn-ui-image-input>