geonetwork-ui 2.10.0-dev.02185426a → 2.10.0-dev.08a12212e

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

@@ -44,6 +44,7 @@ import { FormFieldContactsComponent } from './form-field-contacts/form-field-con
 import { FormFieldKeywordsComponent } from './form-field-keywords/form-field-keywords.component'
 import { FormFieldOnlineLinkResourcesComponent } from './form-field-online-link-resources/form-field-online-link-resources.component'
 import { FormFieldOnlineResourcesComponent } from './form-field-online-resources/form-field-online-resources.component'
+import { FormFieldOnlineSingleLinkResourceComponent } from './form-field-online-single-link-resource/form-field-online-single-link-resource.component'
 import { FormFieldOverviewsComponent } from './form-field-overviews/form-field-overviews.component'
 import { FormFieldRichComponent } from './form-field-rich/form-field-rich.component'
 import { FormFieldSimpleComponent } from './form-field-simple/form-field-simple.component'
@@ -78,6 +79,7 @@ import { FormFieldTopicsComponent } from './form-field-topics/form-field-topics.
     FormFieldContactsForResourceComponent,
     FormFieldOnlineResourcesComponent,
     FormFieldOnlineLinkResourcesComponent,
+    FormFieldOnlineSingleLinkResourceComponent,
     FormFieldContactsComponent,
     FormFieldConstraintsComponent,
     FormFieldConstraintsShortcutsComponent,

package/src/libs/feature/editor/src/lib/components/record-form/record-form.component.html

@@ -5,7 +5,7 @@
   ) {
     @if (evaluateExpression(section.hidden)() !== true) {
       <div
-        class="flex flex-col gap-6 border p-8 rounded-[8px] shadow scroll-mt-[90px]"
+        class="flex flex-col gap-6 border p-8 rounded-[8px] shadow scroll-mt-[90px] bg-white"
         gnUiFieldFocus
         #sectionFocus="fieldFocus"
       >

package/src/libs/feature/editor/src/lib/fields.config.ts

@@ -8,7 +8,9 @@ export interface ISOTopic {
 }
 
 /**
- * This file contains the configuration of the fields that will be displayed in the editor.
+ * This file contains the configuration of the fields
+ * that will be displayed in the editor
+ * and the reuse light editor.
  */
 
 // keeping track of labels to not lose existing translations
@@ -281,6 +283,47 @@ export const DEFAULT_CONFIGURATION: EditorConfig = {
   ],
 }
 
+// reduced configuration used by the light edition page for reuse records;
+// the point of contact is edited outside the record form on that page
+export const REUSE_LIGHT_CONFIGURATION: EditorConfig = {
+  pages: [
+    {
+      sections: [
+        {
+          hidden: false,
+          fields: [
+            {
+              model: 'title',
+              formFieldConfig: {
+                labelKey: marker('editor.record.form.field.title'),
+              },
+            },
+            {
+              model: 'abstract',
+              formFieldConfig: {
+                labelKey: marker('editor.record.form.field.abstract'),
+              },
+            },
+            {
+              model: 'onlineResources',
+              modelSpecifier: 'onlineResourceType:singleLink',
+              formFieldConfig: {
+                labelKey: marker('editor.record.form.field.reuseUrl'),
+              },
+            },
+            {
+              model: 'overviews',
+              formFieldConfig: {
+                labelKey: marker('editor.record.form.field.overviews'),
+              },
+            },
+          ],
+        },
+      ],
+    },
+  ],
+}
+
 /**
  * OTHER SETTINGS
  */

package/src/libs/feature/editor/src/lib/models/editor-config.model.ts

@@ -19,12 +19,16 @@ export interface FormFieldConfig {
 // This is used for instance to target only certain online resources in a field
 type OnlineLinkResourceSpecifier = `onlineResourceType:link`
 type DatasetDistributionsSpecifier = `onlineResourceType:!link`
+// Renders a single URL input bound to the first online resource of the record
+// (FormFieldOnlineSingleLinkResourceComponent)
+type OnlineSingleLinkResourceSpecifier = `onlineResourceType:singleLink`
 // When set on the `contacts` field, contacts are rendered as editable detail
 // fields (ContactDetailsFormComponent) instead of cards (ContactCardComponent)
 type EditableContactDetailsSpecifier = `contact:editableDetails`
 export type FieldModelSpecifier =
   | OnlineLinkResourceSpecifier
   | DatasetDistributionsSpecifier
+  | OnlineSingleLinkResourceSpecifier
   | EditableContactDetailsSpecifier
 
 export type FormFieldComponentName =

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,234 @@
+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 = {
+      firstName: this.me()?.name,
+      lastName: this.me()?.surname,
+      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/ui/inputs/src/lib/text-input/text-input.component.css

@@ -1,3 +0,0 @@
-.invalid {
-  border-color: var(--color-secondary);
-}

package/src/libs/ui/inputs/src/lib/text-input/text-input.component.html

@@ -1,13 +1,17 @@
 <input
   #input
   class="gn-ui-text-input"
-  [ngClass]="extraClass"
-  type="text"
-  [value]="value"
+  [class]="extraClass()"
+  [ngClass]="{
+    'border-red-400 focus:border-red-800 hover:border-red-800 text-red-800':
+      !isValid(),
+  }"
+  [type]="type()"
+  [(ngModel)]="inputModel"
   (change)="handleChange($event)"
   (input)="handleChange($event)"
-  [placeholder]="placeholder"
-  [attr.aria-label]="placeholder"
-  [attr.required]="required || null"
-  [disabled]="disabled"
+  [placeholder]="placeholder()"
+  [attr.aria-label]="placeholder()"
+  [attr.required]="required() || null"
+  [disabled]="disabled()"
 />