From 0556b874cfced3910318a15ff1db2077f80caa01 Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Thu, 12 Mar 2020 23:48:50 +0300
Subject: [PATCH] Scroll to selected setting

---
 src/store/modules/normalizers.js                    |  4 ++--
 src/views/settings/components/ActivityPub.vue       |  4 ++--
 src/views/settings/components/Inputs.vue            | 13 ++++++++++++-
 .../components/inputComponents/AutoLinkerInput.vue  |  4 ++--
 .../inputComponents/EditableKeywordInput.vue        |  6 +++---
 .../components/inputComponents/IconsInput.vue       |  2 +-
 .../components/inputComponents/MascotsInput.vue     |  2 +-
 .../components/inputComponents/MultipleSelect.vue   |  2 ++
 .../components/inputComponents/ProxyUrlInput.vue    |  2 +-
 .../components/inputComponents/PruneInput.vue       |  2 +-
 .../components/inputComponents/RateLimitInput.vue   |  2 +-
 src/views/settings/index.vue                        |  8 +++++---
 12 files changed, 33 insertions(+), 18 deletions(-)

diff --git a/src/store/modules/normalizers.js b/src/store/modules/normalizers.js
index 022b8263..651c8295 100644
--- a/src/store/modules/normalizers.js
+++ b/src/store/modules/normalizers.js
@@ -262,7 +262,7 @@ export const formSearchObject = description => {
       const updatedAcc = [...acc, { label: setting.label, key: setting.key, groupKey: key, groupLabel: label, search: searchArray }]
       return [...updatedAcc, ...parseNestedSettings(setting.children, setting.label, setting.key)]
     }
-    return [...acc, { label: setting.label, key: setting.label, groupKey: key, groupLabel: label, search: searchArray }]
+    return [...acc, { label: setting.label, key: setting.key, groupKey: key, groupLabel: label, search: searchArray }]
   }, [])
 
   return description.reduce((acc, setting) => {
@@ -271,6 +271,6 @@ export const formSearchObject = description => {
       const updatedAcc = [...acc, { label: setting.label, key: setting.key, groupKey: setting.key, groupLabel: setting.label, search: searchArray }]
       return [...updatedAcc, ...parseNestedSettings(setting.children, setting.label, setting.key)]
     }
-    return [...acc, { label: setting.label, key: setting.label, groupKey: setting.key, groupLabel: setting.label, search: searchArray }]
+    return [...acc, { label: setting.label, key: setting.key, groupKey: setting.key, groupLabel: setting.label, search: searchArray }]
   }, [])
 }
diff --git a/src/views/settings/components/ActivityPub.vue b/src/views/settings/components/ActivityPub.vue
index abd03f10..3e71e0c2 100644
--- a/src/views/settings/components/ActivityPub.vue
+++ b/src/views/settings/components/ActivityPub.vue
@@ -1,10 +1,10 @@
 <template>
   <div v-if="!loading" class="form-container">
-    <el-form ref="activitypubData" :model="activitypubData" :label-width="labelWidth">
+    <el-form ref="activitypubData" :model="activitypubData" :label-width="labelWidth" data-search=":activitypub">
       <setting :setting-group="activitypub" :data="activitypubData"/>
     </el-form>
     <el-divider class="divider thick-line"/>
-    <el-form ref="userData" :model="userData" :label-width="labelWidth">
+    <el-form ref="userData" :model="userData" :label-width="labelWidth" data-search=":user">
       <setting :setting-group="user" :data="userData"/>
     </el-form>
     <div class="submit-button-container">
diff --git a/src/views/settings/components/Inputs.vue b/src/views/settings/components/Inputs.vue
index 9b6da5e9..6b8aa62f 100644
--- a/src/views/settings/components/Inputs.vue
+++ b/src/views/settings/components/Inputs.vue
@@ -1,7 +1,11 @@
 <template>
   <div class="input-container">
     <div v-if="setting.type === 'keyword'" class="keyword-container">
-      <el-form-item :label-width="customLabelWidth" :class="labelClass" :style="`margin-left:${margin}px;margin-bottom:0`" >
+      <el-form-item
+        :label-width="customLabelWidth"
+        :class="labelClass"
+        :style="`margin-left:${margin}px;margin-bottom:0`"
+        :data-search="setting.key">
         <span slot="label">
           {{ setting.label }}
           <el-tooltip v-if="canBeDeleted && isDesktop" :content="$t('settings.removeFromDB')" placement="bottom-end">
@@ -33,11 +37,13 @@
           v-if="setting.type === 'string' || (setting.type.includes('string') && setting.type.includes('atom'))"
           :value="inputValue"
           :placeholder="setting.suggestions ? setting.suggestions[0] : null"
+          :data-search="setting.key"
           class="input"
           @input="update($event, settingGroup.group, settingGroup.key, settingParent, setting.key, setting.type, nested)"/>
         <el-switch
           v-if="setting.type === 'boolean'"
           :value="inputValue"
+          :data-search="setting.key"
           class="switch-input"
           @change="update($event, settingGroup.group, settingGroup.key, settingParent, setting.key, setting.type, nested)"/>
         <el-input-number
