geonetwork-ui 2.1.0-initial

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

@@ -0,0 +1,83 @@
+<div
+  class="mx-[18px] pl-[18px] pb-[18px] border-solid border-l-2 border-gray-100"
+>
+  <a
+    class="record-container block rounded-lg bg-white border border-white card-shadow"
+    [attr.href]="linkHref"
+    [target]="linkTarget"
+  >
+    <div
+      class="record-header py-4 px-4 border-b border-gray-300 flex flex-row items-center relative transition duration-200"
+    >
+      <div
+        class="absolute w-3 h-3 bg-secondary rounded-full"
+        style="right: calc(100% + 14px)"
+      ></div>
+      <div
+        class="record-header-image border border-gray-300 bg-white rounded-full w-16 h-16 object-contain mr-4 overflow-hidden transition duration-200 shrink-0"
+      >
+        <mat-icon
+          *ngIf="!hasLogo"
+          class="material-symbols-outlined text-gray-200"
+          style="width: 42px; height: 42px; font-size: 42px; margin: 10px"
+          >{{ hasOnlyPerson ? 'face' : 'home_work' }}</mat-icon
+        >
+        <gn-ui-thumbnail
+          *ngIf="hasLogo"
+          [thumbnailUrl]="record.ownerOrganization?.logoUrl?.toString()"
+        ></gn-ui-thumbnail>
+      </div>
+      <div class="flex flex-col overflow-hidden items-start">
+        <span
+          *ngIf="hasOrganization"
+          class="font-bold transition duration-200 text-primary truncate max-w-full"
+        >
+          {{ record.ownerOrganization.name }}
+        </span>
+        <span
+          *ngIf="hasOnlyPerson"
+          class="font-bold transition duration-200 text-primary truncate max-w-full"
+        >
+          {{ contact.firstName }} {{ contact.lastName }}
+        </span>
+        <p class="">
+          <span translate [translateParams]="{ time }"
+            >record.was.created.time</span
+          >
+        </p>
+      </div>
+    </div>
+    <div class="pt-5 pb-5 px-10 relative">
+      <div class="absolute top-[0.85em] right-[0.85em]">
+        <ng-container
+          [ngTemplateOutlet]="favoriteTemplate"
+          [ngTemplateOutletContext]="{ $implicit: record }"
+        ></ng-container>
+      </div>
+      <h1
+        class="font-title text-black text-[21px] font-medium mb-3 pr-8"
+        data-cy="recordTitle"
+      >
+        {{ record.title }}
+      </h1>
+      <p class="line-clamp-3">{{ abstract }}</p>
+      <gn-ui-thumbnail
+        *ngIf="record.overviews?.[0]"
+        class="block mt-3 w-full h-[136px] border border-gray-100 rounded-lg overflow-hidden"
+        [thumbnailUrl]="record.overviews?.[0]?.url.toString()"
+      ></gn-ui-thumbnail>
+      <div class="flex flex-row mt-3" *ngIf="isDownloadable || isViewable">
+        <mat-icon
+          *ngIf="isDownloadable"
+          class="material-symbols-outlined text-primary opacity-45 mr-3"
+          >cloud_download
+        </mat-icon>
+        <mat-icon
+          *ngIf="isViewable"
+          class="material-symbols-outlined text-primary opacity-45 mr-3"
+          >map
+        </mat-icon>
+      </div>
+    </div>
+  </a>
+</div>

package/src/libs/ui/search/src/lib/record-preview-feed/record-preview-feed.component.ts

