Render AutoLinker settings using API description data
This commit is contained in:
Angelina Filippova
parent
8226a3c922
commit
c655882e6e
2 changed files with 34 additions and 83 deletions
|
|
@ -1,49 +1,6 @@
|
|||
<template>
|
||||
<el-form v-if="!loading" ref="autoLinker" :model="autoLinker" :label-width="labelWidth">
|
||||
<el-form-item label="Class">
|
||||
<el-switch :value="booleanClass" @change="processTwoTypeValue($event, 'auto_linker', 'opts', 'class')"/>
|
||||
<p v-if="!booleanClass" class="expl">Specify the class to be added to the generated link. False to clear.</p>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="booleanClass">
|
||||
<el-input :value="getStringValue('class')" @input="processTwoTypeValue($event, 'auto_linker', 'opts', 'class')"/>
|
||||
<p class="expl">Specify the class to be added to the generated link. False to clear.</p>
|
||||
</el-form-item>
|
||||
<el-form-item label="Rel">
|
||||
<el-switch :value="booleanRel" @change="processTwoTypeValue($event, 'auto_linker', 'opts', 'rel')"/>
|
||||
<p v-if="!booleanRel" class="expl">Override the rel attribute. False to clear</p>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="booleanRel">
|
||||
<el-input :value="getStringValue('rel')" @input="processTwoTypeValue($event, 'auto_linker', 'opts', 'rel')"/>
|
||||
<p class="expl">Override the rel attribute. False to clear</p>
|
||||
</el-form-item>
|
||||
<el-form-item label="New window">
|
||||
<el-switch :value="autoLinker.opts.new_window" @change="processNestedData($event, 'auto_linker', 'opts', 'new_window')"/>
|
||||
<p class="expl">Set to false to remove <span class="code">target='_blank'</span> attribute</p>
|
||||
</el-form-item>
|
||||
<el-form-item label="Scheme">
|
||||
<el-switch :value="autoLinker.opts.scheme" @change="processNestedData($event, 'auto_linker', 'opts', 'scheme')"/>
|
||||
<p class="expl">Set to true to link urls with schema <span class="code">http://google.com</span></p>
|
||||
</el-form-item>
|
||||
<el-form-item label="Truncate">
|
||||
<el-switch :value="booleanTruncate" @change="processTwoTypeValue($event, 'auto_linker', 'opts', 'truncate')"/>
|
||||
<p v-if="!booleanTruncate" class="expl">Set to a number to truncate urls longer then the number.
|
||||
Truncated urls will end in <span class="code">..</span></p>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="booleanTruncate">
|
||||
<el-input-number :value="getStringValue('truncate')" :step="1" :min="0" size="large" @change="processTwoTypeValue($event, 'auto_linker', 'opts', 'truncate')"/>
|
||||
<p class="expl">Specify the class to be added to the generated link. False to clear.</p>
|
||||
</el-form-item>
|
||||
<el-form-item label="Strip prefix">
|
||||
<el-switch :value="autoLinker.opts.strip_prefix" @change="processNestedData($event, 'auto_linker', 'opts', 'strip_prefix')"/>
|
||||
<p class="expl">Strip the scheme prefix</p>
|
||||
</el-form-item>
|
||||
<el-form-item label="Extra">
|
||||
<el-switch :value="autoLinker.opts.extra" @change="processNestedData($event, 'auto_linker', 'opts', 'extra')"/>
|
||||
<p class="expl">Link urls with rarely used schemes (magnet, ipfs, irc, etc.)</p>
|
||||
</el-form-item>
|
||||
<el-form-item label="Validate TLD">
|
||||
<el-switch :value="autoLinker.opts.validate_tld" @change="processNestedData($event, 'auto_linker', 'opts', 'validate_tld')"/>
|
||||
</el-form-item>
|
||||
<el-form v-if="!loading" ref="autoLinker" :model="autoLinkerData" :label-width="labelWidth">
|
||||
<setting :setting-group="autoLinker" :data="autoLinkerData"/>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="onSubmit">Submit</el-button>
|
||||
</el-form-item>
|
||||
|
|
@ -53,13 +10,21 @@
|
|||
<script>
|
||||
import { mapGetters } from 'vuex'
|
||||
import i18n from '@/lang'
|
||||
import Setting from './Setting'
|
||||
|
||||
export default {
|
||||
name: 'AutoLinker',
|
||||
components: { Setting },
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'autoLinker'
|
||||
'settings'
|
||||
]),
|
||||
autoLinker() {
|
||||
return this.settings.description.find(setting => setting.key === ':opts')
|
||||
},
|
||||
autoLinkerData() {
|
||||
return this.settings.settings.auto_linker[':opts']
|
||||
},
|
||||
isMobile() {
|
||||
return this.$store.state.app.device === 'mobile'
|
||||
},
|
||||
|
|
@ -67,46 +32,10 @@ export default {
|
|||
return this.isMobile ? '100px' : '240px'
|
||||
},
|
||||
loading() {
|
||||
return this.$store.state.settings.loading
|
||||
},
|
||||
booleanClass() {
|
||||
return this.getBooleanValue('class')
|
||||
},
|
||||
booleanRel() {
|
||||
return this.getBooleanValue('rel')
|
||||
},
|
||||
booleanTruncate() {
|
||||
return this.getBooleanValue('truncate')
|
||||
return this.settings.loading
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getBooleanValue(name) {
|
||||
const value = this.autoLinker.opts[name]
|
||||
return typeof value === 'string' || typeof value === 'number'
|
||||
},
|
||||
getNumValue(name) {
|
||||
const value = this.autoLinker.opts[name]
|
||||
return value || 0
|
||||
},
|
||||
getStringValue(name) {
|
||||
const value = this.autoLinker.opts[name]
|
||||
return value || ''
|
||||
},
|
||||
processTwoTypeValue(value, tab, inputName, childName) {
|
||||
if (value === true) {
|
||||
const data = childName === 'truncate' ? 0 : ''
|
||||
this.processNestedData(data, tab, inputName, childName)
|
||||
} else {
|
||||
this.processNestedData(value, tab, inputName, childName)
|
||||
}
|
||||
},
|
||||
processNestedData(value, tab, inputName, childName) {
|
||||
const updatedValue = { ...this.$store.state.settings.settings[tab][inputName], ...{ [childName]: value }}
|
||||
this.updateSetting(updatedValue, tab, inputName)
|
||||
},
|
||||
updateSetting(value, tab, input) {
|
||||
this.$store.dispatch('UpdateSettings', { tab, data: { [input]: value }})
|
||||
},
|
||||
async onSubmit() {
|
||||
try {
|
||||
await this.$store.dispatch('SubmitChanges')
|
||||
|
|
|
|||
|
|
@ -148,6 +148,14 @@
|
|||
class="value-input"
|
||||
@input="updateSetting($event, 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>
|
||||
<p class="expl">{{ setting.description }}</p>
|
||||
</el-form-item>
|
||||
</template>
|
||||
|
|
@ -246,6 +254,18 @@ export default {
|
|||
}, {})
|
||||
this.updateSetting({ ...updatedValue, '': [] }, this.settingGroup.key, this.setting.key)
|
||||
},
|
||||
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) => {
|
||||
|
|
@ -295,6 +315,8 @@ export default {
|
|||
this.updateSetting(valueToSend, 'rate_limit', input)
|
||||
}
|
||||
},
|
||||
processAutoLinker(value, tab, inputName, childName) {
|
||||
},
|
||||
processNestedData(value, tab, inputName, childName) {
|
||||
const updatedValue = { ...this.$store.state.settings.settings[tab][inputName], ...{ [childName]: value }}
|
||||
this.updateSetting(updatedValue, tab, inputName)
|
||||
|
|
|
|||
Loading…
Reference in a new issue