search: improve filter configuration

* Replaces the button by a toggle on the filter display. * Adds URL parameters on searchFilter. * Updates the routing configuration to show all options. Co-Authored-by: Bertrand Zuchuat <[email protected]> Co-Authored-by: Sébastien Délèze <[email protected]>
rero · Apr 27, 2021 · 67de715 · 67de715
1 parent d6401ba
commit 67de715
Show file tree

Hide file tree

Showing 6 changed files with 129 additions and 12 deletions.
diff --git a/projects/ng-core-tester/src/app/app-routing.module.ts b/projects/ng-core-tester/src/app/app-routing.module.ts
@@ -309,9 +309,34 @@ const routes: Routes = [
             }
           ],
           searchFilters: [
+            {
+              label: 'Advanced search',
+              filter: 'simple',
+              value: '0',
+              /* If you set this value, the url parameter will still be present,
+              but with different values */
+              disabledValue: '1',
+              persistent: true,
+              url: {
+                routerLink: ['/record', 'search', 'documents'],
+                title: 'Link to search document'
+              }
+            },
             {
               label: 'Open access',
-              filter: 'open_access'
+              filter: 'open_access',
+              value: '1',
+              url: {
+                external: true,
+                link: 'https://sonar.rero.ch',
+                target: '_blank',
+                title: 'Link to Sonar interface'
+              }
+            },
+            {
+              label: 'Another filter',
+              filter: 'other',
+              value: '1'
             }
           ]
         },

