Extract special inputs for AutoLinker into a separate tab
This commit is contained in:
parent
191199a41c
commit
242f26fa67
2 changed files with 75 additions and 22 deletions
|
@ -148,13 +148,8 @@
|
|||
class="value-input"
|
||||
@input="updateSetting($event, settingGroup.group, settingGroup.key, setting.key)"/>
|
||||
</div>
|
||||
<div v-if="settingGroup.group === ':auto_linker' && (setting.key === ':class' || setting.key === ':rel')">
|
||||
<el-switch :value="autoLinkerBooleanValue(setting.key)" @change="processAutoLinker($event, 'auto_linker', 'opts', 'class')"/>
|
||||
<el-input v-if="autoLinkerBooleanValue(setting.key)" :value="autoLinkerStringValue(setting.key)" @input="processAutoLinker($event, settingGroup.key, ':opts', setting.key)"/>
|
||||
</div>
|
||||
<div v-if="settingGroup.group === ':auto_linker' && (setting.key === ':truncate')">
|
||||
<el-switch :value="autoLinkerBooleanValue(setting.key)" @change="processAutoLinker($event, 'auto_linker', 'opts', 'class')"/>
|
||||
<el-input-number v-if="autoLinkerBooleanValue(setting.key)" :value="autoLinkerIntegerValue(setting.key)" @input="processAutoLinker($event, settingGroup.key, ':opts', setting.key)"/>
|
||||
<div v-if="settingGroup.group === ':auto_linker'">
|
||||
<auto-linker-input :setting-group="settingGroup" :setting="setting" :data="data"/>
|
||||
</div>
|
||||
<div v-if="setting.key === ':mascots'">
|
||||
<div v-for="([name, url, mimeType], index) in mascotsValue" :key="index" class="mascot-container">
|
||||
|
@ -192,11 +187,13 @@
|
|||
import AceEditor from 'vue2-ace-editor'
|
||||
import 'brace/mode/elixir'
|
||||
import 'default-passive-events'
|
||||
import AutoLinkerInput from './inputComponents/AutoLinkerInput'
|
||||
|
||||
export default {
|
||||
name: 'Inputs',
|
||||
components: {
|
||||
editor: AceEditor
|
||||
editor: AceEditor,
|
||||
AutoLinkerInput
|
||||
},
|
||||
props: {
|
||||
customLabelWidth: {
|
||||
|
@ -328,18 +325,6 @@ export default {
|
|||
}, {})
|
||||
this.updateSetting({ ...updatedValue, '': { url: '', mime_type: '' }}, this.settingGroup.group, 'assets', 'mascots')
|
||||
},
|
||||
autoLinkerBooleanValue(key) {
|
||||
const value = this.data[this.setting.key]
|
||||
return typeof value === 'string' || typeof value === 'number'
|
||||
},
|
||||
autoLinkerIntegerValue(key) {
|
||||
const value = this.data[this.setting.key]
|
||||
return value || 0
|
||||
},
|
||||
autoLinkerStringValue(key) {
|
||||
const value = this.data[this.setting.key]
|
||||
return value || ''
|
||||
},
|
||||
deleteEditableKeywordRow(index) {
|
||||
const filteredValues = this.editableKeywordData(this.data).filter((el, i) => index !== i)
|
||||
const updatedValue = filteredValues.reduce((acc, el, i) => {
|
||||
|
@ -413,8 +398,6 @@ export default {
|
|||
this.updateSetting(valueToSend, this.settingGroup.group, 'rate_limit', input)
|
||||
}
|
||||
},
|
||||
processAutoLinker(value, tab, inputName, childName) {
|
||||
},
|
||||
processNestedData(value, group, key, parentInput, parentType, childInput, childType) {
|
||||
const valueExists = value => value[group] && value[group][key] && value[group][key][parentInput]
|
||||
const updatedValueForState = valueExists(this.settings)
|
||||
|
|
|
@ -0,0 +1,70 @@
|
|||
<template>
|
||||
<div>
|
||||
<div v-if="setting.key === ':class' || setting.key === ':rel'">
|
||||
<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'">
|
||||
<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>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'AutoLinkerInput',
|
||||
props: {
|
||||
data: {
|
||||
type: Object || Array,
|
||||
default: function() {
|
||||
return {}
|
||||
}
|
||||
},
|
||||
setting: {
|
||||
type: Object,
|
||||
default: function() {
|
||||
return {}
|
||||
}
|
||||
},
|
||||
settingGroup: {
|
||||
type: Object,
|
||||
default: function() {
|
||||
return {}
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
methods: {
|
||||
autoLinkerBooleanValue(key) {
|
||||
const value = this.data[this.setting.key]
|
||||
return typeof value === 'string' || typeof value === 'number'
|
||||
},
|
||||
autoLinkerIntegerValue(key) {
|
||||
const value = this.data[this.setting.key]
|
||||
return value || 0
|
||||
},
|
||||
autoLinkerStringValue(key) {
|
||||
const value = this.data[this.setting.key]
|
||||
return value || ''
|
||||
},
|
||||
processTwoTypeValue(value, input) {
|
||||
if (value === true) {
|
||||
const data = input === ':truncate' ? 0 : ''
|
||||
this.updateSetting(data, this.settingGroup.group, this.settingGroup.key, input, this.setting.type)
|
||||
} else {
|
||||
this.updateSetting(value, this.settingGroup.group, this.settingGroup.key, input, this.setting.type)
|
||||
}
|
||||
},
|
||||
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>
|
Loading…
Reference in a new issue