From 57504b7ee6c8acbda931c85674faa40684fbd132 Mon Sep 17 00:00:00 2001
From: Michael Shamoon <4887959+nikonratm@users.noreply.github.com>
Date: Thu, 10 Dec 2020 15:49:00 -0800
Subject: [PATCH] Display tags with color pills

---
 .../filter-dropdown/filter-dropdown.component.html           | 5 ++++-
 .../filter-dropdown/filter-dropdown.component.ts             | 4 +++-
 2 files changed, 7 insertions(+), 2 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 4552406b1..0dc56db2e 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
@@ -10,7 +10,10 @@
               <path fill-rule="evenodd" d="M10.97 4.97a.75.75 0 0 1 1.071 1.05l-3.992 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.236.236 0 0 1 .02-.022z"/>
             </svg>
           </div>
-          <div class="mr-1">{{item.name}}</div>
+          <div class="mr-1">
+            <app-tag *ngIf="display == 'tag'; else displayName" [tag]="item" [clickable]="true" linkTitle="Filter by tag"></app-tag>
+            <ng-template #displayName>{{item.name}}</ng-template>
+          </div>
           <div class="badge bg-primary text-light rounded-pill ml-auto">{{item.document_count}}</div>
         </button>
       </ng-container>
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 070689bd2..1885884cd 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,5 +1,5 @@
 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 { FilterRuleType, FILTER_HAS_TAG, FILTER_RULE_TYPES } from 'src/app/data/filter-rule-type';
 import { ObjectWithId } from 'src/app/data/object-with-id';
 
 @Component({
@@ -21,10 +21,12 @@ export class FilterDropdownComponent implements OnInit {
   itemsActive: ObjectWithId[] = []
   title: string
   filterText: string
+  display: string
 
   ngOnInit(): void {
     let filterRuleType: FilterRuleType = FILTER_RULE_TYPES.find(t => t.id == this.filterRuleTypeID)
     this.title = filterRuleType.name
+    this.display = filterRuleType.datatype
   }
 
   toggleItem(item: ObjectWithId) {