Improve processing multiple selects with array values

This commit is contained in:
Angelina Filippova 2020-01-03 17:00:20 +07:00
parent 218608e73c
commit c48b08efee
7 changed files with 91 additions and 65 deletions

View file

@ -31,9 +31,14 @@ export const parseNonTuples = (key, value) => {
if (key === ':backends') { if (key === ':backends') {
const index = value.findIndex(el => typeof el === 'object' && el.tuple.includes(':ex_syslogger')) const index = value.findIndex(el => typeof el === 'object' && el.tuple.includes(':ex_syslogger'))
const updated = value.map((el, i) => i === index ? ':ex_syslogger' : el) const updated = value.map((el, i) => i === index ? ':ex_syslogger' : el)
return { value: updated } return updated
} }
return { value } if (key === ':args') {
const index = value.findIndex(el => typeof el === 'object' && el.tuple.includes('implode'))
const updated = value.map((el, i) => i === index ? 'implode' : el)
return updated
}
return value
} }
// REFACTOR // REFACTOR
export const parseTuples = (tuples, key) => { export const parseTuples = (tuples, key) => {
@ -64,9 +69,11 @@ export const parseTuples = (tuples, key) => {
accum[item.tuple[0]] = item.tuple[1] === ':disabled' ? [item.tuple[1]] : item.tuple[1].tuple accum[item.tuple[0]] = item.tuple[1] === ':disabled' ? [item.tuple[1]] : item.tuple[1].tuple
} else if (item.tuple[0] === ':proxy_url') { } else if (item.tuple[0] === ':proxy_url') {
accum[item.tuple[0]] = parseProxyUrl(item.tuple[1]) accum[item.tuple[0]] = parseProxyUrl(item.tuple[1])
} else if ((item.tuple[0] === ':sslopts' && item.tuple[1].length === 0) || // should be removed } else if ((item.tuple[0] === ':sslopts' && item.tuple[1].length === 0) ||
(item.tuple[0] === ':tlsopts' && item.tuple[1].length === 0)) { (item.tuple[0] === ':tlsopts' && item.tuple[1].length === 0)) {
accum[item.tuple[0]] = {} accum[item.tuple[0]] = {}
} else if (item.tuple[0] === ':args') {
accum[item.tuple[0]] = parseNonTuples(item.tuple[0], item.tuple[1])
} else if (Array.isArray(item.tuple[1]) && } else if (Array.isArray(item.tuple[1]) &&
(typeof item.tuple[1][0] === 'object' && !Array.isArray(item.tuple[1][0])) && item.tuple[1][0]['tuple']) { (typeof item.tuple[1][0] === 'object' && !Array.isArray(item.tuple[1][0])) && item.tuple[1][0]['tuple']) {
accum[item.tuple[0]] = parseTuples(item.tuple[1], item.tuple[0]) accum[item.tuple[0]] = parseTuples(item.tuple[1], item.tuple[0])
@ -193,7 +200,7 @@ export const wrapUpdatedSettings = (group, settings, currentState) => {
const wrapValues = (settings, currentState) => { const wrapValues = (settings, currentState) => {
return Object.keys(settings).map(setting => { return Object.keys(settings).map(setting => {
const [type, value] = Array.isArray(settings[setting]) ? settings[setting] : ['', settings[setting]] const [type, value] = settings[setting]
if (type === 'keyword' || type.includes('keyword') || setting === ':replace') { if (type === 'keyword' || type.includes('keyword') || setting === ':replace') {
return { 'tuple': [setting, wrapValues(value, currentState)] } return { 'tuple': [setting, wrapValues(value, currentState)] }
} else if (type === 'atom' && value.length > 0) { } else if (type === 'atom' && value.length > 0) {
@ -218,6 +225,13 @@ const wrapValues = (settings, currentState) => {
return { 'tuple': [setting, { 'tuple': ip }] } return { 'tuple': [setting, { 'tuple': ip }] }
} else if (setting === ':ssl_options') { } else if (setting === ':ssl_options') {
return { 'tuple': [setting, wrapValues(value, currentState)] } return { 'tuple': [setting, wrapValues(value, currentState)] }
} else if (setting === ':args') {
const index = value.findIndex(el => el === 'implode')
const updatedArray = value.slice()
if (index !== -1) {
updatedArray[index] = { 'tuple': ['implode', '1'] }
}
return { 'tuple': [setting, updatedArray] }
} else { } else {
return { 'tuple': [setting, value] } return { 'tuple': [setting, value] }
} }

View file

@ -36,7 +36,7 @@ const settings = {
SET_SETTINGS: (state, data) => { SET_SETTINGS: (state, data) => {
const newSettings = data.reduce((acc, { group, key, value }) => { const newSettings = data.reduce((acc, { group, key, value }) => {
const parsedValue = valueHasTuples(key, value) const parsedValue = valueHasTuples(key, value)
? parseNonTuples(key, value) ? { value: parseNonTuples(key, value) }
: parseTuples(value, key) : parseTuples(value, key)
acc[group][key] = { ...acc[group][key], ...parsedValue } acc[group][key] = { ...acc[group][key], ...parsedValue }
return acc return acc

View file

@ -75,7 +75,7 @@
<icons-input v-if="setting.key === ':icons'" :data="data[':icons']" :setting-group="settingGroup" :setting="setting"/> <icons-input v-if="setting.key === ':icons'" :data="data[':icons']" :setting-group="settingGroup" :setting="setting"/>
<proxy-url-input v-if="setting.key === ':proxy_url'" :data="data[setting.key]" :setting-group="settingGroup" :setting="setting"/> <proxy-url-input v-if="setting.key === ':proxy_url'" :data="data[setting.key]" :setting-group="settingGroup" :setting="setting"/>
<!-- <ssl-options-input v-if="setting.key === ':ssl_options'" :setting-group="settingGroup" :setting-parent="settingParent" :setting="setting" :data="data" :nested="true" :custom-label-width="'100px'"/> --> <!-- <ssl-options-input v-if="setting.key === ':ssl_options'" :setting-group="settingGroup" :setting-parent="settingParent" :setting="setting" :data="data" :nested="true" :custom-label-width="'100px'"/> -->
<backends-logger-input v-if="setting.key === ':backends'" :data="data" :setting-group="settingGroup" :setting="setting"/> <multiple-select v-if="setting.key === ':backends' || setting.key === ':args'" :data="data" :setting-group="settingGroup" :setting="setting"/>
<prune-input v-if="setting.key === ':prune'" :data="data[setting.key]" :setting-group="settingGroup" :setting="setting"/> <prune-input v-if="setting.key === ':prune'" :data="data[setting.key]" :setting-group="settingGroup" :setting="setting"/>
<rate-limit-input v-if="settingGroup.key === ':rate_limit'" :data="data" :setting-group="settingGroup" :setting="setting"/> <rate-limit-input v-if="settingGroup.key === ':rate_limit'" :data="data" :setting-group="settingGroup" :setting="setting"/>
<!--------------------> <!-------------------->
@ -87,7 +87,7 @@
import AceEditor from 'vue2-ace-editor' import AceEditor from 'vue2-ace-editor'
import 'brace/mode/elixir' import 'brace/mode/elixir'
import 'default-passive-events' import 'default-passive-events'
import { AutoLinkerInput, BackendsLoggerInput, EditableKeywordInput, IconsInput, MascotsInput, ProxyUrlInput, PruneInput, RateLimitInput, SslOptionsInput } from './inputComponents' import { AutoLinkerInput, EditableKeywordInput, IconsInput, MascotsInput, MultipleSelect, ProxyUrlInput, PruneInput, RateLimitInput, SslOptionsInput } from './inputComponents'
import { processNested } from '@/store/modules/normalizers' import { processNested } from '@/store/modules/normalizers'
export default { export default {
@ -95,10 +95,10 @@ export default {
components: { components: {
editor: AceEditor, editor: AceEditor,
AutoLinkerInput, AutoLinkerInput,
BackendsLoggerInput,
EditableKeywordInput, EditableKeywordInput,
IconsInput, IconsInput,
MascotsInput, MascotsInput,
MultipleSelect,
ProxyUrlInput, ProxyUrlInput,
PruneInput, PruneInput,
RateLimitInput, RateLimitInput,
@ -216,7 +216,7 @@ export default {
{ group, key: parentKey, input: setting.key, value: valueForState }) { group, key: parentKey, input: setting.key, value: valueForState })
}, },
renderMultipleSelect(type) { renderMultipleSelect(type) {
return Array.isArray(type) && this.setting.key !== ':backends' && ( return Array.isArray(type) && this.setting.key !== ':backends' && this.setting.key !== ':args' && (
type.includes('module') || type.includes('module') ||
(type.includes('list') && type.includes('string')) || (type.includes('list') && type.includes('string')) ||
(type.includes('list') && type.includes('atom')) || (type.includes('list') && type.includes('atom')) ||

View file

@ -1,49 +0,0 @@
<template>
<el-select
:value="data.value"
multiple
filterable
allow-create
@change="updateSetting($event, settingGroup.group, settingGroup.key, setting.key, setting.type)">
<el-option value=":console" label="console"/>
<el-option value=":ex_syslogger" label="ExSyslogger"/>
<el-option value="Quack.Logger" label="Quack.Logger"/>
</el-select>
</template>
<script>
export default {
name: 'BackendsLoggerInput',
props: {
data: {
type: [Object, Array],
default: function() {
return {}
}
},
setting: {
type: Object,
default: function() {
return {}
}
},
settingGroup: {
type: Object,
default: function() {
return {}
}
}
},
methods: {
updateSetting(value, group, key, input, type) {
this.$store.dispatch('UpdateSettings', { group, key, input, value, type })
this.$store.dispatch('UpdateState', { group, key, input, value })
}
}
}
</script>
<style rel='stylesheet/scss' lang='scss'>
@import '../../styles/main';
@include settings
</style>

View file

@ -0,0 +1,63 @@
<template>
<div>
<el-select
v-if="setting.key === ':backends'"
:value="data.value"
multiple
filterable
allow-create
@change="updateSetting($event, settingGroup.group, settingGroup.key, setting.key, setting.type)">
<el-option value=":console" label="console"/>
<el-option value=":ex_syslogger" label="ExSyslogger"/>
<el-option value="Quack.Logger" label="Quack.Logger"/>
</el-select>
<el-select
v-if="setting.key === ':args'"
:value="data[setting.key]"
multiple
filterable
allow-create
@change="updateSetting($event, settingGroup.group, settingGroup.key, setting.key, setting.type)">
<el-option value="strip" label="strip"/>
<el-option value="auto-orient" label="auto-orient"/>
<el-option value="implode" label="implode"/>
</el-select>
</div>
</template>
<script>
export default {
name: 'MultipleSelect',
props: {
data: {
type: [Object, Array],
default: function() {
return {}
}
},
setting: {
type: Object,
default: function() {
return {}
}
},
settingGroup: {
type: Object,
default: function() {
return {}
}
}
},
methods: {
updateSetting(value, group, key, input, type) {
this.$store.dispatch('UpdateSettings', { group, key, input, value, type })
this.$store.dispatch('UpdateState', { group, key, input, value })
}
}
}
</script>
<style rel='stylesheet/scss' lang='scss'>
@import '../../styles/main';
@include settings
</style>

View file

@ -1,8 +1,8 @@
export { default as AutoLinkerInput } from './AutoLinkerInput' export { default as AutoLinkerInput } from './AutoLinkerInput'
export { default as BackendsLoggerInput } from './BackendsLoggerInput'
export { default as MascotsInput } from './MascotsInput'
export { default as EditableKeywordInput } from './EditableKeywordInput' export { default as EditableKeywordInput } from './EditableKeywordInput'
export { default as IconsInput } from './IconsInput' export { default as IconsInput } from './IconsInput'
export { default as MascotsInput } from './MascotsInput'
export { default as MultipleSelect } from './MultipleSelect'
export { default as ProxyUrlInput } from './ProxyUrlInput' export { default as ProxyUrlInput } from './ProxyUrlInput'
export { default as PruneInput } from './PruneInput' export { default as PruneInput } from './PruneInput'
export { default as RateLimitInput } from './RateLimitInput' export { default as RateLimitInput } from './RateLimitInput'

View file

@ -65,14 +65,12 @@
<el-tab-pane :label="$t('settings.webPush')" lazy> <el-tab-pane :label="$t('settings.webPush')" lazy>
<web-push/> <web-push/>
</el-tab-pane> </el-tab-pane>
<el-tab-pane :label="$t('settings.other')" lazy>
<other/>
</el-tab-pane>
<!--
<el-tab-pane :label="$t('settings.upload')" lazy> <el-tab-pane :label="$t('settings.upload')" lazy>
<upload/> <upload/>
</el-tab-pane> </el-tab-pane>
--> <el-tab-pane :label="$t('settings.other')" lazy>
<other/>
</el-tab-pane>
</el-tabs> </el-tabs>
</div> </div>
</template> </template>