Merge pull request #280 from geonetwork/tabs

Datahub: Add tabs to homepage and routing

apps/datahub/src/app/app.config.ts

@@ -2,7 +2,7 @@ import {
   ResultsLayoutConfigItem,
   ResultsLayoutConfigModel,
 } from '@geonetwork-ui/ui/search'
-import { RecordPreviewDatahubComponent } from './search/record-preview-datahub/record-preview-datahub.component'
+import { RecordPreviewDatahubComponent } from './home/search/record-preview-datahub/record-preview-datahub.component'
 
 export const DATAHUB_RESULTS_LAYOUT_CONFIG: ResultsLayoutConfigModel = {
   DATAHUB: new ResultsLayoutConfigItem(

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

@@ -7,6 +7,7 @@ import { Configuration } from '@geonetwork-ui/data-access/gn4'
 import { FeatureRecordModule } from '@geonetwork-ui/feature/record'
 import {
   DefaultRouterModule,
+  RouterService,
   ROUTER_ROUTE_DATASET,
 } from '@geonetwork-ui/feature/router'
 import { FeatureSearchModule } from '@geonetwork-ui/feature/search'
@@ -37,29 +38,36 @@ import { DATAHUB_RESULTS_LAYOUT_CONFIG } from './app.config'
 import { HeaderBadgeButtonComponent } from './record/header-badge-button/header-badge-button.component'
 import { HeaderRecordComponent } from './record/header-record/header-record.component'
 import { RecordPageComponent } from './record/record-page/record-page.component'
-import { RecordPreviewDatahubComponent } from './search/record-preview-datahub/record-preview-datahub.component'
-import { SearchHeaderComponent } from './search/search-header/search-header.component'
-import { SearchPageComponent } from './search/search-page/search-page.component'
+import { RecordPreviewDatahubComponent } from './home/search/record-preview-datahub/record-preview-datahub.component'
+import { HomeHeaderComponent } from './home/home-header/home-header.component'
+import { HomePageComponent } from './home/home-page/home-page.component'
 import { UiLayoutModule } from '@geonetwork-ui/ui/layout'
 import { FeatureCatalogModule } from '@geonetwork-ui/feature/catalog'
-import { SearchSummaryComponent } from './search/search-summary/search-summary.component'
+import { SearchSummaryComponent } from './home/search/search-summary/search-summary.component'
 import { NavigationBarComponent } from './record/navigation-bar/navigation-bar.component'
 import { THUMBNAIL_PLACEHOLDER } from '@geonetwork-ui/ui/search'
+import { NewsPageComponent } from './home/news-page/news-page.component'
+import { DatahubRouterService } from './router/datahub-router.service'
+import { OrganisationsPageComponent } from './home/organisations-page/organisations-page.component'
+import { SearchPageComponent } from './home/search/search-page/search-page.component'
 
 export const metaReducers: MetaReducer[] = !environment.production ? [] : []
 // https://github.com/nrwl/nx/issues/191
 
 @NgModule({
   declarations: [
     AppComponent,
-    SearchPageComponent,
+    HomePageComponent,
     RecordPreviewDatahubComponent,
-    SearchHeaderComponent,
+    HomeHeaderComponent,
     HeaderBadgeButtonComponent,
     HeaderRecordComponent,
     RecordPageComponent,
     SearchSummaryComponent,
     NavigationBarComponent,
+    NewsPageComponent,
+    OrganisationsPageComponent,
+    SearchPageComponent,
   ],
   imports: [
     BrowserModule,
@@ -96,6 +104,7 @@ export const metaReducers: MetaReducer[] = !environment.production ? [] : []
   ],
   providers: [
     { provide: RESULTS_LAYOUT_CONFIG, useValue: DATAHUB_RESULTS_LAYOUT_CONFIG },
+    { provide: RouterService, useClass: DatahubRouterService },
     {
       provide: Configuration,
       useFactory: () =>

apps/datahub/src/app/search/search-header/search-header.component.html → apps/datahub/src/app/home/home-header/home-header.component.html

@@ -1,5 +1,5 @@
 <header class="h-full px-5" [style.background]="backgroundCss">
-  <div class="container-lg h-full mx-auto flex flex-col justify-center">
+  <div class="container-lg h-full mx-auto flex flex-col justify-end">
     <div
       class="py-8 relative"
       [style.transform]="'translate(0, ' + (1 - expandRatio) * 234 + 'px)'"
@@ -29,21 +29,35 @@
     </div>
 -->
     <div
-      class="tabs flex justify-center py-4 mt-12 font-medium absolute"
+      class="tabs flex justify-between py-4 mt-40 font-medium"
       style="bottom: 0; left: 0; right: 0"
       [style.opacity]="expandRatio"
     >
-      <!--      <div class="uppercase text-white">Fil d'activité</div>-->
-      <!--
       <div
-        class="uppercase text-primary hover:text-primary-lighter hover:underline cursor-pointer"
-        (click)="onDatasetsClick()"
+        class="uppercase truncate text-white hover:text-primary-lighter hover:underline cursor-pointer"
+        routerLinkActive="text-primary"
+        [routerLink]="ROUTE_NEWS"
         translate=""
       >
-        datasets
+        datahub.header.news
+      </div>
+      <div
+        class="uppercase truncate text-white hover:text-primary-lighter hover:underline cursor-pointer"
+        routerLinkActive="text-primary"
+        [routerLink]="ROUTE_SEARCH"
+        (click)="updateSearch()"
+        translate=""
+      >
+        datahub.header.datasets
+      </div>
+      <div
+        class="uppercase truncate text-white hover:text-primary-lighter hover:underline cursor-pointer"
+        routerLinkActive="text-primary"
+        [routerLink]="ROUTE_ORGANISATIONS"
+        translate=""
+      >
+        datahub.header.organisations
       </div>
--->
-      <!--      <div class="uppercase text-white">Organisations</div>-->
     </div>
   </div>
 </header>

apps/datahub/src/app/search/search-header/search-header.component.spec.ts → apps/datahub/src/app/home/home-header/home-header.component.spec.ts

@@ -2,11 +2,11 @@ import { Component, Input, NO_ERRORS_SCHEMA } from '@angular/core'
 import { ComponentFixture, TestBed } from '@angular/core/testing'
 import { By } from '@angular/platform-browser'
 import { RouterFacade } from '@geonetwork-ui/feature/router'
+import { SearchService } from '@geonetwork-ui/feature/search'
 import { MetadataRecord } from '@geonetwork-ui/util/shared'
 import { TranslateModule } from '@ngx-translate/core'
 import { BehaviorSubject } from 'rxjs'
-
-import { SearchHeaderComponent } from './search-header.component'
+import { HomeHeaderComponent } from './home-header.component'
 
 jest.mock('@geonetwork-ui/util/app-config', () => ({
   getThemeConfig: () => ({
@@ -18,6 +18,10 @@ const routerFacadeMock = {
   goToMetadata: jest.fn(),
   anySearch$: new BehaviorSubject('scot'),
 }
+
+const searchServiceMock = {
+  updateSearch: jest.fn(),
+}
 /* eslint-disable */
 @Component({
   selector: 'gn-ui-fuzzy-search',
@@ -29,25 +33,29 @@ class FuzzySearchComponentMock {
 /* eslint-enable */
 
 describe('HeaderComponent', () => {
-  let component: SearchHeaderComponent
-  let fixture: ComponentFixture<SearchHeaderComponent>
+  let component: HomeHeaderComponent
+  let fixture: ComponentFixture<HomeHeaderComponent>
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       imports: [TranslateModule.forRoot()],
-      declarations: [SearchHeaderComponent, FuzzySearchComponentMock],
+      declarations: [HomeHeaderComponent, FuzzySearchComponentMock],
       schemas: [NO_ERRORS_SCHEMA],
       providers: [
         {
           provide: RouterFacade,
           useValue: routerFacadeMock,
         },
+        {
+          provide: SearchService,
+          useValue: searchServiceMock,
+        },
       ],
     }).compileComponents()
   })
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(SearchHeaderComponent)
+    fixture = TestBed.createComponent(HomeHeaderComponent)
     component = fixture.componentInstance
     fixture.detectChanges()
   })
@@ -56,7 +64,7 @@ describe('HeaderComponent', () => {
     expect(component).toBeTruthy()
   })
 
-  describe('search route paramter', () => {
+  describe('search route parameter', () => {
     it('passed to fuzzy search as AutoComplete item object', () => {
       const fuzzyCpt = fixture.debugElement.query(
         By.directive(FuzzySearchComponentMock)
@@ -73,4 +81,14 @@ describe('HeaderComponent', () => {
       expect(fuzzyCpt.value).toEqual({ title: 'river' })
     })
   })
+  describe('tabs navigation', () => {
+    describe('click datasets tab', () => {
+      beforeEach(() => {
+        component.updateSearch()
+      })
+      it('calls searchService updateSearch with empty object', () => {
+        expect(searchServiceMock.updateSearch).toHaveBeenCalledWith({})
+      })
+    })
+  })
 })

apps/datahub/src/app/search/search-header/search-header.component.ts → apps/datahub/src/app/home/home-header/home-header.component.ts

@@ -1,22 +1,30 @@
 import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
 import { marker } from '@biesbjerg/ngx-translate-extract-marker'
-import { RouterFacade } from '@geonetwork-ui/feature/router'
+import {
+  RouterFacade,
+  ROUTER_ROUTE_SEARCH,
+} from '@geonetwork-ui/feature/router'
+import { SearchService } from '@geonetwork-ui/feature/search'
 import { getThemeConfig } from '@geonetwork-ui/util/app-config'
 import { MetadataRecord } from '@geonetwork-ui/util/shared'
 import { map } from 'rxjs/operators'
+import {
+  ROUTER_ROUTE_NEWS,
+  ROUTER_ROUTE_ORGANISATIONS,
+} from '../../router/constants'
 
 marker('datahub.header.myfavorites')
 marker('datahub.header.connex')
 marker('datahub.header.lastRecords')
 marker('datahub.header.popularRecords')
 
 @Component({
-  selector: 'datahub-search-header',
-  templateUrl: './search-header.component.html',
-  styleUrls: ['./search-header.component.css'],
+  selector: 'datahub-home-header',
+  templateUrl: './home-header.component.html',
+  styleUrls: ['./home-header.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class SearchHeaderComponent {
+export class HomeHeaderComponent {
   @Input() expandRatio: number
 
   searchInputRouteValue$ = this.routerFacade.anySearch$.pipe(
@@ -26,9 +34,20 @@ export class SearchHeaderComponent {
     getThemeConfig().HEADER_BACKGROUND ||
     `center /cover url('assets/img/header_bg.webp')`
 
-  constructor(private routerFacade: RouterFacade) {}
+  ROUTE_NEWS = `${ROUTER_ROUTE_NEWS}`
+  ROUTE_SEARCH = `${ROUTER_ROUTE_SEARCH}`
+  ROUTE_ORGANISATIONS = `${ROUTER_ROUTE_ORGANISATIONS}`
+
+  constructor(
+    public routerFacade: RouterFacade,
+    private searchService: SearchService
+  ) {}
 
   onFuzzySearchSelection(record: MetadataRecord) {
     this.routerFacade.goToMetadata(record)
   }
+
+  updateSearch(): void {
+    this.searchService.updateSearch({})
+  }
 }

apps/datahub/src/app/home/home-page/home-page.component.html

@@ -0,0 +1,12 @@
+<div id="home-page" class="h-screen overflow-y-scroll">
+  <gn-ui-sticky-header [fullHeightPx]="560" [minHeightPx]="90">
+    <ng-template let-expandRatio>
+      <datahub-home-header [expandRatio]="expandRatio"></datahub-home-header>
+    </ng-template>
+  </gn-ui-sticky-header>
+  <main>
+    <div class="container-lg mx-auto py-4 px-3">
+      <router-outlet></router-outlet>
+    </div>
+  </main>
+</div>

apps/datahub/src/app/home/home-page/home-page.component.spec.ts

@@ -0,0 +1,27 @@
+import { NO_ERRORS_SCHEMA } from '@angular/core'
+import { ComponentFixture, TestBed } from '@angular/core/testing'
+import { HomePageComponent } from './home-page.component'
+import { UiLayoutModule } from '@geonetwork-ui/ui/layout'
+
+describe('HomePageComponent', () => {
+  let component: HomePageComponent
+  let fixture: ComponentFixture<HomePageComponent>
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [HomePageComponent],
+      imports: [UiLayoutModule],
+      schemas: [NO_ERRORS_SCHEMA],
+    }).compileComponents()
+  })
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(HomePageComponent)
+    component = fixture.componentInstance
+    fixture.detectChanges()
+  })
+
+  it('should create', () => {
+    expect(component).toBeTruthy()
+  })
+})

apps/datahub/src/app/home/home-page/home-page.component.ts

@@ -0,0 +1,9 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core'
+
+@Component({
+  selector: 'datahub-home-page',
+  templateUrl: './home-page.component.html',
+  styleUrls: ['./home-page.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class HomePageComponent {}

apps/datahub/src/app/home/news-page/news-page.component.html

@@ -0,0 +1 @@
+<p>news-page works!</p>

apps/datahub/src/app/home/news-page/news-page.component.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing'
+
+import { NewsPageComponent } from './news-page.component'
+
+describe('NewsPageComponent', () => {
+  let component: NewsPageComponent
+  let fixture: ComponentFixture<NewsPageComponent>
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [NewsPageComponent],
+    }).compileComponents()
+
+    fixture = TestBed.createComponent(NewsPageComponent)
+    component = fixture.componentInstance
+    fixture.detectChanges()
+  })
+
+  it('should create', () => {
+    expect(component).toBeTruthy()
+  })
+})

apps/datahub/src/app/home/news-page/news-page.component.ts

@@ -0,0 +1,9 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core'
+
+@Component({
+  selector: 'datahub-news-page',
+  templateUrl: './news-page.component.html',
+  styleUrls: ['./news-page.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class NewsPageComponent {}

apps/datahub/src/app/home/organisations-page/organisations-page.component.html

@@ -0,0 +1 @@
+<p>organisations-page works!</p>

apps/datahub/src/app/home/organisations-page/organisations-page.component.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing'
+
+import { OrganisationsPageComponent } from './organisations-page.component'
+
+describe('OrganisationsPageComponent', () => {
+  let component: OrganisationsPageComponent
+  let fixture: ComponentFixture<OrganisationsPageComponent>
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [OrganisationsPageComponent],
+    }).compileComponents()
+
+    fixture = TestBed.createComponent(OrganisationsPageComponent)
+    component = fixture.componentInstance
+    fixture.detectChanges()
+  })
+
+  it('should create', () => {
+    expect(component).toBeTruthy()
+  })
+})

apps/datahub/src/app/home/organisations-page/organisations-page.component.ts

@@ -0,0 +1,9 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core'
+
+@Component({
+  selector: 'datahub-organisations-page',
+  templateUrl: './organisations-page.component.html',
+  styleUrls: ['./organisations-page.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class OrganisationsPageComponent {}

apps/datahub/src/app/search/record-preview-datahub/record-preview-datahub.component.ts → apps/datahub/src/app/home/search/record-preview-datahub/record-preview-datahub.component.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core'
+import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core'
 import { RecordPreviewComponent } from '@geonetwork-ui/ui/search'
 import { stripHtml } from '@geonetwork-ui/util/shared'
 
@@ -8,7 +8,10 @@ import { stripHtml } from '@geonetwork-ui/util/shared'
   styleUrls: ['./record-preview-datahub.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class RecordPreviewDatahubComponent extends RecordPreviewComponent {
+export class RecordPreviewDatahubComponent
+  extends RecordPreviewComponent
+  implements OnInit
+{
   abstract: string
   ngOnInit() {
     super.ngOnInit()