From 03bf4befabb3434536cb2b28c66f83ead1503c0f Mon Sep 17 00:00:00 2001
From: Nona Luypaert <nona.luypaert@atmire.com>
Date: Wed, 26 Apr 2023 15:57:42 +0200
Subject: [PATCH] 101353: Fix issues in BrowseByTaxonomyPage and
 VocabularyTreeview

---
 .../browse-by-taxonomy-page.component.html    |  2 +-
 .../browse-by-taxonomy-page.component.ts      | 21 ++++++++++++++-----
 .../vocabulary-treeview.component.html        |  8 +++----
 .../vocabulary-treeview.component.spec.ts     |  4 ++--
 .../vocabulary-treeview.component.ts          |  8 +++++--
 5 files changed, 29 insertions(+), 14 deletions(-)

diff --git a/src/app/browse-by/browse-by-taxonomy-page/browse-by-taxonomy-page.component.html b/src/app/browse-by/browse-by-taxonomy-page/browse-by-taxonomy-page.component.html
index 4b6f3586fe..f84e3d72b1 100644
--- a/src/app/browse-by/browse-by-taxonomy-page/browse-by-taxonomy-page.component.html
+++ b/src/app/browse-by/browse-by-taxonomy-page/browse-by-taxonomy-page.component.html
@@ -5,5 +5,5 @@
                             (select)="onSelect($event)">
     </ds-vocabulary-treeview>
   </div>
-  <a class="btn btn-primary" [routerLink]="['/search']" [queryParams]=queryParams>{{ 'browse.taxonomy.button' | translate }}</a>
+  <a class="btn btn-primary" [routerLink]="['/search']" [queryParams]="{ 'f.subject': filterValues }">{{ 'browse.taxonomy.button' | translate }}</a>
 </div>
diff --git a/src/app/browse-by/browse-by-taxonomy-page/browse-by-taxonomy-page.component.ts b/src/app/browse-by/browse-by-taxonomy-page/browse-by-taxonomy-page.component.ts
index 459442aabc..c534c5e205 100644
--- a/src/app/browse-by/browse-by-taxonomy-page/browse-by-taxonomy-page.component.ts
+++ b/src/app/browse-by/browse-by-taxonomy-page/browse-by-taxonomy-page.component.ts
@@ -25,16 +25,27 @@ export class BrowseByTaxonomyPageComponent implements OnInit {
   /**
    * The query parameters, contain the selected entries
    */
-  queryParams: { 'f.subject': string[] };
+  filterValues: string[];
 
   ngOnInit() {
     this.vocabularyOptions = { name: 'srsc', closed: true };
   }
 
+  /**
+   * Adds detail to selectedItems, transforms it to be used as query parameter
+   * and adds that to filterValues. If they already contained the detail,
+   * it gets deleted from both arrays.
+   *
+   * @param detail VocabularyEntryDetail to be added/deleted
+   */
   onSelect(detail: VocabularyEntryDetail): void {
-    this.selectedItems.push(detail);
-    const filterValues = this.selectedItems
-      .map((item: VocabularyEntryDetail) => `${item.value},equals`);
-    this.queryParams = { 'f.subject': filterValues };
+    if (!this.selectedItems.includes(detail)) {
+      this.selectedItems.push(detail);
+      this.filterValues = this.selectedItems
+        .map((item: VocabularyEntryDetail) => `${item.value},equals`);
+    } else {
+      this.selectedItems = this.selectedItems.filter((entry: VocabularyEntryDetail) => { return entry !== detail; });
+      this.filterValues = this.filterValues.filter((value: string) => { return value !== `${detail.value},equals`; });
+    }
   }
 }
