sliver/admin-fe
1
0
Fork 0
forked from AkkomaGang/admin-fe
Code Pull requests Activity

Render form for assets on Frontend tab, update computed values

Browse source
This commit is contained in:
Angelina Filippova 2019-11-19 20:24:25 +09:00
parent ec65a99ce4
commit 63951408b8
2 changed files with 50 additions and 59 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

63
src/views/settings/components/Frontend.vue
View file

@ -11,22 +11,6 @@
<el-form ref="assetsData" :model="assetsData" :label-width="labelWidth"> <el-form ref="assetsData" :model="assetsData" :label-width="labelWidth">
<el-form-item label="Assets:"/> <el-form-item label="Assets:"/>
<setting :setting-group="assets" :data="assetsData"/> <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> </el-form>
<div class="line"/> <div class="line"/>
<el-form ref="emojiData" :model="emojiData" :label-width="labelWidth"> <el-form ref="emojiData" :model="emojiData" :label-width="labelWidth">
@ -64,37 +48,32 @@ export default {
return this.settings.description.find(setting => setting.key === ':assets') return this.settings.description.find(setting => setting.key === ':assets')
}, },
assetsData() { assetsData() {
return this.settings.settings[':assets'] return this.settings.settings.pleroma[':assets']
}, },
chat() { chat() {
return this.settings.description.find(setting => setting.key === ':chat') return this.settings.description.find(setting => setting.key === ':chat')
}, },
chatData() { chatData() {
return this.settings.settings[':chat'] return this.settings.settings.pleroma[':chat']
}, },
emoji() { emoji() {
return this.settings.description.find(setting => setting.key === ':emoji') return this.settings.description.find(setting => setting.key === ':emoji')
}, },
emojiData() { emojiData() {
return this.settings.settings[':emoji'] return this.settings.settings.pleroma[':emoji']
}, },
frontend() { frontend() {
return this.settings.description.find(setting => setting.key === ':frontend_configurations') return this.settings.description.find(setting => setting.key === ':frontend_configurations')
}, },
frontendData() { frontendData() {
return this.settings.settings[':frontend_configurations'] return this.settings.settings.pleroma[':frontend_configurations']
}, },
markup() { markup() {
return this.settings.description.find(setting => setting.key === ':markup') return this.settings.description.find(setting => setting.key === ':markup')
}, },
markupData() { 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() { isMobile() {
return this.$store.state.app.device === 'mobile' return this.$store.state.app.device === 'mobile'
}, },
@ -106,38 +85,6 @@ export default {
} }
}, },
methods: { 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() { async onSubmit() {
try { try {
await this.$store.dispatch('SubmitChanges') await this.$store.dispatch('SubmitChanges')

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

@ -62,7 +62,7 @@
@input="updateSetting($event, settingGroup.key, setting.key)"/> @input="updateSetting($event, settingGroup.key, setting.key)"/>
<el-input <el-input
v-if="setting.type === 'atom'" v-if="setting.type === 'atom'"
:value="data[setting.key]" :value="data[setting.key] ? data[setting.key].substr(1) : null"
:placeholder="setting.suggestions[0]" :placeholder="setting.suggestions[0]"
@input="updateSetting($event, settingGroup.key, setting.key)"> @input="updateSetting($event, settingGroup.key, setting.key)">
<template slot="prepend">:</template> <template slot="prepend">:</template>
@ -156,6 +156,17 @@
<el-switch :value="autoLinkerBooleanValue(setting.key)" @change="processAutoLinker($event, 'auto_linker', 'opts', 'class')"/> <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)"/> <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-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> <p class="expl">{{ setting.description }}</p>
</el-form-item> </el-form-item>
</template> </template>
@ -221,6 +232,11 @@ export default {
labelWidth() { labelWidth() {
return this.isMobile ? '100px' : '240px' return this.isMobile ? '100px' : '240px'
}, },
mascotsValue() {
return Object.keys(this.data)
.map(mascotName =>
[mascotName, this.data[mascotName][':url'], this.data[mascotName][':mime_type']])
},
proxyUrlData() { proxyUrlData() {
if (!this.data[this.setting.key]) { if (!this.data[this.setting.key]) {
return null return null
@ -259,6 +275,12 @@ export default {
}, {}) }, {})
this.updateSetting({ ...updatedValue, '': [] }, this.settingGroup.key, this.setting.key) 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) { autoLinkerBooleanValue(key) {
const value = this.data[this.setting.key] const value = this.data[this.setting.key]
return typeof value === 'string' || typeof value === 'number' return typeof value === 'string' || typeof value === 'number'
@ -279,6 +301,13 @@ export default {
console.log(updatedValue) console.log(updatedValue)
this.updateSetting(updatedValue, this.settingGroup.key, this.setting.key) 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) { editableKeywordWithInput(key) {
return key === ':replace' return key === ':replace'
}, },
@ -304,6 +333,21 @@ export default {
console.log(updatedValue) console.log(updatedValue)
this.updateSetting(updatedValue, this.settingGroup.key, this.setting.key) 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) { parseRateLimiter(value, input, typeOfInput, typeOfLimit, currentValue) {
if (typeOfLimit === 'oneLimit') { if (typeOfLimit === 'oneLimit') {
const valueToSend = typeOfInput === 'scale' ? { 'tuple': [value, currentValue[1]] } : { 'tuple': [currentValue[0], value] } const valueToSend = typeOfInput === 'scale' ? { 'tuple': [value, currentValue[1]] } : { 'tuple': [currentValue[0], value] }