geonetwork-ui 2.1.0-initial

package/src/libs/feature/search/src/lib/records-metrics/records-metrics.component.ts

@@ -0,0 +1,45 @@
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'
+import { Observable } from 'rxjs'
+import { map, share } from 'rxjs/operators'
+import { RecordsRepositoryInterface } from '../../../../../../libs/common/domain/src/lib/records-repository.interface'
+import {
+  AggregationBuckets,
+  Aggregations,
+  TermBucket,
+} from '../../../../../../libs/common/domain/src/lib/search'
+import { RecordMetric } from '../../../../../../libs/api/metadata-converter/src'
+
+@Component({
+  selector: 'gn-ui-records-metrics',
+  templateUrl: './records-metrics.component.html',
+  styleUrls: ['./records-metrics.component.css'],
+})
+export class RecordsMetricsComponent implements OnInit {
+  @Input() field: string
+  @Input() count = 10
+  @Input() queryString = '+isTemplate:n'
+  @Output() metricSelect = new EventEmitter<RecordMetric>()
+  results$: Observable<TermBucket[]>
+
+  constructor(private recordsRepository: RecordsRepositoryInterface) {}
+
+  ngOnInit(): void {
+    this.results$ = this.recordsRepository
+      .aggregate({
+        [this.field]: {
+          type: 'terms',
+          field: this.field,
+          limit: this.count,
+          sort: ['asc', 'key'],
+          filter: this.queryString,
+        },
+      })
+      .pipe(
+        map(
+          (response: Aggregations) =>
+            (response[this.field] as AggregationBuckets).buckets as TermBucket[]
+        ),
+        share()
+      )
+  }
+}

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

@@ -0,0 +1,4 @@
+<gn-ui-results-hits-number
+  [loading]="facade.isLoading$ | async"
+  [hits]="facade.resultsHits$ | async"
+></gn-ui-results-hits-number>

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

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core'
+import { SearchFacade } from '../state/search.facade'
+
+@Component({
+  selector: 'gn-ui-results-hits',
+  templateUrl: './results-hits.container.component.html',
+})
+export class ResultsHitsContainerComponent {
+  constructor(public facade: SearchFacade) {}
+}

package/src/libs/feature/search/src/lib/results-layout/results-layout.component.html

@@ -0,0 +1,7 @@
+<gn-ui-dropdown-selector
+  [title]="'results.layout.selectOne' | translate"
+  [ariaName]="'results.layout.selectOne' | translate"
+  [choices]="choices"
+  (selectValue)="change($event)"
+  [selected]="searchFacade.layout$ | async"
+></gn-ui-dropdown-selector>

package/src/libs/feature/search/src/lib/results-layout/results-layout.component.ts

@@ -0,0 +1,29 @@
+import { Component, Inject } from '@angular/core'
+import {
+  RESULTS_LAYOUT_CONFIG,
+  ResultsLayoutConfigModel,
+} from '../../../../../../libs/ui/search/src'
+import { SearchFacade } from '../state/search.facade'
+
+@Component({
+  selector: 'gn-ui-results-layout',
+  templateUrl: './results-layout.component.html',
+})
+export class ResultsLayoutComponent {
+  choices = Object.keys(this.resultsLayoutConfig).map((v) => {
+    return {
+      label: v,
+      value: v,
+    }
+  })
+
+  constructor(
+    public searchFacade: SearchFacade,
+    @Inject(RESULTS_LAYOUT_CONFIG)
+    private resultsLayoutConfig: ResultsLayoutConfigModel
+  ) {}
+
+  change(layout: string) {
+    this.searchFacade.setResultsLayout(layout)
+  }
+}

package/src/libs/feature/search/src/lib/results-list/results-list.container.component.html

