Merge pull request #505 from geonetwork/feat-right-click

feat(story): add right click on news, record & org

apps/datahub/src/app/app.module.ts

@@ -4,15 +4,22 @@ import { MatIconModule } from '@angular/material/icon'
 import { BrowserModule } from '@angular/platform-browser'
 import { Router, RouterModule } from '@angular/router'
 import { Configuration } from '@geonetwork-ui/data-access/gn4'
-import { FeatureCatalogModule } from '@geonetwork-ui/feature/catalog'
+import {
+  FeatureCatalogModule,
+  ORGANIZATION_URL_TOKEN,
+} from '@geonetwork-ui/feature/catalog'
 import { FeatureRecordModule } from '@geonetwork-ui/feature/record'
 import {
   DefaultRouterModule,
+  ROUTER_ROUTE_DATASET,
+  ROUTER_ROUTE_SEARCH,
+  ROUTE_PARAMS,
   RouterService,
 } from '@geonetwork-ui/feature/router'
 import {
   FeatureSearchModule,
   FILTER_GEOMETRY,
+  RECORD_URL_TOKEN,
 } from '@geonetwork-ui/feature/search'
 import {
   THUMBNAIL_PLACEHOLDER,
@@ -42,7 +49,6 @@ import { EffectsModule } from '@ngrx/effects'
 import { MetaReducer, StoreModule } from '@ngrx/store'
 import { StoreDevtoolsModule } from '@ngrx/store-devtools'
 import { TranslateModule } from '@ngx-translate/core'
-import { filter } from 'rxjs/operators'
 import { environment } from '../environments/environment'
 
 import { AppComponent } from './app.component'
@@ -66,7 +72,6 @@ import { WEB_COMPONENT_EMBEDDER_URL } from '@geonetwork-ui/feature/record'
 
 export const metaReducers: MetaReducer[] = !environment.production ? [] : []
 // https://github.com/nrwl/nx/issues/191
-
 @NgModule({
   declarations: [
     AppComponent,
@@ -166,6 +171,11 @@ export const metaReducers: MetaReducer[] = !environment.production ? [] : []
         return null
       },
     },
+    { provide: RECORD_URL_TOKEN, useValue: `${ROUTER_ROUTE_DATASET}/\${uuid}` },
+    {
+      provide: ORGANIZATION_URL_TOKEN,
+      useValue: `${ROUTER_ROUTE_SEARCH}?${ROUTE_PARAMS.PUBLISHER}=\${name}`,
+    },
   ],
   bootstrap: [AppComponent],
 })

libs/feature/catalog/src/lib/feature-catalog.module.ts

@@ -1,4 +1,4 @@
-import { NgModule } from '@angular/core'
+import { InjectionToken, NgModule } from '@angular/core'
 import { SiteTitleComponent } from './site-title/site-title.component'
 import { UiCatalogModule } from '@geonetwork-ui/ui/catalog'
 import {
@@ -24,6 +24,11 @@ import {
 } from '@geonetwork-ui/util/shared'
 import { OrganisationsFromGroupsService } from './organisations/service/organisations-from-groups.service'
 
+// expects the replacement key ${name}
+export const ORGANIZATION_URL_TOKEN = new InjectionToken<string>(
+  'organization-url-token'
+)
+
 const organizationsServiceFactory = (
   strategy: OrganizationsStrategy,
   esService: ElasticsearchService,

libs/feature/catalog/src/lib/organisations/organisations.component.html

@@ -12,6 +12,7 @@
   >
     <gn-ui-organisation-preview
       [organisation]="organisation"
+      [organisationUrl]="getOrganisationUrl(organisation)"
       (clickedOrganisation)="orgSelect.emit($event)"
     ></gn-ui-organisation-preview>
   </gn-ui-content-ghost>

libs/feature/catalog/src/lib/organisations/organisations.component.spec.ts

@@ -198,5 +198,18 @@ describe('OrganisationsComponent', () => {
         expect(orgSelected).toEqual([organisationMock])
       })
     })
