Render Metadata tab with data from description API

This commit is contained in:
Angelina Filippova 2019-11-17 14:23:48 +09:00
parent 7811827cdc
commit 2f733043c6
3 changed files with 22 additions and 49 deletions

View file

@ -32,7 +32,7 @@ export default {
return this.isMobile ? '100px' : '240px' return this.isMobile ? '100px' : '240px'
}, },
loading() { loading() {
return this.$store.state.settings.loading return this.settings.loading
} }
}, },
methods: { methods: {

View file

@ -1,48 +1,11 @@
<template> <template>
<div v-if="!loading"> <div v-if="!loading">
<el-form ref="metadata" :model="metadata" :label-width="labelWidth"> <el-form ref="metadata" :model="metadataData" :label-width="labelWidth">
<el-form-item label="Providers"> <setting :setting-group="metadata" :data="metadataData"/>
<el-select :value="metadata.providers || []" multiple filterable allow-create @change="updateSetting($event, 'Pleroma.Web.Metadata', 'providers')">
<el-option value="Pleroma.Web.Metadata.Providers.OpenGraph"/>
<el-option value="Pleroma.Web.Metadata.Providers.TwitterCard"/>
<el-option value="Pleroma.Web.Metadata.Providers.RelMe"/>
</el-select>
<p class="expl">A list of metadata providers to enable.</p>
</el-form-item>
<el-form-item label="Unfurl NSFW">
<el-switch :value="metadata.unfurl_nsfw" @change="updateSetting($event, 'Pleroma.Web.Metadata', 'unfurl_nsfw')"/>
<p class="expl">If set to true nsfw attachments will be shown in previews.</p>
</el-form-item>
</el-form> </el-form>
<div class="line"/> <div class="line"/>
<el-form ref="richMedia" :model="richMedia" :label-width="labelWidth"> <el-form ref="richMedia" :model="richMediaData" :label-width="labelWidth">
<el-form-item label="Rich media:"/> <setting :setting-group="richMedia" :data="richMediaData"/>
<el-form-item label="Enabled">
<el-switch :value="richMedia.enabled" @change="updateSetting($event, 'rich_media', 'enabled')"/>
<p class="expl">If enabled the instance will parse metadata from attached links to generate link previews.</p>
</el-form-item>
<el-form-item label="Ignore hosts">
<el-select :value="richMedia.ignore_hosts || []" multiple filterable allow-create @change="updateSetting($event, 'rich_media', 'ignore_hosts')"/>
<p class="expl">List of hosts which will be ignored by the metadata parser.</p>
</el-form-item>
<el-form-item label="Ignore TLD">
<el-select :value="richMedia.ignore_tld || []" multiple filterable allow-create @change="updateSetting($event, 'rich_media', 'ignore_tld')"/>
<p class="expl">List TLDs (top-level domains) which will ignore for parse metadata.
Default is <span class="code">["local", "localdomain", "lan"]</span></p>
</el-form-item>
<el-form-item label="Parsers">
<el-select :value="richMedia.parsers || []" multiple filterable allow-create @change="updateSetting($event, 'rich_media', 'parsers')">
<el-option value="Pleroma.Web.RichMedia.Parsers.TwitterCard"/>
<el-option value="Pleroma.Web.RichMedia.Parsers.OGP"/>
<el-option value="Pleroma.Web.RichMedia.Parsers.OEmbed"/>
</el-select>
<p class="expl">List of Rich Media parsers</p>
</el-form-item>
<el-form-item label="TTL Setters">
<el-select :value="richMedia.ttl_setters || []" multiple filterable allow-create @change="updateSetting($event, 'rich_media', 'ttl_setters')">
<el-option value="Pleroma.Web.RichMedia.Parser.TTL.AwsSignedUrl"/>
</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>
@ -53,13 +16,14 @@
<script> <script>
import { mapGetters } from 'vuex' import { mapGetters } from 'vuex'
import i18n from '@/lang' import i18n from '@/lang'
import Setting from './Setting'
export default { export default {
name: 'Metadata', name: 'Metadata',
components: { Setting },
computed: { computed: {
...mapGetters([ ...mapGetters([
'metadata', 'settings'
'richMedia'
]), ]),
isMobile() { isMobile() {
return this.$store.state.app.device === 'mobile' return this.$store.state.app.device === 'mobile'
@ -68,13 +32,22 @@ export default {
return this.isMobile ? '100px' : '240px' return this.isMobile ? '100px' : '240px'
}, },
loading() { loading() {
return this.$store.state.settings.loading return this.settings.loading
},
metadata() {
return this.settings.description.find(setting => setting.key === 'Pleroma.Web.Metadata')
},
metadataData() {
return this.settings.settings['Pleroma.Web.Metadata']
},
richMedia() {
return this.settings.description.find(setting => setting.key === ':rich_media')
},
richMediaData() {
return this.settings.settings[':rich_media']
} }
}, },
methods: { methods: {
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')

View file

@ -26,7 +26,7 @@ export default {
return this.isMobile ? '100px' : '240px' return this.isMobile ? '100px' : '240px'
}, },
loading() { loading() {
return this.$store.state.settings.loading return this.settings.loading
}, },
vapidDetails() { vapidDetails() {
return this.settings.description.find(setting => setting.key === ':vapid_details') return this.settings.description.find(setting => setting.key === ':vapid_details')