@@ -0,0 +1,58 @@
+<div *ngIf="(error$ | async) === null" class="search-results relative">
+  <gn-ui-results-list
+    [records]="facade.results$ | async"
+    [layoutConfig]="layoutConfig$ | async"
+    [metadataQualityDisplay]="metadataQualityDisplay"
+    [favoriteTemplate]="favoriteToggle"
+    [recordUrlGetter]="recordUrlGetter"
+    (mdSelect)="onMetadataSelection($event)"
+  ></gn-ui-results-list>
+
+  <ng-container
+    *ngIf="
+      (facade.isLoading$ | async) === false &&
+      (facade.isEndOfResults$ | async) === false
+    "
+  >
+    <div class="show-more h-[100px] pt-[30px]" *ngIf="showMore === 'button'">
+      <gn-ui-button
+        data-cy="addMoreBtn"
+        type="secondary"
+        (buttonClick)="onShowMore()"
+        extraClass="m-auto !p-[22px]"
+      >
+        <span class="uppercase font-medium tracking-widest" translate
+          >results.showMore</span
+        >
+      </gn-ui-button>
+    </div>
+    <div class="show-more h-[100px]" *ngIf="showMore === 'auto'">
+      <gn-ui-viewport-intersector
+        (entersViewport)="onShowMore()"
+      ></gn-ui-viewport-intersector>
+    </div>
+  </ng-container>
+
+  <ng-container *ngIf="(facade.isLoading$ | async) === true">
+    <div class="loading flex justify-center h-[100px] pt-[45px]">
+      <gn-ui-spinning-loader></gn-ui-spinning-loader>
+    </div>
+  </ng-container>
+</div>
+
+<div class="p-4 max-w-[600px] m-auto text-[13px]">
+  <gn-ui-search-results-error
+    *ngIf="(errorCode$ | async) === 0"
+    [type]="errorTypes.COULD_NOT_REACH_API"
+  >
+  </gn-ui-search-results-error>
+  <gn-ui-search-results-error
+    *ngIf="(error$ | async) !== null && (errorCode$ | async) !== 0"
+    [type]="errorTypes.RECEIVED_ERROR"
+    [error]="errorMessage$ | async"
+  ></gn-ui-search-results-error>
+</div>
+
+<ng-template #favoriteToggle let-record>
+  <gn-ui-favorite-star [record]="record"></gn-ui-favorite-star>
+</ng-template>

package/src/libs/feature/search/src/lib/results-list/results-list.container.component.ts

@@ -0,0 +1,86 @@
+import {
+  Component,
+  EventEmitter,
+  Inject,
+  Input,
+  OnInit,
+  Optional,
+  Output,
+} from '@angular/core'
+import { Observable } from 'rxjs'
+import { filter, map } from 'rxjs/operators'
+import { SearchFacade } from '../state/search.facade'
+import { SearchError } from '../state/reducer'
+import { ErrorType, MetadataQualityDisplay } from '../../../../../../libs/ui/elements/src'
+import {
+  RESULTS_LAYOUT_CONFIG,
+  ResultsLayoutConfigItem,
+  ResultsLayoutConfigModel,
+} from '../../../../../../libs/ui/search/src'
+import { RECORD_URL_TOKEN } from '../feature-search.module'
+import { CatalogRecord } from '../../../../../../libs/common/domain/src/lib/record'
+
+export type ResultsListShowMoreStrategy = 'auto' | 'button' | 'none'
+
+@Component({
+  selector: 'gn-ui-results-list-container',
+  templateUrl: './results-list.container.component.html',
+  styleUrls: ['./results-list.container.component.css'],
+})
+export class ResultsListContainerComponent implements OnInit {
+  @Input() metadataQualityDisplay: MetadataQualityDisplay
+  @Input() layout: string
+  @Input() showMore: ResultsListShowMoreStrategy = 'auto'
+  @Output() mdSelect = new EventEmitter<CatalogRecord>()
+
+  layoutConfig$: Observable<ResultsLayoutConfigItem>
+
+  error$: Observable<SearchError>
+  errorCode$: Observable<number>
+  errorMessage$: Observable<string>
+
+  errorTypes = ErrorType
+  recordUrlGetter = this.getRecordUrl.bind(this)
+
+  constructor(
+    public facade: SearchFacade,
+    @Inject(RESULTS_LAYOUT_CONFIG)
+    private resultsLayoutConfig: ResultsLayoutConfigModel,
+    @Optional()
+    @Inject(RECORD_URL_TOKEN)
+    private recordUrlTemplate: string
+  ) {}
+
+  ngOnInit(): void {
+    this.layoutConfig$ = this.facade.layout$.pipe(
+      map((layout) => this.resultsLayoutConfig[layout])
+    )
+
+    if (this.layout) {
+      this.facade.setResultsLayout(this.layout)
+    }
+
+    this.error$ = this.facade.error$
+    this.errorCode$ = this.error$.pipe(
+      filter((error) => error !== null),
+      map((error) => error.code)
+    )
+    this.errorMessage$ = this.error$.pipe(
+      filter((error) => error !== null),
+      map((error) => error.message)
+    )
+  }
+
+  onMetadataSelection(metadata: CatalogRecord): void {
+    this.mdSelect.emit(metadata)
+  }
+
+  onShowMore() {
+    this.facade.scroll()
+  }
+
+  getRecordUrl(metadata: CatalogRecord) {
+    if (!this.recordUrlTemplate) return null
+    return this.recordUrlTemplate.replace('${uuid}', metadata.uniqueIdentifier)
+  }
+}

