geonetwork-ui 2.4.0-dev.6c8dcba0 → 2.4.0-dev.6f312e64

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

@@ -5,7 +5,11 @@ import { catchError, map, switchMap } from 'rxjs/operators'
 import * as EditorActions from './editor.actions'
 import { EditorService } from '../services/editor.service'
 import { Store } from '@ngrx/store'
-import { selectRecord, selectRecordFieldsConfig } from './editor.selectors'
+import {
+  selectEditorConfig,
+  selectRecord,
+  selectRecordAlreadySavedOnce,
+} from './editor.selectors'
 import { RecordsRepositoryInterface } from '../../../../../../libs/common/domain/src/lib/repository/records-repository.interface'
 
 @Injectable()
@@ -20,28 +24,31 @@ export class EditorEffects {
       ofType(EditorActions.saveRecord),
       withLatestFrom(
         this.store.select(selectRecord),
-        this.store.select(selectRecordFieldsConfig)
+        this.store.select(selectEditorConfig),
+        this.store.select(selectRecordAlreadySavedOnce)
       ),
-      switchMap(([, record, fieldsConfig]) =>
-        this.editorService.saveRecord(record, fieldsConfig).pipe(
-          switchMap(([record, recordSource]) =>
-            of(
-              EditorActions.saveRecordSuccess(),
-              EditorActions.openRecord({
-                record,
-                alreadySavedOnce: true,
-                recordSource,
-              })
-            )
-          ),
-          catchError((error) =>
-            of(
-              EditorActions.saveRecordFailure({
-                error: error.message,
-              })
+      switchMap(([, record, fieldsConfig, alreadySavedOnce]) =>
+        this.editorService
+          .saveRecord(record, fieldsConfig, !alreadySavedOnce)
+          .pipe(
+            switchMap(([record, recordSource]) =>
+              of(
+                EditorActions.saveRecordSuccess(),
+                EditorActions.openRecord({
+                  record,
+                  alreadySavedOnce: true,
+                  recordSource,
+                })
+              )
+            ),
+            catchError((error) =>
+              of(
+                EditorActions.saveRecordFailure({
+                  error: error.message,
+                })
+              )
             )
           )
-        )
       )
     )
   )
@@ -53,15 +60,29 @@ export class EditorEffects {
     )
   )
 
-  saveRecordDraft$ = createEffect(
-    () =>
-      this.actions$.pipe(
-        ofType(EditorActions.updateRecordField),
-        debounceTime(1000),
-        withLatestFrom(this.store.select(selectRecord)),
-        switchMap(([, record]) => this.editorService.saveRecordAsDraft(record))
-      ),
-    { dispatch: false }
+  saveRecordDraft$ = createEffect(() =>
+    this.actions$.pipe(
+      ofType(EditorActions.updateRecordField),
+      debounceTime(1000),
+      withLatestFrom(this.store.select(selectRecord)),
+      switchMap(([, record]) => this.editorService.saveRecordAsDraft(record)),
+      map(() => EditorActions.draftSaveSuccess())
+    )
+  )
+
+  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(() =>

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

@@ -25,7 +25,12 @@ 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))
 
   openRecord(
     record: CatalogRecord,
@@ -41,7 +46,15 @@ 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 }))
   }
+
+  setCurrentPage(page: number) {
+    this.store.dispatch(EditorActions.setCurrentPage({ page }))
+  }
 }

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

@@ -1 +1,12 @@
+import { EditorField, EditorFieldValue, EditorSection } from '../models'
+
 export type SaveRecordError = string
+
+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,8 @@ export interface EditorState {
   saving: boolean
   saveError: SaveRecordError | null
   changedSinceSave: boolean
-  fieldsConfig: EditorFieldsConfig
+  editorConfig: EditorConfig
+  currentPage: number
 }
 
 export interface EditorPartialState {
@@ -36,7 +37,8 @@ export const initialEditorState: EditorState = {
   saving: false,
   saveError: null,
   changedSinceSave: false,
-  fieldsConfig: DEFAULT_FIELDS,
+  editorConfig: DEFAULT_CONFIGURATION,
+  currentPage: 0,
 }
 
 const reducer = createReducer(
@@ -77,6 +79,10 @@ const reducer = createReducer(
   on(EditorActions.markRecordAsChanged, (state) => ({
     ...state,
     changedSinceSave: true,
+  })),
+  on(EditorActions.setCurrentPage, (state, { page }) => ({
+    ...state,
+    currentPage: page,
   }))
 )
 

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,29 @@ 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[]
+  }
 )

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

@@ -0,0 +1,25 @@
+<div class="flex flex-row gap-2 items-center">
+  <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>
+  <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/online-resource-card/online-resource-card.component.html

