Merge pull request #226 from geonetwork/dh-keyword-routerlink

Datahub: search on keyword
geonetwork · Feb 17, 2022 · 7f4a746 · 7f4a746
2 parents 57816c2 + b275f47
commit 7f4a746
Show file tree

Hide file tree

Showing 11 changed files with 122 additions and 56 deletions.
diff --git a/apps/datahub/src/app/search/search-header/search-header.component.html b/apps/datahub/src/app/search/search-header/search-header.component.html
@@ -8,7 +8,7 @@
       <gn-ui-fuzzy-search
         (itemSelected)="onFuzzySearchSelection($event)"
         (inputSubmited)="onFuzzySearchSubmission($event)"
-        [initialValue]="searchInputRouteValue$ | async"
+        [value]="searchInputRouteValue$ | async"
       ></gn-ui-fuzzy-search>
     </div>
     <!--
@@ -26,12 +26,7 @@
     <div class="tabs flex justify-center py-4 mt-12 font-medium">
       <!--      <div class="uppercase text-white">Fil d'activité</div>-->
       <div
-        class="
-          uppercase
-          text-primary
-          hover:text-primary-lighter hover:underline
-          cursor-pointer
-        "
+        class="uppercase text-primary hover:text-primary-lighter hover:underline cursor-pointer"
         (click)="onDatasetsClick()"
         translate=""
       >

diff --git a/apps/datahub/src/app/search/search-header/search-header.component.spec.ts b/apps/datahub/src/app/search/search-header/search-header.component.spec.ts
@@ -9,9 +9,9 @@ import { BehaviorSubject } from 'rxjs'
 
 import { SearchHeaderComponent } from './search-header.component'
 
-class RouterFacadeMock {
-  goToMetadata = jest.fn()
-  anySearch$ = new BehaviorSubject('scot')
+const routerFacadeMock = {
+  goToMetadata: jest.fn(),
+  anySearch$: new BehaviorSubject('scot'),
 }
 class SearchFacadeMock {}
 /* eslint-disable */
@@ -20,7 +20,7 @@ class SearchFacadeMock {}
   template: '',
 })
 class FuzzySearchComponentMock {
-  @Input() initialValue?: MetadataRecord
+  @Input() value?: MetadataRecord
 }
 /* eslint-enable */
 
@@ -36,7 +36,7 @@ describe('HeaderComponent', () => {
       providers: [
         {
           provide: RouterFacade,
-          useClass: RouterFacadeMock,
+          useValue: routerFacadeMock,
         },
         {
           provide: SearchFacade,
@@ -61,7 +61,16 @@ describe('HeaderComponent', () => {
       const fuzzyCpt = fixture.debugElement.query(
         By.directive(FuzzySearchComponentMock)
       ).componentInstance
-      expect(fuzzyCpt.initialValue).toEqual({ title: 'scot' })
+      expect(fuzzyCpt.value).toEqual({ title: 'scot' })
+    })
+    it('value is changed on route update', () => {
+      routerFacadeMock.anySearch$.next('river')
+      const fuzzyCpt = fixture.debugElement.query(
+        By.directive(FuzzySearchComponentMock)
+      ).componentInstance
+      fixture.detectChanges()
+
+      expect(fuzzyCpt.value).toEqual({ title: 'river' })
     })
   })
 })
diff --git a/apps/datahub/src/app/search/search-header/search-header.component.ts b/apps/datahub/src/app/search/search-header/search-header.component.ts
@@ -3,7 +3,7 @@ import { marker } from '@biesbjerg/ngx-translate-extract-marker'
 import { RouterFacade } from '@geonetwork-ui/feature/router'
 import { SearchFacade } from '@geonetwork-ui/feature/search'
 import { MetadataRecord } from '@geonetwork-ui/util/shared'
-import { map, take } from 'rxjs/operators'
+import { map } from 'rxjs/operators'
 
 marker('datahub.header.myfavorites')
 marker('datahub.header.connex')
