AkkomaGang/admin-fe
5
2
Fork 8
Code Issues 5 Pull requests 2 Projects Releases Wiki Activity

Extract special inputs for AutoLinker into a separate tab

Browse source
This commit is contained in:
Angelina Filippova 2019-12-05 20:11:41 +09:00
parent 191199a41c
commit 242f26fa67
2 changed files with 75 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -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)

70
src/views/settings/components/inputComponents/AutoLinkerInput.vue Normal file
View file

@ -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>