Render form for assets on Frontend tab, update computed values
This commit is contained in:
Angelina Filippova
parent
ec65a99ce4
commit
63951408b8
2 changed files with 50 additions and 59 deletions
|
|
@ -11,22 +11,6 @@
|
|||
<el-form ref="assetsData" :model="assetsData" :label-width="labelWidth">
|
||||
<el-form-item label="Assets:"/>
|
||||
<setting :setting-group="assets" :data="assetsData"/>
|
||||
<!-- <el-form-item label="Default mascot">
|
||||
<el-select :value="assets.default_mascot" clearable @change="updateSetting($event, 'assets', 'default_mascot')"/>
|
||||
<p class="expl">An element from mascots - This will be used as the default mascot on MastoFE
|
||||
(default: <span class="code">:pleroma_fox_tan</span>)</p>
|
||||
</el-form-item>
|
||||
<el-form-item label="Mascots">
|
||||
<div v-for="([name, url, mimeType], index) in mascots" :key="index" class="mascot-container">
|
||||
<div class="mascot-name-container">
|
||||
<el-input :value="name" placeholder="Name" class="mascot-name-input" @input="parseMascots($event, 'name', index)"/>
|
||||
<el-button icon="el-icon-minus" circle @click="deleteMascotsRow(index, 'emoji', 'groups')"/>
|
||||
</div>
|
||||
<el-input :value="url" placeholder="URL" class="mascot-input" @input="parseMascots($event, 'url', index)"/>
|
||||
<el-input :value="mimeType" placeholder="Mime type" class="mascot-input" @input="parseMascots($event, 'mimeType', index)"/>
|
||||
</div>
|
||||
<el-button icon="el-icon-plus" circle @click="addRowToMascots"/>
|
||||
</el-form-item> -->
|
||||
</el-form>
|
||||
<div class="line"/>
|
||||
<el-form ref="emojiData" :model="emojiData" :label-width="labelWidth">
|
||||
|
|
@ -64,37 +48,32 @@ export default {
|
|||
return this.settings.description.find(setting => setting.key === ':assets')
|
||||
},
|
||||
assetsData() {
|
||||
return this.settings.settings[':assets']
|
||||
return this.settings.settings.pleroma[':assets']
|
||||
},
|
||||
chat() {
|
||||
return this.settings.description.find(setting => setting.key === ':chat')
|
||||
},
|
||||
chatData() {
|
||||
return this.settings.settings[':chat']
|
||||
return this.settings.settings.pleroma[':chat']
|
||||
},
|
||||
emoji() {
|
||||
return this.settings.description.find(setting => setting.key === ':emoji')
|
||||
},
|
||||
emojiData() {
|
||||
return this.settings.settings[':emoji']
|
||||
return this.settings.settings.pleroma[':emoji']
|
||||
},
|
||||
frontend() {
|
||||
return this.settings.description.find(setting => setting.key === ':frontend_configurations')
|
||||
},
|
||||
frontendData() {
|
||||
return this.settings.settings[':frontend_configurations']
|
||||
return this.settings.settings.pleroma[':frontend_configurations']
|
||||
},
|
||||
markup() {
|
||||
return this.settings.description.find(setting => setting.key === ':markup')
|
||||
},
|
||||
markupData() {
|
||||
return this.settings.settings[':markup']
|
||||
return this.settings.settings.pleroma[':markup']
|
||||
},
|
||||
// mascots() {
|
||||
// return Object.keys(this.assets.mascots)
|
||||
// .map(mascotName =>
|
||||
// [mascotName, this.assets.mascots[mascotName].url, this.assets.mascots[mascotName].mime_type])
|
||||
// },
|
||||
isMobile() {
|
||||
return this.$store.state.app.device === 'mobile'
|
||||
},
|
||||
|
|
@ -106,38 +85,6 @@ export default {
|
|||
}
|
||||
},
|
||||
methods: {
|
||||
//
|
||||
// addRowToMascots() {
|
||||
// const updatedValue = this.mascots.reduce((acc, el, i) => {
|
||||
// return { ...acc, [el[0]]: { url: el[1], mime_type: el[2] }}
|
||||
// }, {})
|
||||
// this.updateSetting({ ...updatedValue, '': { url: '', mime_type: '' }}, 'assets', 'mascots')
|
||||
// },
|
||||
// deleteMascotsRow(index) {
|
||||
// const filteredValues = this.mascots.filter((el, i) => index !== i)
|
||||
// const updatedValue = filteredValues.reduce((acc, el, i) => {
|
||||
// return { ...acc, [el[0]]: { url: el[1], mime_type: el[2] }}
|
||||
// }, {})
|
||||
// this.updateSetting(updatedValue, 'assets', 'mascots')
|
||||
// },
|
||||
// parseMascots(value, inputType, index) {
|
||||
// const updatedValue = this.mascots.reduce((acc, el, i) => {
|
||||
// if (index === i) {
|
||||
// if (inputType === 'name') {
|
||||
// return { ...acc, [value]: { url: el[1], mime_type: el[2] }}
|
||||
// } else if (inputType === 'url') {
|
||||
// return { ...acc, [el[0]]: { url: value, mime_type: el[2] }}
|
||||
// } else {
|
||||
// return { ...acc, [el[0]]: { url: el[1], mime_type: value }}
|
||||
// }
|
||||
// }
|
||||
// return { ...acc, [el[0]]: { url: el[1], mime_type: el[2] }}
|
||||
// }, {})
|
||||
// this.updateSetting(updatedValue, 'assets', 'mascots')
|
||||
// },
|
||||
updateSetting(value, tab, input) {
|
||||
this.$store.dispatch('UpdateSettings', { tab, data: { [input]: value }})
|
||||
},
|
||||
async onSubmit() {
|
||||
try {
|
||||
await this.$store.dispatch('SubmitChanges')
|
||||
|
|
|
|||
|
|
@ -62,7 +62,7 @@
|
|||
@input="updateSetting($event, settingGroup.key, setting.key)"/>
|
||||
<el-input
|
||||
v-if="setting.type === 'atom'"
|
||||
:value="data[setting.key]"
|
||||
:value="data[setting.key] ? data[setting.key].substr(1) : null"
|
||||
:placeholder="setting.suggestions[0]"
|
||||
@input="updateSetting($event, settingGroup.key, setting.key)">
|
||||
<template slot="prepend">:</template>
|
||||
|
|
@ -156,6 +156,17 @@
|
|||
<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 v-if="setting.key === ':mascots'">
|
||||
<div v-for="([name, url, mimeType], index) in mascotsValue" :key="index" class="mascot-container">
|
||||
<div class="mascot-name-container">
|
||||
<el-input :value="name" placeholder="Name" class="mascot-name-input" @input="parseMascots($event, 'name', index)"/>
|
||||
<el-button icon="el-icon-minus" circle @click="deleteMascotsRow(index, 'emoji', 'groups')"/>
|
||||
</div>
|
||||
<el-input :value="url" placeholder="URL" class="mascot-input" @input="parseMascots($event, 'url', index)"/>
|
||||
<el-input :value="mimeType" placeholder="Mime type" class="mascot-input" @input="parseMascots($event, 'mimeType', index)"/>
|
||||
</div>
|
||||
<el-button icon="el-icon-plus" circle @click="addRowToMascots"/>
|
||||
</div>
|
||||
<p class="expl">{{ setting.description }}</p>
|
||||
</el-form-item>
|
||||
</template>
|
||||
|
|
@ -221,6 +232,11 @@ export default {
|
|||
labelWidth() {
|
||||
return this.isMobile ? '100px' : '240px'
|
||||
},
|
||||
mascotsValue() {
|
||||
return Object.keys(this.data)
|
||||
.map(mascotName =>
|
||||
[mascotName, this.data[mascotName][':url'], this.data[mascotName][':mime_type']])
|
||||
},
|
||||
proxyUrlData() {
|
||||
if (!this.data[this.setting.key]) {
|
||||
return null
|
||||
|
|
@ -259,6 +275,12 @@ export default {
|
|||
}, {})
|
||||
this.updateSetting({ ...updatedValue, '': [] }, this.settingGroup.key, this.setting.key)
|
||||
},
|
||||
addRowToMascots() {
|
||||
const updatedValue = this.data[':mascots'].reduce((acc, el, i) => {
|
||||
return { ...acc, [el[0]]: { url: el[1], mime_type: el[2] }}
|
||||
}, {})
|
||||
this.updateSetting({ ...updatedValue, '': { url: '', mime_type: '' }}, 'assets', 'mascots')
|
||||
},
|
||||
autoLinkerBooleanValue(key) {
|
||||
const value = this.data[this.setting.key]
|
||||
return typeof value === 'string' || typeof value === 'number'
|
||||
|
|
@ -279,6 +301,13 @@ export default {
|
|||
console.log(updatedValue)
|
||||
this.updateSetting(updatedValue, this.settingGroup.key, this.setting.key)
|
||||
},
|
||||
deleteMascotsRow(index) {
|
||||
const filteredValues = this.data[':mascots'].filter((el, i) => index !== i)
|
||||
const updatedValue = filteredValues.reduce((acc, el, i) => {
|
||||
return { ...acc, [el[0]]: { url: el[1], mime_type: el[2] }}
|
||||
}, {})
|
||||
this.updateSetting(updatedValue, 'assets', 'mascots')
|
||||
},
|
||||
editableKeywordWithInput(key) {
|
||||
return key === ':replace'
|
||||
},
|
||||
|
|
@ -304,6 +333,21 @@ export default {
|
|||
console.log(updatedValue)
|
||||
this.updateSetting(updatedValue, this.settingGroup.key, this.setting.key)
|
||||
},
|
||||
parseMascots(value, inputType, index) {
|
||||
const updatedValue = this.data[':mascots'].reduce((acc, el, i) => {
|
||||
if (index === i) {
|
||||
if (inputType === 'name') {
|
||||
return { ...acc, [value]: { url: el[1], mime_type: el[2] }}
|
||||
} else if (inputType === 'url') {
|
||||
return { ...acc, [el[0]]: { url: value, mime_type: el[2] }}
|
||||
} else {
|
||||
return { ...acc, [el[0]]: { url: el[1], mime_type: value }}
|
||||
}
|
||||
}
|
||||
return { ...acc, [el[0]]: { url: el[1], mime_type: el[2] }}
|
||||
}, {})
|
||||
this.updateSetting(updatedValue, 'assets', 'mascots')
|
||||
},
|
||||
parseRateLimiter(value, input, typeOfInput, typeOfLimit, currentValue) {
|
||||
if (typeOfLimit === 'oneLimit') {
|
||||
const valueToSend = typeOfInput === 'scale' ? { 'tuple': [value, currentValue[1]] } : { 'tuple': [currentValue[0], value] }
|
||||
|
|
|
|||
Loading…
Reference in a new issue