geonetwork-ui 2.1.0-initial

package/src/libs/ui/elements/src/lib/download-item/download-item.component.html

@@ -0,0 +1,34 @@
+<a
+  href="{{ link.url }}"
+  target="_blank"
+  class="group flex justify-between card-shadow px-6 py-5 cursor-pointer"
+  rel="noopener"
+>
+  <div class="grow-1 w-full overflow-hidden">
+    <div
+      class="text-21 text-black truncate font-title w-11/12"
+      [title]="link.description || link.name"
+    >
+      {{ link.description || link.name }}
+    </div>
+    <div class="pt-1">
+      <span
+        class="inline-flex items-center justify-center px-2 py-1 text-13 font-medium leading-none text-white rounded transition-opacity opacity-70 group-hover:opacity-100"
+        [style.background-color]="color"
+        data-cy="download-format"
+        >{{ format || ('downloads.format.unknown' | translate) }}</span
+      >
+      <span
+        class="pl-2 inline-flex items-center text-gray-800 text-sm"
+        *ngIf="isFromWfs"
+        translate=""
+        >datahub.search.filter.generatedByWfs</span
+      >
+    </div>
+  </div>
+  <div class="shrink-1 w-14 flex flex-col justify-center items-center">
+    <mat-icon class="!w-8 !h-8 card-icon text-3xl material-symbols-outlined">
+      cloud_download
+    </mat-icon>
+  </div>
+</a>

package/src/libs/ui/elements/src/lib/download-item/download-item.component.ts

