Make filter options customisable

apps/datahub/src/app/home/search/search-filters/search-filters.component.html

@@ -41,52 +41,11 @@ <h2 class="text-xl mr-4 font-title" translate>
       </div>
     </div>
     <gn-ui-filter-dropdown
+      *ngFor="let filter of searchConfig; let i = index"
       class="w-full"
-      [ngClass]="isOpen ? 'block' : 'hidden sm:block'"
-      [fieldName]="'publisher'"
-      [title]="'search.filters.byOrganisation' | translate"
-    ></gn-ui-filter-dropdown>
-    <gn-ui-filter-dropdown
-      class="w-full"
-      [ngClass]="isOpen ? 'block' : 'hidden sm:block'"
-      [fieldName]="'format'"
-      [title]="'search.filters.byFormat' | translate"
-    ></gn-ui-filter-dropdown>
-    <gn-ui-filter-dropdown
-      class="w-full"
-      [ngClass]="isOpen ? 'block' : 'hidden'"
-      [fieldName]="'documentStandard'"
-      [title]="'search.filters.byStandard' | translate"
-    ></gn-ui-filter-dropdown>
-    <gn-ui-filter-dropdown
-      class="w-full"
-      [ngClass]="isOpen ? 'block' : 'hidden'"
-      [fieldName]="'inspireKeyword'"
-      [title]="'search.filters.byInspireKeyword' | translate"
-    ></gn-ui-filter-dropdown>
-    <gn-ui-filter-dropdown
-      class="w-full"
-      [ngClass]="isOpen ? 'block' : 'hidden'"
-      [fieldName]="'topic'"
-      [title]="'search.filters.byTopic' | translate"
-    ></gn-ui-filter-dropdown>
-    <gn-ui-filter-dropdown
-      class="w-full"
-      [ngClass]="isOpen ? 'block' : 'hidden'"
-      [fieldName]="'publicationYear'"
-      [title]="'search.filters.byPublicationYear' | translate"
-    ></gn-ui-filter-dropdown>
-    <gn-ui-filter-dropdown
-      class="w-full"
-      [ngClass]="isOpen ? 'block' : 'hidden'"
-      [fieldName]="'isSpatial'"
-      [title]="'search.filters.isSpatial' | translate"
-    ></gn-ui-filter-dropdown>
-    <gn-ui-filter-dropdown
-      class="w-full"
-      [ngClass]="isOpen ? 'block' : 'hidden'"
-      [fieldName]="'license'"
-      [title]="'search.filters.byLicense' | translate"
+      [ngClass]="getClassForFilter(i)"
+      [fieldName]="filter.fieldName"
+      [title]="filter.title | translate"
     ></gn-ui-filter-dropdown>
     <div
       class="spatial-filter-toggle sm:col-span-2"

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

@@ -25,6 +25,21 @@ import { TranslateModule } from '@ngx-translate/core'
 import { By } from '@angular/platform-browser'
 import { FormsModule } from '@angular/forms'
 
+jest.mock('@geonetwork-ui/util/app-config', () => ({
+  getOptionalSearchConfig: () => ({
+    ADVANCED_FILTERS: [
+      'publisher',
+      'format',
+      'isSpatial',
+      'documentStandard',
+      'inspireKeyword',
+      'license',
+      'topic',
+      'publicationYear',
+    ],
+  }),
+}))
+
 @Component({
   selector: 'gn-ui-check-toggle', // eslint-disable-line
   template: '<div></div>',
@@ -77,6 +92,18 @@ class FieldsServiceMock {
       )
     )
   )
