geonetwork-ui 2.1.0-initial

package/src/libs/ui/search/src/lib/facets/facet-block/facet-block.component.html

@@ -0,0 +1,88 @@
+<div
+  class="flex flex-row items-center group"
+  *ngIf="hasItems"
+  (click)="toggleCollapsed()"
+>
+  <span
+    class="flex-initial truncate font-bold cursor-pointer group-hover:text-black span-title"
+    >{{ 'facets.block.title.' + title | translate }}</span
+  >
+  <div
+    *ngIf="!collapsed"
+    class="shrink-0 cursor-pointer group-hover:text-black icon-collapse"
+    style="min-width: 20px"
+  >
+    <!-- chevron-down svg -->
+    <svg
+      class="h-5 w-5"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 20 20"
+      fill="currentColor"
+    >
+      <path
+        fill-rule="evenodd"
+        d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
+        clip-rule="evenodd"
+      />
+    </svg>
+  </div>
+  <div
+    *ngIf="collapsed"
+    class="shrink-0 cursor-pointer group-hover:text-black icon-expand"
+    style="min-width: 20px"
+  >
+    <!-- chevron-right svg -->
+    <svg
+      class="h-5 w-5"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 20 20"
+      fill="currentColor"
+    >
+      <path
+        fill-rule="evenodd"
+        d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
+        clip-rule="evenodd"
+      />
+    </svg>
+  </div>
+</div>
+<div [hidden]="collapsed || !hasItems" class="ml-4 collapsible-content">
+  <div *ngIf="canFilter" class="relative mt-2">
+    <input
+      type="text"
+      class="w-full rounded border border-1 border-gray-300 input-filter py-1 px-2 pl-8 focus:outline-none focus:border-blue-400"
+      #filterInput
+    />
+    <div
+      class="pointer-events-none absolute flex items-center px-2"
+      style="left: 0px; top: 0px"
+    >
+      <svg
+        class="h-4 w-4 my-2"
+        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="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z"
+        />
+      </svg>
+    </div>
+  </div>
+  <gn-ui-facet-item
+    class="mt-2"
+    *ngFor="let item of getItems()"
+    [label]="item.value"
+    [count]="item.count"
+    [selected]="isItemSelected(item)"
+    (selectedChange)="onItemSelectedChange($event, item)"
+    (invertedChange)="onItemInvertedChange($event, item)"
+  ></gn-ui-facet-item>
+  <a href *ngIf="canShowMore()" class="a-more" (click)="onMoreClick($event)"
+    >more</a
+  >
+</div>

package/src/libs/ui/search/src/lib/facets/facet-block/facet-block.component.ts

