Oneric/admin-fe
1
0
Fork 0
forked from AkkomaGang/admin-fe
Code Pull requests Activity

Make search work with settings without keys

Browse source
This commit is contained in:
Angelina Filippova 2020-03-15 01:31:47 +03:00
parent 5bea899efd
commit 148d7b3298
12 changed files with 34 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
src/store/modules/normalizers.js
View file

@ -271,19 +271,21 @@ const wrapValues = (settings, currentState) => {
export const formSearchObject = description => { export const formSearchObject = description => {
const parseNestedSettings = (description, label, key) => description.reduce((acc, setting) => { const parseNestedSettings = (description, label, key) => description.reduce((acc, setting) => {
const searchArray = _.compact([setting.key, setting.label, setting.description]).map(el => el.toLowerCase()) const searchArray = _.compact([setting.key, setting.label, setting.description]).map(el => el.toLowerCase())
const resultObject = { label: setting.label, key: setting.key || setting.group, groupKey: key, groupLabel: label, search: searchArray }
if (setting.children) { if (setting.children) {
const updatedAcc = [...acc, { label: setting.label, key: setting.key, groupKey: key, groupLabel: label, search: searchArray }] const updatedAcc = [...acc, resultObject]
return [...updatedAcc, ...parseNestedSettings(setting.children, setting.label, setting.key)] return [...updatedAcc, ...parseNestedSettings(setting.children, label, key)]
} }
return [...acc, { label: setting.label, key: setting.key, groupKey: key, groupLabel: label, search: searchArray }] return [...acc, resultObject]
}, []) }, [])
return description.reduce((acc, setting) => { return description.reduce((acc, setting) => {
const searchArray = _.compact([setting.key, setting.label, setting.description]).map(el => el.toLowerCase()) const searchArray = _.compact([setting.key, setting.label, setting.description]).map(el => el.toLowerCase())
const resultObject = { label: setting.label, key: setting.key || setting.group, groupKey: setting.key || setting.group, groupLabel: setting.label, search: searchArray }
if (setting.children) { if (setting.children) {
const updatedAcc = [...acc, { label: setting.label, key: setting.key, groupKey: setting.key, groupLabel: setting.label, search: searchArray }] const updatedAcc = [...acc, resultObject]
return [...updatedAcc, ...parseNestedSettings(setting.children, setting.label, setting.key)] return [...updatedAcc, ...parseNestedSettings(setting.children, setting.label, setting.key || setting.group)]
} }
return [...acc, { label: setting.label, key: setting.key, groupKey: setting.key, groupLabel: setting.label, search: searchArray }] return [...acc, resultObject]
}, []) }, [])
} }

16
src/views/settings/components/Inputs.vue
View file

@ -5,7 +5,7 @@
:label-width="customLabelWidth" :label-width="customLabelWidth"
:class="labelClass" :class="labelClass"
:style="`margin-left:${margin}px;margin-bottom:0`" :style="`margin-left:${margin}px;margin-bottom:0`"
:data-search="setting.key"> :data-search="setting.key || setting.group">
<span slot="label"> <span slot="label">
{{ setting.label }} {{ setting.label }}
<el-tooltip v-if="canBeDeleted && isDesktop" :content="$t('settings.removeFromDB')" placement="bottom-end"> <el-tooltip v-if="canBeDeleted && isDesktop" :content="$t('settings.removeFromDB')" placement="bottom-end">
@ -37,13 +37,13 @@
v-if="setting.type === 'string' || (setting.type.includes('string') && setting.type.includes('atom'))" v-if="setting.type === 'string' || (setting.type.includes('string') && setting.type.includes('atom'))"
:value="inputValue" :value="inputValue"
:placeholder="setting.suggestions ? setting.suggestions[0] : null" :placeholder="setting.suggestions ? setting.suggestions[0] : null"
:data-search="setting.key" :data-search="setting.key || setting.group"
class="input" class="input"
@input="update($event, settingGroup.group, settingGroup.key, settingParent, setting.key, setting.type, nested)"/> @input="update($event, settingGroup.group, settingGroup.key, settingParent, setting.key, setting.type, nested)"/>
<el-switch <el-switch
v-if="setting.type === 'boolean'" v-if="setting.type === 'boolean'"
:value="inputValue" :value="inputValue"
:data-search="setting.key" :data-search="setting.key || setting.group"
class="switch-input" class="switch-input"
@change="update($event, settingGroup.group, settingGroup.key, settingParent, setting.key, setting.type, nested)"/> @change="update($event, settingGroup.group, settingGroup.key, settingParent, setting.key, setting.type, nested)"/>
<el-input-number <el-input-number
@ -52,12 +52,12 @@
:placeholder="setting.suggestions ? setting.suggestions[0].toString() : null" :placeholder="setting.suggestions ? setting.suggestions[0].toString() : null"
:min="0" :min="0"
:size="isDesktop ? 'large' : 'medium'" :size="isDesktop ? 'large' : 'medium'"
:data-search="setting.key" :data-search="setting.key || setting.group"
@change="update($event, settingGroup.group, settingGroup.key, settingParent, setting.key, setting.type, nested)"/> @change="update($event, settingGroup.group, settingGroup.key, settingParent, setting.key, setting.type, nested)"/>
<el-select <el-select
v-if="setting.type === 'module' || (setting.type.includes('atom') && setting.type.includes('dropdown'))" v-if="setting.type === 'module' || (setting.type.includes('atom') && setting.type.includes('dropdown'))"
:value="inputValue === false ? 'false' : inputValue" :value="inputValue === false ? 'false' : inputValue"
:data-search="setting.key" :data-search="setting.key || setting.group"
clearable clearable
class="input" class="input"
@change="update($event, settingGroup.group, settingGroup.key, settingParent, setting.key, setting.type, nested)"> @change="update($event, settingGroup.group, settingGroup.key, settingParent, setting.key, setting.type, nested)">
@ -69,7 +69,7 @@
<el-select <el-select
v-if="renderMultipleSelect(setting.type)" v-if="renderMultipleSelect(setting.type)"
:value="setting.key === ':rewrite_policy' ? rewritePolicyValue : inputValue" :value="setting.key === ':rewrite_policy' ? rewritePolicyValue : inputValue"
:data-search="setting.key" :data-search="setting.key || setting.group"
multiple multiple
filterable filterable
allow-create allow-create
@ -80,7 +80,7 @@
<el-input <el-input
v-if="setting.key === ':ip'" v-if="setting.key === ':ip'"
:value="inputValue" :value="inputValue"
:data-search="setting.key" :data-search="setting.key || setting.group"
placeholder="xxx.xxx.xxx.xx" placeholder="xxx.xxx.xxx.xx"
class="input" class="input"
@input="update($event, settingGroup.group, settingGroup.key, settingParent, setting.key, setting.type, nested)"/> @input="update($event, settingGroup.group, settingGroup.key, settingParent, setting.key, setting.type, nested)"/>
@ -88,7 +88,7 @@
v-if="setting.type === 'atom'" v-if="setting.type === 'atom'"
:value="inputValue" :value="inputValue"
:placeholder="setting.suggestions[0] ? setting.suggestions[0].substr(1) : ''" :placeholder="setting.suggestions[0] ? setting.suggestions[0].substr(1) : ''"
:data-search="setting.key" :data-search="setting.key || setting.group"
class="input" class="input"
@input="update($event, settingGroup.group, settingGroup.key, settingParent, setting.key, setting.type, nested)"> @input="update($event, settingGroup.group, settingGroup.key, settingParent, setting.key, setting.type, nested)">
<template slot="prepend">:</template> <template slot="prepend">:</template>

4
src/views/settings/components/Setting.vue
View file

@ -1,6 +1,6 @@
<template> <template>
<div v-if="!loading"> <div v-if="!loading">
<el-form-item v-if="settingGroup.description" class="description-container"> <el-form-item v-if="settingGroup.description" :data-search="settingGroup.key || settingGroup.group" class="description-container">
<span class="description" v-html="getFormattedDescription(settingGroup.description)"/> <span class="description" v-html="getFormattedDescription(settingGroup.description)"/>
</el-form-item> </el-form-item>
<div v-if="settingGroup.key === 'Pleroma.Emails.Mailer'"> <div v-if="settingGroup.key === 'Pleroma.Emails.Mailer'">
@ -39,7 +39,7 @@
</div> </div>
<div v-else> <div v-else>
<div class="input-container"> <div class="input-container">
<el-form-item class="grouped-settings-header"> <el-form-item :data-search="setting.key || setting.group" class="grouped-settings-header">
<span slot="label"> <span slot="label">
<el-tooltip v-if="isDesktop && canBeDeleted(setting.key)" :content="$t('settings.removeFromDB')" placement="bottom-end"> <el-tooltip v-if="isDesktop && canBeDeleted(setting.key)" :content="$t('settings.removeFromDB')" placement="bottom-end">
<el-button icon="el-icon-delete" circle size="mini" style="margin-left:5px" @click="removeSetting(setting.key)"/> <el-button icon="el-icon-delete" circle size="mini" style="margin-left:5px" @click="removeSetting(setting.key)"/>

4
src/views/settings/components/inputComponents/AutoLinkerInput.vue
View file

@ -1,10 +1,10 @@
<template> <template>
<div> <div>
<div v-if="setting.key === ':class' || setting.key === ':rel'" :data-search="setting.key"> <div v-if="setting.key === ':class' || setting.key === ':rel'" :data-search="setting.key || setting.group">
<el-switch :value="autoLinkerBooleanValue(setting.key)" @change="processTwoTypeValue($event, 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)"/> <el-input v-if="autoLinkerBooleanValue(setting.key)" :value="autoLinkerStringValue(setting.key)" @input="processTwoTypeValue($event, setting.key)"/>
</div> </div>
<div v-if="setting.key === ':truncate'" :data-search="setting.key"> <div v-if="setting.key === ':truncate'" :data-search="setting.key || setting.group">
<el-switch :value="autoLinkerBooleanValue(setting.key)" @change="processTwoTypeValue($event, 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)"/> <el-input-number v-if="autoLinkerBooleanValue(setting.key)" :value="autoLinkerIntegerValue(setting.key)" @input="processTwoTypeValue($event, setting.key)"/>
</div> </div>

6
src/views/settings/components/inputComponents/EditableKeywordInput.vue
View file

@ -1,6 +1,6 @@
<template> <template>
<div class="editable-keyword-container"> <div class="editable-keyword-container">
<div v-if="setting.key === ':replace'" :data-search="setting.key"> <div v-if="setting.key === ':replace'" :data-search="setting.key || setting.group">
<div v-for="element in data" :key="getId(element)" class="setting-input"> <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="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)"/> <el-input :value="getValue(element)" placeholder="replacement" class="value-input" @input="parseEditableKeyword($event, 'value', element)"/>
@ -8,7 +8,7 @@
</div> </div>
<el-button :size="isDesktop ? 'medium' : 'mini'" icon="el-icon-plus" circle @click="addRowToEditableKeyword"/> <el-button :size="isDesktop ? 'medium' : 'mini'" icon="el-icon-plus" circle @click="addRowToEditableKeyword"/>
</div> </div>
<div v-else-if="editableKeywordWithInteger" :data-search="setting.key"> <div v-else-if="editableKeywordWithInteger" :data-search="setting.key || setting.group">
<div v-for="element in data" :key="getId(element)" class="setting-input"> <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 :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)"/> <el-input-number :value="getValue(element)" :min="0" size="large" class="value-input" @change="parseEditableKeyword($event, 'value', element)"/>
@ -16,7 +16,7 @@
</div> </div>
<el-button :size="isDesktop ? 'medium' : 'mini'" icon="el-icon-plus" circle @click="addRowToEditableKeyword"/> <el-button :size="isDesktop ? 'medium' : 'mini'" icon="el-icon-plus" circle @click="addRowToEditableKeyword"/>
</div> </div>
<div v-else :data-search="setting.key"> <div v-else :data-search="setting.key || setting.group">
<div v-for="element in data" :key="getId(element)" class="setting-input"> <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 :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)"/> <el-select :value="getValue(element)" multiple filterable allow-create class="value-input" @change="parseEditableKeyword($event, 'value', element)"/>