+  public get supportedFields() {
+    return [
+      'publisher',
+      'format',
+      'isSpatial',
+      'documentStandard',
+      'inspireKeyword',
+      'license',
+      'topic',
+      'publicationYear',
+    ]
+  }
 }
 
 describe('SearchFiltersComponent', () => {
@@ -234,7 +261,7 @@ describe('SearchFiltersComponent', () => {
           getFilterButtons()[1].nativeElement.classList.contains('block')
         ).toBeTruthy()
       })
-      it('third filter dropdown does not show up (on desktop and mobile)', () => {
+      it('third filter dropdown shows up (on desktop and mobile)', () => {
         expect(
           getFilterButtons()[2].nativeElement.classList.contains('block')
         ).toBeTruthy()

apps/datahub/src/app/home/search/search-filters/search-filters.component.ts

@@ -1,33 +1,105 @@
 import {
   ChangeDetectionStrategy,
   Component,
+  OnInit,
   QueryList,
   ViewChildren,
 } from '@angular/core'
+import { marker } from '@biesbjerg/ngx-translate-extract-marker'
 import {
   FieldsService,
   FilterDropdownComponent,
   SearchFacade,
   SearchService,
 } from '@geonetwork-ui/feature/search'
+import { getOptionalSearchConfig } from '@geonetwork-ui/util/app-config'
 
 @Component({
   selector: 'datahub-search-filters',
   templateUrl: './search-filters.component.html',
   styleUrls: ['./search-filters.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class SearchFiltersComponent {
+export class SearchFiltersComponent implements OnInit {
   @ViewChildren(FilterDropdownComponent)
   filters: QueryList<FilterDropdownComponent>
+  searchConfig: { fieldName: string; title: string }[]
+  isOpen = false
 
   constructor(
     public searchFacade: SearchFacade,
     private searchService: SearchService,
     private fieldsService: FieldsService
   ) {}
 
-  isOpen = false
+  ngOnInit(): void {
+    this.searchConfig = (
+      getOptionalSearchConfig().ADVANCED_FILTERS || [
+        'publisher',
+        'format',
+        'publicationYear',
+        'topic',
+        'isSpatial',
+        'license',
+      ]
+    )
+      .filter((adv_filter) => {
+        if (this.fieldsService.supportedFields?.includes(adv_filter)) {
+          return true
+        } else {
+          console.warn(
+            `WARNING: the configuration file contains an unsupported filter field: '${adv_filter}'. This field will be ignored.`
+          )
+          return false
+        }
+      })
+      .map((filter) => {
+        switch (filter) {
+          case 'publisher':
+            return {
+              fieldName: filter,
+              title: marker('search.filters.byOrganisation'),
+            }
+          case 'format':
+            return {
+              fieldName: filter,
+              title: marker('search.filters.byFormat'),
+            }
+          case 'standard':
+            return {
+              fieldName: filter,
+              title: marker('search.filters.byStandard'),
+            }
+          case 'inspireKeyword':
+            return {
+              fieldName: filter,
+              title: marker('search.filters.byInspireKeyword'),
+            }
+          case 'topic':
+            return {
+              fieldName: filter,
+              title: marker('search.filters.byTopic'),
+            }
+          case 'publicationYear':
+            return {
+              fieldName: filter,
+              title: marker('search.filters.byPublicationYear'),
+            }
+          case 'isSpatial':
+            return {
+              fieldName: filter,
+              title: marker('search.filters.isSpatial'),
+            }
+          case 'license':
+            return {
+              fieldName: filter,
+              title: marker('search.filters.byLicense'),
+            }
+          default:
+            return { fieldName: filter, title: filter }
+        }
+      })
+  }
 
   open() {
     this.isOpen = true
@@ -53,4 +125,10 @@ export class SearchFiltersComponent {
         this.searchService.updateFilters(filters)
       })
   }
+
+  getClassForFilter(index: number) {
+    return (
+      (this.isOpen ? 'block' : 'hidden') + ' ' + (index < 2 ? 'sm:block' : '')
+    )
+  }
 }

conf/default.toml

@@ -63,6 +63,10 @@ background_color = "#fdfbff"
 # Note: if the GeoJSON object contains multiple features, only the geometry of the first one will be kept!
 # filter_geometry_url = "https://my.domain.org/assets/boundary.geojson"
 # filter_geometry_data = '{ "coordinates": [...], "type": "Polygon" }'
+# The advanced search filters available to the user can be customized with this setting.
+# The following fields can be used for filtering: 'publisher', 'format', 'publicationYear', 'standard', 'inspireKeyword', 'topic', 'isSpatial', 'license'
+# any other field will be ignored
+# advanced_filters = ['publisher', 'format', 'publicationYear', 'topic', 'isSpatial', 'license']
 
 # One or several search presets can be defined here; every search preset is composed of:
 # - a name (which can be a translation key)

libs/util/app-config/src/lib/app-config.spec.ts

@@ -172,6 +172,13 @@ describe('app config utils', () => {
               },
             },
           ],
+          ADVANCED_FILTERS: [
+            'publicationYear',
+            'documentStandard',
+            'inspireKeyword',
+            'topic',
+            'license',
+          ],
         })
       })
     })

libs/util/app-config/src/lib/app-config.ts

@@ -190,7 +190,12 @@ export function loadAppConfig() {
         parsed,
         'search',
         [],
-        ['filter_geometry_data', 'filter_geometry_url', 'search_preset'],
+        [
+          'filter_geometry_data',
+          'filter_geometry_url',
+          'search_preset',
+          'advanced_filters',
+        ],
         warnings,
         errors
       )
@@ -213,7 +218,8 @@ export function loadAppConfig() {
                 name: param.name,
                 filters: param.filters,
               })),
-            } as any)
+              ADVANCED_FILTERS: parsedSearchSection.advanced_filters,
+            } as SearchConfig)
 
       customTranslations = parseTranslationsConfigSection(
         parsed,

libs/util/app-config/src/lib/fixtures.ts

@@ -37,6 +37,7 @@ fonts_stylesheet_url = "https://fonts.googleapis.com/css2?family=Open+Sans"
 
 [search]
 filter_geometry_url = 'https://my.domain.org/geom.json'
+advanced_filters = ['publicationYear', 'documentStandard', 'inspireKeyword', 'topic', 'license']
 
 [[search_preset]]
 sort = "-createDate"

libs/util/app-config/src/lib/model.ts

@@ -47,6 +47,7 @@ export interface SearchConfig {
   FILTER_GEOMETRY_URL?: string
   FILTER_GEOMETRY_DATA?: string
   SEARCH_PRESET?: SearchPreset[]
+  ADVANCED_FILTERS?: []
 }
 
 export type CustomTranslations = { [translationKey: string]: string }