@@ -18,7 +18,6 @@ marker('datahub.header.popularRecords')
 })
 export class SearchHeaderComponent {
   searchInputRouteValue$ = this.routerFacade.anySearch$.pipe(
-    take(1),
     map((any) => ({ title: any }))
   )
 

diff --git a/libs/feature/search/src/lib/fuzzy-search/fuzzy-search.component.html b/libs/feature/search/src/lib/fuzzy-search/fuzzy-search.component.html
@@ -4,6 +4,6 @@
   [action]="autoCompleteAction"
   (itemSelected)="handleItemSelection($event)"
   (inputSubmited)="handleInputSubmission($event)"
-  [initialValue]="initialValue"
+  [value]="value"
   [clearOnSelection]="true"
 ></gn-ui-autocomplete>
diff --git a/libs/feature/search/src/lib/fuzzy-search/fuzzy-search.component.ts b/libs/feature/search/src/lib/fuzzy-search/fuzzy-search.component.ts
@@ -27,7 +27,7 @@ import { ElasticsearchMapper } from '../utils/mapper'
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FuzzySearchComponent {
-  @Input() initialValue?: MetadataRecord
+  @Input() value?: MetadataRecord
   @ViewChild(AutocompleteComponent) autocomplete: AutocompleteComponent
   @Output() itemSelected = new EventEmitter<MetadataRecord>()
   @Output() inputSubmited = new EventEmitter<string>()

diff --git a/libs/ui/elements/src/lib/metadata-info/metadata-info.component.html b/libs/ui/elements/src/lib/metadata-info/metadata-info.component.html
@@ -20,6 +20,9 @@
       <div class="mb-16">
         <gn-ui-badge
           class="inline-block mr-2 mb-2 lowercase"
+          [routerLink]="['/search']"
+          [queryParams]="{ q: keyword }"
+          [clickable]="true"
           *ngFor="let keyword of metadata.keywords"
           >{{ keyword }}</gn-ui-badge
         >
@@ -34,15 +37,7 @@
         {{ metadata.lineage }}
       </p>
       <div
-        class="
-          py-4
-          px-6
-          rounded
-          bg-gray-100
-          grid grid-cols-2 grid-rows-2
-          gap-6
-          text-gray-800
-        "
+        class="py-4 px-6 rounded bg-gray-100 grid grid-cols-2 grid-rows-2 gap-6 text-gray-800"
       >
         <div class="border-b border-gray-300" *ngIf="metadata.updatedOn">
           <p class="text-sm" translate>record.metadata.updatedOn</p>

diff --git a/libs/ui/inputs/src/lib/autocomplete/autocomplete.component.spec.ts b/libs/ui/inputs/src/lib/autocomplete/autocomplete.component.spec.ts
@@ -117,14 +117,19 @@ describe('AutocompleteComponent', () => {
     })
   })
 