2
src/views/settings/components/inputComponents/IconsInput.vue
View file

@ -1,5 +1,5 @@
<template> <template>
<div :data-search="setting.key" class="mascot-container"> <div :data-search="setting.key || setting.group" class="mascot-container">
<div v-for="(icon, index) in data" :key="index" class="mascot"> <div v-for="(icon, index) in data" :key="index" class="mascot">
<div class="icons-container"> <div class="icons-container">
<div class="icon-container"> <div class="icon-container">

2
src/views/settings/components/inputComponents/MascotsInput.vue
View file

@ -1,5 +1,5 @@
<template> <template>
<div :data-search="setting.key" class="mascot-container"> <div :data-search="setting.key || setting.group" class="mascot-container">
<div v-for="mascot in data" :key="getId(mascot)" class="mascot"> <div v-for="mascot in data" :key="getId(mascot)" class="mascot">
<el-form-item label="Name" label-width="85px" class="mascot-form-item"> <el-form-item label="Name" label-width="85px" class="mascot-form-item">
<div class="mascot-name-container"> <div class="mascot-name-container">

4
src/views/settings/components/inputComponents/MultipleSelect.vue
View file

@ -3,7 +3,7 @@
<el-select <el-select
v-if="setting.key === ':backends'" v-if="setting.key === ':backends'"
:value="data.value" :value="data.value"
:data-search="setting.key" :data-search="setting.key || setting.group"
multiple multiple
filterable filterable
allow-create allow-create
@ -16,7 +16,7 @@
<el-select <el-select
v-if="setting.key === ':args'" v-if="setting.key === ':args'"
:value="data[setting.key]" :value="data[setting.key]"
:data-search="setting.key" :data-search="setting.key || setting.group"
multiple multiple
filterable filterable
allow-create allow-create

