101353: Add deselect Output in VocabularyTreeview

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

@@ -2,7 +2,8 @@
   <div class="mb-3">
     <ds-vocabulary-treeview [vocabularyOptions]=vocabularyOptions
                             [multiSelect]="true"
-                            (select)="onSelect($event)">
+                            (select)="onSelect($event)"
+                            (deselect)="onDeselect($event)">
     </ds-vocabulary-treeview>
   </div>
   <a class="btn btn-primary" [routerLink]="['/search']" [queryParams]="{ 'f.subject': filterValues }">{{ 'browse.taxonomy.button' | translate }}</a>

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

@@ -33,19 +33,18 @@ export class BrowseByTaxonomyPageComponent implements OnInit {
 
   /**
    * 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.
+   * and adds that to filterValues.
    *
-   * @param detail VocabularyEntryDetail to be added/deleted
+   * @param detail VocabularyEntryDetail to be added
    */
   onSelect(detail: VocabularyEntryDetail): void {
-    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`; });
-    }
+  }
+
+  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`; });
   }
 }

src/app/shared/form/vocabulary-treeview/vocabulary-treeview.component.ts

@@ -94,6 +94,12 @@ export class VocabularyTreeviewComponent implements OnDestroy, OnInit {
    */
   @Output() select: EventEmitter<VocabularyEntryDetail> = new EventEmitter<VocabularyEntryDetail>(null);
 
+  /**
+   * An event fired when a vocabulary entry is deselected.
+   * Event's payload equals to {@link VocabularyEntryDetail} deselected.
+   */
+  @Output() deselect: EventEmitter<VocabularyEntryDetail> = new EventEmitter<VocabularyEntryDetail>(null);
+
   /**
    * A boolean representing if user is authenticated
    */
@@ -250,6 +256,7 @@ export class VocabularyTreeviewComponent implements OnDestroy, OnInit {
       this.select.emit(item);
     } else {
       this.selectedItems = this.selectedItems.filter((detail: string) => { return detail !== item.id; });
+      this.deselect.emit(item);
     }
   }