geonetwork-ui 2.10.0-dev.4caccddec → 2.10.0-dev.5f1c6f718

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"
     >

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

@@ -8,7 +8,10 @@ import {
 } from '@angular/core'
 import {
   CatalogRecord,
+  Individual,
   Keyword,
+  Role,
+  RoleLabels,
 } from '../../../../../../libs/common/domain/src/lib/model/record'
 import { DateService, getTemporalRangeUnion } from '../../../../../../libs/util/shared/src'
 import { MarkdownParserComponent } from '../markdown-parser/markdown-parser.component'
@@ -19,17 +22,18 @@ import {
 import { TranslateDirective, TranslatePipe } from '@ngx-translate/core'
 import {
   BadgeComponent,
+  ButtonComponent,
   CopyTextButtonComponent,
 } from '../../../../../../libs/ui/inputs/src'
 import { ContentGhostComponent } from '../content-ghost/content-ghost.component'
 import { NgIcon, provideIcons } from '@ng-icons/core'
 import { matOpenInNew } from '@ng-icons/material-icons/baseline'
 import { matMailOutline } from '@ng-icons/material-icons/outline'
-import { ThumbnailComponent } from '../thumbnail/thumbnail.component'
 import { GnUiLinkifyDirective } from './linkify.directive'
 import { GnUiHumanizeDateDirective } from '../../../../../../libs/util/shared/src'
 
 import { SpatialExtentComponent } from '../../../../../../libs/ui/map/src'
+import { ContactPillComponent } from '../contact-pill/contact-pill.component'
 
 @Component({
   selector: 'gn-ui-metadata-info',
@@ -42,15 +46,16 @@ import { SpatialExtentComponent } from '../../../../../../libs/ui/map/src'
     TranslatePipe,
     MarkdownParserComponent,
     ExpandablePanelComponent,
+    ButtonComponent,
     BadgeComponent,
     ContentGhostComponent,
-    ThumbnailComponent,
     MaxLinesComponent,
     CopyTextButtonComponent,
     NgIcon,
     GnUiLinkifyDirective,
     GnUiHumanizeDateDirective,
     SpatialExtentComponent,
+    ContactPillComponent,
   ],
   viewProviders: [
     provideIcons({
@@ -132,18 +137,33 @@ export class MetadataInfoComponent {
     return getTemporalRangeUnion(temporalExtents, this.dateService)
   }
 
-  get shownOrganization() {
-    return this.metadata.ownerOrganization
-  }
-
-  get resourceContact() {
-    return this.metadata.contactsForResource?.[0]
-  }
-
   fieldReady(propName: string) {
     return !this.incomplete || propName in this.metadata
   }
 
+  get contactGroups(): {
+    role: Role
+    roleLabel: string
+    contacts: Individual[]
+  }[] {
+    const groups: { role: Role; roleLabel: string; contacts: Individual[] }[] =
+      []
+    const indexByRole = new Map<Role, number>()
+    for (const contact of this.metadata.contactsForResource ?? []) {
+      if (indexByRole.has(contact.role)) {
+        groups[indexByRole.get(contact.role)].contacts.push(contact)
+      } else {
+        indexByRole.set(contact.role, groups.length)
+        groups.push({
+          role: contact.role,
+          roleLabel: RoleLabels.get(contact.role),
+          contacts: [contact],
+        })
+      }
+    }
+    return groups
+  }
+
   onKeywordClick(keyword: Keyword) {
     this.keyword.emit(keyword)
   }

package/src/libs/ui/inputs/src/lib/button/button.component.ts

@@ -26,6 +26,7 @@ export class ButtonComponent {
       | 'light'
       | 'gray'
       | 'black'
+      | 'primary-light'
   ) {
     // btn-classes are written in full to be picked up by tailwind
     switch (value) {
@@ -47,6 +48,9 @@ export class ButtonComponent {
       case 'black':
         this.btnClass = 'gn-ui-btn-black'
         break
+      case 'primary-light':
+        this.btnClass = 'gn-ui-btn-primary-light'
+        break
       case 'default':
       default:
         this.btnClass = 'gn-ui-btn-default'

package/src/libs/ui/map/src/lib/components/map-container/map-container.component.ts

@@ -204,11 +204,12 @@ export class MapContainerComponent implements AfterViewInit, OnChanges {
 
   async ngOnChanges(changes: SimpleChanges) {
     if ('context' in changes && !changes['context'].isFirstChange()) {
+      const olMap = await this.openlayersMap
       const diff = computeMapContextDiff(
         this.processContext(changes['context'].currentValue),
         this.processContext(changes['context'].previousValue)
       )
-      await applyContextDiffToMap(this.olMap, diff)
+      await applyContextDiffToMap(olMap, diff)
 
       if (this._resolvedExtentChange && diff.viewChanges) {
         this._resolvedExtentChange.emit(this.calculateCurrentMapExtent())

package/src/libs/ui/map/src/lib/components/spatial-extent/spatial-extent.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input } from '@angular/core'
+import { ChangeDetectorRef, Component, inject, Input } from '@angular/core'
 import { CommonModule } from '@angular/common'
 import { Geometry } from 'geojson'
 import { GeoJSONFeatureCollection } from 'ol/format/GeoJSON.js'
@@ -10,8 +10,8 @@ import {
   MapContextLayer,
 } from '@geospatial-sdk/core'
 import { MapContainerComponent } from '../map-container/map-container.component'
-import { BehaviorSubject, Observable } from 'rxjs'
-import { switchMap } from 'rxjs/operators'
+import { BehaviorSubject, from, Observable, of } from 'rxjs'
+import { map, switchMap, tap } from 'rxjs/operators'
 import { DatasetSpatialExtent } from '../../../../../../../libs/common/domain/src/lib/model/record'
 
 @Component({
@@ -22,14 +22,16 @@ import { DatasetSpatialExtent } from '../../../../../../../libs/common/domain/sr
   styleUrl: './spatial-extent.component.css',
 })
 export class SpatialExtentComponent {
+  private _cdr = inject(ChangeDetectorRef)
+
   @Input() set spatialExtents(value: DatasetSpatialExtent[]) {
     this.spatialExtents$.next(value)
   }
   spatialExtents$ = new BehaviorSubject<DatasetSpatialExtent[]>([])
   mapContext$: Observable<MapContext> = this.spatialExtents$.pipe(
-    switchMap(async (extents) => {
+    switchMap((extents) => {
       if (extents.length === 0) {
-        return null // null extent means default view
+        return of(null)
       }
       const featureCollection: GeoJSONFeatureCollection = {
         type: 'FeatureCollection',
@@ -61,11 +63,10 @@ export class SpatialExtentComponent {
           'fill-color': 'rgba(153, 153, 153, 0.3)',
         },
       }
-      const view = await createViewFromLayer(layer)
-      return {
-        view,
-        layers: [layer],
-      }
+      return from(createViewFromLayer(layer)).pipe(
+        map((view) => ({ view, layers: [layer] }) as MapContext),
+        tap(() => this._cdr.markForCheck())
+      )
     })
   )
 

package/src/libs/ui/search/src/lib/record-preview-row/record-preview-row.component.html

@@ -1,6 +1,5 @@
 <gn-ui-internal-link-card
   [linkHref]="linkHref"
-  [linkTarget]="linkTarget"
   [record]="record"
   [favoriteTemplate]="favoriteTemplate"
   [metadataQualityDisplay]="metadataQualityDisplay"

package/src/libs/util/shared/src/lib/record/quality-score.util.ts

@@ -3,27 +3,41 @@ import {
   RecordKind,
 } from '../../../../../../libs/common/domain/src/lib/model/record'
 
+type TValidatorEntry = {
+  validator: (metadata: Partial<CatalogRecord>) => boolean
+  alias?: string
+}
+
 type TValidatorMapper = {
-  [key: string]: (metadata: Partial<CatalogRecord>) => boolean
+  [key: string]: TValidatorEntry
 }
 
 const ValidatorMapper: TValidatorMapper = {
-  title: (record) => !!record?.title,
-  abstract: (record) => !!record?.abstract,
-  keywords: (record) => (record?.keywords?.length ?? 0) > 0,
-  legalConstraints: (record) =>
-    !!(
-      record?.legalConstraints?.length &&
-      record.legalConstraints.some((c) => c?.text?.trim().length > 0)
-    ),
-  contacts: (record) =>
-    !!record?.contacts?.[0]?.email &&
-    record.contacts[0].email !== 'missing@missing.com',
-  updateFrequency: (record) =>
-    !!record?.updateFrequency && record.updateFrequency !== 'unknown',
-  topics: (record) => (record?.topics?.length ?? 0) > 0,
-  organisation: (record) => !!record?.contacts?.[0]?.organization?.name,
-  source: (record) => !!record?.extras?.sourcesIdentifiers,
+  title: { validator: (record) => !!record?.title },
+  abstract: { validator: (record) => !!record?.abstract },
+  keywords: { validator: (record) => (record?.keywords?.length ?? 0) > 0 },
+  legalConstraints: {
+    validator: (record) =>
+      !!(
+        record?.legalConstraints?.length &&
+        record.legalConstraints.some((c) => c?.text?.trim().length > 0)
+      ),
+  },
+  contacts: {
+    validator: (record) =>
+      !!record?.contacts?.[0]?.email &&
+      record.contacts[0].email !== 'missing@missing.com',
+  },
+  updateFrequency: {
+    validator: (record) =>
+      !!record?.updateFrequency && record.updateFrequency !== 'unknown',
+  },
+  topics: { validator: (record) => (record?.topics?.length ?? 0) > 0 },
+  organisation: {
+    validator: (record) => !!record?.contacts?.[0]?.organization?.name,
+    alias: 'contacts',
+  },
+  source: { validator: (record) => !!record?.extras?.sourcesIdentifiers },
 } as const
 
 export type ValidatorMapperKeys = keyof typeof ValidatorMapper & string
@@ -67,6 +81,7 @@ export function getQualityValidators(
 
   return filteredProps.map((name) => ({
     name,
-    validator: () => ValidatorMapper[name](record),
+    validator: () => ValidatorMapper[name].validator(record),
+    alias: ValidatorMapper[name].alias,
   }))
 }

package/src/libs/util/shared/src/lib/utils/index.ts

@@ -13,3 +13,4 @@ export * from './sort-by'
 export * from './strip-html'
 export * from './temporal-extent-union'
 export * from './url'
+export * from './user-display'

package/src/libs/util/shared/src/lib/utils/user-display.ts

@@ -0,0 +1,23 @@
+import { UserModel } from '../../../../../../libs/common/domain/src/lib/model/user'
+import { Individual } from '../../../../../../libs/common/domain/src/lib/model/record'
+
+export function getIndividualDisplayName(individual: Individual): string {
+  const nameParts = [individual.firstName, individual.lastName]
+    .filter(Boolean)
+    .join(' ')
+  const orgPart = individual.organization?.name
+    ? ` (${individual.organization.name})`
+    : ''
+  if (nameParts) return `${nameParts}${orgPart}`
+  return individual.organization?.name ?? individual.email ?? ''
+}
+
+export function toIndividual(user: UserModel): Individual {
+  return {
+    firstName: user.name,
+    lastName: user.surname,
+    email: user.email,
+    role: 'unspecified',
+    organization: user.organisation ? { name: user.organisation } : undefined,
+  }
+}

package/tailwind.base.css

@@ -74,7 +74,10 @@
     --bg-hover: var(--gn-ui-button-bg-hover, var(--color-background));
     --font-size: var(--gn-ui-button-font-size, 1em);
     --color: var(--gn-ui-button-color, var(--color-main));
-    @apply flex flex-row items-center justify-center
+    --disabled-opacity: var(--gn-ui-button-disabled-opacity, 0.5);
+    --justify: var(--gn-ui-button-justify, center);
+    justify-content: var(--justify);
+    @apply flex flex-row items-center
       text-[length:--font-size] leading-none
       text-[color:--color]
       p-[--padding] rounded-[--rounded] w-[--width] h-[--height] overflow-hidden
@@ -82,7 +85,7 @@
       hover:bg-[--bg-hover] focus:bg-[--bg-hover] active:bg-[--background]
       outline-none
       relative
-      disabled:opacity-50 disabled:pointer-events-none
+      disabled:opacity-[--disabled-opacity] disabled:pointer-events-none
       focus:z-10 active:z-10 hover:z-10;
   }
   /* makes sure icons will not make the buttons grow vertically */
@@ -134,6 +137,12 @@
       bg-white border-white focus:ring-4 focus:ring-gray-300;
   }
 
+  .gn-ui-btn-primary-light {
+    @apply gn-ui-btn text-primary-darkest
+      bg-primary-white hover:bg-primary focus:bg-primary hover:text-white focus:text-white active:bg-primary-darker
+      border-transparent;
+  }
+
   .gn-ui-card-s {
     @apply min-h-[64px] w-full xs:min-w-[260px] xs:max-w-[280px] sm:min-w-[300px] sm:max-w-[500px] md:min-w-[230px];
   }

package/translations/de.json

@@ -520,6 +520,7 @@
   "record.metadata.quality.updateFrequency.failed": "Aktualisierungsfrequenz nicht angegeben",
   "record.metadata.quality.updateFrequency.success": "Aktualisierungsfrequenz angegeben",
   "record.metadata.related": "Entdecken Sie den Katalog",
+  "record.metadata.resource.contacts": "Kontakte zur Ressource",
   "record.metadata.resourceCreated": "Erstellt",
   "record.metadata.resourcePublished": "Veröffentlicht",
   "record.metadata.resourceUpdated": "Zuletzt aktualisiert",

package/translations/en.json

@@ -520,6 +520,7 @@
   "record.metadata.quality.updateFrequency.failed": "Update frequency is not specified",
   "record.metadata.quality.updateFrequency.success": "Update frequency is specified",
   "record.metadata.related": "Explore the catalog",
+  "record.metadata.resource.contacts": "Contacts for the resource",
   "record.metadata.resourceCreated": "Created",
   "record.metadata.resourcePublished": "Published",
   "record.metadata.resourceUpdated": "Last updated",

package/translations/es.json

@@ -520,6 +520,7 @@
   "record.metadata.quality.updateFrequency.failed": "",
   "record.metadata.quality.updateFrequency.success": "",
   "record.metadata.related": "",
+  "record.metadata.resource.contacts": "",
   "record.metadata.resourceCreated": "",
   "record.metadata.resourcePublished": "",
   "record.metadata.resourceUpdated": "",

package/translations/fr.json

@@ -520,6 +520,7 @@
   "record.metadata.quality.updateFrequency.failed": "La fréquence de mise à jour n'est pas renseignée",
   "record.metadata.quality.updateFrequency.success": "La fréquence de mise à jour est renseignée",
   "record.metadata.related": "Explorez le catalogue",
+  "record.metadata.resource.contacts": "Contacts liés à la donnée",
   "record.metadata.resourceCreated": "Créé",
   "record.metadata.resourcePublished": "Publié",
   "record.metadata.resourceUpdated": "Mis à jour",

package/translations/it.json

@@ -520,6 +520,7 @@
   "record.metadata.quality.updateFrequency.failed": "La frequenza di aggiornamento non è specificata",
   "record.metadata.quality.updateFrequency.success": "La frequenza di aggiornamento è specificata",
   "record.metadata.related": "Vedi anche",
+  "record.metadata.resource.contacts": "Contatti per la risorsa",
   "record.metadata.resourceCreated": "Creato",
   "record.metadata.resourcePublished": "Pubblicato",
   "record.metadata.resourceUpdated": "Ultimo aggiornamento",

package/translations/nl.json

@@ -520,6 +520,7 @@
   "record.metadata.quality.updateFrequency.failed": "",
   "record.metadata.quality.updateFrequency.success": "",
   "record.metadata.related": "",
+  "record.metadata.resource.contacts": "",
   "record.metadata.resourceCreated": "",
   "record.metadata.resourcePublished": "",
   "record.metadata.resourceUpdated": "",

package/translations/pt.json

@@ -520,6 +520,7 @@
   "record.metadata.quality.updateFrequency.failed": "",
   "record.metadata.quality.updateFrequency.success": "",
   "record.metadata.related": "",
+  "record.metadata.resource.contacts": "",
   "record.metadata.resourceCreated": "",
   "record.metadata.resourcePublished": "",
   "record.metadata.resourceUpdated": "",

package/translations/sk.json

@@ -520,6 +520,7 @@
   "record.metadata.quality.updateFrequency.failed": "Frekvencia aktualizácie nie je určená",
   "record.metadata.quality.updateFrequency.success": "Frekvencia aktualizácie je určená",
   "record.metadata.related": "Súvisiace záznamy",
+  "record.metadata.resource.contacts": "Kontakty k zdroju",
   "record.metadata.resourceCreated": "",
   "record.metadata.resourcePublished": "",
   "record.metadata.resourceUpdated": "",