Form search object and put it in state

src/store/modules/normalizers.js

@@ -254,3 +254,13 @@ const wrapValues = (settings, currentState) => {
     }
   })
 }
+
+export const formSearchObject = description => {
+  return description.reduce((acc, setting) => {
+    if (setting.children) {
+      const updatedAcc = { ...acc, [setting.key]: _.compact([setting.key, setting.label, setting.description]) }
+      return { ...updatedAcc, ...formSearchObject(setting.children) }
+    }
+    return { ...acc, [setting.key]: _.compact([setting.key, setting.label, setting.description]) }
+  }, {})
+}

src/store/modules/settings.js

 import { fetchDescription, fetchSettings, removeSettings, restartApp, updateSettings } from '@/api/settings'
-import { checkPartialUpdate, parseNonTuples, parseTuples, valueHasTuples, wrapUpdatedSettings } from './normalizers'
+import { checkPartialUpdate, formSearchObject, parseNonTuples, parseTuples, valueHasTuples, wrapUpdatedSettings } from './normalizers'
 import _ from 'lodash'
 
 const settings = {
@@ -10,6 +10,7 @@ const settings = {
     description: [],
     loading: true,
     needReboot: false,
+    searchData: {},
     settings: {},
     updatedSettings: {}
   },
@@ -32,6 +33,9 @@ const settings = {
     SET_LOADING: (state, status) => {
       state.loading = status
     },
+    SET_SEARCH: (state, description) => {
+      state.searchData = description
+    },
     SET_SETTINGS: (state, data) => {
       const newSettings = data.reduce((acc, { group, key, value }) => {
         const parsedValue = valueHasTuples(key, value)
@@ -77,6 +81,8 @@ const settings = {
         const response = await fetchSettings(getters.authHost, getters.token)
         const description = await fetchDescription(getters.authHost, getters.token)
         commit('SET_DESCRIPTION', description.data)
+        const res = formSearchObject(description.data)
+        commit('SET_SEARCH', res)
         commit('SET_SETTINGS', response.data.configs)
         commit('TOGGLE_REBOOT', response.data.need_reboot)
       } catch (_e) {

src/views/settings/index.vue

@@ -24,14 +24,12 @@
             </el-button>
           </el-link>
           <el-autocomplete
-            v-model="state2"
+            v-model="searchQuery"
             :fetch-suggestions="querySearch"
             :trigger-on-focus="false"
             placeholder="Search"
             prefix-icon="el-icon-search"
-            class="settings-search-input"
-            @select="handleSelect"
-          />
+            class="settings-search-input"/>
         </div>
       </div>
       <el-tabs v-model="activeTab" tab-position="left">
@@ -234,7 +232,8 @@ export default {
         { value: 'webPush', label: i18n.t('settings.webPush') },
         { value: 'upload', label: i18n.t('settings.upload') },
         { value: 'other', label: i18n.t('settings.other') }
-      ]
+      ],
+      searchQuery: ''
     }
   },
   computed: {
@@ -260,6 +259,9 @@ export default {
     },
     needReboot() {
       return this.$store.state.settings.needReboot
+    },
+    searchData() {
+      return this.$store.state.settings.searchData
     }
   },
   mounted: function() {
@@ -276,6 +278,11 @@ export default {
         type: 'success',
         message: i18n.t('settings.restartSuccess')
       })
+    },
+    querySearch(queryString, cb) {
+      const results = this.searchData
+      // call callback function to return suggestions
+      cb(results)
     }
   }
 }