@@ -46,10 +52,12 @@
           :placeholder="setting.suggestions ? setting.suggestions[0].toString() : null"
           :min="0"
           :size="isDesktop ? 'large' : 'medium'"
+          :data-search="setting.key"
           @change="update($event, settingGroup.group, settingGroup.key, settingParent, setting.key, setting.type, nested)"/>
         <el-select
           v-if="setting.type === 'module' || (setting.type.includes('atom') && setting.type.includes('dropdown'))"
           :value="inputValue === false ? 'false' : inputValue"
+          :data-search="setting.key"
           clearable
           class="input"
           @change="update($event, settingGroup.group, settingGroup.key, settingParent, setting.key, setting.type, nested)">
@@ -61,6 +69,7 @@
         <el-select
           v-if="renderMultipleSelect(setting.type)"
           :value="setting.key === ':rewrite_policy' ? rewritePolicyValue : inputValue"
+          :data-search="setting.key"
           multiple
           filterable
           allow-create
@@ -71,6 +80,7 @@
         <el-input
           v-if="setting.key === ':ip'"
           :value="inputValue"
+          :data-search="setting.key"
           placeholder="xxx.xxx.xxx.xx"
           class="input"
           @input="update($event, settingGroup.group, settingGroup.key, settingParent, setting.key, setting.type, nested)"/>
@@ -78,6 +88,7 @@
           v-if="setting.type === 'atom'"
           :value="inputValue"
           :placeholder="setting.suggestions[0] ? setting.suggestions[0].substr(1) : ''"
+          :data-search="setting.key"
           class="input"
           @input="update($event, settingGroup.group, settingGroup.key, settingParent, setting.key, setting.type, nested)">
           <template slot="prepend">:</template>
diff --git a/src/views/settings/components/inputComponents/AutoLinkerInput.vue b/src/views/settings/components/inputComponents/AutoLinkerInput.vue
index 756eeb1c..1bb1e506 100644
--- a/src/views/settings/components/inputComponents/AutoLinkerInput.vue
+++ b/src/views/settings/components/inputComponents/AutoLinkerInput.vue
@@ -1,10 +1,10 @@
 <template>
   <div>
-    <div v-if="setting.key === ':class' || setting.key === ':rel'">
+    <div v-if="setting.key === ':class' || setting.key === ':rel'" :data-search="setting.key">
       <el-switch :value="autoLinkerBooleanValue(setting.key)" @change="processTwoTypeValue($event, setting.key)"/>
       <el-input v-if="autoLinkerBooleanValue(setting.key)" :value="autoLinkerStringValue(setting.key)" @input="processTwoTypeValue($event, setting.key)"/>
     </div>
-    <div v-if="setting.key === ':truncate'">
+    <div v-if="setting.key === ':truncate'" :data-search="setting.key">
       <el-switch :value="autoLinkerBooleanValue(setting.key)" @change="processTwoTypeValue($event, setting.key)"/>
       <el-input-number v-if="autoLinkerBooleanValue(setting.key)" :value="autoLinkerIntegerValue(setting.key)" @input="processTwoTypeValue($event, setting.key)"/>
     </div>
diff --git a/src/views/settings/components/inputComponents/EditableKeywordInput.vue b/src/views/settings/components/inputComponents/EditableKeywordInput.vue
index bc2bb65c..a464a890 100644
--- a/src/views/settings/components/inputComponents/EditableKeywordInput.vue
+++ b/src/views/settings/components/inputComponents/EditableKeywordInput.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="editable-keyword-container">
-    <div v-if="setting.key === ':replace'">
+    <div v-if="setting.key === ':replace'" :data-search="setting.key">
       <div v-for="element in data" :key="getId(element)" class="setting-input">
         <el-input :value="getKey(element)" placeholder="pattern" class="name-input" @input="parseEditableKeyword($event, 'key', element)"/> :
         <el-input :value="getValue(element)" placeholder="replacement" class="value-input" @input="parseEditableKeyword($event, 'value', element)"/>
@@ -8,7 +8,7 @@
       </div>
       <el-button :size="isDesktop ? 'medium' : 'mini'" icon="el-icon-plus" circle @click="addRowToEditableKeyword"/>
     </div>
-    <div v-else-if="editableKeywordWithInteger">
+    <div v-else-if="editableKeywordWithInteger" :data-search="setting.key">
       <div v-for="element in data" :key="getId(element)" class="setting-input">
         <el-input :value="getKey(element)" placeholder="key" class="name-input" @input="parseEditableKeyword($event, 'key', element)"/> :
         <el-input-number :value="getValue(element)" :min="0" size="large" class="value-input" @change="parseEditableKeyword($event, 'value', element)"/>
@@ -16,7 +16,7 @@
       </div>
       <el-button :size="isDesktop ? 'medium' : 'mini'" icon="el-icon-plus" circle @click="addRowToEditableKeyword"/>
     </div>
