geonetwork-ui 2.10.0-dev.0d4a494fa → 2.10.0-dev.122ccbde0

package/src/libs/feature/editor/src/lib/components/metadata-quality-panel/metadata-quality-panel.component.ts

@@ -1,5 +1,5 @@
-import { Component, Input, OnChanges } from '@angular/core'
-import { CatalogRecord } from '../../../../../../../libs/common/domain/src/lib/model/record'
+import { Component, inject } from '@angular/core'
+import { CatalogRecordKeys } from '../../../../../../../libs/common/domain/src/lib/model/record'
 import { ButtonComponent } from '../../../../../../../libs/ui/inputs/src'
 import {
   getAllKeysValidator,
@@ -13,8 +13,10 @@ import {
 } from '@ng-icons/core'
 import { iconoirBadgeCheck, iconoirSystemShut } from '@ng-icons/iconoir'
 import { TranslateDirective, TranslatePipe } from '@ngx-translate/core'
-import { EditorConfig } from '../../models'
 import { marker } from '@biesbjerg/ngx-translate-extract-marker'
+import { EditorFacade } from '../../+state/editor.facade'
+import { combineLatest, map } from 'rxjs'
+import { AsyncPipe } from '@angular/common'
 
 //forced translations that are not available in fields.config.ts
 marker('editor.record.form.field.keywords')
@@ -29,6 +31,7 @@ marker('editor.record.form.field.organisation')
     TranslatePipe,
     ButtonComponent,
     NgIconComponent,
+    AsyncPipe,
   ],
   providers: [
     provideIcons({
@@ -42,47 +45,37 @@ marker('editor.record.form.field.organisation')
   templateUrl: './metadata-quality-panel.component.html',
   styleUrl: './metadata-quality-panel.component.css',
 })
-export class MetadataQualityPanelComponent implements OnChanges {
+export class MetadataQualityPanelComponent {
+  facade = inject(EditorFacade)
   propsToValidate: ValidatorMapperKeys[] = getAllKeysValidator()
-  propertiesByPage: { label: string; value: boolean }[][] = []
-  @Input() editorConfig: EditorConfig
-  @Input() record: CatalogRecord
 
-  ngOnChanges() {
-    if (this.editorConfig && this.record) {
-      const fieldsByPage = this.editorConfig.pages.map((page) =>
-        page.sections.flatMap((section) =>
-          section.fields
-            .filter((field) => this.propsToValidate.includes(field.model))
-            .map((field) => field.model as ValidatorMapperKeys)
-        )
-      )
-      // FIXME: temporarily add topics and organisation to the first and third page
-      // as long as they are not handled by the editor
-      if (fieldsByPage.length > 0) {
-        fieldsByPage[0].includes('topics') || fieldsByPage[0].push('topics')
-        fieldsByPage[2].includes('organisation') ||
-          fieldsByPage[2].push('organisation')
-      }
-      this.propertiesByPage = fieldsByPage
-        .map((fields) =>
-          getQualityValidators(
-            this.record,
-            fields as ValidatorMapperKeys[]
-          ).map(({ name, validator }) => ({
-            label: `editor.record.form.field.${name}`, // use same translations as in fields.config.ts
-            value: validator(),
-          }))
+  propertiesByPage$ = combineLatest([
+    this.facade.editorConfig$,
+    this.facade.record$,
+  ]).pipe(
+    map(([editorConfig, record]) => {
+      if (!editorConfig || !record) return []
+      const validators = getQualityValidators(record, this.propsToValidate)
+      return editorConfig.pages
+        .map((page) =>
+          page.sections
+            .flatMap((section) => section.fields)
+            .flatMap(({ model }) =>
+              validators.filter((v) => (v.alias ?? v.name) === model)
+            )
+            .map(({ name, validator, alias }) => ({
+              label: `editor.record.form.field.${name}`,
+              value: validator(),
+              model: (alias ?? name) as CatalogRecordKeys,
+            }))
         )
         .filter((arr) => arr.length > 0)
-    }
-  }
+    })
+  )
 
-  getExtraClass(checked: boolean): string {
-    const baseClasses =
-      'flex flex-row justify-between rounded mb-1 h-[34px] w-full focus:ring-0 hover:border-none border-none hover:text-black text-black cursor-default'
-    return checked
-      ? `${baseClasses} bg-neutral-100 hover:bg-neutral-100`
-      : `${baseClasses} bg-transparent hover:bg-transparent`
+  onCriterionClick(property: { value: boolean; model: CatalogRecordKeys }) {
+    if (!property.value) {
+      this.facade.setFocusedField(property.model)
+    }
   }
 }

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

@@ -2,7 +2,7 @@ import {
   ChangeDetectionStrategy,
   Component,
   OnDestroy,
-  OnInit,
+  afterNextRender,
   inject,
 } from '@angular/core'
 import { CommonModule } from '@angular/common'
@@ -67,9 +67,7 @@ export type ConstraintChoice =
   styleUrls: ['./form-field-constraints-shortcuts.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class FormFieldConstraintsShortcutsComponent
-  implements OnInit, OnDestroy
-{
+export class FormFieldConstraintsShortcutsComponent implements OnDestroy {
   private editorFacade = inject(EditorFacade)
 
   legalConstraints$ = this.editorFacade.record$.pipe(
@@ -112,37 +110,39 @@ export class FormFieldConstraintsShortcutsComponent
 
   onDestroy$ = new Subject<void>()
 
-  ngOnInit(): void {
-    // hide all constraints if any toggle is activated
-    this.anyToggleActivated$
-      .pipe(takeUntil(this.onDestroy$), distinctUntilChanged())
-      .subscribe((anyToggleActivated) => {
-        if (anyToggleActivated) {
-          this.hideAllConstraintSections()
-        }
-      })
+  constructor() {
+    // Deferred to afterNextRender to avoid dispatching store actions
+    // synchronously during Angular's change detection cycle (NG0100)
+    afterNextRender(() => {
+      this.anyToggleActivated$
+        .pipe(takeUntil(this.onDestroy$), distinctUntilChanged())
+        .subscribe((anyToggleActivated) => {
+          if (anyToggleActivated) {
+            this.hideAllConstraintSections()
+          }
+        })
 
-    // also hide constraints which are empty arrays
-    const hideEmptyConstraints = (
-      constraints$: Observable<Constraint[]>,
-      model: ConstraintChoice
-    ) => {
-      const isConstraintNotEmpty$ = constraints$.pipe(
-        takeUntil(this.onDestroy$),
-        map((c) => c.length > 0),
-        distinctUntilChanged()
-      )
-      combineLatest([
-        isConstraintNotEmpty$,
-        this.anyToggleActivated$,
-      ]).subscribe(([isNotEmpty, anyToggleActivated]) => {
-        const visible = isNotEmpty && !anyToggleActivated
-        this.editorFacade.setFieldVisibility({ model }, visible)
-      })
-    }
-    hideEmptyConstraints(this.legalConstraints$, 'legalConstraints')
-    hideEmptyConstraints(this.securityConstraints$, 'securityConstraints')
-    hideEmptyConstraints(this.otherConstraints$, 'otherConstraints')
+      const hideEmptyConstraints = (
+        constraints$: Observable<Constraint[]>,
+        model: ConstraintChoice
+      ) => {
+        const isConstraintNotEmpty$ = constraints$.pipe(
+          takeUntil(this.onDestroy$),
+          map((c) => c.length > 0),
+          distinctUntilChanged()
+        )
+        combineLatest([
+          isConstraintNotEmpty$,
+          this.anyToggleActivated$,
+        ]).subscribe(([isNotEmpty, anyToggleActivated]) => {
+          const visible = isNotEmpty && !anyToggleActivated
+          this.editorFacade.setFieldVisibility({ model }, visible)
+        })
+      }
+      hideEmptyConstraints(this.legalConstraints$, 'legalConstraints')
+      hideEmptyConstraints(this.securityConstraints$, 'securityConstraints')
+      hideEmptyConstraints(this.otherConstraints$, 'otherConstraints')
+    })
   }
 
   ngOnDestroy() {

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

@@ -10,21 +10,14 @@
   </gn-ui-autocomplete>
 
   @if (contacts.length > 0) {
-    @if (contacts.length === 1) {
-      @for (contact of contacts; track contact; let index = $index) {
-        <gn-ui-contact-card [contact]="contact"></gn-ui-contact-card>
-      }
-    }
-    @if (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>
-    }
+    <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>
   } @else {
     <div
       class="p-4 text-sm border border-primary bg-primary-lightest rounded-lg"

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

@@ -28,7 +28,11 @@ import { UserModel } from '../../../../../../../../../libs/common/domain/src/lib
 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 {
+  createFuzzyFilter,
+  getIndividualDisplayName,
+  toIndividual,
+} from '../../../../../../../../../libs/util/shared/src'
 import { map } from 'rxjs/operators'
 import { SortableListComponent } from '../../../../../../../../../libs/ui/layout/src'
 
@@ -117,9 +121,7 @@ export class FormFieldContactsComponent implements OnDestroy, OnChanges {
    * gn-ui-autocomplete
    */
   displayWithFn: (user: UserModel) => string = (user) =>
-    `${user.name} ${user.surname} ${
-      user.organisation ? `(${user.organisation})` : ''
-    }`
+    getIndividualDisplayName(toIndividual(user))
 
   /**
    * gn-ui-autocomplete

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

@@ -8,6 +8,14 @@
       </gn-ui-button>
     }
   </div>
+  @if (value.length === 0) {
+    <div
+      class="p-4 border border-primary bg-primary-lightest rounded-lg"
+      translate
+    >
+      editor.record.form.field.contactsForResource.noContact
+    </div>
+  }
   @if (roleSectionsToDisplay && roleSectionsToDisplay.length > 0) {
     <div class="mt-8" data-test="displayedRoles">
       @for (
@@ -53,12 +61,5 @@
         </div>
       }
     </div>
-  } @else {
-    <div
-      class="p-4 border border-primary bg-primary-lightest rounded-lg"
-      translate
-    >
-      editor.record.form.field.contactsForResource.noContact
-    </div>
   }
 </div>

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

@@ -23,7 +23,11 @@ import {
   AutocompleteComponent,
   ButtonComponent,
 } from '../../../../../../../../../libs/ui/inputs/src'
-import { createFuzzyFilter } from '../../../../../../../../../libs/util/shared/src'
+import {
+  createFuzzyFilter,
+  getIndividualDisplayName,
+  toIndividual,
+} from '../../../../../../../../../libs/util/shared/src'
 import { TranslateDirective, TranslatePipe } from '@ngx-translate/core'
 import {
   debounceTime,
@@ -169,11 +173,7 @@ export class FormFieldContactsForResourceComponent
    * gn-ui-autocomplete
    */
   displayWithFn: (user: UserModel) => string = (user) =>
-    user.name
-      ? `${user.name} ${user.surname} ${
-          user.organisation ? `(${user.organisation})` : ''
-        }`
-      : ``
+    getIndividualDisplayName(toIndividual(user))
 
   /**
    * gn-ui-autocomplete

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

@@ -0,0 +1,3 @@
+gn-ui-form-field {
+  scroll-margin-top: 90px;
+}

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

@@ -24,6 +24,7 @@
           ) {
             @if (!field.config.hidden) {
               <gn-ui-form-field
+                [id]="anchorIdPrefix + field.config.model"
                 [ngClass]="
                   field.config.gridColumnSpan === 1
                     ? 'col-span-1'

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

@@ -1,5 +1,12 @@
 import { CommonModule } from '@angular/common'
-import { ChangeDetectionStrategy, Component, inject } from '@angular/core'
+import {
+  ChangeDetectionStrategy,
+  Component,
+  ElementRef,
+  inject,
+  OnDestroy,
+  OnInit,
+} from '@angular/core'
 import { EditorFacade } from '../../+state/editor.facade'
 import { EditorFieldValue } from '../../models'
 import { FormFieldComponent } from './form-field'
@@ -8,7 +15,7 @@ import {
   EditorFieldWithValue,
   EditorSectionWithValues,
 } from '../../+state/editor.models'
-import { map } from 'rxjs'
+import { filter, firstValueFrom, map, Subscription, switchMap } from 'rxjs'
 import { CatalogRecordKeys } from '../../../../../../../libs/common/domain/src/lib/model/record'
 
 @Component({
@@ -19,13 +26,50 @@ import { CatalogRecordKeys } from '../../../../../../../libs/common/domain/src/l
   standalone: true,
   imports: [CommonModule, FormFieldComponent, TranslateDirective],
 })
-export class RecordFormComponent {
+export class RecordFormComponent implements OnInit, OnDestroy {
+  anchorIdPrefix = 'gn-ui--field-'
   facade = inject(EditorFacade)
+  private el = inject(ElementRef)
+  subscription = new Subscription()
 
   recordUniqueIdentifier$ = this.facade.record$.pipe(
     map((record) => record.uniqueIdentifier)
   )
 
+  ngOnInit() {
+    this.subscription.add(
+      this.facade.focusedField$
+        .pipe(
+          filter((field) => !!field),
+          switchMap(async (field) => ({
+            field: field as CatalogRecordKeys,
+            pageIndex: await this.getPageIndexForField(
+              field as CatalogRecordKeys
+            ),
+          }))
+        )
+        .subscribe(async ({ field, pageIndex }) => {
+          const currentPage = await firstValueFrom(this.facade.currentPage$)
+          if (pageIndex !== null && pageIndex !== currentPage) {
+            this.facade.setCurrentPage(pageIndex)
+            this.el.nativeElement.scrollIntoView({
+              behavior: 'instant',
+              block: 'start',
+            })
+          }
+          setTimeout(() =>
+            document
+              .getElementById(this.anchorIdPrefix + field)
+              ?.scrollIntoView({ behavior: 'instant', block: 'start' })
+          )
+        })
+    )
+  }
+
+  ngOnDestroy() {
+    this.subscription.unsubscribe()
+  }
+
   handleFieldValueChange(model: CatalogRecordKeys, newValue: EditorFieldValue) {
     if (!model) {
       return
@@ -40,4 +84,14 @@ export class RecordFormComponent {
   sectionTracker(index: number, section: EditorSectionWithValues) {
     return section.labelKey
   }
+
+  async getPageIndexForField(model: CatalogRecordKeys): Promise<number | null> {
+    const config = await firstValueFrom(this.facade.editorConfig$)
+    const pageIndex = config.pages.findIndex((page) =>
+      page.sections.some((section) =>
+        section.fields.some((field) => field.model === model)
+      )
+    )
+    return pageIndex >= 0 ? pageIndex : null
+  }
 }

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

@@ -18,6 +18,7 @@ export * from './lib/metadata-doi/metadata-doi.component'
 export * from './lib/metadata-info/metadata-info.component'
 export * from './lib/metadata-quality-item/metadata-quality-item.component'
 export * from './lib/metadata-quality/metadata-quality.component'
+export * from './lib/contact-pill/contact-pill.component'
 export * from './lib/notification/notification.component'
 export * from './lib/record-api-form/record-api-form.component'
 export * from './lib/thumbnail/thumbnail.component'

package/src/libs/ui/elements/src/lib/contact-pill/contact-pill.component.html

@@ -0,0 +1,16 @@
+<gn-ui-button
+  type="primary-light"
+  extraClass="group w-full min-h-12 gap-3 justify-between py-2 pl-5 pr-4 rounded"
+  data-test="contact-pill"
+>
+  <span
+    class="font-title font-medium text-base leading-tight truncate group-hover:text-white"
+    [title]="displayName"
+    >{{ displayName }}</span
+  >
+  <div
+    class="gn-ui-card-icon items-center justify-center w-10 h-8 group-hover:border-white group-hover:text-white"
+  >
+    <ng-icon class="!w-6 !h-6 !text-[24px]" name="matInfoOutline"></ng-icon>
+  </div>
+</gn-ui-button>

package/src/libs/ui/elements/src/lib/contact-pill/contact-pill.component.ts

@@ -0,0 +1,26 @@
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
+import { Individual } from '../../../../../../libs/common/domain/src/lib/model/record'
+import { NgIcon, provideIcons } from '@ng-icons/core'
+import { matInfoOutline } from '@ng-icons/material-icons/outline'
+import { ButtonComponent } from '../../../../../../libs/ui/inputs/src'
+import { getIndividualDisplayName } from '../../../../../../libs/util/shared/src'
+
+@Component({
+  selector: 'gn-ui-contact-pill',
+  templateUrl: './contact-pill.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [NgIcon, ButtonComponent],
+  viewProviders: [
+    provideIcons({
+      matInfoOutline,
+    }),
+  ],
+})
+export class ContactPillComponent {
+  @Input() contact: Individual
+
+  get displayName(): string {
+    return getIndividualDisplayName(this.contact)
+  }
+}

package/src/libs/ui/elements/src/lib/internal-link-card/internal-link-card.component.html

@@ -1,6 +1,6 @@
 <a
   [attr.href]="linkHref"
-  [target]="linkTarget"
+  target="_self"
   class="record-card"
   [ngClass]="cardClass"
 >

package/src/libs/ui/elements/src/lib/internal-link-card/internal-link-card.component.ts

@@ -58,7 +58,6 @@ export class InternalLinkCardComponent implements OnInit {
   protected elementRef = inject(ElementRef)
 
   @Input() record: CatalogRecord
-  @Input() linkTarget = '_blank'
   @Input() linkHref: string = null
   @Input() metadataQualityDisplay: boolean
   @Input() favoriteTemplate: TemplateRef<{ $implicit: CatalogRecord }>

package/src/libs/ui/elements/src/lib/metadata-info/metadata-info.component.css

@@ -16,7 +16,3 @@
   --gn-ui-badge-background-color: var(--color-primary-white);
   --gn-ui-badge-text-color: var(--color-primary-darkest);
 }
-
-:host .metadata-info-keywords ::ng-deep gn-ui-badge:hover {
-  --gn-ui-badge-text-color: white;
-}

package/src/libs/ui/elements/src/lib/metadata-info/metadata-info.component.html

@@ -28,11 +28,12 @@
       <gn-ui-max-lines [maxLines]="7">
         <div class="metadata-info-keywords sm:pb-4 flex flex-wrap gap-2">
           @for (keyword of metadata.keywords; track keyword) {
-            <gn-ui-badge
-              class="inline-block lowercase"
-              (click)="onKeywordClick(keyword)"
-              [clickable]="true"
-              >{{ keyword.label }}</gn-ui-badge
+            <gn-ui-button
+              type="primary-light"
+              class="inline-block opacity-70"
+              extraClass="lowercase text-sm py-1 px-2"
+              (buttonClick)="onKeywordClick(keyword)"
+              >{{ keyword.label }}</gn-ui-button
             >
           }
         </div>
@@ -105,9 +106,29 @@
     </div>
   </gn-ui-expandable-panel>
 }
+@if (metadata.contactsForResource?.length) {
+  <gn-ui-expandable-panel
+    [title]="'record.metadata.resource.contacts' | translate"
+    data-test="contacts-panel"
+  >
+    <div class="flex flex-col gap-1 pt-3 pb-4">
+      @for (group of contactGroups; track group.role) {
+        <div class="flex flex-col gap-1 rounded bg-gray-50 py-4 px-2">
+          <p class="text-xs font-normal text-black">
+            {{ group.roleLabel | translate }}
+          </p>
+          <div class="grid gap-0.5 grid-cols-1 md:grid-cols-2">
+            @for (contact of group.contacts; track contact.email) {
+              <gn-ui-contact-pill [contact]="contact"></gn-ui-contact-pill>
+            }
+          </div>
+        </div>
+      }
+    </div>
+  </gn-ui-expandable-panel>
+}
 @if (
   (metadata.kind === 'dataset' && metadata.lineage) ||
-  resourceContact ||
   metadata.resourceCreated ||
   metadata.resourcePublished ||
   metadata.resourceUpdated ||
@@ -129,66 +150,6 @@
         </p>
       </div>
     }
-    @if (resourceContact) {
-      <div
-        class="flex flex-row gap-6 mt-5 mb-8 resource-contact"
-        data-test="details-panel-resource-contact"
-      >
-        @if (resourceContact.organization?.logoUrl?.href) {
-          <div
-            class="flex items-center justify-center border-solid border border-gray-300 rounded-md bg-white h-32 overflow-hidden"
-          >
-            <gn-ui-thumbnail
-              class="relative h-full w-full"
-              [thumbnailUrl]="resourceContact.organization.logoUrl.href"
-              fit="contain"
-            ></gn-ui-thumbnail>
-          </div>
-        }
-        <div class="flex flex-col gap-1">
-          <p class="text-sm font-medium" translate>record.metadata.producer</p>
-          <div
-            class="text-primary font-title text-21 mr-2 cursor-pointer hover:underline"
-            data-cy="organization-name"
-          >
-            {{ resourceContact.organization?.name }}
-          </div>
-          @if (resourceContact.organization?.website) {
-            <div>
-              <a
-                [href]="resourceContact.organization.website"
-                target="_blank"
-                class="contact-website text-primary text-sm cursor-pointer hover:underline transition-all"
-                >{{ resourceContact.organization.website }}
-                <ng-icon
-                  class="!w-[12px] !h-[12px] !text-[12px] opacity-75 shrink-0"
-                  name="matOpenInNew"
-                ></ng-icon>
-              </a>
-            </div>
-          }
-          @if (resourceContact.email) {
-            <div class="mt-4">
-              <div class="flex">
-                <ng-icon
-                  class="!w-5 !h-5 !text-[20px] opacity-75 shrink-0"
-                  name="matMailOutline"
-                ></ng-icon>
-                @if (resourceContact.email) {
-                  <a
-                    [href]="'mailto:' + resourceContact.email"
-                    class="text-sm hover:underline ml-2"
-                    target="_blank"
-                    data-cy="contact-email"
-                    >{{ resourceContact?.email }}</a
-                  >
-                }
-              </div>
-            </div>
-          }
-        </div>
-      </div>
-    }
     <div
       class="py-6 px-6 rounded bg-gray-100 grid grid-cols-2 gap-y-6 gap-x-[20px] text-gray-700"
     >