From f83185bfe46f6a2b118cb05d39cffae931d1518e Mon Sep 17 00:00:00 2001
From: Michael Shamoon <4887959+nikonratm@users.noreply.github.com>
Date: Thu, 10 Dec 2020 15:36:17 -0800
Subject: [PATCH] Refactored dropdowns allow clearing, active checkmarks

---
 .../filter-dropdown.component.html            |  2 +-
 .../filter-dropdown.component.ts              |  7 +++----
 .../filter-editor/filter-editor.component.ts  | 19 ++++++++++++++++++-
 3 files changed, 22 insertions(+), 6 deletions(-)

diff --git a/src-ui/src/app/components/filter-editor/filter-dropdown/filter-dropdown.component.html b/src-ui/src/app/components/filter-editor/filter-dropdown/filter-dropdown.component.html
index b135caff0..4552406b1 100644
--- a/src-ui/src/app/components/filter-editor/filter-dropdown/filter-dropdown.component.html
+++ b/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">
diff --git a/src-ui/src/app/components/filter-editor/filter-dropdown/filter-dropdown.component.ts b/src-ui/src/app/components/filter-editor/filter-dropdown/filter-dropdown.component.ts
index 443fd30e4..070689bd2 100644
--- a/src-ui/src/app/components/filter-editor/filter-dropdown/filter-dropdown.component.ts
+++ b/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)
   }
 }
diff --git a/src-ui/src/app/components/filter-editor/filter-editor.component.ts b/src-ui/src/app/components/filter-editor/filter-editor.component.ts
index b79fbaf12..d45732717 100644
--- a/src-ui/src/app/components/filter-editor/filter-editor.component.ts
+++ b/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()
   }