diff --git a/projects/rero/ng-core/src/lib/record/record.ts b/projects/rero/ng-core/src/lib/record/record.ts
@@ -66,5 +66,16 @@ export interface SearchField {
 export interface SearchFilter {
   filter: string;
   label: string;
-  value?: string;
+  value: string;
+  /* If you set this value, the url parameter will still be present,
+  but with different values */
+  disabledValue?: string;
+  persistent?: boolean;
+  url?: {
+    external?: boolean;
+    link?: string;
+    routerLink?: Array<string>;
+    target?: string;
+    title?: string;
+  };
 }
diff --git a/projects/rero/ng-core/src/lib/record/search/record-search-page.component.ts b/projects/rero/ng-core/src/lib/record/search/record-search-page.component.ts
@@ -21,6 +21,7 @@ import { JSONSchema7 } from '../editor/editor.component';
 import { combineLatest, Subscription } from 'rxjs';
 import { ActionStatus } from '../action-status';
 import { RecordSearchService } from './record-search.service';
+import { RecordUiService } from '../record-ui.service';
 
 @Component({
   selector: 'ng-core-record-search-page',
@@ -116,7 +117,8 @@ export class RecordSearchPageComponent implements OnInit, OnDestroy {
   constructor(
     protected _route: ActivatedRoute,
     protected _router: Router,
-    protected _recordSearchService: RecordSearchService
+    protected _recordSearchService: RecordSearchService,
+    protected _recordUiService: RecordUiService
   ) { }
 
   /**
@@ -131,6 +133,9 @@ export class RecordSearchPageComponent implements OnInit, OnDestroy {
       ([paramMap, queryParams]) => {
         // store current type of resource
         this.currentType = paramMap.get('type');
+        this._recordUiService.types = this._route.snapshot.data.types;
+
+        const config = this._recordUiService.getResourceConfig(this.currentType);
 
         // Stores query parameters
         this.q = queryParams.get('q') || '';
@@ -147,6 +152,15 @@ export class RecordSearchPageComponent implements OnInit, OnDestroy {
           }
         });
 
+        // Add filter parameter value
+        if (config.searchFilters) {
+          config.searchFilters.forEach((filter: any) => {
+            if (queryParams.get(filter.filter) === null && filter.disabledValue) {
+              aggregationsFilters.push({ key: filter.filter, values: [filter.disabledValue] });
+            }
+          });
+        }
+
         // No default parameters found, we update the url to put them
         if (queryParams.has('q') === false || queryParams.has('size') === false || queryParams.has('page') === false) {
           this.updateUrl({

diff --git a/projects/rero/ng-core/src/lib/record/search/record-search.component.html b/projects/rero/ng-core/src/lib/record/search/record-search.component.html
@@ -129,10 +129,35 @@ <h5 *ngIf="types.length == 1 && showLabel">
           </ng-template>
         </div>
         <ng-container *ngIf="searchFilters">
-          <button class="btn btn-outline-primary btn-sm btn-block text-center mb-3"
-            [ngClass]="{ active: isFilterActive(filter) }" (click)="searchFilter(filter)" *ngFor="let filter of searchFilters">
-            {{ filter.label }}
-          </button>
+          <div class="mb-2">
+            <div class="custom-control custom-switch" *ngFor="let searchfilter of searchFilters">
+              <input
+                type="checkbox"
+                class="custom-control-input"
+                id="customSwitch-{{ searchfilter.filter }}"
+                (click)="searchFilter(searchfilter)"
+                [checked]="isFilterActive(searchfilter)"
+              >
+              <label class="custom-control-label" for="customSwitch-{{ searchfilter.filter }}">{{ searchfilter.label }}</label>
+              <ng-container *ngIf="searchfilter.url">
+                <ng-container *ngIf="searchfilter.url.external; else internal">
+                  <a
+                    class="ml-1 text-dark"
+                    [title]="searchfilter.url.title"
+                    [href]="searchfilter.url.link"
+                    [target]="searchfilter.url.target"
+                  >
+                    <i class="fa fa-info-circle" aria-hidden="true"></i>
+                  </a>
+                </ng-container>
+                <ng-template #internal>
+                  <a class="ml-1 text-dark" [title]="searchfilter.url.title" [routerLink]="searchfilter.url.routerLink">
+                    <i class="fa fa-info-circle" aria-hidden="true"></i>
+                  </a>
+                </ng-template>
+              </ng-container>
+            </div>
+          </div>
         </ng-container>
         <div *ngFor="let item of aggregations">
           <ng-core-record-search-aggregation

diff --git a/projects/rero/ng-core/src/lib/record/search/record-search.component.ts b/projects/rero/ng-core/src/lib/record/search/record-search.component.ts
@@ -15,6 +15,7 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 import { Component, EventEmitter, Input, OnChanges, OnDestroy, OnInit, Output, SimpleChanges } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
 import { FormlyFieldConfig } from '@ngx-formly/core';
 import { TranslateService } from '@ngx-translate/core';
 import { cloneDeep } from 'lodash-es';
@@ -205,14 +206,16 @@ export class RecordSearchComponent implements OnInit, OnChanges, OnDestroy {
    * @param _translateService Translate service.
    * @param _spinner Spinner service.
    * @param _apiService Api service.
+   * @param _activatedRoute Activated Route
    */
   constructor(
     private _recordService: RecordService,
     private _recordUiService: RecordUiService,
     private _recordSearchService: RecordSearchService,
     private _translateService: TranslateService,
     private _spinner: NgxSpinnerService,
-    private _apiService: ApiService
+    private _apiService: ApiService,
+    private _activatedRoute: ActivatedRoute
   ) { }
 
   /**
@@ -480,7 +483,9 @@ export class RecordSearchComponent implements OnInit, OnChanges, OnDestroy {
     this.q = event;
     this.aggregationsFilters = [];
     this._searchParamsHasChanged();
-    this._recordSearchService.setAggregationsFilters([]);
+    this._recordSearchService.setAggregationsFilters(
+      this._extractPersistentAggregationsFilters()
+    );
   }
 
   /**
@@ -723,8 +728,23 @@ export class RecordSearchComponent implements OnInit, OnChanges, OnDestroy {
    * @returns void
    */
   searchFilter(filter: SearchFilter): void {
-    const values =
-      this.isFilterActive(filter) === true ? [] : [filter.value || '1'];
+    let values = [];
+    const agg = this.aggregationsFilters.filter((item: any) => {
+      return item.key === filter.filter;
+    });
+    if (agg.length > 0) {
+      const aggFilter = agg[0];
+      if (!aggFilter.values.includes(filter.value)) {
+        values = [filter.value];
+      } else {
+        if (filter.disabledValue) {
+          values = [filter.disabledValue];
+        }
+      }
+    } else {
+      values = [filter.value];
+    }
+
     this._recordSearchService.updateAggregationFilter(filter.filter, values);
   }
 
@@ -735,8 +755,11 @@ export class RecordSearchComponent implements OnInit, OnChanges, OnDestroy {
    * @returns true if the given filter is selected.
    */
   isFilterActive(filter: SearchFilter): boolean {
+    if (!this.aggregationsFilters) {
+      return false;
+    }
     return this.aggregationsFilters.some((item: any) => {
-      return item.key === filter.filter;
+      return item.key === filter.filter && item.values.includes(String(filter.value));
     });
   }
 
@@ -891,4 +914,20 @@ export class RecordSearchComponent implements OnInit, OnChanges, OnDestroy {
       ? this._config.aggregationsName[key]
       : null;
   }
+
+  /** Extract persistent search filters on current url */
+  private _extractPersistentAggregationsFilters(): Array<AggregationsFilter> {
+    const persistent = [];
+    const filters = this.searchFilters.filter(filter => filter.persistent === true);
+    filters.forEach((filter: SearchFilter) => {
+      if (this._activatedRoute.snapshot.queryParams.hasOwnProperty(filter.filter)) {
+        let data = this._activatedRoute.snapshot.queryParams[filter.filter];
+        if (!Array.isArray(data)) {
+          data = [data];
+        }
+        persistent.push({ key: filter.filter, values: data });
+      }
+    });
+    return persistent;
+  }
 }
diff --git a/projects/rero/ng-core/src/lib/record/search/record-search.service.ts b/projects/rero/ng-core/src/lib/record/search/record-search.service.ts
@@ -78,6 +78,9 @@ export class RecordSearchService {
    * @param values Selected values
    */
   updateAggregationFilter(term: string, values: string[]) {
+    if (this._aggregationsFilters === null) {
+      this._aggregationsFilters = [];
+    }
     const index = this._aggregationsFilters.findIndex(item => item.key === term);
 
     if (values.length === 0) {