package/src/libs/feature/search/src/lib/sort-by/sort-by.component.html

@@ -0,0 +1,7 @@
+<gn-ui-dropdown-selector
+  [title]="'search.field.sortBy' | translate"
+  [choices]="choices"
+  (selectValue)="changeSortBy($event)"
+  [selected]="currentSortBy$ | async"
+  ariaName="search-sort-by"
+></gn-ui-dropdown-selector>

package/src/libs/feature/search/src/lib/sort-by/sort-by.component.ts

@@ -0,0 +1,55 @@
+import { Component, Input, OnInit } from '@angular/core'
+import { marker } from '@biesbjerg/ngx-translate-extract-marker'
+import { SortByEnum, SortByField } from '../../../../../../libs/common/domain/src/lib/search'
+import { SearchFacade } from '../state/search.facade'
+import { SearchService } from '../utils/service/search.service'
+import { filter, map } from 'rxjs/operators'
+
+interface SortChoice {
+  label: string
+  value: string
+}
+
+@Component({
+  selector: 'gn-ui-sort-by',
+  templateUrl: './sort-by.component.html',
+})
+export class SortByComponent implements OnInit {
+  @Input() isQualitySortable: boolean
+  choices: SortChoice[] = [
+    {
+      label: marker('results.sortBy.relevancy'),
+      value: SortByEnum.RELEVANCY.join(','),
+    },
+    {
+      label: marker('results.sortBy.dateStamp'),
+      value: SortByEnum.CREATE_DATE.join(','),
+    },
+    {
+      label: marker('results.sortBy.popularity'),
+      value: SortByEnum.POPULARITY.join(','),
+    },
+  ]
+  currentSortBy$ = this.facade.sortBy$.pipe(
+    filter((sortBy) => !!sortBy),
+    map((sortBy) => sortBy.join(','))
+  )
+
+  constructor(
+    private facade: SearchFacade,
+    private searchService: SearchService
+  ) {}
+
+  ngOnInit(): void {
+    if (this.isQualitySortable) {
+      this.choices.push({
+        label: marker('results.sortBy.qualityScore'),
+        value: SortByEnum.QUALITY_SCORE.join(','),
+      })
+    }
+  }
+
+  changeSortBy(criteriaAsString: string) {
+    this.searchService.setSortBy(criteriaAsString.split(',') as SortByField)
+  }
+}

package/src/libs/feature/search/src/lib/state/actions.ts

