Skip to content
Snippets Groups Projects
Commit 755cfd8f authored by Angelina Filippova's avatar Angelina Filippova
Browse files

Render frontend settings from API data

parent 0c2a39a7
No related branches found
No related tags found
1 merge request!65Update server configuration
Hide whitespace changes
Inline Side-by-side
src/views/settings/components/Frontend.vue
+ 79
− 360
View file @ 755cfd8f
<template> <template>
<div> <div v-if="!loading">
<el-form ref="frontend" :model="frontend" :label-width="labelWidth"> <el-form ref="frontendData" :model="frontendData" :label-width="labelWidth">
<el-form-item> <el-form-item>
<p class="expl">This form can be used to configure a keyword list that keeps the configuration data for any kind of frontend. <p class="expl">This form can be used to configure a keyword list that keeps the configuration data for any kind of frontend.
By default, settings for <span class="code">pleroma_fe</span> and <span class="code">masto_fe</span> are configured. By default, settings for <span class="code">pleroma_fe</span> and <span class="code">masto_fe</span> are configured.
If you want to add your own configuration your settings need to be complete as they will override the defaults.</p> If you want to add your own configuration your settings need to be complete as they will override the defaults.</p>
</el-form-item> </el-form-item>
<el-form-item label="Pleroma FE:"/> <setting :settings-group="frontend" :data="frontendData"/>
<el-form-item label="Theme">
<el-select :value="frontend.pleroma_fe.theme" clearable @change="processNestedData($event, 'frontend_configurations', 'pleroma_fe', 'theme')">
<el-option
v-for="item in themeOptions"
:key="item.value"
:label="item.label"
:value="item.value"/>
</el-select>
<p class="expl">Which theme to use</p>
</el-form-item>
<el-form-item label="Background">
<el-input :value="frontend.pleroma_fe.background" @input="processNestedData($event, 'frontend_configurations', 'pleroma_fe', 'background')"/>
<div class="upload-container">
<p class="text">or</p>
<el-upload
:http-request="sendBackgroundPleroma"
:multiple="false"
:show-file-list="false"
action="/api/v1/media">
<el-button size="small" type="primary">Click to upload</el-button>
</el-upload>
</div>
<p class="expl">URL of the background, unless viewing a user profile with a background that is set</p>
</el-form-item>
<el-form-item label="Logo">
<el-input :value="frontend.pleroma_fe.logo" @input="processNestedData($event, 'frontend_configurations', 'pleroma_fe', 'logo')"/>
<div class="upload-container">
<p class="text">or</p>
<el-upload
:http-request="sendLogoPleroma"
:multiple="false"
:show-file-list="false"
action="/api/v1/media">
<el-button size="small" type="primary">Click to upload</el-button>
</el-upload>
</div>
<p class="expl">URL of the logo</p>
</el-form-item>
<el-form-item label="Logo mask">
<el-switch :value="frontend.pleroma_fe.logoMask" @change="processNestedData($event, 'frontend_configurations', 'pleroma_fe', 'logoMask')"/>
<p class="expl">Whether to use only the logo's shape as a mask (true) or as a regular image (false)</p>
</el-form-item>
<el-form-item label="Logo margin (em)">
<el-input-number :value="frontend.pleroma_fe.logoMargin" :step="0.1" :min="0" size="large" @change="processNestedData($event, 'frontend_configurations', 'pleroma_fe', 'logoMargin')"/>
<p class="expl">What margin to use around the logo</p>
</el-form-item>
<el-form-item label="Redirect URL">
<el-input :value="frontend.pleroma_fe.redirectRootNoLogin" @input="processNestedData($event, 'frontend_configurations', 'pleroma_fe', 'redirectRootNoLogin')"/>
<p class="expl">Relative URL which indicates where to redirect when a user is logged in</p>
</el-form-item>
<el-form-item label="Redirect for anonymous user">
<el-input :value="frontend.pleroma_fe.redirectRootLogin" @input="processNestedData($event, 'frontend_configurations', 'pleroma_fe', 'redirectRootLogin')"/>
<p class="expl">Relative URL which indicates where to redirect when a user isn’t logged in</p>
</el-form-item>
<el-form-item label="Show instance panel">
<el-switch :value="frontend.pleroma_fe.showInstanceSpecificPanel" @change="processNestedData($event, 'frontend_configurations', 'pleroma_fe', 'showInstanceSpecificPanel')"/>
<p class="expl">Whenether to show the instance’s specific panel</p>
</el-form-item>
<el-form-item label="Scope options enabled">
<el-switch :value="frontend.pleroma_fe.scopeOptionsEnabled" @change="processNestedData($event, 'frontend_configurations', 'pleroma_fe', 'scopeOptionsEnabled')"/>
</el-form-item>
<el-form-item label="Formatting options enabled">
<el-switch :value="frontend.pleroma_fe.formattingOptionsEnabled" @change="processNestedData($event, 'frontend_configurations', 'pleroma_fe', 'formattingOptionsEnabled')"/>
</el-form-item>
<el-form-item label="Collapse msg with subject">
<el-switch :value="frontend.pleroma_fe.collapseMessageWithSubject" @change="processNestedData($event, 'frontend_configurations', 'pleroma_fe', 'collapseMessageWithSubject')"/>
<p class="expl">When a message has a subject (aka Content Warning), collapse it by default</p>
</el-form-item>
<el-form-item label="Scope copy">
<el-switch :value="frontend.pleroma_fe.scopeCopy" @change="processNestedData($event, 'frontend_configurations', 'pleroma_fe', 'scopeCopy')"/>
<p class="expl">Copy the scope <span class="code">(private/unlisted/public)</span> in replies to posts by default</p>
</el-form-item>
<el-form-item label="Subject line behavior">
<el-select :value="frontend.pleroma_fe.subjectLineBehavior" clearable @change="processNestedData($event, 'frontend_configurations', 'pleroma_fe', 'subjectLineBehavior')">
<el-option label="Email" value="email">Email / Copy and preprend re:, as in email</el-option>
<el-option label="Masto" value="masto">Masto / Copy verbatim, as in Mastodon</el-option>
<el-option label="Noop" value="noop">Noop / Don't copy the subject</el-option>
</el-select>
<p class="expl">Allows changing the default behaviour of subject lines in replies</p>
</el-form-item>
<el-form-item label="Post content type">
<el-input :value="frontend.pleroma_fe.postContentType" @input="processNestedData($event, 'frontend_configurations', 'pleroma_fe', 'postContentType')"/>
</el-form-item>
<el-form-item label="Always show subject input">
<el-switch :value="frontend.pleroma_fe.alwaysShowSubjectInput" @change="processNestedData($event, 'frontend_configurations', 'pleroma_fe', 'alwaysShowSubjectInput')"/>
<p class="expl">When set to false, auto-hide the subject field when it's empty</p>
</el-form-item>
<el-form-item label="Hide post statistics">
<el-switch :value="frontend.pleroma_fe.hidePostStats" @change="processNestedData($event, 'frontend_configurations', 'pleroma_fe', 'hidePostStats')"/>
<p class="expl">Hide notices statistics(repeats, favorites, …)</p>
</el-form-item>
<el-form-item label="Hide user statistics">
<el-switch :value="frontend.pleroma_fe.hideUserStats" @change="processNestedData($event, 'frontend_configurations', 'pleroma_fe', 'hideUserStats')"/>
<p class="expl">Hide profile statistics(posts, posts per day, followers, followings, …)</p>
</el-form-item>
<el-form-item label="Login method">
<el-input :value="frontend.pleroma_fe.loginMethod" @input="processNestedData($event, 'frontend_configurations', 'pleroma_fe', 'loginMethod')"/>
</el-form-item>
<el-form-item label="Web push notifications">
<el-switch :value="frontend.pleroma_fe.webPushNotifications" @input="processNestedData($event, 'frontend_configurations', 'pleroma_fe', 'webPushNotifications')"/>
</el-form-item>
<el-form-item label="No attachment links">
<el-switch :value="frontend.pleroma_fe.noAttachmentLinks" @change="processNestedData($event, 'frontend_configurations', 'pleroma_fe', 'noAttachmentLinks')"/>
</el-form-item>
<el-form-item label="NSFW Censor image">
<el-input :value="frontend.pleroma_fe.nsfwCensorImage" @input="processNestedData($event, 'frontend_configurations', 'pleroma_fe', 'nsfwCensorImage')"/>
</el-form-item>
<el-form-item label="Show features panel">
<el-switch :value="frontend.pleroma_fe.showFeaturesPanel" @change="processNestedData($event, 'frontend_configurations', 'pleroma_fe', 'showFeaturesPanel')"/>
</el-form-item>
<el-form-item label="Minimal scopes mode">
<el-switch :value="frontend.pleroma_fe.minimalScopesMode" @change="processNestedData($event, 'frontend_configurations', 'pleroma_fe', 'minimalScopesMode')"/>
</el-form-item>
<div class="line"/>
<el-form-item label="Masto FE:"/>
<el-form-item label="Theme">
<el-select :value="frontend.masto_fe.theme" clearable @change="processNestedData($event, 'frontend_configurations', 'masto_fe', 'theme')">
<el-option
v-for="item in themeOptions"
:key="item.value"
:label="item.label"
:value="item.value"/>
</el-select>
<p class="expl">Which theme to use</p>
</el-form-item>
<el-form-item label="Background">
<el-input :value="frontend.masto_fe.background" @input="processNestedData($event, 'frontend_configurations', 'masto_fe', 'background')"/>
<div class="upload-container">
<p class="text">or</p>
<el-upload
:http-request="sendBackgroundMasto"
:multiple="false"
:show-file-list="false"
action="/api/v1/media">
<el-button size="small" type="primary">Click to upload</el-button>
</el-upload>
</div>
<p class="expl">URL of the background, unless viewing a user profile with a background that is set</p>
</el-form-item>
<el-form-item label="Logo">
<el-input :value="frontend.masto_fe.logo" @input="processNestedData($event, 'frontend_configurations', 'masto_fe', 'logo')"/>
<div class="upload-container">
<p class="text">or</p>
<el-upload
:http-request="sendLogoMasto"
:multiple="false"
:show-file-list="false"
action="/api/v1/media">
<el-button size="small" type="primary">Click to upload</el-button>
</el-upload>
</div>
<p class="expl">URL of the logo</p>
</el-form-item>
<el-form-item label="Logo mask">
<el-switch :value="frontend.masto_fe.logoMask" @change="processNestedData($event, 'frontend_configurations', 'masto_fe', 'logoMask')"/>
<p class="expl">Whether to use only the logo's shape as a mask (true) or as a regular image (false)</p>
</el-form-item>
<el-form-item label="Logo margin (em)">
<el-input-number :value="frontend.masto_fe.logoMargin" :step="0.1" :min="0" size="large" @change="processNestedData($event, 'frontend_configurations', 'masto_fe', 'logoMargin')"/>
<p class="expl">What margin to use around the logo</p>
</el-form-item>
<el-form-item label="Redirect URL">
<el-input :value="frontend.masto_fe.redirectRootNoLogin" @input="processNestedData($event, 'frontend_configurations', 'masto_fe', 'redirectRootNoLogin')"/>
<p class="expl">Relative URL which indicates where to redirect when a user is logged in</p>
</el-form-item>
<el-form-item label="Redirect for anonymous user">
<el-input :value="frontend.masto_fe.redirectRootLogin" @input="processNestedData($event, 'frontend_configurations', 'masto_fe', 'redirectRootLogin')"/>
<p class="expl">Relative URL which indicates where to redirect when a user isn’t logged in</p>
</el-form-item>
<el-form-item label="Show instance panel">
<el-switch :value="frontend.masto_fe.showInstanceSpecificPanel" @change="processNestedData($event, 'frontend_configurations', 'masto_fe', 'showInstanceSpecificPanel')"/>
<p class="expl">Whenether to show the instance’s specific panel</p>
</el-form-item>
<el-form-item label="Scope options enabled">
<el-switch :value="frontend.masto_fe.scopeOptionsEnabled" @change="processNestedData($event, 'frontend_configurations', 'masto_fe', 'scopeOptionsEnabled')"/>
</el-form-item>
<el-form-item label="Formatting options enabled">
<el-switch :value="frontend.masto_fe.formattingOptionsEnabled" @change="processNestedData($event, 'frontend_configurations', 'masto_fe', 'formattingOptionsEnabled')"/>
</el-form-item>
<el-form-item label="Collapse msg with subjects">
<el-switch :value="frontend.masto_fe.collapseMessageWithSubject" @change="processNestedData($event, 'frontend_configurations', 'masto_fe', 'collapseMessageWithSubject')"/>
<p class="expl">When a message has a subject (aka Content Warning), collapse it by default</p>
</el-form-item>
<el-form-item label="Scope copy">
<el-switch :value="frontend.masto_fe.scopeCopy" @change="processNestedData($event, 'frontend_configurations', 'masto_fe', 'scopeCopy')"/>
<p class="expl">Copy the scope <span class="code">(private/unlisted/public)</span> in replies to posts by default</p>
</el-form-item>
<el-form-item label="Subject line behavior">
<el-select :value="frontend.masto_fe.subjectLineBehavior" clearable @change="processNestedData($event, 'frontend_configurations', 'masto_fe', 'subjectLineBehavior')">
<el-option label="Email" value="email">Email / Copy and preprend re:, as in email</el-option>
<el-option label="Masto" value="masto">Masto / Copy verbatim, as in Mastodon</el-option>
<el-option label="Noop" value="noop">Noop / Don't copy the subject</el-option>
</el-select>
<p class="expl">Allows changing the default behaviour of subject lines in replies</p>
</el-form-item>
<el-form-item label="Post content type">
<el-input :value="frontend.masto_fe.postContentType" @input="processNestedData($event, 'frontend_configurations', 'masto_fe', 'postContentType')"/>
</el-form-item>
<el-form-item label="Always show subject input">
<el-switch :value="frontend.masto_fe.alwaysShowSubjectInput" @change="processNestedData($event, 'frontend_configurations', 'masto_fe', 'alwaysShowSubjectInput')"/>
<p class="expl">When set to false, auto-hide the subject field when it's empty</p>
</el-form-item>
<el-form-item label="Hide post statistics">
<el-switch :value="frontend.masto_fe.hidePostStats" @change="processNestedData($event, 'frontend_configurations', 'masto_fe', 'hidePostStats')"/>
<p class="expl">Hide notices statistics(repeats, favorites, …)</p>
</el-form-item>
<el-form-item label="Hide user statistics">
<el-switch :value="frontend.masto_fe.hideUserStats" @change="processNestedData($event, 'frontend_configurations', 'masto_fe', 'hideUserStats')"/>
<p class="expl">Hide profile statistics(posts, posts per day, followers, followings, …)</p>
</el-form-item>
<el-form-item label="Login method">
<el-input :value="frontend.masto_fe.loginMethod" @input="processNestedData($event, 'frontend_configurations', 'masto_fe', 'loginMethod')"/>
</el-form-item>
<el-form-item label="Web push notifications">
<el-switch :value="frontend.masto_fe.webPushNotifications" @input="processNestedData($event, 'frontend_configurations', 'masto_fe', 'webPushNotifications')"/>
</el-form-item>
<el-form-item label="No attachment links">
<el-switch :value="frontend.masto_fe.noAttachmentLinks" @change="processNestedData($event, 'frontend_configurations', 'masto_fe', 'noAttachmentLinks')"/>
</el-form-item>
<el-form-item label="NSFW Censor image">
<el-input :value="frontend.masto_fe.nsfwCensorImage" @input="processNestedData($event, 'frontend_configurations', 'masto_fe', 'nsfwCensorImage')"/>
</el-form-item>
<el-form-item label="Show features panel">
<el-switch :value="frontend.masto_fe.showFeaturesPanel" @change="processNestedData($event, 'frontend_configurations', 'masto_fe', 'showFeaturesPanel')"/>
</el-form-item>
<el-form-item label="Minimal scopes mode">
<el-switch :value="frontend.masto_fe.minimalScopesMode" @change="processNestedData($event, 'frontend_configurations', 'masto_fe', 'minimalScopesMode')"/>
</el-form-item>
</el-form> </el-form>
<div class="line"/> <el-form ref="assetsData" :model="assetsData" :label-width="labelWidth">
<el-form ref="assets" :model="assets" :label-width="labelWidth">
<el-form-item label="Assets:"/> <el-form-item label="Assets:"/>
<el-form-item label="Default mascot"> <setting :settings-group="assets" :data="assetsData"/>
<!-- <el-form-item label="Default mascot">
<el-select :value="assets.default_mascot" clearable @change="updateSetting($event, 'assets', '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 <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> (default: <span class="code">:pleroma_fox_tan</span>)</p>
...@@ -254,61 +26,21 @@ ...@@ -254,61 +26,21 @@
<el-input :value="mimeType" placeholder="Mime type" class="mascot-input" @input="parseMascots($event, 'mimeType', index)"/> <el-input :value="mimeType" placeholder="Mime type" class="mascot-input" @input="parseMascots($event, 'mimeType', index)"/>
</div> </div>
<el-button icon="el-icon-plus" circle @click="addRowToMascots"/> <el-button icon="el-icon-plus" circle @click="addRowToMascots"/>
</el-form-item> </el-form-item> -->
</el-form> </el-form>
<div class="line"/> <div class="line"/>
<el-form ref="emoji" :model="emoji" :label-width="labelWidth"> <el-form ref="emojiData" :model="emojiData" :label-width="labelWidth">
<el-form-item label="Emoji:"/> <el-form-item label="Emoji:"/>
<el-form-item label="Location of emoji files"> <setting :settings-group="emoji" :data="emojiData"/>
<el-select :value="emoji.shortcode_globs || []" multiple filterable allow-create @change="updateSetting($event, 'emoji', 'shortcode_globs')">
<el-option label="/emoji/custom/**/*.png" value="/emoji/custom/**/*.png"/>
</el-select>
<p class="expl">Location of custom emoji files. <span class="code">*</span> can be used as a wildcard.</p>
</el-form-item>
<el-form-item label="Pack extensions">
<el-select :value="emoji.pack_extensions || []" multiple filterable allow-create @change="updateSetting($event, 'emoji', 'pack_extensions')"/>
<p class="expl">A list of file extensions for emojis, when no <span class="code">emoji.txt</span> for a pack is present. </p>
</el-form-item>
<el-form-item label="Group">
<div v-for="([key, value], index) in groups" :key="index" class="setting-input">
<el-input :value="key" placeholder="key" class="name-input" @input="parseGroups($event, 'key', index)"/> :
<el-select :value="value" multiple filterable allow-create class="value-input" @change="parseGroups($event, 'value', index)"/>
<el-button icon="el-icon-minus" circle @click="deleteGroupsRow(index)"/>
</div>
<el-button icon="el-icon-plus" circle @click="addRowToGroups"/>
</el-form-item>
<el-form-item label="Location of JSON-manifest">
<el-input :value="emoji.default_manifest" @input="updateSetting($event, 'emoji', 'default_manifest')"/>
<p class="expl">Location of the JSON-manifest. This manifest contains information about the emoji-packs you can download. Currently only one manifest can be added (no arrays).</p>
</el-form-item>
</el-form> </el-form>
<div class="line"/> <div class="line"/>
<el-form ref="chat" :model="chat" :label-width="labelWidth"> <el-form ref="chatData" :model="chatData" :label-width="labelWidth">
<el-form-item label="Chat enabled"> <setting :settings-group="chat" :data="chatData"/>
<el-switch :value="chat.enabled" @input="updateSetting($event, 'chat', 'enabled')"/>
</el-form-item>
</el-form> </el-form>
<div class="line"/> <div class="line"/>
<el-form ref="markup" :model="markup" :label-width="labelWidth"> <el-form ref="markupData" :model="markupData" :label-width="labelWidth">
<el-form-item label="Markup settings:"/> <el-form-item label="Markup settings:"/>
<el-form-item label="Allow inline images"> <setting :settings-group="markup" :data="markupData"/>
<el-switch :value="markup.allow_inline_images" @input="updateSetting($event, 'markup', 'allow_inline_images')"/>
</el-form-item>
<el-form-item label="Allow headings">
<el-switch :value="markup.allow_headings" @input="updateSetting($event, 'markup', 'allow_headings')"/>
</el-form-item>
<el-form-item label="Allow tables">
<el-switch :value="markup.allow_tables" @input="updateSetting($event, 'markup', 'allow_tables')"/>
</el-form-item>
<el-form-item label="Allow fonts">
<el-switch :value="markup.allow_fonts" @input="updateSetting($event, 'markup', 'allow_fonts')"/>
</el-form-item>
<el-form-item label="Scrub policy">
<el-select :value="markup.scrub_policy || []" multiple filterable allow-create @change="updateSetting($event, 'markup', 'scrub_policy')">
<el-option label="Pleroma.HTML.Transform.MediaProxy" value="Pleroma.HTML.Transform.MediaProxy"/>
<el-option label="Pleroma.HTML.Scrubber.Default" value="Pleroma.HTML.Scrubber.Default"/>
</el-select>
</el-form-item>
<el-form-item> <el-form-item>
<el-button type="primary" @click="onSubmit">Submit</el-button> <el-button type="primary" @click="onSubmit">Submit</el-button>
</el-form-item> </el-form-item>
...@@ -319,103 +51,90 @@ ...@@ -319,103 +51,90 @@
<script> <script>
import { mapGetters } from 'vuex' import { mapGetters } from 'vuex'
import i18n from '@/lang' import i18n from '@/lang'
import { options } from './options' import Setting from './Setting'
export default { export default {
name: 'Frontend', name: 'Frontend',
components: { Setting },
computed: { computed: {
...mapGetters([ ...mapGetters([
'assets', 'settings'
'frontend',
'emoji',
'chat',
'markup'
]), ]),
groups() { assets() {
return Object.keys(this.emoji.groups).map(key => [key, this.emoji.groups[key]]) return this.settings.description.find(setting => setting.key === ':assets')
}, },
mascots() { assetsData() {
return Object.keys(this.assets.mascots) return this.settings.settings[':assets']
.map(mascotName =>
[mascotName, this.assets.mascots[mascotName].url, this.assets.mascots[mascotName].mime_type])
}, },
themeOptions() { chat() {
return options.themeOptions return this.settings.description.find(setting => setting.key === ':chat')
}, },
isMobile() { chatData() {
return this.$store.state.app.device === 'mobile' return this.settings.settings[':chat']
}, },
labelWidth() { emoji() {
return this.isMobile ? '100px' : '210px' return this.settings.description.find(setting => setting.key === ':emoji')
}
},
methods: {
addRowToGroups() {
const updatedValue = this.groups.reduce((acc, el, i) => {
return { ...acc, [el[0]]: el[1] }
}, {})
this.updateSetting({ ...updatedValue, '': [] }, 'emoji', 'groups')
}, },
addRowToMascots() { emojiData() {
const updatedValue = this.mascots.reduce((acc, el, i) => { return this.settings.settings[':emoji']
return { ...acc, [el[0]]: { url: el[1], mime_type: el[2] }}
}, {})
this.updateSetting({ ...updatedValue, '': { url: '', mime_type: '' }}, 'assets', 'mascots')
}, },
deleteGroupsRow(index) { frontend() {
const filteredValues = this.groups.filter((el, i) => index !== i) return this.settings.description.find(setting => setting.key === ':frontend_configurations')
const updatedValue = filteredValues.reduce((acc, el, i) => {
return { ...acc, [el[0]]: el[1] }
}, {})
this.updateSetting(updatedValue, 'emoji', 'groups')
}, },
deleteMascotsRow(index) { frontendData() {
const filteredValues = this.mascots.filter((el, i) => index !== i) return this.settings.settings[':frontend_configurations']
const updatedValue = filteredValues.reduce((acc, el, i) => {
return { ...acc, [el[0]]: { url: el[1], mime_type: el[2] }}
}, {})
this.updateSetting(updatedValue, 'assets', 'mascots')
}, },
parseGroups(value, inputType, index) { markup() {
const updatedValue = this.groups.reduce((acc, el, i) => { return this.settings.description.find(setting => setting.key === ':markup')
if (index === i) {
return inputType === 'key' ? { ...acc, [value]: el[1] } : { ...acc, [el[0]]: value }
}
return { ...acc, [el[0]]: el[1] }
}, {})
this.updateSetting(updatedValue, 'emoji', 'groups')
}, },
parseMascots(value, inputType, index) { markupData() {
const updatedValue = this.mascots.reduce((acc, el, i) => { return this.settings.settings[':markup']
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')
}, },
processNestedData(value, tab, inputName, childName) { // mascots() {
const updatedValue = { ...this.$store.state.settings.settings[tab][inputName], ...{ [childName]: value }} // return Object.keys(this.assets.mascots)
this.updateSetting(updatedValue, tab, inputName) // .map(mascotName =>
}, // [mascotName, this.assets.mascots[mascotName].url, this.assets.mascots[mascotName].mime_type])
sendBackgroundMasto({ file }) { // },
this.$store.dispatch('UploadMedia', { file, tab: 'frontend_configurations', inputName: 'masto_fe', childName: 'background' }) isMobile() {
}, return this.$store.state.app.device === 'mobile'
sendBackgroundPleroma({ file }) {
this.$store.dispatch('UploadMedia', { file, tab: 'frontend_configurations', inputName: 'pleroma_fe', childName: 'background' })
},
sendLogoMasto({ file }) {
this.$store.dispatch('UploadMedia', { file, tab: 'frontend_configurations', inputName: 'masto_fe', childName: 'logo' })
}, },
sendLogoPleroma({ file }) { labelWidth() {
this.$store.dispatch('UploadMedia', { file, tab: 'frontend_configurations', inputName: 'pleroma_fe', childName: 'logo' }) return this.isMobile ? '100px' : '240px'
}, },
loading() {
return this.settings.loading
}
},
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) { updateSetting(value, tab, input) {
this.$store.dispatch('UpdateSettings', { tab, data: { [input]: value }}) this.$store.dispatch('UpdateSettings', { tab, data: { [input]: value }})
}, },
......
src/views/settings/components/Inputs.vue
+ 41
− 0
View file @ 755cfd8f
...@@ -69,6 +69,14 @@ ...@@ -69,6 +69,14 @@
@input="updateSetting($event, settingsGroup.key, setting.key)"> @input="updateSetting($event, settingsGroup.key, setting.key)">
<template slot="prepend">:</template> <template slot="prepend">:</template>
</el-input> </el-input>
<div v-if="editableKeyword(setting.type)">
<div v-for="([key, value], index) in editableKeywordData(data)" :key="index" class="setting-input">
<el-input :value="key" placeholder="key" class="name-input" @input="parseEditableKeyword($event, 'key', index)"/> :
<el-select :value="value" multiple filterable allow-create class="value-input" @change="parseEditableKeyword($event, 'value', index)"/>
<el-button icon="el-icon-minus" circle @click="deleteEditableKeywordRow(index)"/>
</div>
<el-button icon="el-icon-plus" circle @click="addRowToEditableKeyword"/>
</div>
<p class="expl">{{ setting.description }}</p> <p class="expl">{{ setting.description }}</p>
</el-form-item> </el-form-item>
</template> </template>
...@@ -114,6 +122,39 @@ export default { ...@@ -114,6 +122,39 @@ export default {
} }
}, },
methods: { methods: {
addRowToEditableKeyword() {
console.log(this.settingsGroup.key, this.setting.key)
const updatedValue = this.editableKeywordData(this.data).reduce((acc, el, i) => {
return { ...acc, [el[0]]: el[1] }
}, {})
this.updateSetting({ ...updatedValue, '': [] }, this.settingsGroup.key, this.setting.key)
},
deleteEditableKeywordRow(index) {
const filteredValues = this.editableKeywordData(this.data).filter((el, i) => index !== i)
const updatedValue = filteredValues.reduce((acc, el, i) => {
return { ...acc, [el[0]]: el[1] }
}, {})
console.log(updatedValue)
this.updateSetting(updatedValue, this.settingsGroup.key, this.setting.key)
},
editableKeyword(type) {
return Array.isArray(type)
? type.includes('keyword') && type.findIndex(el => el.includes('list') && el.includes('string')) !== -1
: false
},
editableKeywordData(data) {
return Object.keys(data).map(key => [key, data[key]])
},
parseEditableKeyword(value, inputType, index) {
const updatedValue = this.editableKeywordData(this.data).reduce((acc, el, i) => {
if (index === i) {
return inputType === 'key' ? { ...acc, [value]: el[1] } : { ...acc, [el[0]]: value }
}
return { ...acc, [el[0]]: el[1] }
}, {})
console.log(updatedValue)
this.updateSetting(updatedValue, this.settingsGroup.key, this.setting.key)
},
processNestedData(value, tab, inputName, childName) { processNestedData(value, tab, inputName, childName) {
const updatedValue = { ...this.$store.state.settings.settings[tab][inputName], ...{ [childName]: value }} const updatedValue = { ...this.$store.state.settings.settings[tab][inputName], ...{ [childName]: value }}
this.updateSetting(updatedValue, tab, inputName) this.updateSetting(updatedValue, tab, inputName)
......
src/views/settings/components/Setting.vue
+ 3
− 0
View file @ 755cfd8f
...@@ -12,6 +12,9 @@ ...@@ -12,6 +12,9 @@
<div v-for="subSetting in setting.children" :key="subSetting.key"> <div v-for="subSetting in setting.children" :key="subSetting.key">
<inputs :settings-group="setting" :setting="subSetting" :data="data[setting.key]"/> <inputs :settings-group="setting" :setting="subSetting" :data="data[setting.key]"/>
</div> </div>
<div v-if="!setting.children">
<inputs :settings-group="settingsGroup" :setting="setting" :data="data[setting.key]"/>
</div>
<div class="line"/> <div class="line"/>
</div> </div>
</div> </div>
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment