Refactored dropdowns allow clearing, active checkmarks

src-ui/src/app/components/filter-editor/filter-dropdown/filter-dropdown.component.html

@@ -1,6 +1,6 @@
   <div class="btn-group" ngbDropdown role="group">
   <button class="btn btn-outline-primary btn-sm" id="dropdown{{title}}" ngbDropdownToggle>{{title}}</button>
-  <div class="dropdown-menu quick-filter" ngbDropdownMenu aria-labelledby="dropdown{{title}}">
+  <div class="dropdown-menu quick-filter" ngbDropdownMenu attr.aria-labelledby="dropdown{{title}}">
     <div class="list-group list-group-flush">
       <input class="list-group-item form-control" type="text" [(ngModel)]="filterText" placeholder="Filter {{title}}">
       <ng-container *ngIf="(items | filter: filterText).length > 0">

src-ui/src/app/components/filter-editor/filter-dropdown/filter-dropdown.component.ts

@@ -1,7 +1,6 @@
 import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 import { FilterRuleType, FILTER_CORRESPONDENT, FILTER_DOCUMENT_TYPE, FILTER_HAS_TAG, FILTER_TITLE, FILTER_RULE_TYPES } from 'src/app/data/filter-rule-type';
 import { ObjectWithId } from 'src/app/data/object-with-id';
-import { MatchingModel } from 'src/app/data/matching-model';
 
 @Component({
   selector: 'app-filter-dropdown',
@@ -18,8 +17,8 @@ export class FilterDropdownComponent implements OnInit {
   @Output()
   toggle = new EventEmitter()
 
-  items: MatchingModel[] = []
-  itemsActive: MatchingModel[] = []
+  items: ObjectWithId[] = []
+  itemsActive: ObjectWithId[] = []
   title: string
   filterText: string
 
@@ -29,6 +28,6 @@ export class FilterDropdownComponent implements OnInit {
   }
 
   toggleItem(item: ObjectWithId) {
-    this.toggle.emit(item, this.filterRuleTypeID)
+    this.toggle.emit(item)
   }
 }

src-ui/src/app/components/filter-editor/filter-editor.component.ts

@@ -65,11 +65,21 @@ export class FilterEditorComponent implements OnInit, AfterViewInit {
         });
   }
 
-  setDropdownItems(items: ObjectWithId[], filterRuleTypeID: number) {
+  setDropdownItems(items: ObjectWithId[], filterRuleTypeID: number): void {
     let dropdown: FilterDropdownComponent = this.getDropdownByFilterRuleTypeID(filterRuleTypeID)
     if (dropdown) {
       dropdown.items = items
     }
+    this.updateDropdownActiveItems(dropdown)
+  }
+
+  updateDropdownActiveItems(dropdown: FilterDropdownComponent): void {
+    let activeRulesValues = this.filterRules.filter(r => r.type.id == dropdown.filterRuleTypeID).map(r => r.value)
+    let activeItems = []
+    if (activeRulesValues.length > 0) {
+      activeItems = dropdown.items.filter(i => activeRulesValues.includes(i.id))
+    }
+    dropdown.itemsActive = activeItems
   }
 
   getDropdownByFilterRuleTypeID(filterRuleTypeID: number): FilterDropdownComponent {
@@ -83,6 +93,7 @@ export class FilterEditorComponent implements OnInit, AfterViewInit {
   clearSelected() {
     this.filterRules.splice(0,this.filterRules.length)
     this.updateTextFilterInput()
+    this.quickFilterDropdowns.forEach(d => this.updateDropdownActiveItems(d))
     this.clear.next()
   }
 
@@ -118,6 +129,8 @@ export class FilterEditorComponent implements OnInit, AfterViewInit {
 
     if (existingRule && existingRule.value == item.id && filterRuleType.id == FILTER_HAS_TAG) {
       filterRules.splice(filterRules.indexOf(existingRule), 1)
+    } else if (existingRule  && filterRuleType.id == FILTER_HAS_TAG) {
+      filterRules.push({type: FILTER_RULE_TYPES.find(t => t.id == filterRuleType.id), value: item.id})
     } else if (existingRule && existingRule.value == item.id) {
       return
     } else if (existingRule) {
@@ -125,6 +138,10 @@ export class FilterEditorComponent implements OnInit, AfterViewInit {
     } else {
       filterRules.push({type: FILTER_RULE_TYPES.find(t => t.id == filterRuleType.id), value: item.id})
     }
+
+    let dropdown = this.getDropdownByFilterRuleTypeID(filterRuleTypeID)
+    this.updateDropdownActiveItems(dropdown)
+
     this.filterRules = filterRules
     this.applySelected()
   }