@@ -0,0 +1,138 @@
+import {
+  AfterViewInit,
+  ChangeDetectionStrategy,
+  Component,
+  ElementRef,
+  EventEmitter,
+  Input,
+  OnChanges,
+  OnDestroy,
+  OnInit,
+  Output,
+  SimpleChanges,
+  ViewChild,
+} from '@angular/core'
+import { fromEvent, Subscription } from 'rxjs'
+import { debounceTime } from 'rxjs/operators'
+import {
+  FacetPath,
+  FacetSelectEvent,
+  ModelBlock,
+  ModelItem,
+} from '../facets.model'
+
+@Component({
+  selector: 'gn-ui-facet-block',
+  templateUrl: './facet-block.component.html',
+  styleUrls: ['./facet-block.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class FacetBlockComponent
+  implements OnInit, AfterViewInit, OnDestroy, OnChanges
+{
+  @Input() collapsed: boolean
+  @Input() filter: string
+  @Input() model: ModelBlock
+  @Input() selectedPaths: FacetPath[]
+
+  @ViewChild('filterInput') eltFilterInputRef: ElementRef<HTMLInputElement>
+
+  @Output() filterChange = new EventEmitter<string>()
+  @Output() itemChange = new EventEmitter<FacetSelectEvent>()
+  @Output() more = new EventEmitter<void>()
+
+  title: string
+  hasItems: boolean
+  private subscription = new Subscription()
+
+  ngOnInit(): void {
+    this.hasItems = this.countItems() > 0
+    this.title = this.model.key
+  }
+
+  ngAfterViewInit(): void {
+    if (this.eltFilterInputRef) {
+      this.subscription.add(
+        fromEvent<Event>(this.eltFilterInputRef.nativeElement, 'keyup')
+          .pipe(debounceTime(300))
+          .subscribe((event: any) =>
+            this.onFilterChange((event.path[0] as HTMLInputElement).value)
+          )
+      )
+    }
+  }
+
+  get canFilter(): boolean {
+    return this.model.includeFilter
+  }
+
+  countItems() {
+    return this.model.type === 'filters'
+      ? this.model.items.reduce((sum, current) => sum + current.count, 0)
+      : this.model.items.length
+  }
+
+  toggleCollapsed() {
+    this.collapsed = !this.collapsed
+  }
+
+  onFilterChange(value: string) {
+    this.filterChange.emit(value)
+  }
+
+  isItemSelected(item: ModelItem) {
+    return this.selectedPaths
+      .map((path) => JSON.stringify(path))
+      .includes(JSON.stringify(item.path))
+  }
+
+  emitItemChange(item: ModelItem): void {
+    const eventOutput = { item, block: this.model }
+    this.itemChange.emit(eventOutput)
+  }
+
+  onItemSelectedChange(selected: boolean, item: ModelItem) {
+    item.selected = selected
+    this.emitItemChange(item)
+  }
+
+  onItemInvertedChange(inverted: boolean, item: ModelItem) {
+    item.inverted = inverted
+    this.emitItemChange(item)
+  }
+
+  onMoreClick(event: Event) {
+    event.preventDefault()
+    this.more.emit()
+  }
+
+  getItems() {
+    return this.model.items
+  }
+
+  canShowMore() {
+    return this.model.more
+  }
+
+  ngOnDestroy(): void {
+    this.subscription.unsubscribe()
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    const model = changes.model
+    if (model) {
+      this.hasItems = this.countItems() > 0
+    }
+  }
+}
+
+@Component({ selector: 'gn-ui-facet-block', template: '' })
+export class FacetBlockStubComponent implements Partial<FacetBlockComponent> {
+  @Input() title: string
+  @Input() model: ModelBlock
+  @Input() selectedPaths: string[][]
+
+  @Output() filterChange = new EventEmitter<string>()
+  @Output() itemSelected = new EventEmitter<string[]>()
+  @Output() itemUnselected = new EventEmitter<string[]>()
+}

package/src/libs/ui/search/src/lib/facets/facet-item/facet-item.component.html

@@ -0,0 +1,52 @@
+<div
+  class="flex flex-row items-center group px-1 my-1 hover:bg-gray-100 rounded-sm"
+>
+  <label class="grow shrink truncate cursor-pointer group-hover:text-black">
+    <input
+      type="checkbox"
+      class="cursor-pointer"
+      [ngModel]="selected"
+      (ngModelChange)="onSelectedChange($event)"
+    />
+    {{ label | translate }}
+    <span class="group-hover:text-black">({{ count }})</span>
+  </label>
+  <div
+    *ngIf="!inverted"
+    class="shrink-0 cursor-pointer invisible group-hover:visible icon-exclude"
+    style="min-width: 20px"
+    (click)="toggleInverted()"
+  >
+    <!-- minus svg -->
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 20 20"
+      fill="currentColor"
+    >
+      <path
+        fill-rule="evenodd"
+        d="M3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"
+        clip-rule="evenodd"
+      />
+    </svg>
+  </div>
+  <div
+    *ngIf="inverted"
+    class="shrink-0 cursor-pointer invisible group-hover:visible icon-include"
+    style="min-width: 20px"
+    (click)="toggleInverted()"
+  >
+    <!-- check svg -->
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 20 20"
+      fill="currentColor"
+    >
+      <path
+        fill-rule="evenodd"
+        d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
+        clip-rule="evenodd"
+      />
+    </svg>
+  </div>
+</div>

package/src/libs/ui/search/src/lib/facets/facet-item/facet-item.component.ts

@@ -0,0 +1,40 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core'
+
+@Component({
+  selector: 'gn-ui-facet-item',
+  templateUrl: './facet-item.component.html',
+  styleUrls: ['./facet-item.component.css'],
+})
+export class FacetItemComponent {
+  @Input() label: string
+  @Input() count: number
+  @Input() selected: boolean
+  @Input() inverted: boolean
+
+  @Output() selectedChange = new EventEmitter<boolean>()
+  @Output() invertedChange = new EventEmitter<boolean>()
+
+  onSelectedChange(value: boolean) {
+    this.selectedChange.emit(value)
+  }
+
+  onInvertedChange(value: boolean) {
+    this.invertedChange.emit(value)
+  }
+
+  toggleInverted() {
+    this.inverted = !this.inverted
+    this.onInvertedChange(this.inverted)
+  }
+}
+
+@Component({ selector: 'gn-ui-facet-item', template: '' })
+export class FacetItemStubComponent implements Partial<FacetItemComponent> {
+  @Input() label: string
+  @Input() count: number
+  @Input() selected: boolean
+  @Input() inverted: boolean
+
+  @Output() selectedChange = new EventEmitter<boolean>()
+  @Output() invertedChange = new EventEmitter<boolean>()
+}

package/src/libs/ui/search/src/lib/facets/facet-list/facet-list.component.html

@@ -0,0 +1,8 @@
+<gn-ui-facet-block
+  *ngFor="let model of models; trackBy: trackByIndexKey"
+  [model]="model"
+  [selectedPaths]="getBlockSelectedPaths(model)"
+  (itemChange)="onItemChange($event)"
+  (filterChange)="onFilterChange(model.key, $event)"
+  (more)="onMore(model.key)"
+></gn-ui-facet-block>

package/src/libs/ui/search/src/lib/facets/facet-list/facet-list.component.ts

@@ -0,0 +1,45 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core'
+import { FacetSelectEvent, ModelBlock } from '../facets.model'
+// Revisit facets: these should not use the ES formats!
+// eslint-disable-next-line @nx/enforce-module-boundaries
+import { EsRequestAggTerm } from '../../../../../../../libs/api/metadata-converter/src'
+
+@Component({
+  selector: 'gn-ui-facet-list',
+  templateUrl: './facet-list.component.html',
+  styleUrls: ['./facet-list.component.css'],
+})
+export class FacetListComponent {
+  @Input() models: ModelBlock[]
+  @Input() selectedPaths: string[][]
+
+  @Output() itemChange = new EventEmitter<FacetSelectEvent>()
+
+  @Output() more = new EventEmitter<string>()
+  @Output() filterChange = new EventEmitter<EsRequestAggTerm>()
+
+  getBlockSelectedPaths(model: ModelBlock) {
+    return this.selectedPaths.filter((path) => {
+      const sPath = JSON.stringify(path)
+      const sModelPath = JSON.stringify(model.path)
+      const startModelPath = sModelPath.substring(0, sModelPath.length - 1)
+      return sPath.startsWith(startModelPath)
+    })
+  }
+
+  trackByIndexKey(index: number, model: ModelBlock) {
+    return model.key
+  }
+
+  onItemChange(facetEvent: FacetSelectEvent) {
+    this.itemChange.emit(facetEvent)
+  }
+
+  onMore(key: string): void {
+    this.more.emit(key)
+  }
+
+  onFilterChange(field: string, include: string): void {
+    this.filterChange.emit({ field, include })
+  }
+}

package/src/libs/ui/search/src/lib/facets/facets.model.ts

@@ -0,0 +1,31 @@
+import { AggregationsTypes } from '../../../../../../libs/common/domain/src/lib/search'
+
+export type FacetPath = string[]
+
+export interface HasPath {
+  path: FacetPath
+}
+
+export interface ModelItem extends HasPath {
+  value: string
+  count: number
+  meta?: any
+  selected?: boolean
+  inverted?: boolean
+  query_string?: string
+}
+
+export interface ModelBlock extends HasPath {
+  key: string
+  items: ModelItem[]
+  type: AggregationsTypes
+  size: number
+  more: boolean
+  includeFilter: boolean
+  excludeFilter: boolean
+}
+
+export interface FacetSelectEvent {
+  item: ModelItem
+  block: ModelBlock
+}

package/src/libs/ui/search/src/lib/facets/facets.module.ts

@@ -0,0 +1,14 @@
+import { CommonModule } from '@angular/common'
+import { NgModule } from '@angular/core'
+import { FormsModule } from '@angular/forms'
+import { TranslateModule } from '@ngx-translate/core'
+import { FacetBlockComponent } from './facet-block/facet-block.component'
+import { FacetItemComponent } from './facet-item/facet-item.component'
+import { FacetListComponent } from './facet-list/facet-list.component'
+
+@NgModule({
+  declarations: [FacetItemComponent, FacetBlockComponent, FacetListComponent],
+  imports: [CommonModule, FormsModule, TranslateModule.forChild()],
+  exports: [FacetListComponent],
+})
+export class FacetsModule {}

package/src/libs/ui/search/src/lib/facets/fixtures/aggregations-model-response.ts

@@ -0,0 +1,52 @@
+import { ModelBlock, ModelItem } from '../facets.model'
+
+export const BLOCK_MODEL_FIXTURE: ModelBlock = {
+  key: 'tag',
+  items: [
+    { value: 'Hungary', count: 20, path: ['tag', 'Hungary'] },
+    { value: 'Austria', count: 17, path: ['tag', 'Austria'] },
+    { value: 'Belgium', count: 17, path: ['tag', 'Belgium'] },
+    { value: 'Bulgaria', count: 17, path: ['tag', 'Bulgaria'] },
+    { value: 'Croatia', count: 17, path: ['tag', 'Croatia'] },
+    { value: 'Cyprus', count: 17, path: ['tag', 'Cyprus'] },
+    { value: 'Czechia', count: 17, path: ['tag', 'Czechia'] },
+    { value: 'Denmark', count: 17, path: ['tag', 'Denmark'] },
+    { value: 'Estonia', count: 17, path: ['tag', 'Estonia'] },
+    { value: 'Finland', count: 17, path: ['tag', 'Finland'] },
+    { value: 'France', count: 17, path: ['tag', 'France'] },
+    { value: 'Germany', count: 17, path: ['tag', 'Germany'] },
+    { value: 'Italy', count: 17, path: ['tag', 'Italy'] },
+    { value: 'Latvia', count: 17, path: ['tag', 'Latvia'] },
+    { value: 'Luxembourg', count: 17, path: ['tag', 'Luxembourg'] },
+    { value: 'Malta', count: 17, path: ['tag', 'Malta'] },
+    { value: 'Netherlands', count: 17, path: ['tag', 'Netherlands'] },
+    { value: 'Poland', count: 17, path: ['tag', 'Poland'] },
+    { value: 'Portugal', count: 17, path: ['tag', 'Portugal'] },
+    { value: 'Romania', count: 17, path: ['tag', 'Romania'] },
+    { value: 'Slovakia', count: 17, path: ['tag', 'Slovakia'] },
+  ],
+  path: ['tag'],
+  type: 'terms',
+  size: 21,
+  more: true,
+  includeFilter: true,
+  excludeFilter: false,
+}
+export const EMPTY_BLOCK_MODEL_FIXTURE: ModelBlock = {
+  key: 'emptytag',
+  items: [],
+  path: ['emptytag'],
+  type: 'terms',
+  size: 21,
+  more: true,
+  includeFilter: false,
+  excludeFilter: false,
+}
+
+export const FACET_ITEM_FIXTURE: ModelItem = {
+  path: ['tag.default', 'land use'],
+  value: 'land use',
+  count: 500,
+  selected: true,
+  inverted: false,
+}

package/src/libs/ui/search/src/lib/facets/fixtures/index.ts

@@ -0,0 +1 @@
+export * from './aggregations-model-response'

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

@@ -0,0 +1,22 @@
+<div
+  class="p-2 rounded flex flex-row items-center relative cursor-pointer hover:bg-background hover:border-gray-200 border border-gray-100 hover:shadow-sm"
+>
+  <div
+    class="h-8 w-8 rounded-full bg-opacity-50 bg-gray-900 shrink-0 text-white text-lg text-center"
+    style="background-color: {{ color }};"
+  >
+    {{ icon }}
+  </div>
+  <span
+    class="px-3 truncate text-sm text-main label grow shrink"
+    [title]="label"
+    >{{ label }}</span
+  >
+  <div
+    class="text-gray-600 text-sm border-gray-300 border-l px-3 shrink-0"
+    style="min-width: 7rem"
+  >
+    <strong class="count text-gray-600">{{ count }}</strong
+    >&nbsp;<span translate>records</span>.
+  </div>
+</div>

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

@@ -0,0 +1,25 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  Input,
+  OnInit,
+} from '@angular/core'
+import { ThemeService } from '../../../../../../libs/util/shared/src'
+
+@Component({
+  selector: 'gn-ui-record-metric',
+  templateUrl: './record-metric.component.html',
+  styleUrls: ['./record-metric.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class RecordMetricComponent implements OnInit {
+  @Input() count: number
+  @Input() label: string
+  @Input() icon = '◔'
+
+  color: string
+
+  ngOnInit(): void {
+    this.color = ThemeService.generateLabelColor(this.label, 0.6, 0.5)
+  }
+}

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

@@ -0,0 +1,76 @@
+import {
+  Component,
+  ElementRef,
+  EventEmitter,
+  Input,
+  OnDestroy,
+  OnInit,
+  Output,
+  TemplateRef,
+} from '@angular/core'
+import {
+  propagateToDocumentOnly,
+  stripHtml,
+  removeWhitespace,
+} from '../../../../../../libs/util/shared/src'
+import { MetadataQualityDisplay } from '../../../../../../libs/ui/elements/src'
+import { fromEvent, Subscription } from 'rxjs'
+import {
+  CatalogRecord,
+  DatasetRecord,
+  Individual,
+  Organization,
+} from '../../../../../../libs/common/domain/src/lib/record'
+
+@Component({
+  selector: 'gn-ui-record-preview',
+  template: '',
+})
+export class RecordPreviewComponent implements OnInit, OnDestroy {
+  @Input() record: CatalogRecord
+  @Input() linkTarget = '_blank'
+  @Input() favoriteTemplate: TemplateRef<{ $implicit: CatalogRecord }>
+  @Input() linkHref: string = null
+  @Input() metadataQualityDisplay: MetadataQualityDisplay
+  @Output() mdSelect = new EventEmitter<CatalogRecord>()
+  subscription = new Subscription()
+  abstract: string
+
+  get isViewable() {
+    return this.record.extras?.hasMaps // FIXME: this isn't assigned anymore, find a replacement
+  }
+  get isDownloadable() {
+    return this.record.extras?.hasDownloads // FIXME: this isn't assigned anymore, find a replacement
+  }
+  get contact(): Individual {
+    return (
+      (this.record as DatasetRecord).contactsForResource?.[0] ||
+      this.record.contacts[0]
+    )
+  }
+  get organization(): Organization {
+    return this.record.ownerOrganization
+  }
+  get hasMetadataQualityWidget(): boolean {
+    return this.metadataQualityDisplay?.widget === true
+  }
+
+  constructor(protected elementRef: ElementRef) {}
+
+  ngOnInit(): void {
+    this.abstract = removeWhitespace(stripHtml(this.record?.abstract))
+    this.subscription.add(
+      fromEvent(this.elementRef.nativeElement, 'click').subscribe(
+        (event: Event) => {
+          event.preventDefault()
+          propagateToDocumentOnly(event)
+          this.mdSelect.emit(this.record)
+        }
+      )
+    )
+  }
+
+  ngOnDestroy(): void {
+    this.subscription.unsubscribe()
+  }
+}

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

@@ -0,0 +1,25 @@
+<div
+  class="h-full border bg-white rounded-sm overflow-hidden transition duration-200 transform hover:scale-105 hover:bg-gray-50 border-gray-300 hover:border-primary hover:text-primary"
+>
+  <a
+    [href]="record.landingPage"
+    [title]="record.abstract"
+    [target]="linkTarget"
+  >
+    <div class="flex flex-col min-h-full">
+      <gn-ui-thumbnail
+        class="lg:h-48 md:h-36 border-b border-gray-200 bg-gray-100"
+        [thumbnailUrl]="record.overviews?.[0]?.url.toString()"
+      ></gn-ui-thumbnail>
+
+      <div class="grow p-4">
+        <h1 class="title-font text-lg font-medium mb-3 clamp-2">
+          {{ record.title }}
+        </h1>
+        <p class="leading-relaxed text-sm text-gray-700 clamp-3">
+          {{ record.abstract }}
+        </p>
+      </div>
+    </div>
+  </a>
+</div>

package/src/libs/ui/search/src/lib/record-preview-card/record-preview-card.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-card',
+  templateUrl: './record-preview-card.component.html',
+  styleUrls: ['./record-preview-card.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class RecordPreviewCardComponent extends RecordPreviewComponent {}

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

@@ -0,0 +1,4 @@
+.record-container:hover .record-header,
+.record-container:hover .record-header-image {
+  border-color: var(--color-primary-lightest);
+}