Merge pull request #93 from geonetwork/multiple_search

Allow multiple searches in the state

apps/search/src/app/app.component.html

@@ -1,24 +1,8 @@
-<div>
-  <div class="p-4">
-    <catalog-site-title></catalog-site-title>
-  </div>
-  <search-records-metrics field="tag" count="20"></search-records-metrics>
-  <div class="mb-3 mx-4 rounded flex flex-row">
-    <div class="w-2/4 mr-3">
-      <search-fuzzy-search></search-fuzzy-search>
-    </div>
-    <div class="w-1/4 mr-3">
-      <search-sort-by></search-sort-by>
-    </div>
-    <div class="flex-grow">
-      <search-results-layout></search-results-layout>
-    </div>
-  </div>
-  <div class="flex flex-row">
-    <search-facets-container class="w-1/4"></search-facets-container>
-    <div class="w-3/4">
-      <search-results-hits></search-results-hits>
-      <search-results-list-container></search-results-list-container>
-    </div>
-  </div>
+<div class="p-4">
+  <catalog-site-title></catalog-site-title>
+</div>
+<search-records-metrics field="tag" count="20"></search-records-metrics>
+
+<div searchSearchStateContainer="mainSearch">
+  <app-main-search></app-main-search>
 </div>

apps/search/src/app/app.component.spec.ts

@@ -1,30 +1,10 @@
 import { NO_ERRORS_SCHEMA } from '@angular/core'
 import { async, TestBed } from '@angular/core/testing'
 import { RouterTestingModule } from '@angular/router/testing'
-import { BootstrapService } from '@lib/common'
-import { SearchFacade } from '@lib/search'
 import { EffectsModule } from '@ngrx/effects'
 import { StoreModule } from '@ngrx/store'
-import { of } from 'rxjs'
 import { AppComponent } from './app.component'
 
