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

Move rendering Crontab settings to Editable keywords after updating its type

Browse source
This commit is contained in:
Angelina Filippova 2020-07-11 19:42:38 +03:00
parent 3f82738d86
commit 6577376642
5 changed files with 47 additions and 100 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
src/store/modules/normalizers.js
View file

@ -93,14 +93,16 @@ export const parseTuples = (tuples, key) => {
return [...acc, { [mascot.tuple[0]]: { ...mascot.tuple[1], id: `f${(~~(Math.random() * 1e8)).toString(16)}` }}]
}, [])
} else if (Array.isArray(item.tuple[1]) &&
(item.tuple[0] === ':groups' || item.tuple[0] === ':replace' || item.tuple[0] === ':retries' || item.tuple[0] === ':headers' || item.tuple[0] === ':params')) {
accum[item.tuple[0]] = item.tuple[1].reduce((acc, group) => {
return [...acc, { [group.tuple[0]]: { value: group.tuple[1], id: `f${(~~(Math.random() * 1e8)).toString(16)}` }}]
}, [])
} else if (item.tuple[0] === ':crontab') {
accum[item.tuple[0]] = item.tuple[1].reduce((acc, group) => {
return { ...acc, [group.tuple[1]]: group.tuple[0] }
}, {})
(item.tuple[0] === ':groups' || item.tuple[0] === ':replace' || item.tuple[0] === ':retries' || item.tuple[0] === ':headers' || item.tuple[0] === ':params' || item.tuple[0] === ':crontab')) {
if (item.tuple[0] === ':crontab') {
accum[item.tuple[0]] = item.tuple[1].reduce((acc, group) => {
return [...acc, { [group.tuple[1]]: { value: group.tuple[0], id: `f${(~~(Math.random() * 1e8)).toString(16)}` }}]
}, [])
} else {
accum[item.tuple[0]] = item.tuple[1].reduce((acc, group) => {
return [...acc, { [group.tuple[0]]: { value: group.tuple[1], id: `f${(~~(Math.random() * 1e8)).toString(16)}` }}]
}, [])
}
} else if (item.tuple[0] === ':match_actor') {
accum[item.tuple[0]] = Object.keys(item.tuple[1]).reduce((acc, regex) => {
return [...acc, { [regex]: { value: item.tuple[1][regex], id: `f${(~~(Math.random() * 1e8)).toString(16)}` }}]

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

@ -95,7 +95,6 @@
</el-input>
<!-- special inputs -->
<auto-linker-input v-if="settingGroup.group === ':auto_linker'" :data="data" :setting-group="settingGroup" :setting="setting"/>
<crontab-input v-if="setting.key === ':crontab'" :data="data[setting.key]" :setting-group="settingGroup" :setting="setting"/>
<editable-keyword-input v-if="editableKeyword(setting.key, setting.type)" :data="keywordData" :setting-group="settingGroup" :setting="setting" :parents="settingParent"/>
<icons-input v-if="setting.key === ':icons'" :data="iconsData" :setting-group="settingGroup" :setting="setting"/>
<mascots-input v-if="setting.key === ':mascots'" :data="keywordData" :setting-group="settingGroup" :setting="setting"/>
@ -122,7 +121,6 @@
import i18n from '@/lang'
import {
AutoLinkerInput,
CrontabInput,
EditableKeywordInput,
IconsInput,
MascotsInput,
@ -140,7 +138,6 @@ export default {
name: 'Inputs',
components: {
AutoLinkerInput,
CrontabInput,
EditableKeywordInput,
IconsInput,
MascotsInput,

86
src/views/settings/components/inputComponents/CrontabInput.vue
View file

@ -1,86 +0,0 @@
<template>
<el-form :label-width="labelWidth" :label-position="isMobile ? 'top' : 'right'" class="crontab">
<el-form-item v-for="worker in workers" :key="worker" :label="worker" :data-search="setting.key" class="crontab-container">
<el-input
:value="data[worker]"
:placeholder="getSuggestion(worker) || null"
class="input setting-input"
@input="update($event, worker)"/>
</el-form-item>
</el-form>
</template>
<script>
export default {
name: 'CrontabInput',
props: {
data: {
type: Object,
default: function() {
return {}
}
},
setting: {
type: Object,
default: function() {
return {}
}
},
settingGroup: {
type: Object,
default: function() {
return {}
}
}
},
computed: {
isDesktop() {
return this.$store.state.app.device === 'desktop'
},
isMobile() {
return this.$store.state.app.device === 'mobile'
},
isTablet() {
return this.$store.state.app.device === 'tablet'
},
labelWidth() {
if (this.isMobile) {
return '100%'
} else {
return '380px'
}
},
workers() {
return this.setting.suggestions.map(worker => worker[1])
}
},
methods: {
getSuggestion(worker) {
return this.setting.suggestions.find(suggestion => suggestion[1] === worker)[0]
},
update(value, worker) {
const currentValue = this.$store.state.settings.settings[this.settingGroup.group][this.settingGroup.key][this.setting.key]
const updatedValue = { ...currentValue, [worker]: value }
const updatedValueWithType = Object.keys(currentValue).reduce((acc, key) => {
if (key === worker) {
return { ...acc, [key]: ['reversed_tuple', value] }
} else {
return { ...acc, [key]: ['reversed_tuple', currentValue[key]] }
}
}, {})
this.$store.dispatch('UpdateSettings',
{ group: this.settingGroup.group, key: this.settingGroup.key, input: this.setting.key, value: updatedValueWithType, type: this.setting.type }
)
this.$store.dispatch('UpdateState',
{ group: this.settingGroup.group, key: this.settingGroup.key, input: this.setting.key, value: updatedValue }
)
}
}
}
</script>
<style rel='stylesheet/scss' lang='scss'>
@import '../../styles/main';
@include settings
</style>

39
src/views/settings/components/inputComponents/EditableKeywordInput.vue
View file

@ -1,6 +1,15 @@
<template>
<div class="editable-keyword-container">
<div v-if="editableKeywordWithInteger" :data-search="setting.key || setting.group">
<div v-if="setting.key === ':crontab'" :data-search="setting.key" class="crontab">
<el-form-item v-for="worker in data" :key="getId(worker)" :label="getCrontabWorkerLabel(worker)" class="crontab-container">
<el-input
:value="getValue(worker)"
:placeholder="getSuggestion(worker) || null"
class="input setting-input"
@input="updateCrontab($event, 'value', worker)"/>
</el-form-item>
</div>
<div v-else-if="editableKeywordWithInteger" :data-search="setting.key || setting.group">
<div v-for="element in data" :key="getId(element)" class="setting-input">
<el-input :value="getKey(element)" placeholder="key" class="name-input" @input="parseEditableKeyword($event, 'key', element)"/> :
<el-input-number :value="getValue(element)" :min="0" size="large" class="value-input" @change="parseEditableKeyword($event, 'value', element)"/>
@ -64,7 +73,7 @@ export default {
return Array.isArray(this.setting.type) && this.setting.type.includes('keyword') && this.setting.type.includes('integer')
},
editableKeywordWithString() {
return Array.isArray(this.setting.type) && (
return Array.isArray(this.setting.type) && this.setting.key !== ':crontab' && (
(this.setting.type.includes('keyword') && this.setting.type.includes('string')) ||
(this.setting.type.includes('tuple') && this.setting.type.includes('list'))
)
@ -98,6 +107,10 @@ export default {
generateID() {
return `f${(~~(Math.random() * 1e8)).toString(16)}`
},
getCrontabWorkerLabel(worker) {
const workerKey = this.getKey(worker)
return workerKey.includes('Pleroma.Workers.Cron.') ? workerKey.replace('Pleroma.Workers.Cron.', '') : workerKey
},
getKey(element) {
return Object.keys(element)[0]
},
@ -105,6 +118,9 @@ export default {
const { id } = Object.values(element)[0]
return id
},
getSuggestion(worker) {
return this.setting.suggestions.find(suggestion => suggestion[1] === this.getKey(worker))[0]
},
getValue(element) {
const { value } = Object.values(element)[0]
return value
@ -122,6 +138,25 @@ export default {
this.updateSetting(updatedValue, this.settingGroup.group, this.settingGroup.key, this.setting.key, this.setting.type)
},
updateCrontab(value, inputType, worker) {
const updatedId = this.getId(worker)
const updatedValue = this.data.map((worker, index) => {
if (Object.values(worker)[0].id === updatedId) {
return { [Object.keys(worker)[0]]: { ...Object.values(this.data[index])[0], value }}
}
return worker
})
const updatedValueWithType = updatedValue.reduce((acc, worker) => {
return { ...acc, [Object.keys(worker)[0]]: ['reversed_tuple', Object.values(worker)[0].value] }
}, {})
this.$store.dispatch('UpdateSettings',
{ group: this.settingGroup.group, key: this.settingGroup.key, input: this.setting.key, value: updatedValueWithType, type: this.setting.type }
)
this.$store.dispatch('UpdateState',
{ group: this.settingGroup.group, key: this.settingGroup.key, input: this.setting.key, value: updatedValue }
)
},
updateSetting(value, group, key, input, type) {
const wrappedSettings = this.wrapUpdatedSettings(value, input, type)

1
src/views/settings/components/inputComponents/index.js
View file

@ -1,6 +1,5 @@
export { default as AutoLinkerInput } from './AutoLinkerInput'
export { default as EditableKeywordInput } from './EditableKeywordInput'
export { default as CrontabInput } from './CrontabInput'
export { default as IconsInput } from './IconsInput'
export { default as MascotsInput } from './MascotsInput'
export { default as ProxyUrlInput } from './ProxyUrlInput'