@@ -0,0 +1,35 @@
+<div class="gn-ui-card">
+  <div
+    class="bg-gray-100 w-[56px] h-[56px] rounded-[4px] text-primary grid justify-center items-center shrink-0"
+  >
+    <mat-icon class="material-symbols-outlined">attach_file</mat-icon>
+  </div>
+  <div class="flex flex-col w-full items-start overflow-hidden leading-snug">
+    <div class="text-[16px] font-bold text-main" data-test="card-title">
+      {{ title }}
+    </div>
+    <div
+      class="text-[14px] text-gray-900"
+      *ngIf="subtitle"
+      data-test="card-subtitle"
+    >
+      <span>{{ subtitle }}</span>
+      <span *ngIf="fileSize">
+        •
+        {{
+          'editor.record.form.field.onlineResource.fileSize'
+            | translate: { sizeMB: fileSize }
+        }}</span
+      >
+      <span *ngIf="identifierInService"> • {{ identifierInService }}</span>
+    </div>
+    <button
+      class="gn-ui-link text-[14px]"
+      translate
+      (click)="modifyClick.emit(onlineResource)"
+      data-test="card-modify"
+    >
+      editor.record.form.field.onlineResource.modify
+    </button>
+  </div>
+</div>

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

@@ -0,0 +1,79 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  EventEmitter,
+  Input,
+  Output,
+} from '@angular/core'
+import { CommonModule } from '@angular/common'
+import {
+  DatasetDownloadDistribution,
+  OnlineLinkResource,
+  OnlineResource,
+} from '../../../../../../../libs/common/domain/src/lib/model/record'
+import { ThumbnailComponent } from '../../../../../../../libs/ui/elements/src'
+import { MatIconModule } from '@angular/material/icon'
+import { bytesToMegabytes, getFileFormat } from '../../../../../../../libs/util/shared/src'
+import { ButtonComponent } from '../../../../../../../libs/ui/inputs/src'
+import { TranslateModule } from '@ngx-translate/core'
+
+@Component({
+  selector: 'gn-ui-online-resource-card',
+  standalone: true,
+  imports: [
+    CommonModule,
+    ThumbnailComponent,
+    MatIconModule,
+    ButtonComponent,
+    TranslateModule,
+  ],
+  templateUrl: './online-resource-card.component.html',
+  styleUrls: ['./online-resource-card.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class OnlineResourceCardComponent {
+  @Input() onlineResource: OnlineResource
+  @Output() modifyClick = new EventEmitter<OnlineResource>()
+
+  get title(): string {
+    switch (this.onlineResource.type) {
+      case 'link':
+      case 'service':
+      case 'download':
+        return (
+          this.onlineResource.name ??
+          this.onlineResource.description ??
+          '(unknown)'
+        )
+      case 'endpoint':
+        return this.onlineResource.description
+    }
+  }
+
+  get subtitle(): string {
+    switch (this.onlineResource.type) {
+      case 'service':
+        return `${this.onlineResource.accessServiceProtocol}`
+      case 'endpoint':
+        return `${this.onlineResource.protocol}`
+      case 'link':
+      case 'download':
+        return this.getFormat(this.onlineResource)
+    }
+  }
+
+  get fileSize(): string {
+    if (this.onlineResource.type !== 'download') return ''
+    if (!this.onlineResource.sizeBytes) return ''
+    return bytesToMegabytes(this.onlineResource.sizeBytes).toLocaleString()
+  }
+
+  get identifierInService(): string {
+    if (this.onlineResource.type !== 'service') return ''
+    return this.onlineResource.identifierInService ?? ''
+  }
+
+  getFormat(onlineResource: OnlineLinkResource | DatasetDownloadDistribution) {
+    return (getFileFormat(onlineResource) || '').toUpperCase()
+  }
+}

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

@@ -0,0 +1,86 @@
+<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>
+    </ng-container>
+  </div>
+  <div
+    class="mt-8"
+    *ngIf="
+      roleSectionsToDisplay && roleSectionsToDisplay.length > 0;
+      else noContact
+    "
+    data-test="displayedRoles"
+  >
+    <div
+      *ngFor="
+        let role of roleSectionsToDisplay;
+        let index = index;
+        let isLast = last
+      "
+      class="flex flex-col gap-4"
+    >
+      <div class="flex flex-row justify-between">
+        <span class="font-bold text-base" translate>{{
+          roleToLabel(role)
+        }}</span>
+      </div>
+
+      <gn-ui-autocomplete
+        [placeholder]="'Choose a contact'"
+        [action]="autoCompleteAction"
+        (itemSelected)="addContact($event, role)"
+        [displayWithFn]="displayWithFn"
+        [minCharacterCount]="1"
+        [clearOnSelection]="true"
+      >
+      </gn-ui-autocomplete>
+
+      <ng-container *ngIf="contactsForRessourceByRole.get(role) as contacts">
+        <ng-container *ngIf="contacts.length > 1">
+          <gn-ui-sortable-list
+            [items]="contacts"
+            (itemsOrderChange)="handleContactsChanged($event)"
+            [elementTemplate]="contactTemplate"
+          ></gn-ui-sortable-list>
+          <ng-template #contactTemplate let-contact>
+            <div class="flex flex-row items-center gap-2">
+              <gn-ui-contact-card
+                [contact]="contact"
+                [removable]="false"
+              ></gn-ui-contact-card>
+            </div>
+          </ng-template>
+        </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>
+      </ng-container>
+
+      <hr class="border-t-[#D6D3D1] mt-4 mb-6" *ngIf="!isLast" />
+    </div>
+  </div>
+  <ng-template #noContact>
+    <div
+      class="p-4 border border-primary bg-primary-lightest rounded-lg"
+      translate
+    >
+      editor.record.form.field.contactsForResource.noContact
+    </div>
+  </ng-template>
+</div>