-const configFacetMock = {
-  mods: {
-    search: {
-      facetConfig: {
-        tag: {},
-      },
-    },
-  },
-}
-const boostrapServiceMock = {
-  uiConfReady: jest.fn(() => of(configFacetMock)),
-}
-const searchFacadeMock = {
-  setConfigAggregations: jest.fn(),
-  requestMoreResults: jest.fn(),
-}
-
 describe('AppComponent', () => {
   beforeEach(async(() => {
     TestBed.configureTestingModule({
@@ -35,16 +15,6 @@ describe('AppComponent', () => {
       ],
       declarations: [AppComponent],
       schemas: [NO_ERRORS_SCHEMA],
-      providers: [
-        {
-          provide: BootstrapService,
-          useValue: boostrapServiceMock,
-        },
-        {
-          provide: SearchFacade,
-          useValue: searchFacadeMock,
-        },
-      ],
     }).compileComponents()
   }))
 

apps/search/src/app/app.component.ts

@@ -1,7 +1,5 @@
 import { Component, OnInit } from '@angular/core'
-import { BootstrapService, ColorService } from '@lib/common'
-import { SearchFacade } from '@lib/search'
-import { map, pluck, take, tap } from 'rxjs/operators'
+import { ColorService } from '@lib/common'
 
 @Component({
   selector: 'app-root',
@@ -11,24 +9,9 @@ import { map, pluck, take, tap } from 'rxjs/operators'
 export class AppComponent implements OnInit {
   title = 'search'
 
-  constructor(
-    private bootstrap: BootstrapService,
-    private searchFacade: SearchFacade
-  ) {
+  constructor() {
     ColorService.applyCssVariables('#e73f51', '#c2e9dc', '#212029', '#fdfbff')
   }
 
-  ngOnInit(): void {
-    this.bootstrap
-      .uiConfReady('srv')
-      .pipe(
-        take(1),
-        map((config) => config.mods.search.facetConfig),
-        tap((aggregationsConfig) => {
-          this.searchFacade.setConfigAggregations(aggregationsConfig)
-          this.searchFacade.requestMoreResults()
-        })
-      )
-      .subscribe()
-  }
+  ngOnInit(): void {}
 }

apps/search/src/app/app.module.ts

@@ -13,13 +13,14 @@ import { storeFreeze } from 'ngrx-store-freeze'
 import { environment } from '../environments/environment'
 import { AppRoutingModule } from './app-routing.module'
 import { AppComponent } from './app.component'
+import { MainSearchComponent } from './main-search/main-search.component'
 
 export const metaReducers: MetaReducer<any>[] = !environment.production
   ? [storeFreeze]
   : []
 
 @NgModule({
-  declarations: [AppComponent],
+  declarations: [AppComponent, MainSearchComponent],
   imports: [
     BrowserModule,
     AppRoutingModule,

apps/search/src/app/main-search/main-search.component.html

@@ -0,0 +1,18 @@
+<div class="mb-3 mx-4 rounded flex flex-row">
+  <div class="w-2/4 mr-3">
+    <search-fuzzy-search></search-fuzzy-search>
+  </div>
+  <div class="w-1/4 mr-3">
+    <search-sort-by></search-sort-by>
+  </div>
+  <div class="flex-grow">
+    <search-results-layout></search-results-layout>
+  </div>
+</div>
+<div class="flex flex-row">
+  <search-facets-container class="w-1/4"></search-facets-container>
+  <div class="w-3/4">
+    <search-results-hits></search-results-hits>
+    <search-results-list-container></search-results-list-container>
+  </div>
+</div>

apps/search/src/app/main-search/main-search.component.spec.ts

@@ -0,0 +1,58 @@
+import { NO_ERRORS_SCHEMA } from '@angular/core'
+import { async, ComponentFixture, TestBed } from '@angular/core/testing'
+import { RouterTestingModule } from '@angular/router/testing'
+import { BootstrapService } from '@lib/common'
+import { SearchFacade } from '@lib/search'
+import { EffectsModule } from '@ngrx/effects'
+import { StoreModule } from '@ngrx/store'
+import { of } from 'rxjs'
+import { AppComponent } from '../app.component'
+
+import { MainSearchComponent } from './main-search.component'
+
+const configFacetMock = {
+  mods: {
+    search: {
+      facetConfig: {
+        tag: {},
+      },
+    },
+  },
+}
+const boostrapServiceMock = {
+  uiConfReady: jest.fn(() => of(configFacetMock)),
+}
+const searchFacadeMock = {
+  setConfigAggregations: jest.fn(),
+  requestMoreResults: jest.fn(),
+}
+
+describe('MainSearchComponent', () => {
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [
+        RouterTestingModule,
+        EffectsModule.forRoot(),
+        StoreModule.forRoot({}),
+      ],
+      declarations: [AppComponent],
+      schemas: [NO_ERRORS_SCHEMA],
+      providers: [
+        {
+          provide: BootstrapService,
+          useValue: boostrapServiceMock,
+        },
+        {
+          provide: SearchFacade,
+          useValue: searchFacadeMock,
+        },
+      ],
+    }).compileComponents()
+  }))
+
+  it('should create the app', () => {
+    const fixture = TestBed.createComponent(AppComponent)
+    const app = fixture.componentInstance
+    expect(app).toBeTruthy()
+  })
+})

apps/search/src/app/main-search/main-search.component.ts

@@ -0,0 +1,30 @@
+import { Component, OnInit } from '@angular/core'
+import { BootstrapService } from '@lib/common'
+import { SearchFacade } from '@lib/search'
+import { map, take, tap } from 'rxjs/operators'
+
+@Component({
+  selector: 'app-main-search',
+  templateUrl: './main-search.component.html',
+  styleUrls: ['./main-search.component.scss'],
+})
+export class MainSearchComponent implements OnInit {
+  constructor(
+    private bootstrap: BootstrapService,
+    private searchFacade: SearchFacade
+  ) {}
+
+  ngOnInit(): void {
+    this.bootstrap
+      .uiConfReady('srv')
+      .pipe(
+        take(1),
+        map((config) => config.mods.search.facetConfig),
+        tap((aggregationsConfig) => {
+          this.searchFacade.setConfigAggregations(aggregationsConfig)
+          this.searchFacade.requestMoreResults()
+        })
+      )
+      .subscribe()
+  }
+}

libs/search/src/lib/elasticsearch/elasticsearch.service.spec.ts

@@ -1,4 +1,10 @@
-import { ElasticsearchService, initialState } from '@lib/search'
+import {
+  DEFAULT_SEARCH_KEY,
+  ElasticsearchService,
+  initialState,
+} from '@lib/search'
+
+const initialStateSearch = initialState[DEFAULT_SEARCH_KEY]
 
 describe('ElasticsearchService', () => {
   let service: ElasticsearchService
@@ -15,7 +21,7 @@ describe('ElasticsearchService', () => {
   describe('#Sort', () => {
     it('One sort and default direction', () => {
       const body = service.buildPayload({
-        ...initialState,
+        ...initialStateSearch,
         params: {
           filters: {
             any: '',
@@ -28,7 +34,7 @@ describe('ElasticsearchService', () => {
 
     it('One sort and DESC direction', () => {
       const body = service.buildPayload({
-        ...initialState,
+        ...initialStateSearch,
         params: {
           filters: {
             any: '',
@@ -41,7 +47,7 @@ describe('ElasticsearchService', () => {
 
     it('Multiple sorts', () => {
       const body = service.buildPayload({
-        ...initialState,
+        ...initialStateSearch,
         params: {
           filters: {
             any: '',

libs/search/src/lib/elasticsearch/elasticsearch.service.ts

@@ -1,7 +1,7 @@
 import { Injectable } from '@angular/core'
 import { SortParams } from '@lib/common'
 import { NameList, SearchParams } from 'elasticsearch'
-import { SearchState } from '../state/reducer'
+import { SearchState, SearchStateSearch } from '../state/reducer'
 import { ElasticsearchMetadataModels, ElasticSearchSources } from './constant'
 
 @Injectable({
@@ -10,13 +10,16 @@ import { ElasticsearchMetadataModels, ElasticSearchSources } from './constant'
 export class ElasticsearchService {
   constructor() {}
 
-  search(state: SearchState, model: ElasticsearchMetadataModels): SearchParams {
+  search(
+    state: SearchStateSearch,
+    model: ElasticsearchMetadataModels
+  ): SearchParams {
     const payload = this.buildPayload(state)
     payload._source = ElasticSearchSources[model]
     return payload
   }
 
-  buildPayload(state: SearchState): SearchParams {
+  buildPayload(state: SearchStateSearch): SearchParams {
     const { size, sortBy, from } = state.params
     const sort: SortParams = sortBy
       ? sortBy.split(',').map((s) => {
@@ -38,7 +41,10 @@ export class ElasticsearchService {
     return payload
   }
 
-  buildMoreOnAggregationPayload(state: SearchState, key: string): SearchParams {
+  buildMoreOnAggregationPayload(
+    state: SearchStateSearch,
+    key: string
+  ): SearchParams {
     const payload = {
       aggregations: { [key]: state.config.aggregations[key] },
       size: 0,
@@ -47,7 +53,7 @@ export class ElasticsearchService {
     return payload
   }
 
-  partialBuildQuery(state: SearchState) {
+  partialBuildQuery(state: SearchStateSearch) {
     const filters = state.params.filters
     const { any, ...searchFilters } = filters
     const queryFilters = this.facetsToLuceneQuery(searchFilters)

libs/search/src/lib/facets/facets-container/facets-container.component.spec.ts

@@ -2,10 +2,8 @@ import { NO_ERRORS_SCHEMA } from '@angular/core'
 import { async, ComponentFixture, TestBed } from '@angular/core/testing'
 import { SearchFilters } from '@lib/common'
 import { SearchFacade } from '@lib/search'
-import { EffectsModule } from '@ngrx/effects'
-import { StoreModule } from '@ngrx/store'
+import { of } from 'rxjs'
 import { SEARCH_STATE_FILTERS_FIXTURE } from '../../state/fixtures/search-state.fixtures'
-import { initialState, reducer, SEARCH_FEATURE_KEY } from '../../state/reducer'
 
 import { FacetsContainerComponent } from './facets-container.component'
 
@@ -14,6 +12,9 @@ const searchFacadeMock = {
   requestMoreResults: jest.fn(),
   setIncludeOnAggregation: jest.fn(),
   requestMoreOnAggregation: jest.fn(),
+  searchFilters$: of({}),
+  configAggregations$: of({}),
+  resultsAggregations$: of({}),
 }
 
 describe('FacetsContainerComponent', () => {
@@ -24,13 +25,7 @@ describe('FacetsContainerComponent', () => {
   beforeEach(async(() => {
     TestBed.configureTestingModule({
       declarations: [FacetsContainerComponent],
-      imports: [
-        EffectsModule.forRoot(),
-        StoreModule.forRoot({}),
-        StoreModule.forFeature(SEARCH_FEATURE_KEY, reducer, {
-          initialState,
-        }),
-      ],
+      imports: [],
       providers: [
         {
           provide: SearchFacade,