2
src/views/settings/components/inputComponents/ProxyUrlInput.vue
View file

@ -1,5 +1,5 @@
<template> <template>
<div :data-search="setting.key" class="proxy-url-input"> <div :data-search="setting.key || setting.group" class="proxy-url-input">
<el-input <el-input
:value="proxyUrlData.host" :value="proxyUrlData.host"
placeholder="host (e.g. localhost or 127.0.0.1)" placeholder="host (e.g. localhost or 127.0.0.1)"

2
src/views/settings/components/inputComponents/PruneInput.vue
View file

@ -1,5 +1,5 @@
<template> <template>
<div :data-search="setting.key"> <div :data-search="setting.key || setting.group">
<el-radio-group v-model="prune" class="prune-options"> <el-radio-group v-model="prune" class="prune-options">
<el-radio label=":disabled">Disabled</el-radio> <el-radio label=":disabled">Disabled</el-radio>
<el-radio label=":maxlen">Limit-based</el-radio> <el-radio label=":maxlen">Limit-based</el-radio>

2
src/views/settings/components/inputComponents/RateLimitInput.vue
View file

@ -1,5 +1,5 @@
<template> <template>
<div :data-search="setting.key" class="rate-limit-container"> <div :data-search="setting.key || setting.group" class="rate-limit-container">
<div v-if="!rateLimitAuthUsers"> <div v-if="!rateLimitAuthUsers">
<el-input <el-input
:value="rateLimitAllUsers[0]" :value="rateLimitAllUsers[0]"