-    <div v-else>
+    <div v-else :data-search="setting.key">
       <div v-for="element in data" :key="getId(element)" class="setting-input">
         <el-input :value="getKey(element)" placeholder="key" class="name-input" @input="parseEditableKeyword($event, 'key', element)"/> :
         <el-select :value="getValue(element)" multiple filterable allow-create class="value-input" @change="parseEditableKeyword($event, 'value', element)"/>
diff --git a/src/views/settings/components/inputComponents/IconsInput.vue b/src/views/settings/components/inputComponents/IconsInput.vue
index f5278bba..79533f24 100644
--- a/src/views/settings/components/inputComponents/IconsInput.vue
+++ b/src/views/settings/components/inputComponents/IconsInput.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="mascot-container">
+  <div :data-search="setting.key" class="mascot-container">
     <div v-for="(icon, index) in data" :key="index" class="mascot">
       <div class="icons-container">
         <div class="icon-container">
diff --git a/src/views/settings/components/inputComponents/MascotsInput.vue b/src/views/settings/components/inputComponents/MascotsInput.vue
index 902ed22f..add5da77 100644
--- a/src/views/settings/components/inputComponents/MascotsInput.vue
+++ b/src/views/settings/components/inputComponents/MascotsInput.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="mascot-container">
+  <div :data-search="setting.key" class="mascot-container">
     <div v-for="mascot in data" :key="getId(mascot)" class="mascot">
       <el-form-item label="Name" label-width="85px" class="mascot-form-item">
         <div class="mascot-name-container">
diff --git a/src/views/settings/components/inputComponents/MultipleSelect.vue b/src/views/settings/components/inputComponents/MultipleSelect.vue
index ead60d69..41de8dfc 100644
--- a/src/views/settings/components/inputComponents/MultipleSelect.vue
+++ b/src/views/settings/components/inputComponents/MultipleSelect.vue
@@ -3,6 +3,7 @@
     <el-select
       v-if="setting.key === ':backends'"
       :value="data.value"
+      :data-search="setting.key"
       multiple
       filterable
       allow-create
@@ -15,6 +16,7 @@
     <el-select
       v-if="setting.key === ':args'"
       :value="data[setting.key]"
+      :data-search="setting.key"
       multiple
       filterable
       allow-create
diff --git a/src/views/settings/components/inputComponents/ProxyUrlInput.vue b/src/views/settings/components/inputComponents/ProxyUrlInput.vue
index 84956074..54d5a7ad 100644
--- a/src/views/settings/components/inputComponents/ProxyUrlInput.vue
+++ b/src/views/settings/components/inputComponents/ProxyUrlInput.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="proxy-url-input">
+  <div :data-search="setting.key" class="proxy-url-input">
     <el-input
       :value="proxyUrlData.host"
       placeholder="host (e.g. localhost or 127.0.0.1)"
diff --git a/src/views/settings/components/inputComponents/PruneInput.vue b/src/views/settings/components/inputComponents/PruneInput.vue
index c851aa5b..9d068a2b 100644
--- a/src/views/settings/components/inputComponents/PruneInput.vue
+++ b/src/views/settings/components/inputComponents/PruneInput.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div :data-search="setting.key">
     <el-radio-group v-model="prune" class="prune-options">
       <el-radio label=":disabled">Disabled</el-radio>
       <el-radio label=":maxlen">Limit-based</el-radio>
diff --git a/src/views/settings/components/inputComponents/RateLimitInput.vue b/src/views/settings/components/inputComponents/RateLimitInput.vue
index caddd15c..ca70ca33 100644
--- a/src/views/settings/components/inputComponents/RateLimitInput.vue
+++ b/src/views/settings/components/inputComponents/RateLimitInput.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="rate-limit-container">
+  <div :data-search="setting.key" class="rate-limit-container">
     <div v-if="!rateLimitAuthUsers">
       <el-input
         :value="rateLimitAllUsers[0]"
diff --git a/src/views/settings/index.vue b/src/views/settings/index.vue
index 996dd38c..da8ca8c0 100644
--- a/src/views/settings/index.vue
+++ b/src/views/settings/index.vue
@@ -223,16 +223,18 @@ export default {
         message: i18n.t('settings.restartSuccess')
       })
     },
-    handleSearchSelect(selectedValue) {
+    async handleSearchSelect(selectedValue) {
       const tab = Object.keys(this.tabs).find(tab => {
         return this.tabs[tab].settings.includes(selectedValue.group)
       })
-      this.$store.dispatch('SetActiveTab', tab)
+      await this.$store.dispatch('SetActiveTab', tab)
+      const selectedSetting = document.querySelector(`[data-search="${selectedValue.key}"]`)
+      selectedSetting.scrollIntoView({ block: 'start', behavior: 'smooth' })
     },
     querySearch(queryString, cb) {
       const results = this.searchData.filter(searchObj => searchObj.search.find(el => el.includes(queryString.toLowerCase())))
         .map(searchObj => {
-          return { value: `${searchObj.label} in ${searchObj.groupLabel}`, group: searchObj.groupKey }
+          return { value: `${searchObj.label} in ${searchObj.groupLabel}`, group: searchObj.groupKey, key: searchObj.key }
         })
       cb(results)
     }