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

Rename settingGroup prop and add one more prop for settingparent

Browse source
This commit is contained in:
Angelina Filippova 2019-11-15 00:49:35 +09:00
parent 915c7449dd
commit f303c85238
14 changed files with 75 additions and 171 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/views/settings/components/ActivityPub.vue
View file

@ -1,11 +1,11 @@
<template>
<div v-if="!loading">
<el-form ref="activitypubData" :model="activitypubData" :label-width="labelWidth">
<setting :settings-group="activitypub" :data="activitypubData"/>
<setting :setting-group="activitypub" :data="activitypubData"/>
</el-form>
<div class="line"/>
<el-form ref="userData" :model="userData" :label-width="labelWidth">
<setting :settings-group="user" :data="userData"/>
<setting :setting-group="user" :data="userData"/>
<el-form-item>
<el-button type="primary" @click="onSubmit">Submit</el-button>
</el-form-item>

8
src/views/settings/components/Authentication.vue
View file

@ -1,19 +1,19 @@
<template>
<div v-if="!loading">
<el-form ref="pleromaAuthenticatorData" :model="pleromaAuthenticatorData" :label-width="labelWidth">
<setting :settings-group="pleromaAuthenticator" :data="pleromaAuthenticatorData"/>
<setting :setting-group="pleromaAuthenticator" :data="pleromaAuthenticatorData"/>
</el-form>
<div class="line"/>
<el-form ref="authData" :model="authData" :label-width="labelWidth">
<setting :settings-group="auth" :data="authData"/>
<setting :setting-group="auth" :data="authData"/>
</el-form>
<div class="line"/>
<el-form ref="ldapData" :model="ldapData" :label-width="labelWidth">
<setting :settings-group="ldap" :data="ldapData"/>
<setting :setting-group="ldap" :data="ldapData"/>
</el-form>
<div class="line"/>
<el-form ref="oauth2" :model="oauth2Data" :label-width="labelWidth">
<setting :settings-group="oauth2" :data="oauth2Data"/>
<setting :setting-group="oauth2" :data="oauth2Data"/>
<el-form-item>
<el-button type="primary" @click="onSubmit">Submit</el-button>
</el-form-item>

4
src/views/settings/components/Captcha.vue
View file

@ -1,11 +1,11 @@
<template>
<div v-if="!loading">
<el-form ref="captchaData" :model="captchaData" :label-width="labelWidth">
<setting :settings-group="captcha" :data="captchaData"/>
<setting :setting-group="captcha" :data="captchaData"/>
</el-form>
<div class="line"/>
<el-form ref="kocaptchaData" :model="kocaptchaData" :label-width="labelWidth">
<setting :settings-group="kocaptcha" :data="kocaptchaData"/>
<setting :setting-group="kocaptcha" :data="kocaptchaData"/>
<el-form-item>
<el-button type="primary" @click="onSubmit">Submit</el-button>
</el-form-item>

113
src/views/settings/components/Database.vue
View file

