geonetwork-ui 2.2.0-dev.f866474c → 2.3.0-dev.139106e0

package/src/libs/{ui/inputs/src/lib → feature/editor/src/lib/components/record-form}/form-field/form-field-file/form-field-file.component.ts

@@ -1,11 +1,14 @@
+import { CommonModule } from '@angular/common'
 import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
-import { FormControl } from '@angular/forms'
+import { FormControl, ReactiveFormsModule } from '@angular/forms'
 
 @Component({
   selector: 'gn-ui-form-field-file',
   templateUrl: './form-field-file.component.html',
   styleUrls: ['./form-field-file.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [CommonModule, ReactiveFormsModule],
 })
 export class FormFieldFileComponent {
   @Input() control!: FormControl

package/src/libs/{ui/inputs/src/lib → feature/editor/src/lib/components/record-form}/form-field/form-field-object/form-field-object.component.ts

@@ -5,5 +5,6 @@ import { ChangeDetectionStrategy, Component } from '@angular/core'
   templateUrl: './form-field-object.component.html',
   styleUrls: ['./form-field-object.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
 })
 export class FormFieldObjectComponent {}

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

@@ -0,0 +1,20 @@
+<gn-ui-form-field-wrapper [label]="label" [hint]="hint">
+  <gn-ui-button
+    form-field-interaction
+    [extraClass]="getButtonExtraClass()"
+    (buttonClick)="togglePreview()"
+  >
+    <span class="material-symbols-outlined mr-1 gn-ui-icon-small">{{
+      preview ? 'visibility' : 'visibility_off'
+    }}</span>
+    {{ preview ? 'WYSIWYG' : 'Markdown' }}
+  </gn-ui-button>
+  <gn-ui-markdown-editor
+    class="h-full"
+    [preview]="preview"
+    [helperText]="helperText"
+    [placeholder]="placeholder"
+    [textContent]="control.value"
+    (textContentChanged)="handleTextContentChanged($event)"
+  ></gn-ui-markdown-editor>
+</gn-ui-form-field-wrapper>

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

@@ -0,0 +1,44 @@
+import { CommonModule } from '@angular/common'
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
+import { FormControl, ReactiveFormsModule } from '@angular/forms'
+import { MarkdownEditorComponent } from '../../../../../../../../../libs/ui/elements/src'
+import { ButtonComponent } from '../../../../../../../../../libs/ui/inputs/src'
+import { FormFieldWrapperComponent } from '../../../../../../../../../libs/ui/layout/src'
+
+@Component({
+  selector: 'gn-ui-form-field-rich',
+  templateUrl: './form-field-rich.component.html',
+  styleUrls: ['./form-field-rich.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [
+    CommonModule,
+    ReactiveFormsModule,
+    MarkdownEditorComponent,
+    FormFieldWrapperComponent,
+    ButtonComponent,
+  ],
+})
+export class FormFieldRichComponent {
+  @Input() control!: FormControl
+  @Input() label: string
+  @Input() hint: string
+  @Input() helperText: string
+  @Input() placeholder = 'Votre texte ici' //TODO: translate
+
+  preview = false
+
+  getButtonExtraClass() {
+    return `${
+      this.preview ? 'text-gray-200 bg-gray-900' : 'text-gray-900 bg-gray-200'
+    } rounded-[1.25rem] p-[0.375rem] text-xs font-medium w-24`
+  }
+
+  togglePreview() {
+    this.preview = !this.preview
+  }
+
+  handleTextContentChanged(textContent: string) {
+    this.control.setValue(textContent)
+  }
+}

package/src/libs/{ui/inputs/src/lib → feature/editor/src/lib/components/record-form}/form-field/form-field-simple/form-field-simple.component.ts

@@ -1,11 +1,14 @@
+import { CommonModule } from '@angular/common'
 import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
-import { FormControl } from '@angular/forms'
+import { FormControl, ReactiveFormsModule } from '@angular/forms'
 
 @Component({
   selector: 'gn-ui-form-field-simple',
   templateUrl: './form-field-simple.component.html',
   styleUrls: ['./form-field-simple.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [CommonModule, ReactiveFormsModule],
 })
 export class FormFieldSimpleComponent {
   @Input() type: 'date' | 'url' | 'text' | 'number' | 'list' | 'toggle'

package/src/libs/{ui/inputs/src/lib → feature/editor/src/lib/components/record-form}/form-field/form-field-spatial-extent/form-field-spatial-extent.component.ts

@@ -5,5 +5,6 @@ import { ChangeDetectionStrategy, Component } from '@angular/core'
   templateUrl: './form-field-spatial-extent.component.html',
   styleUrls: ['./form-field-spatial-extent.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
 })
 export class FormFieldSpatialExtentComponent {}

package/src/libs/{ui/inputs/src/lib → feature/editor/src/lib/components/record-form}/form-field/form-field-temporal-extent/form-field-temporal-extent.component.ts

@@ -5,5 +5,6 @@ import { ChangeDetectionStrategy, Component } from '@angular/core'
   templateUrl: './form-field-temporal-extent.component.html',
   styleUrls: ['./form-field-temporal-extent.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
 })
 export class FormFieldTemporalExtentComponent {}

package/src/libs/{ui/inputs/src/lib → feature/editor/src/lib/components/record-form}/form-field/form-field.component.html

@@ -24,6 +24,30 @@
       >cancel</mat-icon
     >
   </div>
+  <ng-container *ngIf="isTitle">
+    <div class="flex justify-between items-center gap-3">
+      <h2
+        #titleInput
+        class="grow text-3xl font-normal"
+        [gnUiEditableLabel]="true"
+        (editableLabelChanged)="formControl.setValue($event)"
+      >
+        {{ formControl.value }}
+      </h2>
+      <span
+        class="material-symbols-outlined gn-ui-icon-small m-2 cursor-pointer"
+        (click)="focusTitleInput()"
+        >edit</span
+      >
+      <span
+        class="material-symbols-outlined gn-ui-icon-small m-2"
+        [matTooltip]="config.hintKey | translate"
+        matTooltipPosition="above"
+      >
+        help
+      </span>
+    </div>
+  </ng-container>
   <ng-container *ngIf="isSimpleField">
     <gn-ui-form-field-simple
       [type]="simpleType"
@@ -39,12 +63,12 @@
       [invalid]="isFieldInvalid"
     ></gn-ui-form-field-file>
   </ng-container>
-  <ng-container *ngIf="isRichField">
+  <ng-container *ngIf="isAbstract">
     <gn-ui-form-field-rich
-      class="grow"
+      class="h-[8rem]"
       [control]="formControl"
-      [readonly]="isFieldLocked"
-      [invalid]="isFieldInvalid"
+      [label]="config.labelKey | translate"
+      [hint]="config.hintKey | translate"
     ></gn-ui-form-field-rich>
   </ng-container>
   <ng-container *ngIf="isArrayField">

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

@@ -0,0 +1,121 @@
+import { CommonModule } from '@angular/common'
+import {
+  ChangeDetectionStrategy,
+  Component,
+  ElementRef,
+  Input,
+  Output,
+  ViewChild,
+} from '@angular/core'
+import { FormControl, ReactiveFormsModule } from '@angular/forms'
+import { MatIconModule } from '@angular/material/icon'
+import { MatTooltipModule } from '@angular/material/tooltip'
+import { EditableLabelDirective } from '../../../../../../../../libs/ui/inputs/src'
+import { TranslateModule } from '@ngx-translate/core'
+import { Observable } from 'rxjs'
+import { FormFieldArrayComponent } from './form-field-array/form-field-array.component'
+import { FormFieldFileComponent } from './form-field-file/form-field-file.component'
+import { FormFieldObjectComponent } from './form-field-object/form-field-object.component'
+import { FormFieldRichComponent } from './form-field-rich/form-field-rich.component'
+import { FormFieldSimpleComponent } from './form-field-simple/form-field-simple.component'
+import { FormFieldSpatialExtentComponent } from './form-field-spatial-extent/form-field-spatial-extent.component'
+import { FormFieldTemporalExtentComponent } from './form-field-temporal-extent/form-field-temporal-extent.component'
+import { FormFieldConfig } from './form-field.model'
+
+@Component({
+  selector: 'gn-ui-form-field',
+  templateUrl: './form-field.component.html',
+  styleUrls: ['./form-field.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [
+    CommonModule,
+    ReactiveFormsModule,
+    EditableLabelDirective,
+    MatIconModule,
+    MatTooltipModule,
+    FormFieldSimpleComponent,
+    FormFieldRichComponent,
+    FormFieldObjectComponent,
+    FormFieldSpatialExtentComponent,
+    FormFieldTemporalExtentComponent,
+    FormFieldFileComponent,
+    FormFieldArrayComponent,
+    TranslateModule,
+  ],
+})
+export class FormFieldComponent {
+  @Input() model: string
+  @Input() config: FormFieldConfig
+  @Input() set value(v: unknown) {
+    this.formControl.setValue(v, {
+      emitEvent: false,
+    })
+  }
+  @Output() valueChange: Observable<unknown>
+
+  @ViewChild('titleInput') titleInput: ElementRef
+
+  formControl = new FormControl()
+
+  constructor() {
+    this.valueChange = this.formControl.valueChanges
+  }
+
+  focusTitleInput() {
+    this.titleInput.nativeElement.children[0].focus()
+  }
+
+  get simpleType() {
+    return this.config.type as
+      | 'date'
+      | 'url'
+      | 'text'
+      | 'number'
+      | 'list'
+      | 'toggle'
+  }
+
+  get isSimpleField() {
+    return (
+      this.config.type === 'text' ||
+      this.config.type === 'number' ||
+      this.config.type === 'date' ||
+      this.config.type === 'list' ||
+      this.config.type === 'url' ||
+      this.config.type === 'toggle'
+    )
+  }
+  get isFileField() {
+    return this.config.type === 'file'
+  }
+  get isSpatialExtentField() {
+    return this.config.type === 'spatial_extent'
+  }
+  get isTemporalExtentField() {
+    return this.config.type === 'temporal_extent'
+  }
+  get isArrayField() {
+    return this.config.type === 'array'
+  }
+  get isObjectField() {
+    return this.config.type === 'object'
+  }
+
+  get isFieldOk() {
+    return !this.config.locked && !this.config.invalid
+  }
+  get isFieldLocked() {
+    return this.config.locked
+  }
+  get isFieldInvalid() {
+    return !this.config.locked && this.config.invalid
+  }
+
+  get isTitle() {
+    return this.model === 'title'
+  }
+  get isAbstract() {
+    return this.model === 'abstract'
+  }
+}

package/src/libs/{ui/inputs/src/lib → feature/editor/src/lib/components/record-form}/form-field/form-field.model.ts

@@ -13,7 +13,6 @@ type BaseFormFieldType =
 type AllFormFieldType = BaseFormFieldType | 'object' | 'array'
 
 interface FormFieldConfigBase {
-  model?: string
   type: AllFormFieldType
   labelKey: string
   hintKey?: string

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

@@ -0,0 +1,11 @@
+<div class="flex flex-col gap-6 p-6">
+  <ng-container *ngFor="let field of fields$ | async; trackBy: fieldTracker">
+    <gn-ui-form-field
+      *ngIf="field.config.formFieldConfig && !field.config.hidden"
+      [model]="field.config.model"
+      [config]="field.config.formFieldConfig"
+      [value]="field.value"
+      (valueChange)="handleFieldValueChange(field, $event)"
+    ></gn-ui-form-field>
+  </ng-container>
+</div>

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

@@ -0,0 +1,30 @@
+import { CommonModule } from '@angular/common'
+import { ChangeDetectionStrategy, Component } from '@angular/core'
+import { EditorFacade } from '../../+state/editor.facade'
+import { EditorFieldState, EditorFieldValue } from '../../models/fields.model'
+import { FormFieldComponent } from './form-field'
+
+@Component({
+  selector: 'gn-ui-record-form',
+  templateUrl: './record-form.component.html',
+  styleUrls: ['./record-form.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [CommonModule, FormFieldComponent],
+})
+export class RecordFormComponent {
+  fields$ = this.facade.recordFields$
+
+  constructor(public facade: EditorFacade) {}
+
+  handleFieldValueChange(field: EditorFieldState, newValue: EditorFieldValue) {
+    if (!field.config.model) {
+      return
+    }
+    this.facade.updateRecordField(field.config.model, newValue)
+  }
+
+  fieldTracker(index: number, field: EditorFieldState) {
+    return field.config.model
+  }
+}

package/src/libs/feature/editor/src/lib/expressions.ts

@@ -0,0 +1,16 @@
+import { EditorFieldState, EditorFieldValue } from './models/fields.model'
+
+export type ExpressionEvaluator = (field: EditorFieldState) => EditorFieldValue
+
+export function evaluate(expression: string): ExpressionEvaluator {
+  if (expression.match(/^\${.*}$/)) {
+    return evaluate(expression.slice(2, -1))
+  }
+  const operator = expression.split('(')[0]
+  switch (operator) {
+    case 'dateNow':
+      return () => new Date()
+    default:
+      throw new Error(`Unknown operator: ${operator}`)
+  }
+}

package/src/libs/feature/editor/src/lib/feature-editor.module.ts

@@ -1,15 +1,20 @@
+import { CommonModule } from '@angular/common'
+import { HttpClientModule, HttpClientXsrfModule } from '@angular/common/http'
 import { NgModule } from '@angular/core'
 import { MatNativeDateModule } from '@angular/material/core'
 import { MatDatepickerModule } from '@angular/material/datepicker'
 import { MatFormFieldModule } from '@angular/material/form-field'
-import { WizardComponent } from './components/wizard/wizard.component'
-import { WizardFieldComponent } from './components/wizard-field/wizard-field.component'
 import { UiInputsModule } from '../../../../../libs/ui/inputs/src'
 import { UiWidgetsModule } from '../../../../../libs/ui/widgets/src'
+import { EffectsModule } from '@ngrx/effects'
+import { StoreModule } from '@ngrx/store'
 import { TranslateModule } from '@ngx-translate/core'
+import { EditorEffects } from './+state/editor.effects'
+import { EditorFacade } from './+state/editor.facade'
+import * as fromEditor from './+state/editor.reducer'
+import { WizardFieldComponent } from './components/wizard-field/wizard-field.component'
 import { WizardSummarizeComponent } from './components/wizard-summarize/wizard-summarize.component'
-import { CommonModule } from '@angular/common'
-import { HttpClientModule, HttpClientXsrfModule } from '@angular/common/http'
+import { WizardComponent } from './components/wizard/wizard.component'
 
 @NgModule({
   declarations: [
@@ -27,9 +32,15 @@ import { HttpClientModule, HttpClientXsrfModule } from '@angular/common/http'
     MatFormFieldModule,
     HttpClientModule,
     HttpClientXsrfModule,
+    StoreModule.forFeature(
+      fromEditor.EDITOR_FEATURE_KEY,
+      fromEditor.editorReducer
+    ),
+    EffectsModule.forFeature([EditorEffects]),
   ],
   exports: [WizardComponent, WizardSummarizeComponent],
+  providers: [EditorFacade],
 })
 export class FeatureEditorModule {}
-export * from './services/wizard.service'
 export * from './models/index'
+export * from './services/wizard.service'

package/src/libs/feature/editor/src/lib/fields.config.ts

@@ -0,0 +1,35 @@
+import { EditorFieldsConfig } from './models/fields.model'
+
+export const DEFAULT_FIELDS: EditorFieldsConfig = [
+  {
+    model: 'title',
+    formFieldConfig: {
+      labelKey: 'Metadata title',
+      type: 'text',
+    },
+  },
+  {
+    model: 'abstract',
+    formFieldConfig: {
+      labelKey: 'Abstract',
+      type: 'rich',
+    },
+  },
+  {
+    model: 'uniqueIdentifier',
+    formFieldConfig: {
+      labelKey: 'Unique identifier',
+      type: 'text',
+      locked: true,
+    },
+  },
+  {
+    model: 'recordUpdated',
+    formFieldConfig: {
+      labelKey: 'Record Updated',
+      type: 'text',
+      locked: true,
+    },
+    onSaveProcess: '${dateNow()}',
+  },
+]

package/src/libs/feature/editor/src/lib/models/fields.model.ts

@@ -0,0 +1,29 @@
+import { FormFieldConfig } from '../components/record-form/form-field'
+
+// Expressions should be enclosed in `${}` to be recognized as such
+// eg. ${dateNow()}
+export type EditorFieldExpression = `$\{${string}}`
+
+export interface EditorFieldConfig {
+  // configuration of the form field used as presentation; optional, nothing shown if not defined
+  formFieldConfig?: FormFieldConfig
+
+  // name of the target field in the record; will not change the record directly if not defined
+  model?: string
+
+  // a hidden field won't show but can still be used to modify the record
+  // FIXME: currently this is redundant with an absence of formFieldConfig but necessary for clarity
+  hidden?: boolean
+
+  // the result of this expression will replace the field value on save
+  onSaveProcess?: EditorFieldExpression
+}
+
+export type EditorFieldsConfig = EditorFieldConfig[]
+
+export type EditorFieldValue = string | number | boolean | unknown
+
+export interface EditorFieldState {
+  config: EditorFieldConfig
+  value: string | number | boolean | unknown
+}

package/src/libs/feature/editor/src/lib/services/editor.service.ts

@@ -1,59 +1,30 @@
 import { Inject, Injectable, Optional } from '@angular/core'
-import { toModel, toXml } from '../../../../../../libs/api/metadata-converter/src'
+import {
+  findConverterForDocument,
+  Iso19139Converter,
+} from '../../../../../../libs/api/metadata-converter/src'
 import { Configuration } from '../../../../../../libs/data-access/gn4/src'
-import { BehaviorSubject, Observable } from 'rxjs'
-import { finalize, map, switchMap, take, tap } from 'rxjs/operators'
+import { from, Observable } from 'rxjs'
+import { map, switchMap } from 'rxjs/operators'
 import { HttpClient } from '@angular/common/http'
-import { FormFieldConfig } from '../../../../../../libs/ui/inputs/src'
 import { CatalogRecord } from '../../../../../../libs/common/domain/src/lib/model/record'
-
-export interface FormField {
-  config: FormFieldConfig
-  value: string | number | boolean | unknown
-}
+import { EditorFieldsConfig } from '../models/fields.model'
+import { evaluate } from '../expressions'
 
 @Injectable({
   providedIn: 'root',
 })
 export class EditorService {
-  private record$ = new BehaviorSubject<CatalogRecord | null>(null)
-  private fieldsConfig: FormFieldConfig[] = [
-    {
-      model: 'title',
-      labelKey: 'Metadata title',
-      type: 'text',
-    },
-    {
-      model: 'abstract',
-      labelKey: 'Abstract',
-      type: 'rich',
-    },
-    {
-      model: 'uniqueIdentifier',
-      labelKey: 'Unique identifier',
-      type: 'text',
-      locked: true,
-    },
-  ]
-
   private apiUrl = `${this.apiConfiguration?.basePath || '/geonetwork/srv/api'}`
 
-  fields$: Observable<FormField[]> = this.record$.pipe(
-    map((record) =>
-      this.fieldsConfig.map((fieldConfig) => ({
-        config: fieldConfig,
-        value: record?.[fieldConfig.model] || null,
-      }))
-    )
-  )
-  saving$ = new BehaviorSubject(false)
-
   constructor(
     private http: HttpClient,
     @Optional()
     @Inject(Configuration)
     private apiConfiguration: Configuration
   ) {}
+
+  // TODO: use the catalog repository instead
   loadRecordByUuid(uuid: string): Observable<CatalogRecord> {
     return this.http
       .get(`${this.apiUrl}/records/${uuid}/formatters/xml`, {
@@ -62,21 +33,38 @@ export class EditorService {
           Accept: 'application/xml',
         },
       })
-      .pipe(map((response) => toModel(response.toString())))
+      .pipe(
+        switchMap((response) =>
+          findConverterForDocument(response).readRecord(response.toString())
+        )
+      )
   }
 
-  saveCurrentRecord(): Observable<void> {
-    return this.record$.pipe(
-      take(1),
-      tap((record) => {
-        if (!record)
-          throw new Error('Save record failed: no record currently open')
-        this.saving$.next(true)
-      }),
-      switchMap((record) =>
+  // returns the record as it was when saved
+  saveRecord(
+    record: CatalogRecord,
+    fieldsConfig: EditorFieldsConfig
+  ): Observable<CatalogRecord> {
+    const savedRecord = { ...record }
+
+    // run onSave processes
+    for (const field of fieldsConfig) {
+      if (field.onSaveProcess && field.model) {
+        const evaluator = evaluate(field.onSaveProcess)
+        savedRecord[field.model] = evaluator({
+          config: field,
+          value: record[field.model],
+        })
+      }
+    }
+
+    // TODO: use the catalog repository instead
+    // TODO: use converter based on the format of the record before change
+    return from(new Iso19139Converter().writeRecord(savedRecord)).pipe(
+      switchMap((recordXml) =>
         this.http.put(
           `${this.apiUrl}/records?metadataType=METADATA&uuidProcessing=OVERWRITE&transformWith=_none_&publishToAll=on`,
-          toXml(record),
+          recordXml,
           {
             headers: {
               'Content-Type': 'application/xml',
@@ -85,23 +73,7 @@ export class EditorService {
           }
         )
       ),
-      map(() => undefined),
-      finalize(() => {
-        this.saving$.next(false)
-      })
+      map(() => savedRecord)
     )
   }
-
-  setCurrentRecord(record: CatalogRecord) {
-    this.record$.next(record)
-  }
-
-  updateRecordField(fieldName: string, value: unknown) {
-    this.record$
-      .pipe(
-        take(1),
-        map((record) => ({ ...record, [fieldName]: value }))
-      )
-      .subscribe((record) => this.record$.next(record))
-  }
 }

package/src/libs/feature/map/src/index.ts

@@ -17,3 +17,4 @@ export * from './lib/layers-panel/layers-panel.component'
 export * from './lib/add-layer-from-catalog/add-layer-from-catalog.component'
 export * from './lib/add-layer-from-catalog/add-layer-record-preview/add-layer-record-preview.component'
 export * from './lib/map-container/map-container.component'
+export * from './lib/geocoding/geocoding.component'

package/src/libs/feature/map/src/lib/add-layer-from-catalog/add-layer-record-preview/add-layer-record-preview.component.ts

@@ -59,7 +59,11 @@ export class AddLayerRecordPreviewComponent extends RecordPreviewComponent {
         name: link.name,
       })
     } else if (link.accessServiceProtocol === 'wmts') {
-      return this.mapUtils.getWmtsLayerFromCapabilities(link)
+      return of({
+        url: link.url.toString(),
+        type: MapContextLayerTypeEnum.WMTS,
+        name: link.name,
+      })
     }
     return throwError(() => 'protocol not supported')
   }

package/src/libs/feature/map/src/lib/add-layer-from-file/add-layer-from-file.component.html

@@ -0,0 +1,21 @@
+<div class="flex flex-col gap-2 my-2">
+  <div class="flex items-center gap-4">
+    <div class="grow rounded-md border-2 border-gray-200">
+      <gn-ui-drag-and-drop-file-input
+        (fileChange)="handleFileChange($event)"
+        [accept]="acceptedMimeType.join(',')"
+        [placeholder]="'map.addFromFile.placeholder' | translate"
+        class="placeholder-grey"
+      ></gn-ui-drag-and-drop-file-input>
+    </div>
+  </div>
+  <p class="text-sm text-gray-600" translate>map.help.addFromFile</p>
+</div>
+
+<div *ngIf="errorMessage" class="text-red-500 mt-2">
+  {{ errorMessage }}
+</div>
+
+<div *ngIf="successMessage" class="text-green-500 mt-2">
+  {{ successMessage }}
+</div>