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

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,27 @@
+<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"
+          data-test="contactCardName"
+          >{{ contact.firstName }} {{ contact.lastName }}</span
+        >
+      </div>
+      <div 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/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>

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

@@ -1,13 +1,16 @@
+import { CommonModule } from '@angular/common'
 import {
   ChangeDetectionStrategy,
-  ChangeDetectorRef,
   Component,
+  EventEmitter,
   Input,
-  OnInit,
+  Output,
 } from '@angular/core'
-import { CommonModule } from '@angular/common'
+import { GraphicOverview } from '../../../../../../../libs/common/domain/src/lib/model/record'
 import { RecordsApiService } from '../../../../../../../libs/data-access/gn4/src'
+import { NotificationsService } from '../../../../../../../libs/feature/notifications/src'
 import { UiInputsModule } from '../../../../../../../libs/ui/inputs/src'
+import { TranslateService } from '@ngx-translate/core'
 
 @Component({
   selector: 'gn-ui-overview-upload',
@@ -17,54 +20,94 @@ import { UiInputsModule } from '../../../../../../../libs/ui/inputs/src'
   styleUrls: ['./overview-upload.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class OverviewUploadComponent implements OnInit {
+export class OverviewUploadComponent {
   @Input() metadataUuid: string
+  _overview: GraphicOverview | null
+  @Input()
+  set overview(value: GraphicOverview | null) {
+    this._overview = value
+    if (this._overview) {
+      this.recordsApiService.getAllResources(this.metadataUuid).subscribe({
+        next: (resources) => {
+          const resource = resources.find(
+            (r) => r.url === this._overview.url.toString()
+          )
+          if (resource) {
+            this.resourceFileName = resource.filename
+          }
+        },
+        error: this.errorHandle,
+      })
+      this.resourceUrl = this._overview.url.toString()
+      this.altText = this._overview.description
+    } else {
+      this.resourceUrl = ''
+      this.resourceFileName = ''
+      this.altText = ''
+    }
+  }
+
+  @Output() overviewChange = new EventEmitter<GraphicOverview | null>()
 
-  resourceFileName: string
   resourceUrl: string
+  resourceFileName: string
+  altText: string
 
   constructor(
     private recordsApiService: RecordsApiService,
-    private cd: ChangeDetectorRef
+    private notificationsService: NotificationsService,
+    private translateService: TranslateService
   ) {}
 
-  ngOnInit(): void {
-    this.recordsApiService
-      .getAllResources(this.metadataUuid)
-      .subscribe((resources) => {
-        this.resourceFileName = resources[0]?.filename
-        this.resourceUrl = resources[0]?.url
-        this.cd.markForCheck()
-      })
-  }
-
   handleFileChange(file: File) {
     this.recordsApiService
       .putResource(this.metadataUuid, file, 'public')
-      .subscribe((resource) => {
-        this.resourceFileName = resource.filename
-        this.resourceUrl = resource.url
-        this.cd.markForCheck()
+      .subscribe({
+        next: (resource) => {
+          this.overviewChange.emit({
+            url: new URL(resource.url),
+            description: resource.filename,
+          })
+        },
+        error: this.errorHandle,
       })
   }
 
   handleUrlChange(url: string) {
     this.recordsApiService
       .putResourceFromURL(this.metadataUuid, url, 'public')
-      .subscribe((resource) => {
-        this.resourceFileName = resource.filename
-        this.resourceUrl = resource.url
-        this.cd.markForCheck()
+      .subscribe({
+        next: (resource) => {
+          this.overviewChange.emit({
+            url: new URL(resource.url),
+            description: resource.filename,
+          })
+        },
+        error: this.errorHandle,
       })
   }
 
+  handleAltTextChange(newAltText: string) {
+    this.overviewChange.emit({
+      url: new URL(this.resourceUrl),
+      description: newAltText,
+    })
+  }
+
   handleDelete() {
-    this.recordsApiService
-      .delResource(this.metadataUuid, this.resourceFileName)
-      .subscribe(() => {
-        this.resourceFileName = null
-        this.resourceUrl = null
-        this.cd.markForCheck()
-      })
+    this.overviewChange.emit(null)
+  }
+
+  private errorHandle = (error) => {
+    this.notificationsService.showNotification({
+      type: 'error',
+      title: this.translateService.instant('editor.record.resourceError.title'),
+      text: `${this.translateService.instant(
+        'editor.record.resourceError.body'
+      )} ${error.message}`,
+      closeMessage: this.translateService.instant(
+        'editor.record.resourceError.closeMessage'
+      ),
+    })
   }
 }

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,76 @@
+<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
+            [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>
+      </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>