-  describe('initial value', () => {
+  describe('@Input() value', () => {
     let anyEmitted
     describe('when set', () => {
       beforeEach(() => {
-        component.initialValue = { title: 'hello' }
-        component.displayWithFn = (item) => item.title
+        const simpleChanges: any = {
+          value: {
+            previousValue: undefined,
+            currentValue: { title: 'hello' },
+          },
+        }
+        component.displayWithFn = (item) => item?.title
         component.inputSubmited.subscribe((event) => (anyEmitted = event))
-        fixture.detectChanges()
+        component.ngOnChanges(simpleChanges)
       })
       it('set control value', () => {
         expect(component.control.value).toEqual({ title: 'hello' })
@@ -133,10 +138,56 @@ describe('AutocompleteComponent', () => {
         expect(anyEmitted).toEqual('hello')
       })
     })
-    describe('when not set', () => {
+    describe('when changed', () => {
       beforeEach(() => {
+        const simpleChanges: any = {
+          value: {
+            previousValue: { title: 'hello' },
+            currentValue: { title: 'good bye' },
+          },
+        }
+        component.displayWithFn = (item) => item?.title
         component.inputSubmited.subscribe((event) => (anyEmitted = event))
-        fixture.detectChanges()
+        component.ngOnChanges(simpleChanges)
+      })
+      it('set control value', () => {
+        expect(component.control.value).toEqual({ title: 'good bye' })
+      })
+      it('emits any string', () => {
+        expect(anyEmitted).toEqual('good bye')
+      })
+    })
+    describe('when ref changed but same text', () => {
+      let anyEmitted
+      beforeEach(() => {
+        const simpleChanges: any = {
+          value: {
+            previousValue: { title: 'good bye' },
+            currentValue: { title: 'good bye' },
+          },
+        }
+        component.displayWithFn = (item) => item?.title
+        component.inputSubmited.subscribe((event) => (anyEmitted = event))
+        component.ngOnChanges(simpleChanges)
+      })
+      it('does not set control value', () => {
+        expect(component.control.value).toBeNull()
+      })
+      it('does not emit any value', () => {
+        expect(anyEmitted).toBeUndefined()
+      })
+    })
+    describe('when not set on init (firstChange == true)', () => {
+      beforeEach(() => {
+        component.inputSubmited.subscribe((event) => (anyEmitted = event))
+        const simpleChanges: any = {
+          value: {
+            firstChange: true,
+            previousValue: undefined,
+            currentValue: null,
+          },
+        }
+        component.ngOnChanges(simpleChanges)
       })
       it('does not set control value', () => {
         expect(component.control.value).toEqual(null)

diff --git a/libs/ui/inputs/src/lib/autocomplete/autocomplete.component.ts b/libs/ui/inputs/src/lib/autocomplete/autocomplete.component.ts
@@ -5,9 +5,11 @@ import {
   ElementRef,
   EventEmitter,
   Input,
+  OnChanges,
   OnDestroy,
   OnInit,
   Output,
+  SimpleChanges,
   ViewChild,
 } from '@angular/core'
 import { FormControl } from '@angular/forms'
@@ -16,7 +18,7 @@ import {
   MatAutocompleteSelectedEvent,
   MatAutocompleteTrigger,
 } from '@angular/material/autocomplete'
-import { BehaviorSubject, Observable, ReplaySubject, Subscription } from 'rxjs'
+import { Observable, ReplaySubject, Subscription } from 'rxjs'
 import {
   debounceTime,
   distinctUntilChanged,
@@ -36,10 +38,12 @@ export type AutcompleteItem = unknown
   styleUrls: ['./autocomplete.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class AutocompleteComponent implements OnInit, AfterViewInit, OnDestroy {
+export class AutocompleteComponent
+  implements OnInit, AfterViewInit, OnDestroy, OnChanges
+{
   @Input() placeholder: string
   @Input() action: (value: string) => Observable<AutcompleteItem[]>
-  @Input() initialValue?: AutcompleteItem
+  @Input() value?: AutcompleteItem
   @Input() clearOnSelection = false
   @Output() itemSelected = new EventEmitter<AutcompleteItem>()
   @Output() inputSubmited = new EventEmitter<string>()
@@ -57,6 +61,17 @@ export class AutocompleteComponent implements OnInit, AfterViewInit, OnDestroy {
 
   @Input() displayWithFn: (AutcompleteItem) => string = (item) => item
 
+  ngOnChanges(changes: SimpleChanges): void {
+    const { value } = changes
+    if (value) {
+      const previousTextValue = this.displayWithFn(value.previousValue)
+      const currentTextValue = this.displayWithFn(value.currentValue)
+      if (value.firstChange || previousTextValue !== currentTextValue) {
+        this.updateInputValue(value.currentValue)
+      }
+    }
+  }
+
   ngOnInit(): void {
     this.suggestions$ = this.control.valueChanges.pipe(
       filter((value) => value.length > 2),
@@ -74,8 +89,6 @@ export class AutocompleteComponent implements OnInit, AfterViewInit, OnDestroy {
     this.control.valueChanges
       .pipe(filter((value) => typeof value === 'string'))
       .subscribe(this.lastInputValue$)
-
-    this.initInput(this.initialValue)
   }
 
   ngAfterViewInit(): void {
@@ -86,7 +99,7 @@ export class AutocompleteComponent implements OnInit, AfterViewInit, OnDestroy {
     this.subscription.unsubscribe()
   }
 
-  initInput(value: AutcompleteItem) {
+  updateInputValue(value: AutcompleteItem) {
     if (value) {
       this.control.setValue(value)
     }

diff --git a/libs/ui/widgets/src/lib/badge/badge.component.html b/libs/ui/widgets/src/lib/badge/badge.component.html
@@ -1,15 +1,7 @@
 <div
-  class="
-    inline-block
-    bg-black
-    opacity-70
-    py-1.5
-    px-3
-    rounded
-    font-medium
-    text-gray-50 text-sm
-    leading-none
-  "
+  class="inline-block bg-black opacity-70 py-1.5 px-3 rounded font-medium text-gray-50 text-sm leading-none"
+  [class.hover:bg-gray-800]="clickable"
+  [class.cursor-pointer]="clickable"
 >
   <ng-content></ng-content>
 </div>
diff --git a/libs/ui/widgets/src/lib/badge/badge.component.stories.ts b/libs/ui/widgets/src/lib/badge/badge.component.stories.ts
@@ -1,25 +1,35 @@
-import { Meta, moduleMetadata, Story } from '@storybook/angular'
+import {
+  componentWrapperDecorator,
+  Meta,
+  moduleMetadata,
+  Story,
+} from '@storybook/angular'
 import { BadgeComponent } from './badge.component'
 
 export default {
   title: 'Widgets/BadgeComponent',
   component: BadgeComponent,
   decorators: [
+    componentWrapperDecorator(BadgeComponent),
     moduleMetadata({
       imports: [],
     }),
   ],
 } as Meta<BadgeComponent>
 
-type BadgeComponentWithContent = { content: string }
-
-const Template: Story<BadgeComponentWithContent> = (args: BadgeComponent) => ({
+interface BadgeComponentContent extends Partial<BadgeComponent> {
+  content: string
+}
+const Template: Story<BadgeComponentContent> = (
+  args: BadgeComponentContent
+) => ({
   component: BadgeComponent,
   props: args,
   template: '<gn-ui-badge>{{content}}</gn-ui-badge>',
 })
 
 export const Primary = Template.bind({})
 Primary.args = {
-  content: 'My badge!',
+  clickable: true,
+  content: 'My custom badge',
 }
diff --git a/libs/ui/widgets/src/lib/badge/badge.component.ts b/libs/ui/widgets/src/lib/badge/badge.component.ts
@@ -1,9 +1,11 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core'
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
 
 @Component({
   selector: 'gn-ui-badge',
   templateUrl: './badge.component.html',
   styleUrls: ['./badge.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class BadgeComponent {}
+export class BadgeComponent {
+  @Input() clickable? = false
+}