diff --git a/src/app/shared/form/vocabulary-treeview/vocabulary-treeview.component.html b/src/app/shared/form/vocabulary-treeview/vocabulary-treeview.component.html
index 2de1d375cb..0c90ae473b 100644
--- a/src/app/shared/form/vocabulary-treeview/vocabulary-treeview.component.html
+++ b/src/app/shared/form/vocabulary-treeview/vocabulary-treeview.component.html
@@ -33,8 +33,8 @@
                 container="body"
                 (click)="onSelect(node.item)">
           <span *ngIf="multiSelect" class="form-check">
-            <input class="form-check-input" type="checkbox" id="leaf-node-checkbox" [checked]="node.isSelected">
-            <label class="form-check-label" for="leaf-node-checkbox">{{node.item.display}}</label>
+            <input class="form-check-input" type="checkbox" id="leaf-node-checkbox_{{node.item.id}}" [checked]="node.isSelected">
+            <label class="form-check-label" for="leaf-node-checkbox_{{node.item.id}}">{{node.item.display}}</label>
           </span>
           <span *ngIf="!multiSelect">{{node.item.display}}</span>
         </button>
@@ -57,8 +57,8 @@
                 container="body"
                 (click)="onSelect(node.item)">
           <span *ngIf="multiSelect" class="form-check">
-            <input class="form-check-input" type="checkbox" id="expandable-node-checkbox" [checked]="node.isSelected">
-            <label class="form-check-label" for="expandable-node-checkbox">{{node.item.display}}</label>
+            <input class="form-check-input" type="checkbox" id="expandable-node-checkbox_{{node.item.id}}" [checked]="node.isSelected">
+            <label class="form-check-label" for="expandable-node-checkbox_{{node.item.id}}">{{node.item.display}}</label>
           </span>
           <span *ngIf="!multiSelect">{{node.item.display}}</span>
      </button>
diff --git a/src/app/shared/form/vocabulary-treeview/vocabulary-treeview.component.spec.ts b/src/app/shared/form/vocabulary-treeview/vocabulary-treeview.component.spec.ts
index 29e80cfc94..e5f5145e0a 100644
--- a/src/app/shared/form/vocabulary-treeview/vocabulary-treeview.component.spec.ts
+++ b/src/app/shared/form/vocabulary-treeview/vocabulary-treeview.component.spec.ts
@@ -264,14 +264,14 @@ describe('VocabularyTreeviewComponent test suite', () => {
 
     it('should not display checkboxes by default', async () => {
       fixture.detectChanges();
-      expect(de.query(By.css('input[checkbox]'))).toBeNull();
+      expect(de.query(By.css('.form-check-input'))).toBeNull();
       expect(de.queryAll(By.css('cdk-tree-node')).length).toEqual(3);
     });
 
     it('should display checkboxes if multiSelect is true', async () => {
       comp.multiSelect = true;
       fixture.detectChanges();
-      expect(de.queryAll(By.css('#leaf-node-checkbox')).length).toEqual(3);
+      expect(de.queryAll(By.css('.form-check-input')).length).toEqual(3);
       expect(de.queryAll(By.css('cdk-tree-node')).length).toEqual(3);
     });
   });
diff --git a/src/app/shared/form/vocabulary-treeview/vocabulary-treeview.component.ts b/src/app/shared/form/vocabulary-treeview/vocabulary-treeview.component.ts
index 572074d644..01225c638a 100644
--- a/src/app/shared/form/vocabulary-treeview/vocabulary-treeview.component.ts
+++ b/src/app/shared/form/vocabulary-treeview/vocabulary-treeview.component.ts
@@ -245,8 +245,12 @@ export class VocabularyTreeviewComponent implements OnDestroy, OnInit {
    * Method called on entry select
    */
   onSelect(item: VocabularyEntryDetail) {
-    this.selectedItems.push(item.id);
-    this.select.emit(item);
+    if (!this.selectedItems.includes(item.id)) {
+      this.selectedItems.push(item.id);
+      this.select.emit(item);
+    } else {
+      this.selectedItems = this.selectedItems.filter((detail: string) => { return detail !== item.id; });
+    }
   }
 
   /**