101623: Replace hardcoded vocabulary with BrowseDefinition in BrowseByTaxonomyPage

Author: nona-luypaert

src/app/browse-by/browse-by-taxonomy-page/browse-by-taxonomy-page.component.html

@@ -6,5 +6,5 @@
                             (deselect)="onDeselect($event)">
     </ds-vocabulary-treeview>
   </div>
-  <a class="btn btn-primary" [routerLink]="['/search']" [queryParams]="{ 'f.subject': filterValues }">{{ 'browse.taxonomy.button' | translate }}</a>
+  <a class="btn btn-primary" [routerLink]="['/search']" [queryParams]="queryParams">{{ 'browse.taxonomy.button' | translate }}</a>
 </div>

src/app/browse-by/browse-by-taxonomy-page/browse-by-taxonomy-page.component.ts

@@ -1,6 +1,14 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, Inject, OnDestroy } from '@angular/core';
 import { VocabularyOptions } from '../../core/submission/vocabularies/models/vocabulary-options.model';
 import { VocabularyEntryDetail } from '../../core/submission/vocabularies/models/vocabulary-entry-detail.model';
+import { ActivatedRoute } from '@angular/router';
+import { Observable, Subscription } from 'rxjs';
+import { BrowseDefinition } from '../../core/shared/browse-definition.model';
+import { GenericConstructor } from '../../core/shared/generic-constructor';
+import { BROWSE_BY_COMPONENT_FACTORY } from '../browse-by-switcher/browse-by-decorator';
+import { map } from 'rxjs/operators';
+import { ThemeService } from 'src/app/shared/theme-support/theme.service';
+import { HierarchicalBrowseDefinition } from '../../core/shared/hierarchical-browse-definition.model';
 
 @Component({
   selector: 'ds-browse-by-taxonomy-page',
@@ -10,7 +18,7 @@ import { VocabularyEntryDetail } from '../../core/submission/vocabularies/models
 /**
  * Component for browsing items by metadata in a hierarchical controlled vocabulary
  */
-export class BrowseByTaxonomyPageComponent implements OnInit {
+export class BrowseByTaxonomyPageComponent implements OnInit, OnDestroy {
 
   /**
    * The {@link VocabularyOptions} object
@@ -27,8 +35,48 @@ export class BrowseByTaxonomyPageComponent implements OnInit {
    */
   filterValues: string[];
 
-  ngOnInit() {
-    this.vocabularyOptions = { name: 'srsc', closed: true };
+  /**
+   * The facet the use when filtering
+   */
+  facetType: string;
+
+  /**
+   * The used vocabulary
+   */
+  vocabularyName: string;
+
+  /**
+   * The parameters used in the URL
+   */
+  queryParams: any;
+
+  /**
+   * Resolved browse-by component
+   */
+  browseByComponent: Observable<any>;
+
+  /**
+   * Subscriptions to track
+   */
+  browseByComponentSubs: Subscription[] = [];
+
+  public constructor( protected route: ActivatedRoute,
+                      protected themeService: ThemeService,
+                      @Inject(BROWSE_BY_COMPONENT_FACTORY) private getComponentByBrowseByType: (browseByType, theme) => GenericConstructor<any>) {
+  }
+
+  ngOnInit(): void {
+    this.browseByComponent = this.route.data.pipe(
+      map((data: { browseDefinition: BrowseDefinition }) => {
+        this.getComponentByBrowseByType(data.browseDefinition.getRenderType(), this.themeService.getThemeName());
+        return data.browseDefinition;
+      })
+    );
+    this.browseByComponentSubs.push(this.browseByComponent.subscribe((browseDefinition: HierarchicalBrowseDefinition) => {
+      this.facetType = browseDefinition.facetType;
+      this.vocabularyName = browseDefinition.vocabulary;
+      this.vocabularyOptions = { name: this.vocabularyName, closed: true };
+    }));
   }
 
   /**
@@ -41,10 +89,30 @@ export class BrowseByTaxonomyPageComponent implements OnInit {
       this.selectedItems.push(detail);
       this.filterValues = this.selectedItems
         .map((item: VocabularyEntryDetail) => `${item.value},equals`);
+    this.updateQueryParams();
   }
 
+  /**
+   * Removes detail from selectedItems and filterValues.
+   *
+   * @param detail VocabularyEntryDetail to be removed
+   */
   onDeselect(detail: VocabularyEntryDetail): void {
     this.selectedItems = this.selectedItems.filter((entry: VocabularyEntryDetail) => { return entry !== detail; });
     this.filterValues = this.filterValues.filter((value: string) => { return value !== `${detail.value},equals`; });
+    this.updateQueryParams();
+  }
+
+  /**
+   * Updates queryParams based on the current facetType and filterValues.
+   */
+  private updateQueryParams(): void {
+    this.queryParams = {
+      ['f.' + this.facetType]: this.filterValues
+    };
+  }
+
+  ngOnDestroy(): void {
+    this.browseByComponentSubs.forEach((sub: Subscription) => sub.unsubscribe());
   }
 }