fix(orb-ui): Filter component bugs

orb-community · Oct 31, 2023 · 2f41685 · 2f41685
1 parent 8bef75a
commit 2f41685
Show file tree

Hide file tree

Showing 7 changed files with 21 additions and 29 deletions.
diff --git a/ui/src/app/common/interfaces/orb/filter-option.ts b/ui/src/app/common/interfaces/orb/filter-option.ts
@@ -5,6 +5,7 @@ export enum FilterTypes {
   AutoComplete,
   Select, // allows select one option
   MultiSelect, // allows select multi options
+  MultiSelectAsync, // allows select multi options | async
   Checkbox, // on|off option
   Number, // number input
 }

diff --git a/ui/src/app/pages/datasets/policies.agent/list/agent.policy.list.component.ts b/ui/src/app/pages/datasets/policies.agent/list/agent.policy.list.component.ts
@@ -156,6 +156,7 @@ export class AgentPolicyListComponent
         filter: filterMultiSelect,
         type: FilterTypes.MultiSelect,
         options: Object.values(AgentPolicyUsage).map((value) => value as string),
+        exact: true,
       },
     ];
 

diff --git a/ui/src/app/pages/fleet/agents/list/agent.list.component.ts b/ui/src/app/pages/fleet/agents/list/agent.list.component.ts
@@ -159,19 +159,21 @@ export class AgentListComponent implements AfterViewInit, AfterViewChecked, OnDe
         filter: filterMultiSelect,
         type: FilterTypes.MultiSelect,
         options: Object.values(AgentStates).map((value) => value as string),
+        exact: true,
       },
       {
         name: 'Policies',
         prop: 'policy_agg_state',
         filter: filterMultiSelect,
         type: FilterTypes.MultiSelect,
         options: Object.values(AgentPolicyAggStates).map((value) => value as string),
+        exact: true,
       },
       {
         name: 'Version',
         prop: 'version',
         filter: filterMultiSelect,
-        type: FilterTypes.MultiSelect,
+        type: FilterTypes.MultiSelectAsync,
         autoSuggestion: orb.getAgentsVersions(),
         exact: false,
       },

diff --git a/ui/src/app/pages/fleet/groups/list/agent.group.list.component.ts b/ui/src/app/pages/fleet/groups/list/agent.group.list.component.ts
@@ -139,13 +139,6 @@ export class AgentGroupListComponent
         filter: filterString,
         type: FilterTypes.Input,
       },
-      // {
-      //   name: 'Status',
-      //   prop: 'state',
-      //   filter: filterMultiSelect,
-      //   type: FilterTypes.MultiSelect,
-      //   options: Object.values(AgentStates).map((value) => value as string),
-      // },
     ];
 
     this.filteredGroups$ = this.filters.createFilteredList()(

diff --git a/ui/src/app/pages/sinks/list/sink.list.component.ts b/ui/src/app/pages/sinks/list/sink.list.component.ts
@@ -131,13 +131,15 @@ export class SinkListComponent implements AfterViewInit, AfterViewChecked, OnDes
         filter: filterMultiSelect,
         type: FilterTypes.MultiSelect,
         options: Object.values(SinkStates).map((value) => value as string),
+        exact: true,
       },
       {
         name: 'Backend',
         prop: 'backend',
         filter: filterMultiSelect,
         type: FilterTypes.MultiSelect,
         options: Object.values(SinkBackends).map((value) => value as string),
+        exact: true,
       },
       {
         name: 'Description',

diff --git a/ui/src/app/shared/components/filter/filter.component.html b/ui/src/app/shared/components/filter/filter.component.html
@@ -40,7 +40,7 @@
   >
     <nb-icon icon="plus-outline"></nb-icon>
   </button>
-  <div class="filter-menu" *ngIf="filterType === 'selectSync' && showOptions">
+  <div class="filter-menu" *ngIf="optionsMenuType === 'multiselectsync' && showOptions">
     <div 
       *ngFor="let option of currentFilter?.options" 
       class="apply-filter-option"
@@ -53,7 +53,7 @@
       <span>{{ option | titlecase }}</span>
     </div>
   </div>
-  <div class="filter-menu" *ngIf="filterType === 'selectAsync' && showOptions">
+  <div class="filter-menu" *ngIf="optionsMenuType === 'multiselectasync' && showOptions">
     <div 
       *ngFor="let option of currentFilter?.autoSuggestion | async" 
       class="apply-filter-option"
@@ -66,7 +66,7 @@
       <span>{{ option | titlecase }}</span>
     </div>
   </div>
-  <div class="filter-menu" *ngIf="filterType === 'input' && showOptions">
+  <div class="filter-menu" *ngIf="optionsMenuType === 'input' && showOptions">
     <div 
       *ngFor="let option of currentFilter?.autoSuggestion | async" 
       class="apply-filter-option"

diff --git a/ui/src/app/shared/components/filter/filter.component.ts b/ui/src/app/shared/components/filter/filter.component.ts
@@ -30,13 +30,7 @@ export class FilterComponent implements OnInit {
 
   loadedSearchText: string;
 
-  filterType = '';
-
-  FiltersTypes = {
-    selectAsync: 'selectAsync',
-    selectSync: 'selectSync',
-    input: 'input',
-  };
+  optionsMenuType = '';
 
   showMenu = false;
 
@@ -147,18 +141,17 @@ export class FilterComponent implements OnInit {
     const icon = document.querySelector('.icon');
     icon.classList.toggle('flipped');
 
-    const filterName = this.currentFilter.filter.name;
-    if (filterName === 'filterMultiSelect') {
+    if (this.currentFilter.type === FilterTypes.MultiSelect) {
       this.selectedFilterParams = this.filter.getMultiAppliedParams(this.currentFilter.name);
-
-      if (this.currentFilter.autoSuggestion) {
-        this.filterType = this.FiltersTypes.selectAsync;
-      } else if (this.currentFilter.options) {
-        this.filterType = this.FiltersTypes.selectSync;
-      }
-    } else {
-      this.filterType = this.FiltersTypes.input;
+      this.optionsMenuType = 'multiselectsync';
+    }
+    else if (this.currentFilter.type === FilterTypes.MultiSelectAsync) {
+      this.selectedFilterParams = this.filter.getMultiAppliedParams(this.currentFilter.name);
+      this.optionsMenuType = 'multiselectasync';
     }
+    else {
+      this.optionsMenuType = 'input';
+    } 
   }
 
   handleClickMultiSelect(event: any, param: any) {
@@ -211,7 +204,7 @@ export class FilterComponent implements OnInit {
     }
   }
   onAddFilterButton(param: any) {
-    if (this.filterType === this.FiltersTypes.selectAsync) {
+    if (this.currentFilter.type === FilterTypes.MultiSelectAsync) {
       if (this.selectedFilterParams.length > 0) {
         this.filter.findAndRemove(this.selectedFilterParams, this.currentFilter.name);
         this.selectedFilterParams.push(param);