Facet entry model support multiselect, add/remove sidebar items and a…

…pply filters selected

src/app/+data-and-analytics/academic-age-group/academic-age-group.component.ts

@@ -4,7 +4,7 @@ import { Observable, Subject, filter, map, tap } from 'rxjs';
 
 import { SolrDocument } from '../../core/model/discovery';
 import { Filterable } from '../../core/model/request';
-import { SidebarMenu } from '../../core/model/sidebar';
+import { SidebarItemType, SidebarMenu } from '../../core/model/sidebar';
 import { DataAndAnalyticsView, DisplayView, Facet, OpKey } from '../../core/model/view';
 import { DialogService } from '../../core/service/dialog.service';
 import { AppState } from '../../core/store';
@@ -13,8 +13,10 @@ import { AcademicAge } from '../../core/store/sdr/sdr.reducer';
 import { fadeIn } from '../../shared/utilities/animation.utility';
 import { BarplotComponent, BarplotInput } from './barplot/barplot.component';
 
+import * as fromRouter from '../../core/store/router/router.actions';
 import * as fromSdr from '../../core/store/sdr/sdr.actions';
 import * as fromSidebar from '../../core/store/sidebar/sidebar.actions';
+import { ActivatedRoute, Router } from '@angular/router';
 
 const academicAgeGroupToBarplotInput = (academicAge: AcademicAge): BarplotInput => {
   return {
@@ -72,28 +74,33 @@ export class AcademicAgeGroupComponent implements OnInit, OnChanges {
 
   public averagePubRateAcademicAge: Observable<BarplotInput>;
 
+  private sidebarMenuSections: { [key: string]: { facet:Facet, index: number } };
+
   constructor(
+    private router: Router,
+    private route: ActivatedRoute,
     private store: Store<AppState>,
     private dialog: DialogService,
   ) {
     this.labelEvent = new EventEmitter<string>();
     this.maxOverride = new Subject<number>();
     this.mean = new Subject<number>();
     this.median = new Subject<number>();
+    this.sidebarMenuSections = {};
   }
 
   ngOnInit(): void {
-    const items = [];
     const menu: SidebarMenu = {
-      sections: this.dataAndAnalyticsView.facets.map((facet: Facet) => {
+      sections: this.dataAndAnalyticsView.facets.map((facet: Facet, index: number) => {
+        this.sidebarMenuSections[facet.field] = { facet, index};
         return {
           title: facet.name,
           expandable: facet.expandable,
           collapsible: facet.collapsible,
           collapsed: facet.collapsed,
           useDialog: facet.useDialog,
-          action: this.dialog.facetEntriesDialog(facet.name, facet.field),
-          items,
+          action: this.dialog.facetEntriesDialog(facet.name, facet.field, true, 1),
+          items: [],
         };
       })
     };
@@ -125,8 +132,44 @@ export class AcademicAgeGroupComponent implements OnInit, OnChanges {
     this.store.dispatch(new fromSdr.ClearAcademicAgeAction('individual'));
 
     setTimeout(() => {
+      if (!!filters.previousValue) {
+        filters.previousValue.forEach((entry: any) => {
+          if (filters.currentValue.indexOf(entry) === -1) {
+            const section = this.sidebarMenuSections[entry.field];
+            if (!!section) {
+              this.store.dispatch(new fromSidebar.RemoveSectionAction({
+                sectionIndex: section.index,
+                itemLabel: entry.value,
+                itemField: entry.field,
+              }));
+            }
+          }
+        });
+      }
+
+      filters.currentValue.forEach((entry: any) => {
+        if (filters.previousValue === undefined || filters.previousValue.indexOf(entry) === -1) {
+          const section = this.sidebarMenuSections[entry.field];
+          if (!!section) {
+            this.store.dispatch(new fromSidebar.AddSectionItemAction({
+              sectionIndex: section.index,
+              sectionItem: {
+                type: SidebarItemType.ACTION,
+                label: entry.value,
+                selected: true,
+                action: new fromSidebar.RemoveSectionAction({
+                  sectionIndex: section.index,
+                  itemLabel: entry.value,
+                  itemField: entry.field,
+                })
+              }
+            }));
+          }
+        }
+      });
 
-      const additionalFilters = [];
+      const additionalFilters = [...filters.currentValue];
+      additionalFilters.shift();
 
       this.barplots.forEach(barplot => barplot.draw());
 

src/app/+data-and-analytics/data-and-analytics.component.ts

@@ -77,7 +77,7 @@ export class DataAndAnalyticsComponent implements OnInit {
 
   constructor(
     private router: Router,
-    private activatedRoute: ActivatedRoute,
+    private route: ActivatedRoute,
     private store: Store<AppState>
   ) {
     this.selectedOrganizationSubject = new BehaviorSubject<SolrDocument>(undefined);
@@ -206,7 +206,7 @@ export class DataAndAnalyticsComponent implements OnInit {
     }
 
     this.router.navigate([], {
-      relativeTo: this.activatedRoute,
+      relativeTo: this.route,
       queryParams: { ...params, selectedOrganizations: selectedOrganizations.join(',') },
       queryParamsHandling: 'merge'
     });
@@ -218,7 +218,7 @@ export class DataAndAnalyticsComponent implements OnInit {
       : id;
 
     this.router.navigate([], {
-      relativeTo: this.activatedRoute,
+      relativeTo: this.route,
       queryParams: { ...params, selectedOrganizations },
       queryParamsHandling: 'merge'
     });

src/app/+data-and-analytics/quantity-distribution/quantity-distribution.component.ts

@@ -81,7 +81,7 @@ export class QuantityDistributionComponent implements OnChanges, OnDestroy, OnIn
           collapsible: facet.collapsible,
           collapsed: facet.collapsed,
           useDialog: facet.useDialog,
-          action: this.dialog.facetEntriesDialog(facet.name, facet.field),
+          action: this.dialog.facetEntriesDialog(facet.name, facet.field, true, 1),
           items,
         };
       })

src/app/core/service/dialog.service.ts

@@ -73,12 +73,12 @@ export class DialogService {
     });
   }
 
-  public facetEntriesDialog(name: string, field: string): fromDialog.OpenDialogAction {
+  public facetEntriesDialog(name: string, field: string, multiselect = false, page = 2, pageSize = 10): fromDialog.OpenDialogAction {
     return new fromDialog.OpenDialogAction({
       dialog: {
         ref: {
           component: FacetEntriesComponent,
-          inputs: { name, field },
+          inputs: { name, field, multiselect, page, pageSize },
         },
         options: this.options(this.translate.instant('SHARED.DIALOG.FACET_ENTRIES.ARIA_LABELLED_BY', { name })),
       },

src/app/core/store/auth/auth.effects.ts

@@ -1,31 +1,25 @@
 import { Injectable } from '@angular/core';
 import { Actions, createEffect, ofType, OnInitEffects } from '@ngrx/effects';
-import { Store, select } from '@ngrx/store';
-
-import { combineLatest, scheduled } from 'rxjs';
-import { asapScheduler } from 'rxjs';
-import { catchError, map, switchMap, withLatestFrom, skipWhile, take } from 'rxjs/operators';
+import { Action, select, Store } from '@ngrx/store';
+import { asapScheduler, combineLatest, scheduled } from 'rxjs';
+import { catchError, map, skipWhile, switchMap, take, withLatestFrom } from 'rxjs/operators';
 
 import { AppState } from '../';
-
-import { User, Role } from '../../model/user';
-import { LoginRequest, RegistrationRequest } from '../../model/request';
-
 import { RegistrationStep } from '../../../shared/dialog/registration/registration.component';
-
+import { LoginRequest, RegistrationRequest } from '../../model/request';
+import { Role, User } from '../../model/user';
 import { AlertService } from '../../service/alert.service';
 import { AuthService } from '../../service/auth.service';
 import { DialogService } from '../../service/dialog.service';
-
-import { selectLoginRedirect, selectUser } from './';
 import { selectIsStompConnected } from '../stomp';
+import { selectLoginRedirect, selectUser } from './';
 
-import * as fromAuth from './auth.actions';
 import * as fromDialog from '../dialog/dialog.actions';
 import * as fromRouter from '../router/router.actions';
-import * as fromStomp from '../stomp/stomp.actions';
 import * as fromSdr from '../sdr/sdr.actions';
-import { Action } from '@ngrx/store';
+import * as fromStomp from '../stomp/stomp.actions';
+import * as fromAuth from './auth.actions';
+
 
 @Injectable()
 export class AuthEffects implements OnInitEffects {

src/app/core/store/sidebar/sidebar.actions.ts

@@ -1,10 +1,12 @@
 import { Action } from '@ngrx/store';
-import { SidebarMenu } from '../../model/sidebar';
+import { SidebarItem, SidebarMenu } from '../../model/sidebar';
 
 export enum SidebarActionTypes {
   LOAD_SIDEBAR = '[Sidebar] load',
   UNLOAD_SIDEBAR = '[Sidebar] unload',
   TOGGLE_COLLAPSIBLE_SECTION = '[Sidebar] toggle collapsible section',
+  ADD_SECTION_ITEM = '[Sidebar] add section item',
+  REMOVE_SECTION_ITEM = '[Sidebar] remove section item',
 }
 
 export class LoadSidebarAction implements Action {
@@ -21,7 +23,19 @@ export class ToggleCollapsibleSectionAction implements Action {
   constructor(public payload: { sectionIndex: number }) { }
 }
 
+export class AddSectionItemAction implements Action {
+  readonly type = SidebarActionTypes.ADD_SECTION_ITEM;
+  constructor(public payload: { sectionIndex: number, sectionItem: SidebarItem }) { }
+}
+
+export class RemoveSectionAction implements Action {
+  readonly type = SidebarActionTypes.REMOVE_SECTION_ITEM;
+  constructor(public payload: { sectionIndex: number, itemLabel: string, itemField: string }) { }
+}
+
 export type SidebarActions =
   LoadSidebarAction |
   UnloadSidebarAction |
-  ToggleCollapsibleSectionAction;
+  ToggleCollapsibleSectionAction |
+  AddSectionItemAction |
+  RemoveSectionAction;

src/app/core/store/sidebar/sidebar.reducer.ts

@@ -1,5 +1,5 @@
 import { SidebarActions, SidebarActionTypes } from './sidebar.actions';
-import { SidebarMenu } from '../../model/sidebar';
+import { SidebarItem, SidebarMenu } from '../../model/sidebar';
 
 export type SidebarState = Readonly<{
   menu: SidebarMenu;
@@ -25,7 +25,7 @@ export function reducer(state = initialState, action: SidebarActions): SidebarSt
           sections: [],
         },
       };
-    case SidebarActionTypes.TOGGLE_COLLAPSIBLE_SECTION:
+    case SidebarActionTypes.TOGGLE_COLLAPSIBLE_SECTION: {
       const sections = [...state.menu.sections];
       const section = sections[action.payload.sectionIndex];
 
@@ -41,6 +41,37 @@ export function reducer(state = initialState, action: SidebarActions): SidebarSt
           sections
         }
       };
+    }
+    case SidebarActionTypes.ADD_SECTION_ITEM: {
+      const sections = [...state.menu.sections];
+      const section = sections[action.payload.sectionIndex];
+
+      section.items.push(action.payload.sectionItem);
+
+      return {
+        ...state,
+        menu: {
+          sections
+        }
+      };
+    }
+    case SidebarActionTypes.REMOVE_SECTION_ITEM: {
+      const sections = [...state.menu.sections];
+      const section = sections[action.payload.sectionIndex];
+
+      const index = section.items.map((item: SidebarItem) => item.label).indexOf(action.payload.itemLabel);
+
+      if (index >= 0) {
+        section.items.splice(index, 1);
+      }
+
+      return {
+        ...state,
+        menu: {
+          sections
+        }
+      };
+    }
     default:
       return state;
   }

src/app/shared/dialog/facet-entries/facet-entries.component.html

@@ -8,11 +8,20 @@
     </div>
   </form>
   <div *ngIf="facet | async; let facet">
-    <div *ngIf="sdrFacet | async; let sdrFacet">
+    <div *ngIf="sdrFacet | async; let sdrFacet; else noEntries">
       <table class="table table-sm table-striped table-hover">
         <tbody>
-          <tr *ngFor="let entry of sdrFacet.entries.content | slice: (page - 1) * pageSize : ((page - 1) * pageSize) + pageSize">
-            <td scope="row" [ngSwitch]="facet.type">
+          <tr *ngFor="let entry of sdrFacet.entries.content | slice: (page - 1) * pageSize : ((page - 1) * pageSize) + pageSize; index as i">
+            <td scope="row" [ngSwitch]="facet.type" *ngIf="multiselect">
+              <div class="form-check">
+                <input class="form-check-input" type="checkbox" value="{{isSelected(entry)}}" [checked]="isSelected(entry)" id="selection-{{i}}" (change)="selectionChanged(entry)">
+                <label class="form-check-label" for="selection-{{i}}">
+                  <span [innerHTML]="getStringValue(entry) | formalize | safeHtml"></span>
+                  <span> ({{entry.count}})</span>
+                </label>
+              </div>
+            </td>
+            <td scope="row" [ngSwitch]="facet.type" *ngIf="!multiselect">
               <span *ngSwitchCase="'STRING'">
                 <a [routerLink]="routerLink" [queryParams]="getQueryParams(queryParams | async, facet, entry)" queryParamsHandling="merge">
                   <span [innerHTML]="getStringValue(entry) | formalize | safeHtml"></span>
@@ -39,5 +48,8 @@
       </table>
       <ngb-pagination [collectionSize]="sdrFacet.entries.content.length" [pageSize]="pageSize" [(page)]="page" [maxSize]="3" [rotate]="true" [ellipses]="true" [boundaryLinks]="true"></ngb-pagination>
     </div>
+    <ng-template #noEntries>
+      <div>{{ 'SHARED.DIALOG.FACET_ENTRIES.EMPTY' | translate }}</div>
+    </ng-template>
   </div>
 </scholars-dialog>