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

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

@@ -0,0 +1,90 @@
+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
+  @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,47 @@
+<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
+            "
+            ><mat-icon class="material-symbols-outlined">
+              {{ menuItem.icon }} </mat-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()"
+        >
+          <mat-icon class="material-symbols-outlined">arrow_back</mat-icon>
+        </gn-ui-button>
+        <span class="font-bold"> {{ externalImportBackLabel }}</span>
+      </div>
+      <gn-ui-url-input
+        (valueChange)="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,132 @@
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  EventEmitter,
+  Output,
+} from '@angular/core'
+import { MatIconModule } from '@angular/material/icon'
+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'
+
+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,
+    MatIconModule,
+    ButtonComponent,
+    ThumbnailComponent,
+    UrlInputComponent,
+    TranslateModule,
+  ],
+})
+export class ImportRecordComponent {
+  @Output() closeImportMenu = new EventEmitter<void>()
+
+  importMenuItems: ImportMenuItems[] = [
+    {
+      label: this.translateService.instant('dashboard.importRecord.useModel'),
+      icon: 'highlight',
+      action: () => null,
+      dataTest: 'useAModelButton',
+      disabled: true,
+    },
+    {
+      label: this.translateService.instant(
+        'dashboard.importRecord.importExternal'
+      ),
+      icon: 'cloud_download',
+      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
+        )
+        this.isRecordImportInProgress = false
+        this.cdr.markForCheck()
+      },
+    })
+  }
+}

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/form-field-contacts.component.html

@@ -0,0 +1,40 @@
+<div class="flex flex-col gap-3">
+  <gn-ui-autocomplete
+    [placeholder]="'Choose a contact'"
+    [action]="autoCompleteAction"
+    (itemSelected)="addContact($event)"
+    [displayWithFn]="displayWithFn"
+    [minCharacterCount]="1"
+    [clearOnSelection]="true"
+  >
+  </gn-ui-autocomplete>
+
+  <ng-container *ngIf="contacts.length > 0; else noContact">
+    <ng-container *ngIf="contacts.length === 1">
+      <ng-container *ngFor="let contact of contacts; let index = index">
+        <gn-ui-contact-card
+          [contact]="contact"
+        ></gn-ui-contact-card> </ng-container
+    ></ng-container>
+
+    <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>
+        <gn-ui-contact-card [contact]="contact"></gn-ui-contact-card>
+      </ng-template>
+    </ng-container>
+  </ng-container>
+</div>
+
+<ng-template #noContact>
+  <div
+    class="p-4 border border-primary bg-primary-lightest rounded-lg"
+    translate
+  >
+    editor.record.form.field.contacts.noContact
+  </div>
+</ng-template>

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