@@ -0,0 +1,273 @@
+import { Action } from '@ngrx/store'
+import { SearchStateParams } from './reducer'
+import {
+  Aggregation,
+  Aggregations,
+  AggregationsParams,
+  FieldFilters,
+  FieldName,
+  SortByField,
+} from '../../../../../../libs/common/domain/src/lib/search'
+import { CatalogRecord } from '../../../../../../libs/common/domain/src/lib/record'
+
+export const ADD_SEARCH = '[Search] Add search instance'
+export const SET_FILTERS = '[Search] Set Filters'
+export const SET_CONFIG_FILTERS = '[Search] Set config filters'
+export const UPDATE_FILTERS = '[Search] Update Filters'
+export const SET_SEARCH = '[Search] Set overall search configuration'
+export const SET_FAVORITES_ONLY = '[Search] Favorites Only'
+export const SET_SORT_BY = '[Search] Sort By'
+export const SET_PAGE_SIZE = '[Search] Set page size'
+export const PAGINATE = '[Search] Paginate'
+export const SET_RESULTS_LAYOUT = '[Search] Set results layout'
+export const ADD_RESULTS = '[Search] Add Results'
+export const CLEAR_RESULTS = '[Search] Clear Results'
+export const REQUEST_MORE_RESULTS = '[Search] Request More Results'
+export const REQUEST_NEW_RESULTS = '[Search] Request New Results'
+export const SET_RESULTS_AGGREGATIONS = '[Search] Set Results Aggregations'
+export const SET_RESULTS_HITS = '[Search] Set Results hits'
+export const SET_CONFIG_AGGREGATIONS = '[Search] Set Config Aggregations'
+export const UPDATE_CONFIG_AGGREGATIONS = '[Search] Update Config Aggregations'
+export const SET_CONFIG_REQUEST_FIELDS = '[Search] Set Config requested fields'
+export const REQUEST_MORE_ON_AGGREGATION =
+  '[Search] Request More On Aggregation'
+export const SET_INCLUDE_ON_AGGREGATION = '[Search] Set term include'
+export const UPDATE_REQUEST_AGGREGATION_TERM =
+  '[Search] Update request aggregation term'
+export const PATCH_RESULTS_AGGREGATIONS = '[Search] Patch Results Aggregations'
+export const SET_ERROR = '[Search] Set Error'
+export const CLEAR_ERROR = '[Search] Clear Error'
+export const SET_SPATIAL_FILTER_ENABLED = '[Search] Set Spatial Filter Enabled'
+
+export const DEFAULT_SEARCH_KEY = 'default'
+
+export abstract class AbstractAction {
+  id?: string
+  protected constructor(id?: string) {
+    this.id = id || DEFAULT_SEARCH_KEY
+  }
+}
+
+export class AddSearch implements Action {
+  readonly type = ADD_SEARCH
+  constructor(public id: string) {}
+}
+
+export class SetConfigFilters extends AbstractAction implements Action {
+  readonly type = SET_CONFIG_FILTERS
+
+  constructor(public payload: FieldFilters, id?: string) {
+    super(id)
+  }
+}
+
+export class SetFilters extends AbstractAction implements Action {
+  readonly type = SET_FILTERS
+
+  constructor(public payload: FieldFilters, id?: string) {
+    super(id)
+  }
+}
+
+export class UpdateFilters extends AbstractAction implements Action {
+  readonly type = UPDATE_FILTERS
+
+  constructor(public payload: FieldFilters, id?: string) {
+    super(id)
+  }
+}
+
+export class SetSearch extends AbstractAction implements Action {
+  readonly type = SET_SEARCH
+
+  constructor(public payload: SearchStateParams, id?: string) {
+    super(id)
+  }
+}
+
+export class SetFavoritesOnly extends AbstractAction implements Action {
+  readonly type = SET_FAVORITES_ONLY
+  constructor(public favoritesOnly: boolean, id?: string) {
+    super(id)
+  }
+}
+export class SetSortBy extends AbstractAction implements Action {
+  readonly type = SET_SORT_BY
+  constructor(public sortBy: SortByField, id?: string) {
+    super(id)
+  }
+}
+
+export class SetPageSize extends AbstractAction implements Action {
+  readonly type = SET_PAGE_SIZE
+  constructor(public limit: number, id?: string) {
+    super(id)
+  }
+}
+
+export class Paginate extends AbstractAction implements Action {
+  readonly type = PAGINATE
+  // Note: page number is one-based!!
+  constructor(public pageNumber: number, id?: string) {
+    super(id)
+  }
+}
+
+export class SetResultsLayout extends AbstractAction implements Action {
+  readonly type = SET_RESULTS_LAYOUT
+
+  constructor(public resultsLayout: string, id?: string) {
+    super(id)
+  }
+}
+
+export class AddResults extends AbstractAction implements Action {
+  readonly type = ADD_RESULTS
+
+  constructor(public payload: CatalogRecord[], id?: string) {
+    super(id)
+  }
+}
+
+export class ClearResults extends AbstractAction implements Action {
+  readonly type = CLEAR_RESULTS
+
+  constructor(id?: string) {
+    super(id)
+  }
+}
+
+export class RequestMoreResults extends AbstractAction implements Action {
+  readonly type = REQUEST_MORE_RESULTS
+
+  constructor(id?: string) {
+    super(id)
+  }
+}
+
+export class RequestNewResults extends AbstractAction implements Action {
+  readonly type = REQUEST_NEW_RESULTS
+
+  constructor(id?: string) {
+    super(id)
+  }
+}
+
+export class SetResultsAggregations extends AbstractAction implements Action {
+  readonly type = SET_RESULTS_AGGREGATIONS
+
+  constructor(public payload: Aggregations, id?: string) {
+    super(id)
+  }
+}
+
+export class SetResultsHits extends AbstractAction implements Action {
+  readonly type = SET_RESULTS_HITS
+  constructor(public payload: number, id?: string) {
+    super(id)
+  }
+}
+
+export class SetConfigAggregations extends AbstractAction implements Action {
+  readonly type = SET_CONFIG_AGGREGATIONS
+  constructor(public payload: AggregationsParams, id?: string) {
+    super(id)
+  }
+}
+
+export class UpdateConfigAggregations extends AbstractAction implements Action {
+  readonly type = UPDATE_CONFIG_AGGREGATIONS
+  constructor(public payload: AggregationsParams, id?: string) {
+    super(id)
+  }
+}
+
+export class SetConfigRequestFields extends AbstractAction implements Action {
+  readonly type = SET_CONFIG_REQUEST_FIELDS
+  constructor(public payload: FieldName[], id?: string) {
+    super(id)
+  }
+}
+
+export class RequestMoreOnAggregation extends AbstractAction implements Action {
+  readonly type = REQUEST_MORE_ON_AGGREGATION
+  constructor(
+    public aggregationName: string,
+    public increment: number,
+    id?: string
+  ) {
+    super(id)
+  }
+}
+
+export class SetIncludeOnAggregation extends AbstractAction implements Action {
+  readonly type = SET_INCLUDE_ON_AGGREGATION
+  constructor(
+    public aggregationName: string,
+    public include: string,
+    id?: string
+  ) {
+    super(id)
+  }
+}
+
+export class PatchResultsAggregations extends AbstractAction implements Action {
+  readonly type = PATCH_RESULTS_AGGREGATIONS
+
+  constructor(
+    public aggregationName: string,
+    public payload: Aggregation,
+    id?: string
+  ) {
+    super(id)
+  }
+}
+
+export class SetError extends AbstractAction implements Action {
+  readonly type = SET_ERROR
+
+  constructor(public code: number, public message: string, id?: string) {
+    super(id)
+  }
+}
+
+export class ClearError extends AbstractAction implements Action {
+  readonly type = CLEAR_ERROR
+
+  constructor(id?: string) {
+    super(id)
+  }
+}
+
+export class SetSpatialFilterEnabled extends AbstractAction implements Action {
+  readonly type = SET_SPATIAL_FILTER_ENABLED
+  constructor(public enabled: boolean, id?: string) {
+    super(id)
+  }
+}
+export type SearchActions =
+  | AddSearch
+  | SetConfigFilters
+  | SetFilters
+  | UpdateFilters
+  | SetSearch
+  | SetFavoritesOnly
+  | SetSortBy
+  | SetPageSize
+  | Paginate
+  | SetResultsLayout
+  | AddResults
+  | ClearResults
+  | RequestMoreResults
+  | RequestNewResults
+  | SetResultsAggregations
+  | SetResultsHits
+  | SetConfigAggregations
+  | UpdateConfigAggregations
+  | SetConfigRequestFields
+  | RequestMoreOnAggregation
+  | SetIncludeOnAggregation
+  | PatchResultsAggregations
+  | SetError
+  | ClearError
+  | SetSpatialFilterEnabled

package/src/libs/feature/search/src/lib/state/container/search-state.container.directive.ts

@@ -0,0 +1,17 @@
+import { Directive, Host, Input, OnInit } from '@angular/core'
+import { SearchService } from '../../utils/service/search.service'
+import { SearchFacade } from '../search.facade'
+
+@Directive({
+  selector: '[gnUiSearchStateContainer]',
+  providers: [SearchFacade, SearchService],
+})
+export class SearchStateContainerDirective implements OnInit {
+  @Input('gnUiSearchStateContainer') searchId: string
+
+  constructor(@Host() private facade: SearchFacade) {}
+
+  ngOnInit(): void {
+    this.facade.init(this.searchId)
+  }
+}