geonetwork-ui 2.4.0-dev.fe59f179 → 2.4.1-dev.73bac9979

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

@@ -5,6 +5,7 @@ import * as EditorSelectors from './editor.selectors'
 import { CatalogRecord } from '../../../../../../libs/common/domain/src/lib/model/record'
 import { filter } from 'rxjs'
 import { Actions, ofType } from '@ngrx/effects'
+import { EditorFieldIdentification } from '../models'
 
 @Injectable()
 export class EditorFacade {
@@ -25,8 +26,15 @@ export class EditorFacade {
   changedSinceSave$ = this.store.pipe(
     select(EditorSelectors.selectRecordChangedSinceSave)
   )
-  recordFields$ = this.store.pipe(select(EditorSelectors.selectRecordFields))
+  currentSections$ = this.store.pipe(
+    select(EditorSelectors.selectRecordSections)
+  )
   draftSaveSuccess$ = this.actions$.pipe(ofType(EditorActions.draftSaveSuccess))
+  currentPage$ = this.store.pipe(select(EditorSelectors.selectCurrentPage))
+  editorConfig$ = this.store.pipe(select(EditorSelectors.selectEditorConfig))
+  hasRecordChanged$ = this.store.pipe(
+    select(EditorSelectors.selectHasRecordChanged)
+  )
 
   openRecord(
     record: CatalogRecord,
@@ -36,13 +44,30 @@ export class EditorFacade {
     this.store.dispatch(
       EditorActions.openRecord({ record, recordSource, alreadySavedOnce })
     )
+    this.setCurrentPage(0)
   }
 
   saveRecord() {
     this.store.dispatch(EditorActions.saveRecord())
   }
 
+  undoRecordDraft() {
+    this.store.dispatch(EditorActions.undoRecordDraft())
+  }
+
   updateRecordField(field: string, value: unknown) {
     this.store.dispatch(EditorActions.updateRecordField({ field, value }))
   }
+
+  setCurrentPage(page: number) {
+    this.store.dispatch(EditorActions.setCurrentPage({ page }))
+  }
+
+  setFieldVisibility(field: EditorFieldIdentification, visible: boolean) {
+    this.store.dispatch(EditorActions.setFieldVisibility({ field, visible }))
+  }
+
+  checkHasRecordChanged(record: CatalogRecord) {
+    this.store.dispatch(EditorActions.hasRecordChangedSinceDraft({ record }))
+  }
 }

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

@@ -1 +1,12 @@
-export type SaveRecordError = string
+import { EditorField, EditorFieldValue, EditorSection } from '../models'
+
+export type SaveRecordError = Error
+
+export interface EditorFieldWithValue {
+  config: EditorField
+  value: EditorFieldValue
+}
+
+export type EditorSectionWithValues = EditorSection & {
+  fieldsWithValues: EditorFieldWithValue[]
+}

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

@@ -2,8 +2,8 @@ import { Action, createReducer, on } from '@ngrx/store'
 import * as EditorActions from './editor.actions'
 import { CatalogRecord } from '../../../../../../libs/common/domain/src/lib/model/record'
 import { SaveRecordError } from './editor.models'
-import { EditorFieldsConfig } from '../models/fields.model'
-import { DEFAULT_FIELDS } from '../fields.config'
+import { EditorConfig } from '../models'
+import { DEFAULT_CONFIGURATION } from '../fields.config'
 
 export const EDITOR_FEATURE_KEY = 'editor'
 
@@ -13,7 +13,7 @@ export const EDITOR_FEATURE_KEY = 'editor'
  * @property saving
  * @property saveError
  * @property changedSinceSave
- * @property fieldsConfig Configuration for the fields in the editor
+ * @property editorConfig Configuration for the fields in the editor
  */
 export interface EditorState {
   record: CatalogRecord | null
@@ -22,7 +22,9 @@ export interface EditorState {
   saving: boolean
   saveError: SaveRecordError | null
   changedSinceSave: boolean
-  fieldsConfig: EditorFieldsConfig
+  editorConfig: EditorConfig
+  currentPage: number
+  hasRecordChanged: { user: string; date: Date }
 }
 
 export interface EditorPartialState {
@@ -36,7 +38,9 @@ export const initialEditorState: EditorState = {
   saving: false,
   saveError: null,
   changedSinceSave: false,
-  fieldsConfig: DEFAULT_FIELDS,
+  editorConfig: DEFAULT_CONFIGURATION,
+  currentPage: 0,
+  hasRecordChanged: null,
 }
 
 const reducer = createReducer(
@@ -77,6 +81,35 @@ const reducer = createReducer(
   on(EditorActions.markRecordAsChanged, (state) => ({
     ...state,
     changedSinceSave: true,
+  })),
+  on(EditorActions.setCurrentPage, (state, { page }) => ({
+    ...state,
+    currentPage: page,
+  })),
+  on(EditorActions.setFieldVisibility, (state, { field, visible }) => ({
+    ...state,
+    editorConfig: {
+      ...state.editorConfig,
+      pages: state.editorConfig.pages.map((page) => ({
+        ...page,
+        sections: page.sections.map((section) => ({
+          ...section,
+          fields: section.fields.map((f) => {
+            if (f.model === field.model) {
+              return {
+                ...f,
+                hidden: !visible,
+              }
+            }
+            return f
+          }),
+        })),
+      })),
+    },
+  })),
+  on(EditorActions.hasRecordChangedSinceDraftSuccess, (state, { changes }) => ({
+    ...state,
+    hasRecordChanged: changes,
   }))
 )
 

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

@@ -1,5 +1,6 @@
 import { createFeatureSelector, createSelector } from '@ngrx/store'
 import { EDITOR_FEATURE_KEY, EditorState } from './editor.reducer'
+import { EditorSectionWithValues } from './editor.models'
 
 export const selectEditorState =
   createFeatureSelector<EditorState>(EDITOR_FEATURE_KEY)
@@ -34,16 +35,34 @@ export const selectRecordAlreadySavedOnce = createSelector(
   (state: EditorState) => state.alreadySavedOnce
 )
 
-export const selectRecordFieldsConfig = createSelector(
+export const selectEditorConfig = createSelector(
   selectEditorState,
-  (state: EditorState) => state.fieldsConfig
+  (state: EditorState) => state.editorConfig
 )
 
-export const selectRecordFields = createSelector(
+export const selectCurrentPage = createSelector(
   selectEditorState,
-  (state: EditorState) =>
-    state.fieldsConfig.map((fieldConfig) => ({
-      config: fieldConfig,
-      value: state.record?.[fieldConfig.model] ?? null,
-    }))
+  (state: EditorState) => state.currentPage
+)
+
+export const selectRecordSections = createSelector(
+  selectEditorState,
+  (state: EditorState) => {
+    const currentPage = state.editorConfig.pages[state.currentPage]
+    if (!currentPage) {
+      return [] as EditorSectionWithValues[]
+    }
+    return currentPage.sections.map((section) => ({
+      ...section,
+      fieldsWithValues: section.fields.map((fieldConfig) => ({
+        config: fieldConfig,
+        value: state.record?.[fieldConfig.model] ?? null,
+      })),
+    })) as EditorSectionWithValues[]
+  }
+)
+
+export const selectHasRecordChanged = createSelector(
+  selectEditorState,
+  (state: EditorState) => state.hasRecordChanged
 )

package/src/libs/feature/editor/src/lib/components/constraint-card/constraint-card.component.css

@@ -0,0 +1,4 @@
+:host {
+  --gn-ui-button-padding: 8px 8px;
+  --gn-ui-button-rounded: 8px;
+}

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

@@ -0,0 +1,28 @@
+<div class="flex flex-col gap-1 border rounded-lg p-4">
+  <gn-ui-form-field-rich
+    class="mt-[-8px]"
+    [label]="label"
+    [hint]="hint | translate"
+    [value]="constraint_.text ?? ''"
+    (valueChange)="handleConstraintTextChange($event)"
+  ></gn-ui-form-field-rich>
+
+  <div *ngIf="!showUrl" class="flex-none mt-1">
+    <gn-ui-button
+      (buttonClick)="showUrl = true"
+      type="gray"
+      data-cy="add-url-btn"
+    >
+      <ng-icon name="iconoirPlus" class="text-primary"></ng-icon>&nbsp;
+      <span translate>input.image.displayUrlInput</span>
+    </gn-ui-button>
+  </div>
+  <gn-ui-url-input
+    *ngIf="showUrl"
+    class="mt-3.5"
+    [value]="constraint_.url?.toString()"
+    (valueChange)="handleURLChange($event)"
+    [showUploadButton]="false"
+  >
+  </gn-ui-url-input>
+</div>

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

@@ -0,0 +1,71 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  EventEmitter,
+  Input,
+  Output,
+} from '@angular/core'
+import { CommonModule } from '@angular/common'
+import { MarkdownEditorComponent } from '../../../../../../../libs/ui/elements/src'
+import { FormFieldRichComponent } from '../record-form/form-field/form-field-rich/form-field-rich.component'
+import { ButtonComponent, UrlInputComponent } from '../../../../../../../libs/ui/inputs/src'
+import { MatIconModule } from '@angular/material/icon'
+import { TranslateModule } from '@ngx-translate/core'
+import { Constraint } from '../../../../../../../libs/common/domain/src/lib/model/record'
+import {
+  NgIconComponent,
+  provideIcons,
+  provideNgIconsConfig,
+} from '@ng-icons/core'
+import { iconoirPlus } from '@ng-icons/iconoir'
+import { marker } from '@biesbjerg/ngx-translate-extract-marker'
+
+@Component({
+  selector: 'gn-ui-constraint-card',
+  standalone: true,
+  imports: [
+    CommonModule,
+    MarkdownEditorComponent,
+    FormFieldRichComponent,
+    UrlInputComponent,
+    ButtonComponent,
+    MatIconModule,
+    TranslateModule,
+    NgIconComponent,
+  ],
+  providers: [
+    provideIcons({ iconoirPlus }),
+    provideNgIconsConfig({
+      size: '1.5rem',
+    }),
+  ],
+  templateUrl: './constraint-card.component.html',
+  styleUrls: ['./constraint-card.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ConstraintCardComponent {
+  @Input() label: string
+  constraint_: Constraint
+  @Input() set constraint(v: Constraint) {
+    this.constraint_ = v
+    this.showUrl = this.showUrl || !!v.url
+  }
+  @Output() constraintChange = new EventEmitter<Constraint>()
+
+  hint = marker('editor.record.form.constraint.markdown.placeholder')
+  showUrl = false
+
+  handleConstraintTextChange(text: string) {
+    this.constraintChange.emit({
+      ...this.constraint_,
+      text,
+    })
+  }
+
+  handleURLChange(url: string | null) {
+    this.constraintChange.emit({
+      text: this.constraint_.text,
+      ...(url && { url: new URL(url) }),
+    })
+  }
+}

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

@@ -0,0 +1,15 @@
+<div class="gn-ui-card">
+  <gn-ui-thumbnail
+    class="w-[56px] h-[56px] rounded-[4px] overflow-hidden shrink-0"
+    [thumbnailUrl]="contact.organization?.logoUrl?.href"
+    [fit]="'contain'"
+  ></gn-ui-thumbnail>
+  <div class="flex flex-col w-full overflow-hidden leading-snug">
+    <div class="text-[16px] font-bold text-main" data-test="contactCardName">
+      {{ contact.firstName }} {{ contact.lastName }}
+    </div>
+    <div class="text-[14px] text-gray-900" data-test="contactCardEmail">
+      {{ contact.email }}
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,17 @@
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
+import { Individual } from '../../../../../../../libs/common/domain/src/lib/model/record'
+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, ButtonComponent, ThumbnailComponent],
+})
+export class ContactCardComponent {
+  @Input() contact: Individual
+}

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

@@ -0,0 +1,3 @@
+.badge-warning {
+  font-size: 1.4em;
+}

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

@@ -0,0 +1,27 @@
+<div class="flex flex-col gap-3">
+  <gn-ui-autocomplete
+    [placeholder]="placeholder"
+    [displayWithFn]="displayWithFn"
+    [action]="autoCompleteAction"
+    (itemSelected)="handleItemSelection($event)"
+    [preventCompleteOnSelection]="false"
+    [minCharacterCount]="1"
+    [allowSubmit]="false"
+    [clearOnSelection]="true"
+  ></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 }}
+
+      <ng-icon
+        *ngIf="isPlaceWithoutExtent(keyword)"
+        [title]="'editor.form.placeKeywordWithoutExtent' | translate"
+        class="badge-warning"
+        name="matWarningAmberOutline"
+      ></ng-icon>
+    </gn-ui-badge>
+  </div>
+</div>

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

@@ -0,0 +1,100 @@
+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 { TranslateModule } from '@ngx-translate/core'
+import {
+  NgIconComponent,
+  provideIcons,
+  provideNgIconsConfig,
+} from '@ng-icons/core'
+import { matWarningAmberOutline } from '@ng-icons/material-icons/outline'
+
+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,
+    TranslateModule,
+    NgIconComponent,
+  ],
+  providers: [
+    provideIcons({
+      matWarningAmberOutline,
+    }),
+  ],
+})
+export class GenericKeywordsComponent {
+  @Input() keywords: Keyword[]
+  @Input() keywordTypes: KeywordType[]
+  @Input() placeholder: string
+  @Input() allowSubmit: boolean
+  @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/import-record/import-record.component.html

@@ -0,0 +1,46 @@
+<ng-container [ngSwitch]="sectionDisplayed">
+  <ng-container *ngSwitchCase="'mainMenu'">
+    <div
+      data-test="importMenuMainSection"
+      class="mt-2 border border-gray-100 p-2 flex items-center bg-white shadow-2xl rounded-2xl"
+    >
+      <ul class="flex flex-col gap-2 w-full">
+        <li *ngFor="let menuItem of importMenuItems">
+          <gn-ui-button
+            [attr.data-test]="menuItem.dataTest"
+            type="light"
+            extraClass="flex flex-row items-center gap-2 w-full justify-start"
+            (buttonClick)="menuItem.action()"
+            [disabled]="menuItem.disabled"
+            [title]="
+              (menuItem.disabled ? 'editor.temporary.disabled' : '') | translate
+            "
+            ><ng-icon [name]="menuItem.icon"></ng-icon
+            ><span>{{ menuItem.label }}</span></gn-ui-button
+          >
+        </li>
+      </ul>
+    </div>
+  </ng-container>
+  <ng-container *ngSwitchCase="'importExternalFile'">
+    <div
+      data-test="importMenuImportExternalFileSection"
+      class="p-6 flex flex-col gap-2 mt-2 border border-gray-100 bg-white shadow-2xl rounded-2xl"
+    >
+      <div class="flex flex-row items-center gap-2">
+        <gn-ui-button
+          data-test="importMenuImportExternalFileSectionBackButton"
+          type="light"
+          (buttonClick)="displayMainMenu()"
+        >
+          <ng-icon name="iconoirArrowLeft"></ng-icon>
+        </gn-ui-button>
+        <span class="font-bold"> {{ externalImportBackLabel }}</span>
+      </div>
+      <gn-ui-url-input
+        (uploadClick)="importRecord($event)"
+        [disabled]="isRecordImportInProgress"
+      ></gn-ui-url-input>
+    </div>
+  </ng-container>
+</ng-container>

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

@@ -0,0 +1,153 @@
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  EventEmitter,
+  Output,
+} from '@angular/core'
+import { CommonModule } from '@angular/common'
+import { ButtonComponent, UrlInputComponent } from '../../../../../../../libs/ui/inputs/src'
+import { ThumbnailComponent } from '../../../../../../../libs/ui/elements/src'
+import { TranslateModule, TranslateService } from '@ngx-translate/core'
+import { NotificationsService } from '../../../../../../../libs/feature/notifications/src'
+import { RecordsRepositoryInterface } from '../../../../../../../libs/common/domain/src/lib/repository/records-repository.interface'
+import { Router } from '@angular/router'
+import {
+  NgIconComponent,
+  provideIcons,
+  provideNgIconsConfig,
+} from '@ng-icons/core'
+import {
+  iconoirArrowLeft,
+  iconoirAttachment,
+  iconoirImport,
+  iconoirLightBulbOn,
+} from '@ng-icons/iconoir'
+
+interface ImportMenuItems {
+  label: string
+  icon: string
+  action: () => any
+  dataTest: string
+  disabled?: boolean
+}
+
+type ImportMenuPage = 'mainMenu' | 'importExternalFile'
+
+@Component({
+  selector: 'gn-ui-import-record',
+  templateUrl: './import-record.component.html',
+  styleUrls: ['./import-record.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [
+    CommonModule,
+    ButtonComponent,
+    ThumbnailComponent,
+    UrlInputComponent,
+    TranslateModule,
+    NgIconComponent,
+  ],
+  providers: [
+    provideIcons({
+      iconoirImport,
+      iconoirLightBulbOn,
+      iconoirArrowLeft,
+    }),
+    provideNgIconsConfig({
+      size: '1.5em',
+    }),
+  ],
+})
+export class ImportRecordComponent {
+  @Output() closeImportMenu = new EventEmitter<void>()
+
+  importMenuItems: ImportMenuItems[] = [
+    // {
+    //   label: this.translateService.instant('dashboard.importRecord.useModel'),
+    //   icon: 'iconoirLightBulbOn',
+    //   action: () => null,
+    //   dataTest: 'useAModelButton',
+    //   disabled: true,
+    // },
+    {
+      label: this.translateService.instant(
+        'dashboard.importRecord.importExternal'
+      ),
+      icon: 'iconoirImport',
+      action: this.displayImportExternal.bind(this),
+      dataTest: 'importFromUrlButton',
+    },
+  ]
+
+  isRecordImportInProgress = false
+
+  sectionDisplayed: ImportMenuPage = 'mainMenu'
+
+  externalImportBackLabel = this.translateService.instant(
+    'dashboard.importRecord.importExternalLabel'
+  )
+
+  constructor(
+    private router: Router,
+    private translateService: TranslateService,
+    private cdr: ChangeDetectorRef,
+    private notificationsService: NotificationsService,
+    private recordsRepository: RecordsRepositoryInterface
+  ) {}
+
+  displayMainMenu() {
+    this.sectionDisplayed = 'mainMenu'
+    this.cdr.markForCheck()
+  }
+
+  displayImportExternal() {
+    this.sectionDisplayed = 'importExternalFile'
+    this.cdr.markForCheck()
+  }
+
+  importRecord(url: string) {
+    this.isRecordImportInProgress = true
+
+    this.recordsRepository.duplicateExternalRecord(url).subscribe({
+      next: (recordTempId) => {
+        if (recordTempId) {
+          this.notificationsService.showNotification(
+            {
+              type: 'success',
+              title: this.translateService.instant(
+                'editor.record.importFromExternalFile.success.title'
+              ),
+              text: `${this.translateService.instant(
+                'editor.record.importFromExternalFile.success.body'
+              )}`,
+            },
+            2500
+          )
+
+          this.router
+            .navigate(['/edit', recordTempId])
+            .catch((err) => console.error(err))
+        }
+        this.closeImportMenu.next()
+      },
+      error: (error) => {
+        this.notificationsService.showNotification(
+          {
+            type: 'error',
+            title: this.translateService.instant(
+              'editor.record.importFromExternalFile.failure.title'
+            ),
+            text: `${this.translateService.instant(
+              'editor.record.importFromExternalFile.failure.body'
+            )} ${error.message ?? ''}`,
+          },
+          2500,
+          error
+        )
+        this.isRecordImportInProgress = false
+        this.cdr.markForCheck()
+      },
+    })
+  }
+}