From a2df5c0eba0361affb1ee1dff0a8cacebc800216 Mon Sep 17 00:00:00 2001
From: kassem <omarksm09@gmail.com>
Date: Mon, 19 Jun 2023 16:39:21 +0300
Subject: [PATCH] set filters to be as text field

---
 .../src/explorer/components/NodeFilter.vue    | 56 +++++++------------
 1 file changed, 19 insertions(+), 37 deletions(-)

diff --git a/packages/dashboard/src/explorer/components/NodeFilter.vue b/packages/dashboard/src/explorer/components/NodeFilter.vue
index 05ffb1a619..a55ab8a76e 100644
--- a/packages/dashboard/src/explorer/components/NodeFilter.vue
+++ b/packages/dashboard/src/explorer/components/NodeFilter.vue
@@ -1,23 +1,15 @@
 <template>
   <v-card flat color="transparent">
     <v-subheader>{{ label.toLocaleUpperCase() }}</v-subheader>
-    <v-combobox
-      v-model="items"
-      :items="_values"
+    <v-text-field
+      v-model="item"
       chips
       clearable
       :label="placeholder"
-      :multiple="multiple"
       solo
       type="text"
-      @input.native="validated($event.srcElement.value, filterKey)"
-    >
-      <template v-slot:selection="{ attrs, item, select, selected, index }">
-        <v-chip v-bind="attrs" :input-value="selected" :close="multiple" @click="select" @click:close="remove(index)">
-          <strong>{{ item }}</strong>
-        </v-chip>
-      </template>
-    </v-combobox>
+      :rules="[validated(item, filterKey)]"
+    />
     <v-alert dense type="error" v-if="errorMsg">
       {{ errorMsg }}
     </v-alert>
@@ -25,7 +17,7 @@
 </template>
 
 <script lang="ts">
-import { Component, Prop, Vue, Watch } from "vue-property-decorator";
+import { Component, Prop, Vue } from "vue-property-decorator";
 
 import { ActionTypes } from "../store/actions";
 import { MutationTypes } from "../store/mutations";
@@ -37,28 +29,15 @@ export default class InFilter extends Vue {
   @Prop({ required: true }) placeholder!: string;
   @Prop({ required: true }) filterKey!: string;
   @Prop() value?: string[];
-
+  item = "";
   invalid = false;
 
-  get multiple() {
-    return this.filterKey == "farm_ids";
-  }
-
-  get _values(): (string | number)[] {
-    // values are the suggested options; not needed for now.
-    return [];
-  }
-
-  get items(): string[] {
-    return this.$store.getters["explorer/getNodesFilter"][this.filterKey];
-  }
-
-  set items(value: string[]) {
+  setItem(value: string) {
     if (!this.invalid) {
       // add the current filter key to the query.
       this.$store.commit("explorer/" + MutationTypes.SET_NODES_FILTER, {
         key: this.filterKey,
-        value,
+        value: [value],
       });
       // reset to the first page
       this.$store.commit("explorer/" + MutationTypes.SET_NODES_TABLE_PAGE_NUMBER, 1);
@@ -74,17 +53,20 @@ export default class InFilter extends Vue {
     this.$store.dispatch(ActionTypes.REQUEST_NODES);
   }
 
-  @Watch("errorMsg", { immediate: true }) onErrorMsg(value: string) {
-    if (value != "") {
-      this.invalid = true;
-    } else {
-      this.invalid = false;
-    }
-  }
-
   errorMsg: any = "";
   validated(value: string, key: string): string {
+    if (!value) {
+      // reset filter
+      this.setItem("");
+      return (this.errorMsg = "");
+    }
     this.errorMsg = inputValidation(value, key);
+    if (!this.errorMsg) {
+      this.invalid = false;
+      this.setItem(value);
+    } else {
+      this.invalid = true;
+    }
     return this.errorMsg;
   }