@@ -0,0 +1,170 @@
+import { CommonModule } from '@angular/common'
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  EventEmitter,
+  Input,
+  OnChanges,
+  OnDestroy,
+  Output,
+  SimpleChanges,
+} from '@angular/core'
+import {
+  AutocompleteComponent,
+  DropdownSelectorComponent,
+  UiInputsModule,
+} from '../../../../../../../../../libs/ui/inputs/src'
+import { UiWidgetsModule } from '../../../../../../../../../libs/ui/widgets/src'
+import {
+  Individual,
+  Organization,
+} from '../../../../../../../../../libs/common/domain/src/lib/model/record'
+import { TranslateModule } from '@ngx-translate/core'
+import {
+  debounceTime,
+  distinctUntilChanged,
+  firstValueFrom,
+  Observable,
+  Subscription,
+  switchMap,
+} from 'rxjs'
+import { UserModel } from '../../../../../../../../../libs/common/domain/src/lib/model/user'
+import { PlatformServiceInterface } from '../../../../../../../../../libs/common/domain/src/lib/platform.service.interface'
+import { OrganizationsServiceInterface } from '../../../../../../../../../libs/common/domain/src/lib/organizations.service.interface'
+import { ContactCardComponent } from '../../../contact-card/contact-card.component'
+import { createFuzzyFilter } from '../../../../../../../../../libs/util/shared/src'
+import { map } from 'rxjs/operators'
+import { SortableListComponent } from '../../../../../../../../../libs/ui/layout/src'
+
+@Component({
+  selector: 'gn-ui-form-field-contacts',
+  templateUrl: './form-field-contacts.component.html',
+  styleUrls: ['./form-field-contacts.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [
+    DropdownSelectorComponent,
+    UiInputsModule,
+    CommonModule,
+    UiWidgetsModule,
+    AutocompleteComponent,
+    TranslateModule,
+    ContactCardComponent,
+    SortableListComponent,
+  ],
+})
+export class FormFieldContactsComponent implements OnDestroy, OnChanges {
+  @Input() value: Individual[]
+  @Output() valueChange: EventEmitter<Individual[]> = new EventEmitter()
+
+  contacts: Individual[] = []
+
+  subscription: Subscription = new Subscription()
+
+  allUsers$: Observable<UserModel[]>
+
+  allOrganizations: Map<string, Organization> = new Map()
+
+  constructor(
+    private platformServiceInterface: PlatformServiceInterface,
+    private organizationsServiceInterface: OrganizationsServiceInterface,
+    private changeDetectorRef: ChangeDetectorRef
+  ) {
+    this.allUsers$ = this.platformServiceInterface.getUsers()
+  }
+
+  async ngOnChanges(changes: SimpleChanges): Promise<void> {
+    const contactsChanges = changes['value']
+
+    if (contactsChanges.firstChange) {
+      this.allOrganizations = new Map<string, Organization>(
+        (
+          await firstValueFrom(
+            this.organizationsServiceInterface.organisations$
+          )
+        ).map((organization) => [organization.name, organization])
+      )
+    }
+
+    if (contactsChanges.currentValue !== contactsChanges.previousValue) {
+      this.updateContacts()
+
+      this.changeDetectorRef.markForCheck()
+    }
+  }
+
+  updateContacts() {
+    this.contacts = this.value.reduce((acc, contact) => {
+      const completeOrganization = this.allOrganizations.get(
+        contact.organization.name
+      )
+
+      const updatedContact = {
+        ...contact,
+        organization:
+          completeOrganization ??
+          ({ name: contact.organization.name } as Organization),
+      }
+
+      acc.push(updatedContact)
+
+      return acc
+    }, [] as Individual[])
+  }
+
+  handleContactsChanged(items: unknown[]) {
+    const contacts = items as Individual[]
+
+    this.contacts = contacts
+
+    this.valueChange.emit(contacts)
+  }
+
+  /**
+   * gn-ui-autocomplete
+   */
+  displayWithFn: (user: UserModel) => string = (user) =>
+    `${user.name} ${user.surname} ${
+      user.organisation ? `(${user.organisation})` : ''
+    }`
+
+  /**
+   * gn-ui-autocomplete
+   */
+  autoCompleteAction = (query: string) => {
+    const fuzzyFilter = createFuzzyFilter(query)
+    return this.allUsers$.pipe(
+      switchMap((users) => [
+        users.filter((user) => fuzzyFilter(user.username)),
+      ]),
+      map((results) => results.slice(0, 10)),
+      debounceTime(300),
+      distinctUntilChanged()
+    )
+  }
+
+  /**
+   * gn-ui-autocomplete
+   */
+  addContact(contact: UserModel) {
+    const newContact = {
+      firstName: contact.name ?? '',
+      lastName: contact.surname ?? '',
+      organization:
+        this.allOrganizations.get(contact.organisation) ??
+        ({ name: contact.organisation } as Organization),
+      email: contact.email ?? '',
+      role: 'point_of_contact',
+      address: '',
+      phone: '',
+      position: '',
+    } as Individual
+
+    this.valueChange.emit([...this.value, newContact])
+  }
+
+  ngOnDestroy(): void {
+    this.subscription.unsubscribe()
+  }
+}

package/src/libs/feature/editor/src/lib/components/record-form/form-field/form-field-contacts-for-resource/form-field-contacts-for-resource.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/record-form/form-field/form-field-contacts-for-resource/form-field-contacts-for-resource.component.html

@@ -0,0 +1,66 @@
+<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 type="gray" (buttonClick)="addRoleToDisplay(role)">
+        <mat-icon class="material-symbols-outlined text-primary">add</mat-icon>
+        &nbsp;
+        <span translate>{{ roleToLabel(role) }}</span>
+      </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"
+        [allowSubmit]="false"
+      >
+      </gn-ui-autocomplete>
+
+      <ng-container *ngIf="contactsForRessourceByRole.get(role) as contacts">
+        <gn-ui-sortable-list
+          [items]="contacts"
+          (itemsOrderChange)="handleContactsChanged($event, role)"
+          [elementTemplate]="contactTemplate"
+        ></gn-ui-sortable-list>
+        <ng-template #contactTemplate let-contact>
+          <gn-ui-contact-card [contact]="contact"></gn-ui-contact-card>
+        </ng-template>
+      </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>