@@ -0,0 +1,26 @@
+import {
+  Component,
+  ChangeDetectionStrategy,
+  Input,
+  Output,
+  EventEmitter,
+} from '@angular/core'
+import { DatasetDistribution } from '../../../../../../libs/common/domain/src/lib/record'
+
+@Component({
+  selector: 'gn-ui-download-item',
+  templateUrl: './download-item.component.html',
+  styleUrls: ['./download-item.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class DownloadItemComponent {
+  @Input() link: DatasetDistribution
+  @Input() color: string
+  @Input() format: string
+  @Input() isFromWfs: boolean
+  @Output() exportUrl = new EventEmitter<string>()
+
+  openUrl() {
+    this.exportUrl.emit(this.link.url.toString())
+  }
+}

package/src/libs/ui/elements/src/lib/downloads-list/downloads-list.component.html

@@ -0,0 +1,33 @@
+<div
+  class="flex flex-wrap justify-between mt-8 mb-6 sm:mt-12 sm:mb-2"
+  *ngIf="links && links.length > 0"
+>
+  <p
+    class="font-title text-[28px] text-title font-medium mr-4 pb-4 text-center sm:text-left"
+    translate
+  >
+    record.metadata.download
+  </p>
+  <div class="flex flex-wrap justify-start sm:justify-end sm:pb-4">
+    <gn-ui-button
+      class="m-1 format-filter"
+      [extraClass]="
+        '!px-[12px] !py-[8px] !text-[15px]' +
+        (isFilterActive(format) ? ' opacity-100' : ' opacity-50')
+      "
+      (buttonClick)="toggleFilterFormat(format)"
+      [attr.data-format]="format"
+      *ngFor="let format of visibleFormats"
+    >
+      {{ getFilterFormatTitle(format) }}
+    </gn-ui-button>
+  </div>
+</div>
+<div class="mb-2 sm:mb-3" *ngFor="let link of filteredLinks">
+  <gn-ui-download-item
+    [link]="link"
+    [color]="getLinkColor(link)"
+    [format]="getLinkFormat(link)"
+    [isFromWfs]="isFromWfs(link)"
+  ></gn-ui-download-item>
+</div>

package/src/libs/ui/elements/src/lib/downloads-list/downloads-list.component.ts

@@ -0,0 +1,100 @@
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
+import { TranslateService } from '@ngx-translate/core'
+import { marker } from '@biesbjerg/ngx-translate-extract-marker'
+import { getBadgeColor, getFileFormat } from '../../../../../../libs/util/shared/src'
+import { DatasetDistribution } from '../../../../../../libs/common/domain/src/lib/record'
+
+marker('datahub.search.filter.all')
+marker('datahub.search.filter.others')
+
+const FILTER_FORMATS = ['all', 'csv', 'excel', 'json', 'shp', 'others'] as const
+type FilterFormat = typeof FILTER_FORMATS[number]
+
+@Component({
+  selector: 'gn-ui-downloads-list',
+  templateUrl: './downloads-list.component.html',
+  styleUrls: ['./downloads-list.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class DownloadsListComponent {
+  constructor(private translateService: TranslateService) {}
+
+  @Input() links: DatasetDistribution[]
+
+  activeFilterFormats: FilterFormat[] = ['all']
+
+  get filteredLinks(): DatasetDistribution[] {
+    return this.links.filter((link) =>
+      this.activeFilterFormats.some((format) =>
+        this.isLinkOfFormat(link, format)
+      )
+    )
+  }
+
+  get visibleFormats(): FilterFormat[] {
+    return FILTER_FORMATS.filter((format) =>
+      this.links.some((link) => this.isLinkOfFormat(link, format))
+    )
+  }
+
+  toggleFilterFormat(format: FilterFormat): void {
+    if (format === 'all') {
+      this.activeFilterFormats = ['all']
+      return
+    }
+    if (this.isFilterActive(format)) {
+      this.activeFilterFormats = this.activeFilterFormats.filter(
+        (f: string) => format !== f
+      )
+    } else {
+      this.activeFilterFormats = [
+        ...this.activeFilterFormats.filter((f) => f !== 'all'),
+        format,
+      ]
+    }
+    if (this.activeFilterFormats.length === 0) {
+      this.activeFilterFormats = ['all']
+    }
+  }
+
+  isFilterActive(filter: FilterFormat): boolean {
+    return this.activeFilterFormats.includes(filter)
+  }
+
+  getFilterFormatTitle(format: FilterFormat) {
+    if (format === 'all' || format === 'others') {
+      return this.translateService.instant(`datahub.search.filter.${format}`)
+    }
+    return format
+  }
+
+  isLinkOfFormat(link: DatasetDistribution, format: FilterFormat): boolean {
+    if (format === 'all') {
+      return true
+    }
+    if (getFileFormat(link) === null) {
+      return format === 'others'
+    }
+    if (format === 'others') {
+      const knownFormats = FILTER_FORMATS.filter(
+        (format) => format !== 'all' && format !== 'others'
+      )
+      return knownFormats.every(
+        (knownFormat) => !getFileFormat(link).includes(knownFormat)
+      )
+    }
+    return getFileFormat(link).includes(format)
+  }
+
+  getLinkFormat(link: DatasetDistribution) {
+    return getFileFormat(link)
+  }
+
+  getLinkColor(link: DatasetDistribution) {
+    return getBadgeColor(getFileFormat(link))
+  }
+
+  isFromWfs(link: DatasetDistribution) {
+    return link.type === 'service' && link.accessServiceProtocol === 'wfs'
+  }
+}

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

@@ -0,0 +1,25 @@
+<a
+  [href]="link.url"
+  target="_blank"
+  class="flex flex-col justify-between group h-40 grow py-5 px-5 bg-white rounded border-gray-300 filter card-shadow overflow-hidden lg:w-80"
+>
+  <div class="max-h-24 overflow-hidden text-ellipsis">
+    <p
+      class="font-title font-medium text-21 text-black break-words pb-1 line-clamp-2"
+    >
+      {{ link.name }}
+    </p>
+    <p class="font-medium text-sm break-words">
+      {{ link.description }}
+    </p>
+    <p
+      *ngIf="!link.name && !link.description"
+      class="font-medium text-sm break-words truncate"
+    >
+      {{ link.url }}
+    </p>
+  </div>
+  <div>
+    <mat-icon class="material-symbols-outlined card-icon">open_in_new</mat-icon>
+  </div>
+</a>

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

@@ -0,0 +1,12 @@
+import { Component, ChangeDetectionStrategy, Input } from '@angular/core'
+import { DatasetDistribution } from '../../../../../../libs/common/domain/src/lib/record'
+
+@Component({
+  selector: 'gn-ui-link-card',
+  templateUrl: './link-card.component.html',
+  styleUrls: ['./link-card.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class LinkCardComponent {
+  @Input() link: DatasetDistribution
+}

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

@@ -0,0 +1,8 @@
+<div>
+  <p class="text-gray-700 text-xs mb-3 uppercase" translate>
+    record.metadata.catalog
+  </p>
+  <p class="text-primary font-title text-21 mb-1">
+    {{ sourceLabel }}
+  </p>
+</div>

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

@@ -0,0 +1,11 @@
+import { Component, ChangeDetectionStrategy, Input } from '@angular/core'
+
+@Component({
+  selector: 'gn-ui-metadata-catalog',
+  templateUrl: './metadata-catalog.component.html',
+  styleUrls: ['./metadata-catalog.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class MetadataCatalogComponent {
+  @Input() sourceLabel: string
+}

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

@@ -0,0 +1,32 @@
+<div *ngIf="shownOrganization" class="mb-6 sm:mb-12">
+  <p class="text-gray-700 text-xs mb-3 uppercase" translate>
+    record.metadata.contact
+  </p>
+  <div class="flex mb-1">
+    <div
+      class="text-primary font-title text-21 mr-2 cursor-pointer hover:underline"
+      (click)="onOrganizationClick()"
+    >
+      {{ shownOrganization.name }}
+    </div>
+  </div>
+  <a
+    *ngIf="contacts.length"
+    [href]="'mailto:' + contacts[0].email"
+    class="text-gray-700 text-sm hover:underline"
+    target="_blank"
+    >{{ contacts[0].email }}</a
+  >
+  <div *ngIf="shownOrganization.website" class="mb-2">
+    <a
+      [href]="shownOrganization.website"
+      target="_blank"
+      class="contact-website text-primary text-sm cursor-pointer hover:underline transition-all"
+      >{{ shownOrganization.website }}
+      <mat-icon
+        class="material-symbols-outlined !w-[12px] !h-[12px] !text-[12px] opacity-75"
+        >open_in_new</mat-icon
+      >
+    </a>
+  </div>
+</div>

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

@@ -0,0 +1,40 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  EventEmitter,
+  Input,
+  Output,
+} from '@angular/core'
+import {
+  CatalogRecord,
+  Individual,
+  Organization,
+} from '../../../../../../libs/common/domain/src/lib/record'
+
+@Component({
+  selector: 'gn-ui-metadata-contact',
+  templateUrl: './metadata-contact.component.html',
+  styleUrls: ['./metadata-contact.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class MetadataContactComponent {
+  @Input() metadata: Partial<CatalogRecord>
+  @Output() organizationClick = new EventEmitter<Organization>()
+  @Output() contactClick = new EventEmitter<Individual>()
+
+  get shownOrganization() {
+    return this.metadata.ownerOrganization
+  }
+
+  get contacts() {
+    return (
+      (this.metadata.kind === 'dataset'
+        ? this.metadata.contactsForResource
+        : this.metadata.contacts) || []
+    )
+  }
+
+  onOrganizationClick() {
+    this.organizationClick.emit(this.shownOrganization)
+  }
+}

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

@@ -0,0 +1,38 @@
+/* eslint-disable @angular-eslint/directive-selector */
+import { Directive, ElementRef, Renderer2, OnInit } from '@angular/core'
+
+@Directive({
+  selector: '[gnUiLinkify]',
+})
+export class GnUiLinkifyDirective implements OnInit {
+  constructor(private el: ElementRef, private renderer: Renderer2) {}
+
+  ngOnInit() {
+    setTimeout(() => {
+      this.processLinks()
+    }, 0)
+  }
+
+  private processLinks() {
+    const container = this.el.nativeElement
+
+    const nodes = Array.from(container.childNodes)
+    nodes.forEach((node) => {
+      if (node instanceof Text) {
+        const textNode = node as Text
+        const linkified = this.linkifyText(textNode.nodeValue)
+        const span = this.renderer.createElement('span')
+        span.innerHTML = linkified
+        container.insertBefore(span, textNode)
+        container.removeChild(textNode)
+      }
+    })
+  }
+
+  private linkifyText(text: string): string {
+    return text.replace(/(\bhttps?:\/\/\S+\b)/g, (match) => {
+      return `<a href="${match}" target="_blank"
+                  class="text-primary cursor-pointer hover:underline">${match} <mat-icon class="material-symbols-outlined !w-[12px] !h-[14px] !text-[14px] opacity-75">open_in_new</mat-icon></a>`
+    })
+  }
+}

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

@@ -0,0 +1,9 @@
+/* Use a standard link style for description, since it can contain html */
+.md-description ::ng-deep a {
+  @apply underline text-blue-600 hover:text-blue-800;
+}
+
+.info-grid > :nth-last-child(n + 3) {
+  padding-bottom: 10px;
+  @apply border-b border-gray-300;
+}

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

@@ -0,0 +1,105 @@
+<p
+  class="text-[28px] text-title text-center mb-6 font-title sm:text-left"
+  translate
+>
+  record.metadata.about
+</p>
+<div class="mb-6 md-description sm:mb-4 sm:pr-16">
+  <gn-ui-content-ghost ghostClass="h-32" [showContent]="fieldReady('abstract')">
+    <p
+      class="whitespace-pre-line break-words"
+      [innerHTML]="metadata.abstract | safe: 'html'"
+      *ngIf="metadata.abstract"
+    ></p>
+  </gn-ui-content-ghost>
+</div>
+
+<ng-container *ngIf="metadata.keywords?.length">
+  <p class="mb-3 font-medium text-primary text-sm" translate>
+    record.metadata.keywords
+  </p>
+  <div class="mb-9 sm:mb-16">
+    <gn-ui-badge
+      class="inline-block mr-2 mb-2 lowercase"
+      (click)="onKeywordClick(keyword)"
+      [clickable]="true"
+      *ngFor="let keyword of metadata.keywords"
+      >{{ keyword }}</gn-ui-badge
+    >
+  </div>
+</ng-container>
+
+<gn-ui-expandable-panel
+  class="metadata-origin"
+  *ngIf="
+    metadata.lineage ||
+    metadata.recordUpdated ||
+    metadata.updateFrequency ||
+    metadata.status
+  "
+  [title]="'record.metadata.origin' | translate"
+>
+  <p
+    *ngIf="metadata.lineage"
+    class="mb-5 pt-4 whitespace-pre-line break-words"
+    gnUiLinkify
+  >
+    {{ metadata.lineage }}
+  </p>
+  <div
+    class="py-4 px-6 rounded bg-gray-100 grid grid-cols-2 gap-y-[10px] gap-x-[20px] text-gray-700 info-grid"
+  >
+    <div *ngIf="metadata.recordUpdated">
+      <p class="text-sm" translate>record.metadata.updatedOn</p>
+      <p class="text-primary font-medium mt-1">
+        {{ metadata.recordUpdated && metadata.recordUpdated.toLocaleString() }}
+      </p>
+    </div>
+    <div *ngIf="metadata.updateFrequency">
+      <p class="text-sm" translate>record.metadata.updateFrequency</p>
+      <p class="text-primary font-medium mt-1" translate>
+        domain.record.updateFrequency.{{ metadata.updateFrequency }}
+      </p>
+    </div>
+    <div *ngIf="metadata.status">
+      <p class="text-sm" translate>record.metadata.updateStatus</p>
+      <p class="text-primary font-medium mt-1" translate>
+        domain.record.status.{{ metadata.status }}
+      </p>
+    </div>
+  </div>
+</gn-ui-expandable-panel>
+<gn-ui-expandable-panel [title]="'record.metadata.usage' | translate">
+  <div class="py-4 px-6 rounded bg-gray-100 text-gray-700 flex flex-wrap gap-2">
+    <gn-ui-badge *ngIf="metadata.extras?.isOpenData">
+      <span translate>record.metadata.isOpenData</span>
+    </gn-ui-badge>
+    <span
+      class="text-primary font-medium"
+      *ngFor="let usage of usages"
+      gnUiLinkify
+    >
+      {{ usage }}
+    </span>
+    <span class="text-primary font-medium noUsage" *ngIf="!hasUsage">
+      {{ 'record.metadata.noUsage' | translate }}
+    </span>
+  </div>
+</gn-ui-expandable-panel>
+<gn-ui-expandable-panel
+  *ngIf="metadata.landingPage"
+  [title]="'record.metadata.details' | translate"
+>
+  <div class="py-5 px-5 rounded bg-gray-100 text-gray-700">
+    <p class="text-sm" translate>record.metadata.sheet</p>
+    <p class="text-primary font-medium mt-1" translate>
+      <a [href]="metadata.landingPage" target="_blank">
+        <mat-icon
+          class="material-symbols-outlined inline-block align-bottom pt-1.5 text-xs text-black !w-[20px]"
+          >open_in_new</mat-icon
+        >
+        <span class="break-all">{{ metadata.landingPage }}</span>
+      </a>
+    </p>
+  </div>
+</gn-ui-expandable-panel>

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

@@ -0,0 +1,47 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  EventEmitter,
+  Input,
+  Output,
+} from '@angular/core'
+import { DatasetRecord } from '../../../../../../libs/common/domain/src/lib/record'
+
+@Component({
+  selector: 'gn-ui-metadata-info',
+  templateUrl: './metadata-info.component.html',
+  styleUrls: ['./metadata-info.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class MetadataInfoComponent {
+  @Input() metadata: Partial<DatasetRecord>
+  @Input() incomplete: boolean
+  @Output() keyword = new EventEmitter<string>()
+
+  get hasUsage() {
+    return (
+      this.metadata.extras?.isOpenData === true ||
+      this.metadata.useLimitations?.length ||
+      this.metadata.accessConstraints?.length
+    )
+  }
+
+  get usages(): string[] {
+    let array = []
+    if (this.metadata.useLimitations?.length) {
+      array = array.concat(this.metadata.useLimitations)
+    }
+    if (this.metadata.accessConstraints?.length) {
+      array = array.concat(this.metadata.accessConstraints.map((c) => c.text))
+    }
+    return array
+  }
+
+  fieldReady(propName: string) {
+    return !this.incomplete || propName in this.metadata
+  }
+
+  onKeywordClick(keyword: string) {
+    this.keyword.emit(keyword)
+  }
+}

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

@@ -0,0 +1,3 @@
+:host gn-ui-progress-bar {
+  --progress-bar-font-weight: 'normal';
+}

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

@@ -0,0 +1,27 @@
+<div
+  *ngIf="metadataQualityDisplay?.widget === true"
+  class="mb-6 metadata-quality"
+  (mouseenter)="showMenu()"
+  (mouseleave)="hideMenu()"
+>
+  <div class="min-w-[200px]" [class]="smaller ? 'leading-[8px]' : ''">
+    <gn-ui-progress-bar
+      (focus)="showMenu()"
+      (blur)="hideMenu()"
+      tabindex="0"
+      [value]="qualityScore"
+      type="primary"
+    ></gn-ui-progress-bar>
+  </div>
+  <div
+    class="absolute z-10 bg-white border border-black border-opacity-35 rounded-lg shadow-lg p-5 whitespace-nowrap"
+    [class]="isMenuShown ? 'block' : 'hidden'"
+  >
+    <div class="mb-4 font-bold" translate>record.metadata.quality.details</div>
+    <gn-ui-metadata-quality-item
+      *ngFor="let e of items"
+      [name]="e.name"
+      [value]="e.value"
+    ></gn-ui-metadata-quality-item>
+  </div>
+</div>

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

@@ -0,0 +1,84 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  Input,
+  OnChanges,
+  SimpleChanges,
+} from '@angular/core'
+import { MetadataQualityItem } from '../metadata-quality-item/metadata-quality-item.component'
+import { CatalogRecord } from '../../../../../../libs/common/domain/src/lib/record'
+
+export interface MetadataQualityDisplay {
+  widget: boolean
+  title: boolean
+  description: boolean
+  topic: boolean
+  keywords: boolean
+  legalConstraints: boolean
+  organisation: boolean
+  contact: boolean
+  updateFrequency: boolean
+}
+
+@Component({
+  selector: 'gn-ui-metadata-quality',
+  templateUrl: './metadata-quality.component.html',
+  styleUrls: ['./metadata-quality.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class MetadataQualityComponent implements OnChanges {
+  @Input() metadata: Partial<CatalogRecord>
+  @Input() smaller = false
+  @Input() metadataQualityDisplay: MetadataQualityDisplay
+
+  items: MetadataQualityItem[] = []
+
+  isMenuShown = false
+
+  get qualityScore() {
+    const qualityScore = this.metadata?.extras?.qualityScore
+    return typeof qualityScore === 'number'
+      ? qualityScore
+      : this.calculatedQualityScore
+  }
+
+  get calculatedQualityScore(): number {
+    return Math.round(
+      (this.items.filter(({ value }) => value === true).length * 100) /
+        this.items.length
+    )
+  }
+
+  showMenu() {
+    this.isMenuShown = true
+  }
+
+  hideMenu() {
+    this.isMenuShown = false
+  }
+
+  private add(name: string, value: boolean) {
+    if (this.metadataQualityDisplay?.[name] !== false) {
+      this.items.push({ name, value })
+    }
+  }
+
+  initialize() {
+    const contact = this.metadata?.contacts?.[0]
+    this.items = []
+    this.add('title', !!this.metadata?.title)
+    this.add('description', !!this.metadata?.abstract)
+    this.add('topic', this.metadata?.themes?.length > 0)
+    this.add('keywords', this.metadata?.keywords?.length > 0)
+    this.add('legalConstraints', this.metadata?.legalConstraints?.length > 0)
+    this.add('organisation', !!contact?.organization)
+    this.add('contact', !!contact?.email)
+    this.add('updateFrequency', !!this.metadata?.updateFrequency)
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes['metadata'] || changes['metadataQualityDisplay']) {
+      this.initialize()
+    }
+  }
+}

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

@@ -0,0 +1,4 @@
+<div class="ml-4 flex flex-row">
+  <mat-icon>{{ icon }}</mat-icon>
+  <p class="ml-2 text">{{ labelKey | translate }}</p>
+</div>