5
src/views/settings/index.vue
View file

@ -27,6 +27,7 @@
v-model="searchQuery" v-model="searchQuery"
:fetch-suggestions="querySearch" :fetch-suggestions="querySearch"
:trigger-on-focus="false" :trigger-on-focus="false"
clearable
placeholder="Search" placeholder="Search"
prefix-icon="el-icon-search" prefix-icon="el-icon-search"
class="settings-search-input" class="settings-search-input"
@ -229,7 +230,9 @@ export default {
}) })
await this.$store.dispatch('SetActiveTab', tab) await this.$store.dispatch('SetActiveTab', tab)
const selectedSetting = document.querySelector(`[data-search="${selectedValue.key}"]`) const selectedSetting = document.querySelector(`[data-search="${selectedValue.key}"]`)
selectedSetting.scrollIntoView({ block: 'start', behavior: 'smooth' }) if (selectedSetting) {
selectedSetting.scrollIntoView({ block: 'start', behavior: 'smooth' })
}
}, },
querySearch(queryString, cb) { querySearch(queryString, cb) {
const results = this.searchData.filter(searchObj => searchObj.search.find(el => el.includes(queryString.toLowerCase()))) const results = this.searchData.filter(searchObj => searchObj.search.find(el => el.includes(queryString.toLowerCase())))