@ -1,119 +1,11 @@
<template>
<div v-if="!loading">
<el-form ref="databaseData" :model="databaseData" :label-width="labelWidth">
<setting :settings-group="database" :data="databaseData"/>
<setting :setting-group="database" :data="databaseData"/>
<el-form-item>
<el-button type="primary" @click="onSubmit">Submit</el-button>
</el-form-item>
</el-form>
<div class="line"/>
<!-- <el-form ref="ectoRepos" :model="ectoRepos" :label-width="labelWidth">
<el-form-item label="Ecto repos">
<el-select :value="ectoRepos.value || []" multiple filterable allow-create @change="updateSetting($event, 'ecto_repos', 'value')">
<el-option label="Pleroma.Repo" value="Pleroma.Repo"/>
</el-select>
</el-form-item>
</el-form> -->
<!-- <div class="line"/>
<el-form ref="pleromaRepo" :model="pleromaRepo" :label-width="labelWidth">
<el-form-item label="Pleroma Repo configuration:"/>
<el-form-item label="Name">
<el-input :value="pleromaRepo.name" @input="updateSetting($event, 'Pleroma.Repo', 'name')"/>
<p class="expl">The name of the Repo supervisor process</p>
</el-form-item>
<el-form-item label="Priv">
<el-input :value="pleromaRepo.priv" @input="updateSetting($event, 'Pleroma.Repo', 'priv')"/>
<p class="expl">The directory where to keep repository data, like migrations, schema and more. Defaults to <span class="code">
priv/YOUR_REPO</span>. It must always point to a subdirectory inside the priv directory</p>
</el-form-item>
<el-form-item label="URL">
<el-input :value="pleromaRepo.url" @input="updateSetting($event, 'Pleroma.Repo', 'url')"/>
<p class="expl">An URL that specifies storage information</p>
</el-form-item>
<el-form-item label="Log level">
<el-select :value="pleromaRepo.log" clearable @change="updateSetting($event, 'Pleroma.Repo', 'log')">
<el-option :value="false" label="False - disables logging for that repository."/>
<el-option value=":debug" label=":debug - for debug-related messages"/>
<el-option value=":info" label=":info - for information of any kind"/>
<el-option value=":warn" label=":warn - for warnings"/>
<el-option value=":error" label=":error - for errors"/>
</el-select>
<p class="expl">The log level used when logging the query with Elixir's Logger</p>
</el-form-item>
<el-form-item label="Pool size">
<el-input-number :value="pleromaRepo.pool_size" :step="1" :min="0" size="large" @change="updateSetting($event, 'Pleroma.Repo', 'pool_size')"/>
<p class="expl">The size of the pool used by the connection module. Defaults to <span class="code">10</span></p>
</el-form-item>
<el-form-item label="Telemetry prefix">
<el-select :value="pleromaRepo.telemetry_prefix || []" multiple filterable allow-create @change="updateSetting($event, 'Pleroma.Repo', 'telemetry_prefix')">
<el-option label=":my_app" value=":my_app"/>
<el-option label=":repo" value=":repo"/>
<el-option label=":query" value=":query"/>
</el-select>
</el-form-item>
<el-form-item label="Types">
<el-input :value="pleromaRepo.types" @input="updateSetting($event, 'Pleroma.Repo', 'types')"/>
</el-form-item>
<el-form-item label="Telemetry event">
<el-select :value="pleromaRepo.telemetry_event || []" multiple filterable allow-create @change="updateSetting($event, 'Pleroma.Repo', 'telemetry_event')">
<el-option label="Pleroma.Repo.Instrumenter" value="Pleroma.Repo.Instrumenter"/>
</el-select>
</el-form-item>
<el-form-item label="Connection options:"/>
<el-form-item label="Hostname">
<el-input :value="pleromaRepo.hostname" @input="updateSetting($event, 'Pleroma.Repo', 'hostname')"/>
<p class="expl">Server hostname</p>
</el-form-item>
<el-form-item label="Socket dir">
<el-input :value="pleromaRepo.socket_dir" @input="updateSetting($event, 'Pleroma.Repo', 'socket_dir')"/>
<p class="expl">Connect to Postgres via UNIX sockets in the given directory. The socket name is derived based on the port.
This is the preferred method for configuring sockets and it takes precedence over the hostname.
If you are connecting to a socket outside of the Postgres convention, use <span class="code">:socket</span> instead.</p>
</el-form-item>
<el-form-item label="Socket">
<el-input :value="pleromaRepo.socket" @input="updateSetting($event, 'Pleroma.Repo', 'socket')"/>
<p class="expl">Connect to Postgres via UNIX sockets in the given path. This option takes precedence over the
<span class="code">:hostname</span> and <span class="code">:socket_dir</span></p>
</el-form-item>
<el-form-item label="Username">
<el-input :value="pleromaRepo.username" @input="updateSetting($event, 'Pleroma.Repo', 'username')"/>
</el-form-item>
<el-form-item label="Password">
<el-input :value="pleromaRepo.password" @input="updateSetting($event, 'Pleroma.Repo', 'password')"/>
</el-form-item>
<el-form-item label="Port">
<el-input :value="pleromaRepo.port" @input="updateSetting($event, 'Pleroma.Repo', 'port')"/>
<p class="expl">Server port (default: 5432)</p>
</el-form-item>
<el-form-item label="Database">
<el-input :value="pleromaRepo.database" @input="updateSetting($event, 'Pleroma.Repo', 'database')"/>
<p class="expl">The database to connect to</p>
</el-form-item>
<el-form-item label="Maintenance database">
<el-input :value="pleromaRepo.maintenance_database" @input="updateSetting($event, 'Pleroma.Repo', 'maintenance_database')"/>
<p class="expl">Specifies the name of the database to connect to when creating or dropping the database. Defaults to "postgres"</p>
</el-form-item>
<el-form-item label="Pool">
<el-input :value="pleromaRepo.pool" @input="updateSetting($event, 'Pleroma.Repo', 'pool')"/>
<p class="expl">The connection pool module, defaults to <span class="code">DBConnection.ConnectionPool</span></p>
</el-form-item>
<el-form-item label="SSL">
<el-switch :value="pleromaRepo.ssl" @change="updateSetting($event, 'Pleroma.Repo', 'ssl')"/>
<p class="expl">Set to true if ssl should be used</p>
</el-form-item>
<el-form-item label="Connect timeout">
<el-input-number :value="pleromaRepo.connect_timeout" :step="1000" :min="0" size="large" @change="updateSetting($event, 'Pleroma.Repo', 'connect_timeout')"/>
<p class="expl">The timeout for establishing new connections. Defaults to 5000</p>
</el-form-item>
<el-form-item label="Prepare">
<el-select :value="pleromaRepo.prepare" clearable @change="updateSetting($event, 'Pleroma.Repo', 'prepare')">
<el-option label="named" value=":named"/>
<el-option label="unnamed" value=":unnamed"/>
</el-select>
<p class="expl">How to prepare queries, either <span class="code">:named</span> to use named queries or
<span class="code">:unnamed</span> to force unnamed queries (default: :named)</p>
</el-form-item>
</el-form> -->
</div>
</template>
@ -146,9 +38,6 @@ export default {
}
},
methods: {
updateSetting(value, tab, input) {
this.$store.dispatch('UpdateSettings', { tab, data: { [input]: value }})
},
async onSubmit() {
try {
await this.$store.dispatch('SubmitChanges')

2
src/views/settings/components/Endpoint.vue
View file

@ -1,6 +1,6 @@
<template>
<el-form v-if="!loading" ref="endpointData" :model="endpointData" :label-width="labelWidth">
<setting :settings-group="endpoint" :data="endpointData"/>
<setting :setting-group="endpoint" :data="endpointData"/>
<div class="line"/>
<el-form-item class="options-paragraph-container">
<p class="options-paragraph">Only common options are listed here. You can add more (all configuration options can be viewed

2
src/views/settings/components/Esshd.vue
View file

@ -1,7 +1,7 @@
<template>
<div v-if="!loading">
<el-form ref="esshdData" :model="esshdData" :label-width="labelWidth">
<setting :settings-group="esshd" :data="esshdData"/>
<setting :setting-group="esshd" :data="esshdData"/>
<el-form-item>
<p class="expl">Feel free to adjust the priv_dir and port number.
Then you will have to create the key for the keys (in the example <span class="code">priv/ssh_keys</span>) and create the host keys with

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

@ -6,11 +6,11 @@
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>
</el-form-item>
<setting :settings-group="frontend" :data="frontendData"/>
<setting :setting-group="frontend" :data="frontendData"/>
</el-form>
<el-form ref="assetsData" :model="assetsData" :label-width="labelWidth">
<el-form-item label="Assets:"/>
<setting :settings-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
@ -31,16 +31,16 @@
<div class="line"/>
<el-form ref="emojiData" :model="emojiData" :label-width="labelWidth">
<el-form-item label="Emoji:"/>
<setting :settings-group="emoji" :data="emojiData"/>
<setting :setting-group="emoji" :data="emojiData"/>
</el-form>
<div class="line"/>
<el-form ref="chatData" :model="chatData" :label-width="labelWidth">
<setting :settings-group="chat" :data="chatData"/>
<setting :setting-group="chat" :data="chatData"/>
</el-form>
<div class="line"/>
<el-form ref="markupData" :model="markupData" :label-width="labelWidth">
<el-form-item label="Markup settings:"/>
<setting :settings-group="markup" :data="markupData"/>
<setting :setting-group="markup" :data="markupData"/>
<el-form-item>
<el-button type="primary" @click="onSubmit">Submit</el-button>
</el-form-item>

6
src/views/settings/components/Http.vue
View file

@ -1,15 +1,15 @@
<template>
<div v-if="!loading">
<el-form ref="httpData" :model="httpData" :label-width="labelWidth">
<setting :settings-group="http" :data="httpData"/>
<setting :setting-group="http" :data="httpData"/>
</el-form>
<el-form ref="corsPlugData" :model="corsPlugData" :label-width="labelWidth">
<el-form-item label="Cors plug config:"/>
<setting :settings-group="corsPlug" :data="corsPlugData"/>
<setting :setting-group="corsPlug" :data="corsPlugData"/>
</el-form>
<div class="line"/>
<el-form ref="httpSecurityData" :model="httpSecurityData" :label-width="labelWidth">
<setting :settings-group="httpSecurity" :data="httpSecurityData"/>
<setting :setting-group="httpSecurity" :data="httpSecurityData"/>
</el-form>
<div class="line"/>
<el-form ref="hackneyPoolsData" :model="hackneyPoolsData" :label-width="labelWidth">

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

@ -4,11 +4,11 @@
v-if="setting.type === 'string'"
:value="data[setting.key]"
:placeholder="setting.suggestions[0]"
@input="updateSetting($event, settingsGroup.key, setting.key)"/>
@input="updateSetting($event, settingGroup.key, setting.key)"/>
<el-switch
v-if="setting.type === 'boolean'"
:value="data[setting.key]"
@change="updateSetting($event, settingsGroup.key, setting.key)"/>
@change="updateSetting($event, settingGroup.key, setting.key)"/>
<el-input-number
v-if="setting.type === 'integer'"
:value="data[setting.key]"
@ -16,12 +16,12 @@
:min="0"
size="large"
class="top-margin"
@change="updateSetting($event, settingsGroup.key, setting.key)"/>
@change="updateSetting($event, settingGroup.key, setting.key)"/>
<el-select
v-if="setting.type === 'module' || (setting.type.includes('atom') && setting.type.includes(false))"
:value="data[setting.key]"
clearable
@change="updateSetting($event, settingsGroup.key, setting.key)">
@change="updateSetting($event, settingGroup.key, setting.key)">
<el-option
v-for="(option, index) in setting.suggestions"
:value="option"
@ -33,7 +33,7 @@
multiple
filterable
allow-create
@change="updateSetting($event, settingsGroup.key, setting.key)">
@change="updateSetting($event, settingGroup.key, setting.key)">
<el-option v-for="(option, index) in setting.suggestions" :key="index" :value="option"/>
</el-select>
<editor
@ -50,12 +50,12 @@
v-if="setting.type === 'tuple'"
:placeholder="setting.key === ':ip' ? 'xxx.xxx.xxx.xx' : setting.suggestions[0]"
:value="data[setting.key]"
@input="updateSetting($event, settingsGroup.key, setting.key)"/>
@input="updateSetting($event, settingGroup.key, setting.key)"/>
<el-input
v-if="setting.type === 'atom'"
:value="data[setting.key]"
:placeholder="setting.suggestions[0]"
@input="updateSetting($event, settingsGroup.key, setting.key)">
@input="updateSetting($event, settingGroup.key, setting.key)">
<template slot="prepend">:</template>
</el-input>
<div v-if="editableKeywordWithSelect(setting.type)">
@ -87,7 +87,7 @@
placeholder="1500"
size="large"
class="top-margin"
@change="updateSetting($event, settingsGroup.key, setting.key)"/>
@change="updateSetting($event, settingGroup.key, setting.key)"/>
</el-form-item>
<el-form-item v-if="prune === ':maxage'" label="max age" label-width="100" label-position="left">
<el-input-number
@ -96,7 +96,7 @@
placeholder="3600"
size="large"
class="top-margin"
@change="updateSetting($event, settingsGroup.key, setting.key)"/>
@change="updateSetting($event, settingGroup.key, setting.key)"/>
</el-form-item>
</div>
<p class="expl">{{ setting.description }}</p>
@ -114,12 +114,6 @@ export default {
editor: AceEditor
},
props: {
settingsGroup: {
type: Object,
default: function() {
return {}
}
},
data: {
type: Object || Array,
default: function() {
@ -131,6 +125,19 @@ export default {
default: function() {
return {}
}
},
settingGroup: {
type: Object,
default: function() {
return {}
}
},
settingParent: {
type: Object,
default: function() {
return {}
},
required: false
}
},
computed: {
@ -139,7 +146,7 @@ export default {
return this.data[this.setting.key] ? this.data[this.setting.key][0] : ''
},
set: function(value) {
this.processNestedData([value], this.settingsGroup.key, this.setting.key, this.data[this.setting.key])
this.processNestedData([value], this.settingGroup.key, this.setting.key, this.data[this.setting.key])
}
},
prune() {
@ -150,11 +157,11 @@ export default {
},
methods: {
addRowToEditableKeyword() {
console.log(this.settingsGroup.key, this.setting.key)
console.log(this.settingGroup.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)
this.updateSetting({ ...updatedValue, '': [] }, this.settingGroup.key, this.setting.key)
},
deleteEditableKeywordRow(index) {
const filteredValues = this.editableKeywordData(this.data).filter((el, i) => index !== i)
@ -162,7 +169,7 @@ export default {
return { ...acc, [el[0]]: el[1] }
}, {})
console.log(updatedValue)
this.updateSetting(updatedValue, this.settingsGroup.key, this.setting.key)
this.updateSetting(updatedValue, this.settingGroup.key, this.setting.key)
},
editableKeywordWithInteger(type) {
return Array.isArray(type)
@ -185,7 +192,7 @@ export default {
return { ...acc, [el[0]]: el[1] }
}, {})
console.log(updatedValue)
this.updateSetting(updatedValue, this.settingsGroup.key, this.setting.key)
this.updateSetting(updatedValue, this.settingGroup.key, this.setting.key)
},
processNestedData(value, tab, inputName, childName) {
const updatedValue = { ...this.$store.state.settings.settings[tab][inputName], ...{ [childName]: value }}

14
src/views/settings/components/Instance.vue
View file

@ -1,32 +1,32 @@
<template>
<div v-if="!loading">
<el-form ref="instanceData" :model="instanceData" :label-width="labelWidth">
<setting :settings-group="instance" :data="instanceData"/>
<setting :setting-group="instance" :data="instanceData"/>
</el-form>
<div class="line"/>
<el-form ref="uriSchemesData" :model="uriSchemesData" :label-width="labelWidth">
<setting :settings-group="uriSchemes" :data="uriSchemesData"/>
<setting :setting-group="uriSchemes" :data="uriSchemesData"/>
</el-form>
<div class="line"/>
<el-form ref="adminTokenData" :model="adminTokenData" :label-width="labelWidth">
<setting :settings-group="adminToken" :data="adminTokenData"/>
<setting :setting-group="adminToken" :data="adminTokenData"/>
</el-form>
<div class="line"/>
<el-form ref="scheduledActivityData" :model="scheduledActivityData" :label-width="labelWidth">
<setting :settings-group="scheduledActivity" :data="scheduledActivityData"/>
<setting :setting-group="scheduledActivity" :data="scheduledActivityData"/>
</el-form>
<div class="line"/>
<el-form ref="fetchInitialPostsData" :model="fetchInitialPostsData" :label-width="labelWidth">
<setting :settings-group="fetchInitialPosts" :data="fetchInitialPostsData"/>
<setting :setting-group="fetchInitialPosts" :data="fetchInitialPostsData"/>
</el-form>
<div class="line"/>
<el-form ref="suggestionsData" :model="suggestionsData" :label-width="labelWidth">
<el-form-item label="Suggestions:"/>
<setting :settings-group="suggestions" :data="suggestionsData"/>
<setting :setting-group="suggestions" :data="suggestionsData"/>
</el-form>
<div class="line"/>
<el-form ref="pleromaUserData" :model="pleromaUserData" :label-width="labelWidth">
<setting :settings-group="pleromaUser" :data="pleromaUserData"/>
<setting :setting-group="pleromaUser" :data="pleromaUserData"/>
<el-form-item>
<el-button type="primary" @click="onSubmit">Submit</el-button>
</el-form-item>

4
src/views/settings/components/JobQueue.vue
View file

@ -1,10 +1,10 @@
<template>
<div v-if="!loading">
<el-form ref="obanQueuesData" :model="obanQueuesData" :label-width="labelWidth">
<setting :settings-group="obanQueues" :data="obanQueuesData"/>
<setting :setting-group="obanQueues" :data="obanQueuesData"/>
</el-form>
<el-form ref="workersData" :model="workersData" :label-width="labelWidth">
<setting :settings-group="workers" :data="workersData"/>
<setting :setting-group="workers" :data="workersData"/>
<el-form-item>
<el-button type="primary" @click="onSubmit">Submit</el-button>
</el-form-item>

8
src/views/settings/components/Logger.vue
View file

@ -1,20 +1,20 @@
<template>
<div v-if="!loading">
<el-form ref="loggerData" :model="loggerData" :label-width="labelWidth">
<setting :settings-group="logger" :data="loggerData"/>
<setting :setting-group="logger" :data="loggerData"/>
</el-form>
<div class="line"/>
<el-form ref="consoleData" :model="consoleData" :label-width="labelWidth">
<setting :settings-group="console" :data="consoleData"/>
<setting :setting-group="console" :data="consoleData"/>
</el-form>
<div class="line"/>
<el-form ref="exsysloggerData" :model="exsysloggerData" :label-width="labelWidth">
<setting :settings-group="exsyslogger" :data="exsysloggerData"/>
<setting :setting-group="exsyslogger" :data="exsysloggerData"/>
</el-form>
<div class="line"/>
<el-form ref="quackData" :model="quackData" :label-width="labelWidth">
<el-form-item label="Quack logger:"/>
<setting :settings-group="quack" :data="quackData"/>
<setting :setting-group="quack" :data="quackData"/>
<el-form-item>
<el-button type="primary" @click="onSubmit">Submit</el-button>
</el-form-item>

22
src/views/settings/components/Setting.vue
View file

@ -1,19 +1,27 @@
<template>
<div v-if="!loading">
<el-form-item v-if="settingsGroup.description" class="options-paragraph-container">
<p class="options-paragraph">{{ settingsGroup.description }}</p>
<el-form-item v-if="settingGroup.description" class="options-paragraph-container">
<p class="options-paragraph">{{ settingGroup.description }}</p>
</el-form-item>
<div v-for="setting in settingsGroup.children" :key="setting.key">
<div v-for="setting in settingGroup.children" :key="setting.key">
<div v-if="!compound(setting.type)">
<inputs :settings-group="settingsGroup" :setting="setting" :data="data"/>
<inputs
:setting-group="settingGroup"
:setting="setting"
:data="data"/>
</div>
<div v-if="compound(setting.type)">
<el-form-item :label="`${setting.label}:`"/>
<div v-for="subSetting in setting.children" :key="subSetting.key">
<inputs :settings-group="setting" :setting="subSetting" :data="data[setting.key]"/>
<inputs
:setting-group="settingGroup"
:setting-parent="setting"
:setting="subSetting"
:data="data[setting.key]"
/>
</div>
<div v-if="!setting.children">
<inputs :settings-group="settingsGroup" :setting="setting" :data="data[setting.key]"/>
<inputs :setting-group="settingGroup" :setting="setting" :data="data[setting.key]"/>
</div>
<div class="line"/>
</div>
@ -34,7 +42,7 @@ export default {
Inputs
},
props: {
settingsGroup: {
settingGroup: {
type: Object,
default: function() {
return {}

2
src/views/settings/components/WebPush.vue
View file

@ -1,6 +1,6 @@
<template>
<el-form v-if="!loading" ref="vapidDetailsData" :model="vapidDetailsData" :label-width="labelWidth">
<setting :settings-group="vapidDetails" :data="vapidDetailsData"/>
<setting :setting-group="vapidDetails" :data="vapidDetailsData"/>
<el-form-item>
<el-button type="primary" @click="onSubmit">Submit</el-button>
</el-form-item>