Add support for 'any' ('OR') of tags when filtering

src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown.component.html

@@ -12,6 +12,16 @@
   </button>
   <div class="dropdown-menu py-0 shadow" ngbDropdownMenu attr.aria-labelledby="dropdown{{title}}">
     <div class="list-group list-group-flush">
+      <div *ngIf="!editing && multiple" class="list-group-item d-flex">
+        <div class="btn-group btn-group-xs btn-group-toggle flex-fill" ngbRadioGroup [(ngModel)]="selectionModel.logicalOperator">
+          <label ngbButtonLabel class="btn btn-outline-primary">
+            <input ngbButton type="radio" name="logicalOperator" value="and"> All
+          </label>
+          <label ngbButtonLabel class="btn btn-outline-primary">
+            <input ngbButton type="radio" name="logicalOperator" value="or"> Any
+          </label>
+        </div>
+      </div>
       <div class="list-group-item">
         <div class="input-group input-group-sm">
           <input class="form-control" type="text" [(ngModel)]="filterText" [placeholder]="filterPlaceholder" (keyup.enter)="listFilterEnter()" #listFilterTextInput>

src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown.component.scss

@@ -12,3 +12,22 @@
     overflow-y: scroll;
   }
 }
+
+.btn-group-xs {
+  > .btn {
+    padding: 0.2rem 0.25rem;
+    font-size: 0.675rem;
+    line-height: 1.2;
+    border-radius: 0.15rem;
+  }
+
+  > .btn:not(:first-child) {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+
+  > .btn:not(:last-child) {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+}

src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown.component.ts

@@ -15,6 +15,7 @@ export class FilterableDropdownSelectionModel {
   changed = new Subject<FilterableDropdownSelectionModel>()
 
   multiple = false
+  logicalOperator = 'and'
 
   items: MatchingModel[] = []
 
@@ -83,7 +84,7 @@ export class FilterableDropdownSelectionModel {
     if (fireEvent) {
       this.changed.next(this)
     }
-    
+
   }
 
   private getNonTemporary(id: number) {