From 5c2cb00cd660a2c8e7e690cbe7e21190368f179c Mon Sep 17 00:00:00 2001
From: Chenlei Hu <chenlei.hu@mail.utoronto.ca>
Date: Tue, 27 Aug 2024 21:45:44 -0400
Subject: [PATCH] Replace autocomplete with select as node filter option input
 (#659)

* Replace autocomplete with select as node filter option input

* i18n
---
 src/components/searchbox/NodeSearchFilter.vue | 38 +++++++------------
 src/i18n.ts                                   |  3 ++
 2 files changed, 16 insertions(+), 25 deletions(-)

diff --git a/src/components/searchbox/NodeSearchFilter.vue b/src/components/searchbox/NodeSearchFilter.vue
index 6737eba5b..53df08dfe 100644
--- a/src/components/searchbox/NodeSearchFilter.vue
+++ b/src/components/searchbox/NodeSearchFilter.vue
@@ -7,18 +7,10 @@
       optionLabel="name"
       @change="updateSelectedFilterValue"
     />
-    <AutoComplete
-      v-model="selectedFilterValue"
-      :suggestions="filterValues"
-      :min-length="0"
-      @complete="(event) => updateFilterValues(event.query)"
-      completeOnFocus
-      forceSelection
-      dropdown
-    ></AutoComplete>
+    <Select v-model="selectedFilterValue" :options="filterValues" filter />
   </div>
   <div class="_footer">
-    <Button type="button" label="Add" @click="submit"></Button>
+    <Button type="button" :label="$t('add')" @click="submit"></Button>
   </div>
 </template>
 
@@ -26,43 +18,39 @@
 import { NodeFilter, type FilterAndValue } from '@/services/nodeSearchService'
 import Button from 'primevue/button'
 import SelectButton from 'primevue/selectbutton'
-import AutoComplete from 'primevue/autocomplete'
-import { ref, onMounted } from 'vue'
+import Select from 'primevue/select'
+import { ref, onMounted, computed } from 'vue'
 import { useNodeDefStore } from '@/stores/nodeDefStore'
 
-const filters = ref<NodeFilter[]>([])
+const filters = computed(() => nodeDefStore.nodeSearchService.nodeFilters)
 const selectedFilter = ref<NodeFilter>()
-const filterValues = ref<string[]>([])
+const filterValues = computed(() => selectedFilter.value?.fuseSearch.data ?? [])
 const selectedFilterValue = ref<string>('')
 
+const nodeDefStore = useNodeDefStore()
+
 onMounted(() => {
-  const nodeSearchService = useNodeDefStore().nodeSearchService
-  filters.value = nodeSearchService.nodeFilters
-  selectedFilter.value = nodeSearchService.nodeFilters[0]
+  selectedFilter.value = nodeDefStore.nodeSearchService.nodeFilters[0]
+  updateSelectedFilterValue()
 })
 
-const emit = defineEmits(['addFilter'])
+const emit = defineEmits<{
+  (event: 'addFilter', filterAndValue: FilterAndValue): void
+}>()
 
 const updateSelectedFilterValue = () => {
-  updateFilterValues('')
   if (filterValues.value.includes(selectedFilterValue.value)) {
     return
   }
   selectedFilterValue.value = filterValues.value[0]
 }
 
-const updateFilterValues = (query: string) => {
-  filterValues.value = selectedFilter.value.fuseSearch.search(query)
-}
-
 const submit = () => {
   emit('addFilter', [
     selectedFilter.value,
     selectedFilterValue.value
   ] as FilterAndValue)
 }
-
-onMounted(updateSelectedFilterValue)
 </script>
 
 <style scoped>
diff --git a/src/i18n.ts b/src/i18n.ts
index efca5cf3b..2e3d6b817 100644
--- a/src/i18n.ts
+++ b/src/i18n.ts
@@ -2,6 +2,9 @@ import { createI18n } from 'vue-i18n'
 
 const messages = {
   en: {
+    add: 'Add',
+    confirm: 'Confirm',
+    reset: 'Reset',
     customizeFolder: 'Customize Folder',
     icon: 'Icon',
     color: 'Color',