@@ -0,0 +1,34 @@
+import { ChangeDetectionStrategy, Component, ElementRef } from '@angular/core'
+import { RecordPreviewComponent } from '../record-preview/record-preview.component'
+import { TranslateService } from '@ngx-translate/core'
+import Duration from 'duration-relativetimeformat'
+
+@Component({
+  selector: 'gn-ui-record-preview-feed',
+  templateUrl: './record-preview-feed.component.html',
+  styleUrls: ['./record-preview-feed.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class RecordPreviewFeedComponent extends RecordPreviewComponent {
+  timeFormat = new Duration(this.translate.currentLang, {})
+
+  constructor(
+    protected elementRef: ElementRef,
+    private translate: TranslateService
+  ) {
+    super(elementRef)
+  }
+
+  get hasOrganization() {
+    return !!this.record.ownerOrganization
+  }
+  get hasLogo() {
+    return !!this.record.ownerOrganization?.logoUrl
+  }
+  get hasOnlyPerson() {
+    return false // FIXME: this doesn't make sense anymore, there should always be an owner org
+  }
+  get time() {
+    return this.timeFormat.format(this.record.recordCreated, Date.now())
+  }
+}

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

@@ -0,0 +1,42 @@
+<div
+  class="h-40 bg-white transition duration-200 border border-gray-200 rounded-md hover:bg-gray-50 hover:border-primary hover:text-primary"
+>
+  <a
+    [href]="record.landingPage"
+    [target]="linkTarget"
+    [title]="record.abstract"
+  >
+    <div class="h-full flex flex-row items-center shadow-sm">
+      <gn-ui-thumbnail
+        class="w-40 h-full shrink-0 border-r border-gray-200 bg-gray-100"
+        [thumbnailUrl]="record.overviews?.[0]?.url.toString()"
+      ></gn-ui-thumbnail>
+
+      <div class="grow h-full px-6 py-4 flex flex-col overflow-hidden">
+        <div class="title-font text-lg font-medium mb-2">
+          <h1 class="truncate">{{ record.title }}</h1>
+        </div>
+        <p class="leading-relaxed clamp-3 text-sm text-gray-700">
+          {{ record.abstract }}
+        </p>
+        <div class="grow"></div>
+        <div class="flex flex-row items-center">
+          <div
+            class="text-gray-500 text-xs truncate capitalize border-r mr-4 pr-4"
+            *ngIf="record.kind === 'dataset'"
+          >
+            <span translate>{{ record.updateFrequency }}</span>
+          </div>
+          <div
+            class="text-gray-500 text-xs border-gray-300 truncate viewable-downloadable"
+            *ngIf="isViewable || isDownloadable"
+          >
+            <span *ngIf="isViewable" translate>record.action.view</span>
+            <span *ngIf="isViewable && isDownloadable">,&nbsp;</span>
+            <span *ngIf="isDownloadable" translate>record.action.download</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </a>
+</div>

package/src/libs/ui/search/src/lib/record-preview-list/record-preview-list.component.scss

@@ -0,0 +1,3 @@
+.viewable-downloadable :first-child {
+  text-transform: capitalize;
+}

package/src/libs/ui/search/src/lib/record-preview-list/record-preview-list.component.ts

@@ -0,0 +1,10 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core'
+import { RecordPreviewComponent } from '../record-preview/record-preview.component'
+
+@Component({
+  selector: 'gn-ui-record-preview-list',
+  templateUrl: './record-preview-list.component.html',
+  styleUrls: ['./record-preview-list.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class RecordPreviewListComponent extends RecordPreviewComponent {}

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

@@ -0,0 +1,3 @@
+.limit-organisation-with-quality {
+  max-width: calc(100% - 170px);
+}

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

@@ -0,0 +1,77 @@
+<a
+  class="group container-lg mx-auto flex cursor-pointer flex-wrap sm:flex-nowrap"
+  [title]="record.title"
+  [attr.href]="linkHref"
+>
+  <div class="shrink-0 w-full sm:w-52">
+    <div
+      class="overflow-hidden bg-gray-100 rounded-lg w-full border border-gray-300 h-36"
+    >
+      <gn-ui-thumbnail
+        class="relative h-full w-full object-cover object-left-top"
+        [thumbnailUrl]="[record.overviews?.[0]?.url?.toString(), organization?.logoUrl?.toString()]"
+        [fit]="['cover', 'contain']"
+      ></gn-ui-thumbnail>
+    </div>
+  </div>
+  <div
+    class="content grid grow relative sm:pl-6 sm:pr-12"
+    style="grid-template-columns: auto 70px"
+  >
+    <div class="mb-3 mt-5 sm:mt-2">
+      <div
+        class="font-title text-21 text-title line-clamp-2 col-start-1 col-span-2 sm:line-clamp-1 group-hover:text-primary transition-colors"
+        data-cy="recordTitle"
+      >
+        {{ record.title }}
+      </div>
+    </div>
+    <div
+      class="abstract mt-4 mb-5 h-36 line-clamp-6 col-start-1 col-span-2 row-start-3 sm:mb-2 sm:h-[4.5rem] sm:line-clamp-3 sm:row-start-2 sm:mt-0"
+      data-cy="recordAbstract"
+    >
+      {{ abstract }}
+    </div>
+    <div
+      class="text-primary opacity-45 uppercase col-start-1 col-span-2 row-start-2 sm:truncate sm:row-start-3 sm:col-span-1"
+      data-cy="recordOrg"
+      [class]="
+        hasMetadataQualityWidget ? 'limit-organisation-with-quality' : ''
+      "
+    >
+      {{ organization?.name }}
+    </div>
+    <div
+      class="icons flex flex-row col-start-1 row-start-4 sm:col-start-2 sm:row-start-3 sm:absolute sm:right-[0.4em]"
+    >
+      <mat-icon
+        *ngIf="isDownloadable"
+        class="material-symbols-outlined text-primary opacity-45 mx-1"
+        >cloud_download</mat-icon
+      >
+      <mat-icon
+        *ngIf="isViewable"
+        class="material-symbols-outlined text-primary opacity-45 mx-1"
+        >map</mat-icon
+      >
+    </div>
+    <div
+      *ngIf="hasMetadataQualityWidget"
+      class="col-start-2 row-start-4 sm:row-start-3 absolute right-[4em] sm:right-[5em]"
+    >
+      <gn-ui-metadata-quality
+        smaller="true"
+        [metadata]="record"
+        [metadataQualityDisplay]="metadataQualityDisplay"
+      ></gn-ui-metadata-quality>
+    </div>
+    <div
+      class="text-right col-start-3 row-start-4 sm:absolute sm:col-start-2 sm:row-start-1 sm:top-[-1.125em] sm:right-[0.4em]"
+    >
+      <ng-container
+        [ngTemplateOutlet]="favoriteTemplate"
+        [ngTemplateOutletContext]="{ $implicit: record }"
+      ></ng-container>
+    </div>
+  </div>
+</a>

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

@@ -0,0 +1,14 @@
+import { ChangeDetectionStrategy, Component, ElementRef } from '@angular/core'
+import { RecordPreviewComponent } from '../record-preview/record-preview.component'
+
+@Component({
+  selector: 'gn-ui-record-preview-row',
+  templateUrl: './record-preview-row.component.html',
+  styleUrls: ['./record-preview-row.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class RecordPreviewRowComponent extends RecordPreviewComponent {
+  constructor(protected elementRef: ElementRef) {
+    super(elementRef)
+  }
+}

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

@@ -0,0 +1,40 @@
+<!-- Record list item: List Small -->
+<div class="mb-4">
+  <div
+    class="flex sm:flex-row flex-col p-5 items-center sm:justify-start justify-center text-center sm:text-left bg-white border-gray-200 border rounded-sm transition duration-200 hover:bg-gray-50 hover:border-primary hover:text-primary"
+  >
+    <div class="grow">
+      <h1 class="title-font text-lg font-medium mb-3">
+        {{ record.title }}
+      </h1>
+      <p
+        class="leading-relaxed mb-3 text-gray-700 text-sm whitespace-pre-line clamp-3"
+      >
+        {{ record.abstract }}
+      </p>
+
+      <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
+        <a
+          class="inline-flex items-center md:mb-2 lg:mb-0 hover:underline"
+          [href]="record.landingPage"
+        >
+          <span translate>record.more.details</span>
+          <svg
+            class="h-5 w-5"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+          >
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="M9 5l7 7-7 7"
+            />
+          </svg>
+        </a>
+      </div>
+    </div>
+  </div>
+</div>

package/src/libs/ui/search/src/lib/record-preview-text/record-preview-text.component.ts

@@ -0,0 +1,10 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core'
+import { RecordPreviewComponent } from '../record-preview/record-preview.component'
+
+@Component({
+  selector: 'gn-ui-record-preview-text',
+  templateUrl: './record-preview-text.component.html',
+  styleUrls: ['./record-preview-text.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class RecordPreviewTextComponent extends RecordPreviewComponent {}

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

@@ -0,0 +1,23 @@
+<!-- Record list item: List Small -->
+<div
+  class="h-10 w-full border-b border-gray-200 transition duration-200 rounded-sm hover:text-primary"
+>
+  <a
+    [href]="record.landingPage"
+    [target]="linkTarget"
+    [title]="record.abstract"
+  >
+    <div class="h-full flex flex-row items-center">
+      <gn-ui-thumbnail
+        class="w-10 h-full shrink-0 border-r border-gray-200 bg-gray-100"
+        [thumbnailUrl]="record.overviews?.[0]?.url.toString()"
+      ></gn-ui-thumbnail>
+
+      <div class="grow px-3 py-1 flex flex-col overflow-hidden">
+        <h1 class="title-font text-sm font-bold truncate md:text-clip">
+          {{ record.title }}
+        </h1>
+      </div>
+    </div>
+  </a>
+</div>

package/src/libs/ui/search/src/lib/record-preview-title/record-preview-title.component.ts

@@ -0,0 +1,10 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core'
+import { RecordPreviewComponent } from '../record-preview/record-preview.component'
+
+@Component({
+  selector: 'gn-ui-record-preview-title',
+  templateUrl: './record-preview-title.component.html',
+  styleUrls: ['./record-preview-title.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class RecordPreviewTitleComponent extends RecordPreviewComponent {}

package/src/libs/ui/search/src/lib/record-table/record-table.component.css

@@ -0,0 +1,7 @@
+.record-table-col {
+  @apply px-5 py-3 items-center truncate;
+}
+
+.record-table-header {
+  @apply record-table-col capitalize;
+}

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

@@ -0,0 +1,150 @@
+<div>
+  <div *ngIf="totalHits" class="">
+    <div
+      translate
+      class="my-8 ml-4 block text-gray-500"
+      [translateParams]="{
+        displayed: records.length,
+        hits: totalHits
+      }"
+    >
+      results.records.hits.displayedOn
+    </div>
+
+    <div
+      class="grid grid-cols-[repeat(5,minmax(0,max-content))] gap-x-4 gap-y-1"
+    >
+      <div class="contents text-sm">
+        <div class="record-table-header text-gray-400 flex gap-1">
+          <gn-ui-button
+            type="light"
+            extraClass="px-3 py-2 space-x-1"
+            (buttonClick)="setSortBy('resourceTitleObject.default.keyword')"
+          >
+            <span translate>record.metadata.title</span>
+            <mat-icon
+              class="material-symbols-outlined"
+              *ngIf="isSortedBy('resourceTitleObject.default.keyword', 'desc')"
+            >
+              expand_more</mat-icon
+            >
+            <mat-icon
+              class="material-symbols-outlined"
+              *ngIf="isSortedBy('resourceTitleObject.default.keyword', 'asc')"
+            >
+              expand_less</mat-icon
+            >
+          </gn-ui-button>
+        </div>
+        <div translate="" class="record-table-header text-gray-400 flex gap-1">
+          record.metadata.formats
+        </div>
+        <div class="record-table-header text-gray-400 flex gap-1">
+          <gn-ui-button
+            type="light"
+            extraClass="px-3 py-2 space-x-1"
+            (buttonClick)="setSortBy('recordOwner')"
+          >
+            <span translate>record.metadata.author</span>
+            <mat-icon
+              class="material-symbols-outlined"
+              *ngIf="isSortedBy('recordOwner', 'desc')"
+            >
+              expand_more</mat-icon
+            >
+            <mat-icon
+              class="material-symbols-outlined"
+              *ngIf="isSortedBy('recordOwner', 'asc')"
+            >
+              expand_less</mat-icon
+            >
+          </gn-ui-button>
+        </div>
+        <div class="record-table-header text-gray-400 flex gap-1">
+          <gn-ui-button
+            type="light"
+            extraClass="px-3 py-2 space-x-1"
+            (buttonClick)="setSortBy('changeDate')"
+          >
+            <span translate>record.metadata.updatedOn</span>
+            <mat-icon
+              class="material-symbols-outlined"
+              *ngIf="isSortedBy('changeDate', 'desc')"
+            >
+              expand_more</mat-icon
+            >
+            <mat-icon
+              class="material-symbols-outlined"
+              *ngIf="isSortedBy('changeDate', 'asc')"
+            >
+              expand_less</mat-icon
+            >
+          </gn-ui-button>
+        </div>
+        <div class="record-table-header text-gray-400 flex gap-1">
+          <gn-ui-button
+            type="light"
+            extraClass="px-3 py-2 space-x-1"
+            (buttonClick)="setSortBy('createDate')"
+          >
+            <span translate>record.metadata.createdOn</span>
+            <mat-icon
+              class="material-symbols-outlined"
+              *ngIf="isSortedBy('createDate', 'desc')"
+            >
+              expand_more</mat-icon
+            >
+            <mat-icon
+              class="material-symbols-outlined"
+              *ngIf="isSortedBy('createDate', 'asc')"
+            >
+              expand_less</mat-icon
+            >
+          </gn-ui-button>
+        </div>
+      </div>
+      <div
+        class="contents hover:text-gray-900 text-gray-800 cursor-pointer"
+        (click)="recordSelect.emit(record)"
+        *ngFor="let record of records"
+      >
+        <div [title]="record.title" class="record-table-col text-16">
+          {{ record.title }}
+        </div>
+        <div
+          class="record-table-col flex justify-start items-center gap-2 text-16"
+          [title]="formats.join(', ')"
+          *ngIf="getRecordFormats(record) as formats"
+        >
+          <span
+            class="badge-btn min-w-[45px] text-sm text-white px-2 flex-shrink-0"
+            [style.background-color]="getBadgeColor(formats[0])"
+            *ngIf="formats[0]"
+          >
+            {{ formats[0] }}
+          </span>
+          <span
+            class="badge-btn min-w-[45px] text-sm text-white px-2 flex-shrink-0"
+            [style.background-color]="getBadgeColor(formats[1])"
+            *ngIf="formats[1]"
+          >
+            {{ formats[1] }}
+          </span>
+          <div class="flex-shrink-0" *ngIf="formats.slice(2).length > 0">
+            <span>+{{ formats.slice(2).length }}</span>
+          </div>
+        </div>
+        <div class="record-table-col flex items-center gap-2 text-16">
+          <mat-icon class="material-symbols-outlined"> person </mat-icon>
+          <span class="">{{ formatUserInfo(record.extras?.ownerInfo) }}</span>
+        </div>
+        <div class="record-table-col text-16">
+          {{ dateToString(record.recordUpdated) }}
+        </div>
+        <div class="record-table-col text-16">
+          {{ dateToString(record.recordCreated) }}
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

package/src/libs/ui/search/src/lib/record-table/record-table.component.ts

@@ -0,0 +1,93 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core'
+import { CatalogRecord } from '../../../../../../libs/common/domain/src/lib/record'
+import {
+  FileFormat,
+  getBadgeColor,
+  getFileFormat,
+  getFormatPriority,
+} from '../../../../../../libs/util/shared/src'
+import { SortByField } from '../../../../../../libs/common/domain/src/lib/search'
+
+@Component({
+  selector: 'gn-ui-record-table',
+  templateUrl: './record-table.component.html',
+  styleUrls: ['./record-table.component.css'],
+})
+export class RecordTableComponent {
+  @Input() records: CatalogRecord[] = []
+  @Input() totalHits?: number
+  @Input() sortBy?: SortByField
+  @Output() recordSelect = new EventEmitter<CatalogRecord>()
+  @Output() sortByChange = new EventEmitter<SortByField>()
+
+  dateToString(date: Date): string {
+    return date?.toLocaleDateString(undefined, {
+      year: 'numeric',
+      month: 'long',
+      day: 'numeric',
+      timeZone: 'UTC',
+    })
+  }
+
+  getStatus(isPublishedToAll: boolean | unknown) {
+    return isPublishedToAll ? 'published' : 'not published'
+  }
+
+  formatUserInfo(userInfo: string | unknown): string {
+    const infos = (typeof userInfo === 'string' ? userInfo : '').split('|')
+    if (infos && infos.length === 4) {
+      return `${infos[2]} ${infos[1]}`
+    }
+    return undefined
+  }
+
+  getRecordFormats(record: CatalogRecord): FileFormat[] {
+    if (record.kind === 'service' || !('distributions' in record)) {
+      return []
+    }
+    const formats = Array.from(
+      new Set(
+        record.distributions.map((distribution) => getFileFormat(distribution))
+      )
+    ).filter((format) => !!format)
+    formats.sort((a, b) => getFormatPriority(b) - getFormatPriority(a))
+    return formats
+  }
+
+  getBadgeColor(format: FileFormat): string {
+    return getBadgeColor(format)
+  }
+
+  private getOrderForColumn(col: string): 'asc' | 'desc' | null {
+    if (!this.sortBy) {
+      return null
+    }
+    let order: 'asc' | 'desc' | null = null
+    const sortedArray = Array.isArray(this.sortBy[0])
+      ? this.sortBy
+      : [this.sortBy]
+    sortedArray.forEach((sortedCol) => {
+      if (sortedCol[1] === col) {
+        order = sortedCol[0]
+      }
+    })
+    return order
+  }
+
+  setSortBy(col: string): void {
+    const sortOrder = this.getOrderForColumn(col)
+    let newOrder
+    if (sortOrder) {
+      newOrder = sortOrder === 'asc' ? 'desc' : 'asc'
+    } else {
+      newOrder = 'asc'
+    }
+    this.sortByChange.emit([newOrder, col])
+    this.sortBy = [newOrder, col]
+  }
+
+  isSortedBy(col: string, order: 'asc' | 'desc'): boolean {
+    const sortOrder = this.getOrderForColumn(col)
+    return sortOrder === order
+  }
+}

package/src/libs/ui/search/src/lib/results-hits-number/results-hits-number.component.html

@@ -0,0 +1,10 @@
+<div *ngIf="!loading" class="w-full">
+  <span translate [translateParams]="{ hits: hits }"
+    >results.records.hits.found</span
+  >
+  <p
+    *ngIf="hits === 0"
+    class="mt-4"
+    [innerHtml]="'results.records.hits.empty.help.html' | translate"
+  ></p>
+</div>

package/src/libs/ui/search/src/lib/results-hits-number/results-hits-number.component.ts

@@ -0,0 +1,10 @@
+import { Component, Input } from '@angular/core'
+
+@Component({
+  selector: 'gn-ui-results-hits-number',
+  templateUrl: './results-hits-number.component.html',
+})
+export class ResultsHitsNumberComponent {
+  @Input() hits: number
+  @Input() loading: boolean
+}