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"
|
class="value-input"
|
||||||
@input="updateSetting($event, settingGroup.group, settingGroup.key, setting.key)"/>
|
@input="updateSetting($event, settingGroup.group, settingGroup.key, setting.key)"/>
|
||||||
</div>
|
</div>
|
||||||
<div v-if="settingGroup.group === ':auto_linker' && (setting.key === ':class' || setting.key === ':rel')">
|
<div v-if="settingGroup.group === ':auto_linker'">
|
||||||
<el-switch :value="autoLinkerBooleanValue(setting.key)" @change="processAutoLinker($event, 'auto_linker', 'opts', 'class')"/>
|
<auto-linker-input :setting-group="settingGroup" :setting="setting" :data="data"/>
|
||||||
<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>
|
</div>
|
||||||
<div v-if="setting.key === ':mascots'">
|
<div v-if="setting.key === ':mascots'">
|
||||||
<div v-for="([name, url, mimeType], index) in mascotsValue" :key="index" class="mascot-container">
|
<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 AceEditor from 'vue2-ace-editor'
|
||||||
import 'brace/mode/elixir'
|
import 'brace/mode/elixir'
|
||||||
import 'default-passive-events'
|
import 'default-passive-events'
|
||||||
|
import AutoLinkerInput from './inputComponents/AutoLinkerInput'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'Inputs',
|
name: 'Inputs',
|
||||||
components: {
|
components: {
|
||||||
editor: AceEditor
|
editor: AceEditor,
|
||||||
|
AutoLinkerInput
|
||||||
},
|
},
|
||||||
props: {
|
props: {
|
||||||
customLabelWidth: {
|
customLabelWidth: {
|
||||||
|
@ -328,18 +325,6 @@ export default {
|
||||||
}, {})
|
}, {})
|
||||||
this.updateSetting({ ...updatedValue, '': { url: '', mime_type: '' }}, this.settingGroup.group, 'assets', 'mascots')
|
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) {
|
deleteEditableKeywordRow(index) {
|
||||||
const filteredValues = this.editableKeywordData(this.data).filter((el, i) => index !== i)
|
const filteredValues = this.editableKeywordData(this.data).filter((el, i) => index !== i)
|
||||||
const updatedValue = filteredValues.reduce((acc, el, i) => {
|
const updatedValue = filteredValues.reduce((acc, el, i) => {
|
||||||
|
@ -413,8 +398,6 @@ export default {
|
||||||
this.updateSetting(valueToSend, this.settingGroup.group, 'rate_limit', input)
|
this.updateSetting(valueToSend, this.settingGroup.group, 'rate_limit', input)
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
processAutoLinker(value, tab, inputName, childName) {
|
|
||||||
},
|
|
||||||
processNestedData(value, group, key, parentInput, parentType, childInput, childType) {
|
processNestedData(value, group, key, parentInput, parentType, childInput, childType) {
|
||||||
const valueExists = value => value[group] && value[group][key] && value[group][key][parentInput]
|
const valueExists = value => value[group] && value[group][key] && value[group][key][parentInput]
|
||||||
const updatedValueForState = valueExists(this.settings)
|
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