+    it('should not have href if RightClickToken not provided', () => {
+      expect(component.getOrganisationUrl(organisationMock)).toBe(null)
+    })
+  })
+  describe('ORGANIZATION_URL_TOKEN provided', () => {
+    beforeEach(() => {
+      component['urlTemplate'] = '/my/link/${name}/open'
+    })
+    it('sets href based on given url template', () => {
+      expect(component.getOrganisationUrl(organisationMock)).toBe(
+        '/my/link/My Org/open'
+      )
+    })
   })
 })

libs/feature/catalog/src/lib/organisations/organisations.component.ts

@@ -2,13 +2,16 @@ import {
   ChangeDetectionStrategy,
   Component,
   EventEmitter,
+  Inject,
   Input,
+  Optional,
   Output,
 } from '@angular/core'
 import { Organisation } from '@geonetwork-ui/util/shared'
 import { BehaviorSubject, combineLatest, Observable } from 'rxjs'
 import { map, startWith, tap } from 'rxjs/operators'
 import { OrganisationsServiceInterface } from './service/organisations.service.interface'
+import { ORGANIZATION_URL_TOKEN } from '../feature-catalog.module'
 
 @Component({
   selector: 'gn-ui-organisations',
@@ -20,7 +23,13 @@ export class OrganisationsComponent {
   @Input() itemsOnPage = 12
   @Output() orgSelect = new EventEmitter<Organisation>()
 
-  constructor(private organisationsService: OrganisationsServiceInterface) {}
+  constructor(
+    private organisationsService: OrganisationsServiceInterface,
+    @Optional()
+    @Inject(ORGANIZATION_URL_TOKEN)
+    private urlTemplate: string
+  ) {}
+
   totalPages: number
   currentPage$ = new BehaviorSubject(1)
   sortBy$ = new BehaviorSubject('name-asc')
@@ -80,4 +89,9 @@ export class OrganisationsComponent {
   trackByIndex(index: number) {
     return index
   }
+
+  getOrganisationUrl(organisation: Organisation) {
+    if (!this.urlTemplate) return null
+    return this.urlTemplate.replace('${name}', organisation.name)
+  }
 }

libs/feature/router/src/lib/default/constants.ts

@@ -5,5 +5,6 @@ export const ROUTER_ROUTE_DATASET = 'dataset'
 
 export enum ROUTE_PARAMS {
   SORT = '_sort',
+  PUBLISHER = 'publisher',
 }
 export type SearchRouteParams = Record<string, string | string[] | number>

libs/feature/search/src/lib/feature-search.module.ts

@@ -29,6 +29,9 @@ export const FILTER_GEOMETRY = new InjectionToken<Promise<Geometry>>(
   'filter-geometry'
 )
 
+// expects the replacement key ${uuid}
+export const RECORD_URL_TOKEN = new InjectionToken<string>('record-url-token')
+
 @NgModule({
   declarations: [
     SortByComponent,

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

@@ -3,6 +3,7 @@
     [records]="facade.results$ | async"
     [layoutConfig]="layoutConfig$ | async"
     [favoriteTemplate]="favoriteToggle"
+    [recordUrlGetter]="recordUrlGetter"
     (mdSelect)="onMetadataSelection($event)"
   ></gn-ui-results-list>
 

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

@@ -10,6 +10,7 @@ import { BehaviorSubject, of } from 'rxjs'
 import { SearchFacade } from '../state/search.facade'
 import { ResultsListContainerComponent } from './results-list.container.component'
 import { ButtonComponent } from '@geonetwork-ui/ui/inputs'
+import { RECORDS_FULL_FIXTURE } from '@geonetwork-ui/util/shared/fixtures'
 
 @Component({
   selector: 'gn-ui-results-list',
@@ -153,4 +154,22 @@ describe('ResultsListContainerComponent', () => {
       })
     })
   })
+
+  describe('record url', () => {
+    describe('without templates', () => {
+      it('returns null', () => {
+        expect(component.getRecordUrl(RECORDS_FULL_FIXTURE[0])).toBe(null)
+      })
+    })
+    describe('with templates', () => {
+      beforeEach(() => {
+        component['recordUrlTemplate'] = '/my/record/${uuid}/open'
+      })
+      it('returns actual urls', () => {
+        expect(component.getRecordUrl(RECORDS_FULL_FIXTURE[0])).toBe(
+          '/my/record/cf5048f6-5bbf-4e44-ba74-e6f429af51ea/open'
+        )
+      })
+    })
+  })
 })

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

@@ -4,6 +4,7 @@ import {
   Inject,
   Input,
   OnInit,
+  Optional,
   Output,
 } from '@angular/core'
 import { MetadataRecord } from '@geonetwork-ui/util/shared'
@@ -17,6 +18,7 @@ import {
   ResultsLayoutConfigItem,
   ResultsLayoutConfigModel,
 } from '@geonetwork-ui/ui/search'
+import { RECORD_URL_TOKEN } from '../feature-search.module'
 
 export type ResultsListShowMoreStrategy = 'auto' | 'button' | 'none'
 
@@ -37,11 +39,15 @@ export class ResultsListContainerComponent implements OnInit {
   errorMessage$: Observable<string>
 
   errorTypes = ErrorType
+  recordUrlGetter = this.getRecordUrl.bind(this)
 
   constructor(
     public facade: SearchFacade,
     @Inject(RESULTS_LAYOUT_CONFIG)
-    private resultsLayoutConfig: ResultsLayoutConfigModel
+    private resultsLayoutConfig: ResultsLayoutConfigModel,
+    @Optional()
+    @Inject(RECORD_URL_TOKEN)
+    private recordUrlTemplate: string
   ) {}
 
   ngOnInit(): void {
@@ -71,4 +77,9 @@ export class ResultsListContainerComponent implements OnInit {
   onShowMore() {
     this.facade.scroll()
   }
+
+  getRecordUrl(metadata: MetadataRecord) {
+    if (!this.recordUrlTemplate) return null
+    return this.recordUrlTemplate.replace('${uuid}', metadata.uuid)
+  }
 }

libs/ui/catalog/src/lib/organisation-preview/organisation-preview.component.html

@@ -1,4 +1,4 @@
-<a href (click)="clickOrganisation($event)">
+<a href (click)="clickOrganisation($event)" [attr.href]="organisationUrl">
   <div
     class="group cursor-pointer rounded-lg h-full flex flex-col"
     [title]="organisation.name"

libs/ui/catalog/src/lib/organisation-preview/organisation-preview.component.ts

@@ -15,6 +15,7 @@ import { Organisation } from '@geonetwork-ui/util/shared'
 })
 export class OrganisationPreviewComponent {
   @Input() organisation: Organisation
+  @Input() organisationUrl: string
   @Output() clickedOrganisation = new EventEmitter<Organisation>()
 
   clickOrganisation(event: Event) {

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

@@ -3,7 +3,7 @@
 >
   <a
     class="record-container block rounded-lg bg-white border border-white card-shadow"
-    [href]="record.metadataUrl"
+    [attr.href]="linkHref"
     [target]="linkTarget"
   >
     <div
@@ -30,20 +30,18 @@
         />
       </div>
       <div class="flex flex-col overflow-hidden items-start">
-        <a
+        <span
           *ngIf="hasOrganization"
-          href="#"
-          class="font-bold transition duration-200 text-primary hover:text-primary-darker truncate max-w-full"
+          class="font-bold transition duration-200 text-primary truncate max-w-full"
         >
           {{ contact.organisation }}
-        </a>
-        <a
+        </span>
+        <span
           *ngIf="hasOnlyPerson"
-          href="#"
-          class="font-bold transition duration-200 text-primary hover:text-primary-darker truncate max-w-full"
+          class="font-bold transition duration-200 text-primary truncate max-w-full"
         >
           {{ contact.name }}
-        </a>
+        </span>
         <p class="text-gray-900">
           <span translate [translateParams]="{ time }"
             >record.was.created.time</span

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

@@ -1,6 +1,7 @@
-<div
+<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
@@ -56,4 +57,4 @@
       ></ng-container>
     </div>
   </div>
-</div>
+</a>

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

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core'
+import { ChangeDetectionStrategy, Component, ElementRef } from '@angular/core'
 import { RecordPreviewComponent } from '../record-preview/record-preview.component'
 
 @Component({
@@ -7,4 +7,8 @@ import { RecordPreviewComponent } from '../record-preview/record-preview.compone
   styleUrls: ['./record-preview-row.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class RecordPreviewRowComponent extends RecordPreviewComponent {}
+export class RecordPreviewRowComponent extends RecordPreviewComponent {
+  constructor(protected elementRef: ElementRef) {
+    super(elementRef)
+  }
+}

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

@@ -23,6 +23,7 @@ export class RecordPreviewComponent implements OnInit, OnDestroy {
   @Input() record: MetadataRecord
   @Input() linkTarget = '_blank'
   @Input() favoriteTemplate: TemplateRef<{ $implicit: MetadataRecord }>
+  @Input() linkHref: string = null
   @Output() mdSelect = new EventEmitter<MetadataRecord>()
   subscription = new Subscription()
   abstract: string

libs/ui/search/src/lib/results-list-item/results-list-item.component.ts

@@ -25,6 +25,7 @@ export class ResultsListItemComponent implements OnChanges, AfterViewInit {
   @Input() layoutConfig: ResultsLayoutConfigItem
   @Input() record: MetadataRecord
   @Input() favoriteTemplate: TemplateRef<{ $implicit: MetadataRecord }>
+  @Input() linkHref: string
   @Output() mdSelect = new EventEmitter<MetadataRecord>()
   initialized = false
 
@@ -54,6 +55,7 @@ export class ResultsListItemComponent implements OnChanges, AfterViewInit {
     componentFactory.instance.mdSelect.subscribe((record) =>
       this.mdSelect.emit(record)
     )
+    componentFactory.instance.linkHref = this.linkHref
     componentFactory.changeDetectorRef.detectChanges()
   }
 }

libs/ui/search/src/lib/results-list/results-list.component.html

@@ -10,6 +10,7 @@
         [layoutConfig]="layoutConfig"
         (mdSelect)="mdSelect.emit($event)"
         [favoriteTemplate]="favoriteTemplate"
+        [linkHref]="recordUrlGetter(record)"
       ></gn-ui-results-list-item>
     </div>
   </div>

libs/ui/search/src/lib/results-list/results-list.component.ts

@@ -23,5 +23,6 @@ export class ResultsListComponent {
   @Input() layoutConfig: ResultsLayoutConfigItem =
     DEFAULT_RESULTS_LAYOUT_CONFIG['CARD']
   @Input() favoriteTemplate: TemplateRef<{ $implicit: MetadataRecord }>
+  @Input() recordUrlGetter: (MetadataRecord) => string
   @Output() mdSelect = new EventEmitter<MetadataRecord>()
 }

libs/util/shared/src/lib/services/proxy.service.spec.ts

@@ -2,6 +2,7 @@ import { PROXY_PATH, ProxyService } from './proxy.service'
 import { TestBed } from '@angular/core/testing'
 
 // mock window.location
+// workaround for https://github.com/nodejs/node/issues/47563
 ;(global as any).window ??= Object.create(window)
 Object.defineProperty(window, 'location', {
   value: new URL('http://myhost:1234/my/path?abc'),