geonetwork-ui 2.10.0-dev.fb2893f44 → 2.10.0

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

@@ -1,4 +1,4 @@
-import { Injectable, inject } from '@angular/core'
+import { inject, Injectable } from '@angular/core'
 import { Observable, switchMap } from 'rxjs'
 import { map, tap } from 'rxjs/operators'
 import { CatalogRecord } from '../../../../../../libs/common/domain/src/lib/model/record'
@@ -16,7 +16,8 @@ export class EditorService {
   saveRecord(
     record: CatalogRecord,
     recordSource: string,
-    fieldsConfig: EditorConfig
+    fieldsConfig: EditorConfig,
+    publish: boolean
   ): Observable<[CatalogRecord, string]> {
     const savedRecord = { ...record }
 
@@ -27,22 +28,17 @@ export class EditorService {
     // run onSave processes
     for (const field of fields) {
       if (field.onSaveProcess && field.model) {
-        const evaluator = evaluate(field.onSaveProcess)
+        const { evaluator } = evaluate(field.onSaveProcess)
         savedRecord[field.model] = evaluator({
-          model: field.model,
-          value: record[field.model],
+          globals: {
+            record,
+          },
         })
       }
     }
-    let publishToAll = true
-    // if the record is new, generate a new unique identifier and pass publishToAll as false
-    if (!record.uniqueIdentifier) {
-      savedRecord.uniqueIdentifier = null
-      publishToAll = false
-    }
 
     return this.recordsRepository
-      .saveRecord(savedRecord, recordSource, publishToAll)
+      .saveRecord(savedRecord, recordSource, publish)
       .pipe(
         switchMap((uniqueIdentifier) =>
           this.recordsRepository.openRecordForEdition(uniqueIdentifier)

package/src/libs/feature/notify-reuse/src/index.ts

@@ -1 +1,2 @@
+export * from './lib/edit-delete-reuse-buttons/edit-delete-reuse-buttons.component'
 export * from './lib/notify-reuse-form/notify-reuse-form.component'

package/src/libs/feature/notify-reuse/src/lib/edit-delete-reuse-buttons/edit-delete-reuse-buttons.component.html

@@ -0,0 +1,23 @@
+<div class="flex flex-row gap-6">
+  <gn-ui-button
+    class="grow"
+    type="primary"
+    extraClass="w-full flex flex-row justify-between"
+    [style.--gn-ui-button-rounded]="'10px'"
+    (buttonClick)="editReuse()"
+    data-cy="editReuseButton"
+  >
+    <span translate>notify.reuse.record.action.edit</span>
+    <ng-icon class="mr-[5px]" name="iconoirEdit"></ng-icon>
+  </gn-ui-button>
+  <gn-ui-button
+    type="outline"
+    [style.--gn-ui-button-rounded]="'10px'"
+    [style.--gn-ui-button-height]="'50px'"
+    [title]="'notify.reuse.record.action.delete' | translate"
+    (buttonClick)="deleteReuse()"
+    data-cy="deleteReuseButton"
+  >
+    <ng-icon name="iconoirTrash"></ng-icon>
+  </gn-ui-button>
+</div>

package/src/libs/feature/notify-reuse/src/lib/edit-delete-reuse-buttons/edit-delete-reuse-buttons.component.ts

@@ -0,0 +1,114 @@
+import { LocationStrategy } from '@angular/common'
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core'
+import { MatDialog } from '@angular/material/dialog'
+import { RecordsRepositoryInterface } from '../../../../../../libs/common/domain/src/lib/repository/records-repository.interface'
+import { NotificationsService } from '../../../../../../libs/feature/notifications/src'
+import { MdViewFacade } from '../../../../../../libs/feature/record/src'
+import { RouterFacade } from '../../../../../../libs/feature/router/src'
+import { ConfirmationDialogComponent } from '../../../../../../libs/ui/elements/src'
+import { ButtonComponent } from '../../../../../../libs/ui/inputs/src'
+import { NgIcon, provideIcons, provideNgIconsConfig } from '@ng-icons/core'
+import { iconoirEdit, iconoirTrash } from '@ng-icons/iconoir'
+import {
+  TranslateDirective,
+  TranslatePipe,
+  TranslateService,
+} from '@ngx-translate/core'
+import { filter, map, take } from 'rxjs/operators'
+import { REUSE_FORM_URL } from '../../index'
+import { navigateToLightEdit } from '../utils/url'
+
+@Component({
+  selector: 'gn-ui-edit-delete-reuse-buttons',
+  templateUrl: './edit-delete-reuse-buttons.component.html',
+  styleUrl: './edit-delete-reuse-buttons.component.css',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [ButtonComponent, TranslatePipe, TranslateDirective, NgIcon],
+  viewProviders: [
+    provideIcons({
+      iconoirEdit,
+      iconoirTrash,
+    }),
+    provideNgIconsConfig({
+      size: '1.5em',
+    }),
+  ],
+})
+export class EditDeleteReuseButtonsComponent {
+  metadataViewFacade = inject(MdViewFacade)
+  private recordsRepository = inject(RecordsRepositoryInterface)
+  private notificationsService = inject(NotificationsService)
+  private routerFacade = inject(RouterFacade)
+  private translateService = inject(TranslateService)
+  private dialog = inject(MatDialog)
+  reuseFormUrl = inject(REUSE_FORM_URL, { optional: true })
+  private locationStrategy = inject(LocationStrategy)
+
+  metadataUuid$ = this.metadataViewFacade.metadata$.pipe(
+    map((record) => record?.uniqueIdentifier),
+    filter(Boolean)
+  )
+
+  editReuse() {
+    this.metadataUuid$.pipe(take(1)).subscribe((uniqueIdentifier) => {
+      navigateToLightEdit(
+        this.reuseFormUrl,
+        this.locationStrategy.getBaseHref(),
+        uniqueIdentifier
+      )
+    })
+  }
+
+  deleteReuse() {
+    const dialogRef = this.dialog.open(ConfirmationDialogComponent, {
+      data: {
+        title: this.translateService.instant(
+          'record.reuse.delete.confirmation.title'
+        ),
+        message: this.translateService.instant(
+          'record.reuse.delete.confirmation.message'
+        ),
+        confirmText: this.translateService.instant(
+          'record.reuse.delete.confirmation.confirmText'
+        ),
+        cancelText: this.translateService.instant(
+          'record.reuse.delete.confirmation.cancelText'
+        ),
+        focusCancel: true,
+      },
+      restoreFocus: true,
+    })
+
+    dialogRef.afterClosed().subscribe((confirmed) => {
+      if (confirmed) {
+        this.performReuseDeletion()
+      }
+    })
+  }
+
+  private performReuseDeletion() {
+    this.metadataUuid$.pipe(take(1)).subscribe((uuid) =>
+      this.recordsRepository.deleteRecord(uuid).subscribe({
+        next: () => {
+          this.routerFacade.setSearch()
+        },
+        error: (error) => {
+          this.notificationsService.showNotification(
+            {
+              type: 'error',
+              title: this.translateService.instant(
+                'record.reuse.deleteError.title'
+              ),
+              text: `${this.translateService.instant(
+                'record.reuse.deleteError.body'
+              )} ${error}`,
+            },
+            undefined,
+            error
+          )
+        },
+      })
+    )
+  }
+}

package/src/libs/feature/notify-reuse/src/lib/notify-reuse-form/notify-reuse-form.component.html

@@ -1 +1,111 @@
-@if (record) {}
+<gn-ui-button
+  type="outline"
+  extraClass="w-full flex flex-row justify-between"
+  [style.--gn-ui-button-rounded]="'10px'"
+  (buttonClick)="toggleOverlay()"
+>
+  <span translate>notify.reuse.record.action.declare</span>
+  <ng-icon class="mr-[5px]" name="iconoirAppWindow"></ng-icon>
+</gn-ui-button>
+<ng-template #notifyReuseForm>
+  <div
+    class="w-[400px] max-w-[90vw] flex flex-col gap-3 bg-gray-50 rounded-l overflow-clip px-4 py-5 shadow-[0px_9px_12px_0px_rgba(9,30,66,0.15),0px_0px_1px_0px_rgba(9,30,66,0.31)]"
+  >
+    <div class="flex flex-col gap-3 pb-3">
+      <div class="flex items-start justify-between pb-3">
+        <p class="text-xl font-medium text-black" translate>
+          notify.reuse.form.title
+        </p>
+        <gn-ui-button
+          type="gray-light"
+          class="shrink-0"
+          (buttonClick)="closeOverlay()"
+          [style.--gn-ui-button-padding]="0"
+          [style.--gn-ui-button-width]="'21px'"
+          [style.--gn-ui-button-height]="'21px'"
+          aria-label="Close"
+        >
+          <ng-icon
+            class="text-[22px] !w-[21px] !h-[21px]"
+            name="matCloseOutline"
+          ></ng-icon>
+        </gn-ui-button>
+      </div>
+
+      <div class="flex flex-col gap-[10px]">
+        <div class="flex flex-col gap-2">
+          <div class="flex items-center">
+            <label class="font-bold text-base text-main leading-6">
+              <span translate>notify.reuse.form.field.title</span>
+              <span class="text-red-500">*</span>
+            </label>
+          </div>
+          <gn-ui-text-input
+            #titleInput
+            [(value)]="title"
+            [placeholder]="
+              'notify.reuse.form.field.title.placeholder' | translate
+            "
+            [required]="true"
+          ></gn-ui-text-input>
+        </div>
+
+        <div class="flex flex-col gap-2 pt-3">
+          <div class="flex items-center">
+            <label class="font-bold text-base text-main leading-6">
+              <span translate>notify.reuse.form.field.url</span>
+              <span class="text-red-500">*</span>
+            </label>
+          </div>
+          <gn-ui-text-input
+            #urlInput
+            [(value)]="url"
+            [type]="'url'"
+            [placeholder]="
+              'notify.reuse.form.field.url.placeholder' | translate
+            "
+            [required]="true"
+          ></gn-ui-text-input>
+        </div>
+
+        <div class="flex flex-col gap-2 pt-3">
+          <div class="flex items-center">
+            <label class="font-bold text-base text-main leading-6">
+              <span translate>notify.reuse.form.field.email</span>
+              <span class="text-red-500">*</span>
+            </label>
+          </div>
+          <gn-ui-text-input
+            #emailInput
+            [(value)]="email"
+            [type]="'email'"
+            [placeholder]="
+              'notify.reuse.form.field.email.placeholder' | translate
+            "
+            [required]="true"
+          ></gn-ui-text-input>
+        </div>
+      </div>
+
+      <p class="font-medium text-sm text-gray-700 leading-5" translate>
+        notify.reuse.form.required.hint
+      </p>
+    </div>
+
+    <div class="flex flex-col">
+      <gn-ui-button
+        type="primary"
+        extraClass="w-full h-8 justify-center gap-2"
+        [disabled]="!isFormValid() || loading()"
+        (buttonClick)="submit()"
+      >
+        @if (loading()) {
+          <mat-spinner [diameter]="16"></mat-spinner>
+        } @else {
+          <span translate>notify.reuse.form.submit</span>
+          <ng-icon name="iconoirPlusCircle" size="1.5em"></ng-icon>
+        }
+      </gn-ui-button>
+    </div>
+  </div>
+</ng-template>

package/src/libs/feature/notify-reuse/src/lib/notify-reuse-form/notify-reuse-form.component.ts

@@ -1,21 +1,232 @@
+import {
+  Overlay,
+  OverlayModule,
+  OverlayRef,
+  ScrollStrategyOptions,
+} from '@angular/cdk/overlay'
+import { TemplatePortal } from '@angular/cdk/portal'
+import { CommonModule, LocationStrategy } from '@angular/common'
 import {
   ChangeDetectionStrategy,
   Component,
-  EventEmitter,
-  Input,
-  Output,
+  computed,
+  inject,
+  InjectionToken,
+  input,
+  OnDestroy,
+  signal,
+  TemplateRef,
+  viewChild,
+  ViewContainerRef,
 } from '@angular/core'
-import { ReuseRecord } from '../../../../../../libs/common/domain/src/lib/model/record'
+import { toSignal } from '@angular/core/rxjs-interop'
+import { MatProgressSpinner } from '@angular/material/progress-spinner'
+import { marker } from '@biesbjerg/ngx-translate-extract-marker'
+import {
+  CatalogRecord,
+  Individual,
+  OnlineLinkResource,
+  ReuseRecord,
+} from '../../../../../../libs/common/domain/src/lib/model/record'
+import { PlatformServiceInterface } from '../../../../../../libs/common/domain/src/lib/platform.service.interface'
+import { RecordsRepositoryInterface } from '../../../../../../libs/common/domain/src/lib/repository/records-repository.interface'
+import { NOT_KNOWN_CONSTRAINT } from '../../../../../../libs/feature/editor/src'
+import { NotificationsService } from '../../../../../../libs/feature/notifications/src'
+import { ButtonComponent, TextInputComponent } from '../../../../../../libs/ui/inputs/src'
+import { getOptionalEditorConfig } from '../../../../../../libs/util/app-config/src'
+import { NgIcon, provideIcons, provideNgIconsConfig } from '@ng-icons/core'
+import { iconoirAppWindow, iconoirPlusCircle } from '@ng-icons/iconoir'
+import { matCloseOutline } from '@ng-icons/material-icons/outline'
+import {
+  TranslateDirective,
+  TranslatePipe,
+  TranslateService,
+} from '@ngx-translate/core'
+import { navigateToLightEdit } from '../utils/url'
+
+marker('notify.reuse.form.error.title')
+marker('notify.reuse.form.error.body')
+
+export const REUSE_FORM_URL = new InjectionToken<string>('reuseFormUrl')
 
 @Component({
   selector: 'gn-ui-notify-reuse-form',
   standalone: true,
-  imports: [],
+  imports: [
+    CommonModule,
+    OverlayModule,
+    TextInputComponent,
+    ButtonComponent,
+    TranslatePipe,
+    TranslateDirective,
+    NgIcon,
+    MatProgressSpinner,
+  ],
   templateUrl: './notify-reuse-form.component.html',
   styleUrl: './notify-reuse-form.component.css',
   changeDetection: ChangeDetectionStrategy.OnPush,
+  viewProviders: [
+    provideIcons({
+      iconoirAppWindow,
+      iconoirPlusCircle,
+      matCloseOutline,
+    }),
+    provideNgIconsConfig({
+      size: '1.5em',
+    }),
+  ],
 })
-export class NotifyReuseFormComponent {
-  @Input() record: ReuseRecord | null = null
-  @Output() recordChange = new EventEmitter<ReuseRecord>()
+export class NotifyReuseFormComponent implements OnDestroy {
+  private overlay = inject(Overlay)
+  private viewContainerRef = inject(ViewContainerRef)
+  private scrollStrategies = inject(ScrollStrategyOptions)
+  private overlayRef: OverlayRef | null = null
+  private recordsRepository = inject(RecordsRepositoryInterface)
+  private readonly translate = inject(TranslateService)
+  private readonly notificationsService = inject(NotificationsService)
+  private readonly platformServiceInterface = inject(PlatformServiceInterface)
+  reuseFormUrl = inject(REUSE_FORM_URL, { optional: true })
+  private locationStrategy = inject(LocationStrategy)
+
+  me = toSignal(this.platformServiceInterface.getMe())
+  initialEmail = computed(() => this.me()?.email)
+  templateRef = viewChild<TemplateRef<HTMLElement>>('notifyReuseForm')
+  record = input<Partial<CatalogRecord | null>>(null)
+
+  // TODO: use a form() signal once migrated to Angular 22
+  title = signal('')
+  url = signal('')
+  email = signal(this.initialEmail() ?? '')
+
+  titleInput = viewChild<TextInputComponent>('titleInput')
+  urlInput = viewChild<TextInputComponent>('urlInput')
+  emailInput = viewChild<TextInputComponent>('emailInput')
+
+  loading = signal(false)
+
+  isFormValid = computed(
+    () =>
+      this.titleInput().isValid() &&
+      this.urlInput().isValid() &&
+      this.emailInput().isValid()
+  )
+
+  clearInputs() {
+    this.title.set('')
+    this.url.set('')
+    this.email.set(this.initialEmail() ?? '')
+  }
+
+  toggleOverlay() {
+    if (this.overlayRef) {
+      this.closeOverlay()
+    } else {
+      this.openOverlay()
+    }
+  }
+
+  openOverlay() {
+    const positionStrategy = this.overlay
+      .position()
+      .global()
+      .centerVertically()
+      .right('16px')
+
+    this.overlayRef = this.overlay.create({
+      positionStrategy,
+      hasBackdrop: false,
+      backdropClass: 'cdk-overlay-transparent-backdrop',
+      scrollStrategy: this.scrollStrategies.noop(),
+    })
+
+    this.overlayRef.attach(
+      new TemplatePortal(this.templateRef(), this.viewContainerRef)
+    )
+    this.overlayRef.backdropClick().subscribe(() => this.closeOverlay())
+  }
+
+  closeOverlay() {
+    this.clearInputs()
+    this.overlayRef?.dispose()
+    this.overlayRef = null
+  }
+
+  ngOnDestroy() {
+    this.closeOverlay()
+  }
+
+  submit() {
+    if (!this.isFormValid()) return
+    const defaultLang =
+      getOptionalEditorConfig()?.NEW_RECORD_DEFAULT_LANGUAGE ??
+      this.translate.currentLang
+    const onlineResource: OnlineLinkResource = {
+      type: 'link',
+      url: new URL(this.url()),
+      description: this.translate.instant('notify.reuse.link.description'),
+    }
+    const contact: Individual = {
+      email: this.email(),
+      role: 'point_of_contact',
+      organization: { name: this.me()?.organisation },
+    }
+    const reuseRecord: ReuseRecord = {
+      kind: 'reuse',
+      reuseType: 'application',
+      uniqueIdentifier: null,
+      title: this.title(),
+      abstract: '',
+      overviews: [],
+      ownerOrganization: {
+        name: 'Owner organization',
+      },
+      recordUpdated: new Date(),
+      updateFrequency: 'unknown',
+      otherLanguages: [],
+      defaultLanguage: defaultLang,
+      topics: [],
+      keywords: [],
+      licenses: [],
+      legalConstraints: [NOT_KNOWN_CONSTRAINT],
+      securityConstraints: [],
+      otherConstraints: [],
+      contacts: [],
+      contactsForResource: [contact],
+      lineage: '',
+      sourceRecords: [
+        {
+          uuid: this.record()?.uniqueIdentifier ?? '',
+          title: this.record()?.title ?? '',
+        },
+      ],
+      associatedRecords: [],
+      onlineResources: [onlineResource],
+      spatialExtents: [],
+      temporalExtents: [],
+    }
+    this.loading.set(true)
+    this.recordsRepository.saveRecord(reuseRecord, undefined, false).subscribe({
+      next: (uniqueIdentifier) => {
+        this.loading.set(false)
+        this.closeOverlay()
+        navigateToLightEdit(
+          this.reuseFormUrl,
+          this.locationStrategy.getBaseHref(),
+          uniqueIdentifier
+        )
+      },
+      error: (err) => {
+        this.loading.set(false)
+        this.notificationsService.showNotification(
+          {
+            type: 'error',
+            title: this.translate.instant('notify.reuse.form.error.title'),
+            text: this.translate.instant('notify.reuse.form.error.body'),
+          },
+          undefined,
+          err
+        )
+      },
+    })
+  }
 }

package/src/libs/feature/notify-reuse/src/lib/utils/url.ts

@@ -0,0 +1,16 @@
+export const navigateToLightEdit = (
+  reuseFormUrl: string,
+  baseHref: string,
+  uniqueIdentifier: string
+) => {
+  const baseUrl = `${reuseFormUrl ?? ''}`.replace(/\/+$/, '')
+  // Normalisation du baseHref pour éviter les doubles /
+  const baseHrefClean = baseHref.replace(/^\/+|\/+$/g, '')
+  const prefix = baseHrefClean ? `/${baseHrefClean}` : ''
+  const rawRedirectUrl = `${window.location.origin}${prefix}/reuse/${uniqueIdentifier}`
+  const redirect_on_leave = encodeURIComponent(rawRedirectUrl)
+  window.open(
+    `${baseUrl}/light-edit/${uniqueIdentifier}?redirect_on_leave=${redirect_on_leave}`,
+    '_self'
+  )
+}

package/src/libs/feature/search/src/lib/results-table/results-table-container.component.ts

@@ -1,10 +1,10 @@
 import {
   Component,
   EventEmitter,
+  inject,
   Input,
   OnDestroy,
   Output,
-  inject,
 } from '@angular/core'
 import { CatalogRecord } from '../../../../../../libs/common/domain/src/lib/model/record'
 import { SearchFacade } from '../state/search.facade'
@@ -67,6 +67,7 @@ export class ResultsTableContainerComponent implements OnDestroy {
 
   async handleDeleteRecord(item: unknown) {
     const uniqueIdentifier = (item as CatalogRecord).uniqueIdentifier
+    const recordKind = (item as CatalogRecord).kind
     this.subscription.add(
       this.recordsRepository.deleteRecord(uniqueIdentifier).subscribe({
         next: () => {
@@ -76,10 +77,12 @@ export class ResultsTableContainerComponent implements OnDestroy {
             {
               type: 'success',
               title: this.translateService.instant(
-                'editor.record.deleteSuccess.title'
+                'editor.record.deleteSuccess.title',
+                { recordKind }
               ),
               text: `${this.translateService.instant(
-                'editor.record.deleteSuccess.body'
+                'editor.record.deleteSuccess.body',
+                { recordKind }
               )}`,
             },
             2500
@@ -90,10 +93,12 @@ export class ResultsTableContainerComponent implements OnDestroy {
             {
               type: 'error',
               title: this.translateService.instant(
-                'editor.record.deleteError.title'
+                'editor.record.deleteError.title',
+                { recordKind }
               ),
               text: `${this.translateService.instant(
-                'editor.record.deleteError.body'
+                'editor.record.deleteError.body',
+                { recordKind }
               )} ${error}`,
               closeMessage: this.translateService.instant(
                 'editor.record.deleteError.closeMessage'

package/src/libs/ui/elements/src/index.ts

@@ -11,6 +11,7 @@ export * from './lib/image-overlay-preview/image-overlay-preview.component'
 export * from './lib/kind-badge/kind-badge.component'
 export * from './lib/external-link-card/external-link-card.component'
 export * from './lib/markdown-editor/markdown-editor.component'
+export * from './lib/keyword-badge/keyword-badge.component'
 export * from './lib/markdown-parser/markdown-parser.component'
 export * from './lib/metadata-catalog/metadata-catalog.component'
 export * from './lib/metadata-contact/metadata-contact.component'