Create component for frontends table, add button loading while frontend is installing

This commit is contained in:
Angelina Filippova 2021-03-14 14:08:59 +03:00
parent 170079e06e
commit e9bd9444b3
5 changed files with 219 additions and 141 deletions

View file

@ -475,7 +475,8 @@ export default {
buildUrl: 'Build URL',
buildDir: 'Build Directory',
frontendSuccess: 'Frontend installed successfully!',
frontendStartedInstallation: 'Installation started'
frontendStartedInstallation: 'Installation started',
inProcess: 'In process'
},
invites: {
inviteTokens: 'Invite tokens',

View file

@ -10,8 +10,6 @@ import {
updateSettings } from '@/api/settings'
import { formSearchObject, parseNonTuples, parseTuples, valueHasTuples, wrapUpdatedSettings } from './normalizers'
import _ from 'lodash'
import { Message } from 'element-ui'
import i18n from '@/lang'
const settings = {
state: {
@ -125,17 +123,8 @@ const settings = {
commit('SET_LOADING', false)
},
async InstallFrontend({ commit, getters }, { name, ref, file, buildUrl, buildDir }) {
try {
const { data } = await installFrontend({ name, ref, file, build_url: buildUrl, build_dir: buildDir }, getters.authHost, getters.token)
commit('SET_FRONTENDS', data)
} catch (_e) {
return
}
Message({
message: i18n.t('settings.frontendSuccess'),
type: 'success',
duration: 5 * 1000
})
const { data } = await installFrontend({ name, ref, file, build_url: buildUrl, build_dir: buildDir }, getters.authHost, getters.token)
commit('SET_FRONTENDS', data)
},
async RemoveInstanceDocument({ dispatch, getters }, name) {
await deleteInstanceDocument(name, getters.authHost, getters.token)

View file

@ -1,72 +1,6 @@
<template>
<div v-if="!loading" :class="isSidebarOpen" class="form-container">
<el-form :label-position="labelPosition" :label-width="labelWidth" class="frontend-container">
<el-form-item class="description-container">
<span class="setting-label">{{ $t('settings.availableFrontends') }}</span>
<span class="expl no-top-margin"><p>{{ $t('settings.installFrontends') }}</p></span>
</el-form-item>
<el-form-item>
<el-table
:data="availableFrontends"
class="frontends-table">
<el-table-column
:label="$t('settings.name')"
prop="name"
width="120"/>
<el-table-column
:label="$t('settings.git')"
prop="git"/>
<el-table-column
:label="$t('settings.installed')"
prop="installed">
<template slot-scope="scope">
<el-button
v-if="scope.row.installed"
disabled
type="text"
size="small">
{{ $t('settings.installed') }}
</el-button>
<el-button
v-else
type="text"
size="small"
@click="installFrontend(scope.row)">
{{ $t('settings.install') }}
</el-button>
</template>
</el-table-column>
</el-table>
<div class="frontends-button-container">
<el-button
:size="isDesktop ? 'medium' : 'mini'"
:icon="frontendInputOpen ? 'el-icon-minus' : 'el-icon-plus'"
circle
@click="toggleFrontendInput"/>
<span class="icons-button-desc">{{ $t('settings.installAnotherFrontend') }}</span>
</div>
<el-form v-if="frontendInputOpen" ref="frontendFormData" :rules="rules" :model="frontendFormData" label-width="130px">
<el-form-item :label="$t('settings.name')" class="frontend-form-input" prop="name">
<el-input v-model="frontendFormData.name"/>
</el-form-item>
<el-form-item :label="$t('settings.ref')" class="frontend-form-input">
<el-input v-model="frontendFormData.ref"/>
</el-form-item>
<el-form-item :label="$t('settings.file')" class="frontend-form-input">
<el-input v-model="frontendFormData.file"/>
</el-form-item>
<el-form-item :label="$t('settings.buildUrl')" class="frontend-form-input">
<el-input v-model="frontendFormData.buildUrl"/>
</el-form-item>
<el-form-item :label="$t('settings.buildDir')" class="frontend-form-input">
<el-input v-model="frontendFormData.buildDir"/>
</el-form-item>
<el-form-item class="install-frontend-button">
<el-button type="primary" @click="installNewFrontend">{{ $t('settings.install') }}</el-button>
</el-form-item>
</el-form>
</el-form-item>
</el-form>
<frontends-table />
<el-divider v-if="frontend" class="divider thick-line"/>
<el-form :model="frontendData" :label-position="labelPosition" :label-width="labelWidth">
<setting :setting-group="frontend" :data="frontendData"/>
@ -109,26 +43,12 @@
import { mapGetters } from 'vuex'
import i18n from '@/lang'
import Setting from './Setting'
import FrontendsTable from './inputComponents/FrontendsTable'
import _ from 'lodash'
export default {
name: 'Frontend',
components: { Setting },
data() {
return {
frontendInputOpen: false,
frontendFormData: {
name: '',
ref: '',
file: '',
buildUrl: '',
buildDir: ''
},
rules: {
name: { required: true, message: 'Please input Name', trigger: 'blur' }
}
}
},
components: { FrontendsTable, Setting },
computed: {
...mapGetters([
'settings'
@ -139,9 +59,6 @@ export default {
assetsData() {
return _.get(this.settings.settings, [':pleroma', ':assets']) || {}
},
availableFrontends() {
return this.settings.frontends
},
chat() {
return this.settings.description.find(setting => setting.key === ':chat')
},
@ -212,45 +129,7 @@ export default {
return _.get(this.settings.settings, [':pleroma', ':static_fe']) || {}
}
},
async mounted() {
await this.$store.dispatch('FetchFrontends')
},
methods: {
installFrontend({ name }) {
try {
this.$store.dispatch('InstallFrontend', { name })
this.$message({
type: 'success',
message: i18n.t('settings.frontendStartedInstallation')
})
} catch (e) {
return
}
},
installNewFrontend() {
try {
this.$refs['frontendFormData'].validate((valid) => {
if (valid) {
this.$store.dispatch('InstallFrontend', this.frontendFormData)
this.frontendFormData = {
name: '',
ref: '',
file: '',
buildUrl: '',
buildDir: ''
}
this.$message({
type: 'success',
message: i18n.t('settings.frontendStartedInstallation')
})
} else {
return false
}
})
} catch (e) {
return
}
},
async onSubmit() {
try {
await this.$store.dispatch('SubmitChanges')
@ -261,9 +140,6 @@ export default {
type: 'success',
message: i18n.t('settings.success')
})
},
toggleFrontendInput() {
this.frontendInputOpen = !this.frontendInputOpen
}
}
}

View file

@ -0,0 +1,64 @@
<template>
<span>
<el-button
v-if="buttonLoading"
:loading="true"
disabled
type="text"
size="small">
{{ $t('settings.inProcess') }}
</el-button>
<el-button
v-else-if="frontend.installed"
disabled
type="text"
size="small">
{{ $t('settings.installed') }}
</el-button>
<el-button
v-else
type="text"
size="small"
@click="installFrontend(frontend)">
{{ $t('settings.install') }}
</el-button>
</span>
</template>
<script>
import i18n from '@/lang'
export default {
name: 'FrontendStatusButton',
props: {
frontend: {
type: Object,
default: function() {
return {}
}
}
},
data() {
return {
buttonLoading: false
}
},
methods: {
async installFrontend({ name }) {
this.buttonLoading = true
try {
await this.$store.dispatch('InstallFrontend', { name })
} catch (e) {
this.buttonLoading = false
return
}
this.buttonLoading = false
this.$message({
message: i18n.t('settings.frontendSuccess'),
type: 'success',
duration: 5 * 1000
})
}
}
}
</script>

View file

@ -0,0 +1,148 @@
<template>
<el-form :label-position="labelPosition" :label-width="labelWidth" class="frontend-container">
<el-form-item class="description-container">
<span class="setting-label">{{ $t('settings.availableFrontends') }}</span>
<span class="expl no-top-margin"><p>{{ $t('settings.installFrontends') }}</p></span>
</el-form-item>
<el-form-item>
<el-table
:data="availableFrontends"
class="frontends-table">
<el-table-column
:label="$t('settings.name')"
prop="name"
width="120"/>
<el-table-column
:label="$t('settings.git')"
prop="git"/>
<el-table-column
:label="$t('settings.installed')"
prop="installed">
<template slot-scope="scope">
<frontend-status-button :frontend="scope.row"/>
</template>
</el-table-column>
</el-table>
<div class="frontends-button-container">
<el-button
:size="isDesktop ? 'medium' : 'mini'"
:icon="frontendInputOpen ? 'el-icon-minus' : 'el-icon-plus'"
circle
@click="toggleFrontendInput"/>
<span class="icons-button-desc">{{ $t('settings.installAnotherFrontend') }}</span>
</div>
<el-form v-if="frontendInputOpen" ref="frontendFormData" :rules="rules" :model="frontendFormData" label-width="130px">
<el-form-item :label="$t('settings.name')" class="frontend-form-input" prop="name">
<el-input v-model="frontendFormData.name"/>
</el-form-item>
<el-form-item :label="$t('settings.ref')" class="frontend-form-input">
<el-input v-model="frontendFormData.ref"/>
</el-form-item>
<el-form-item :label="$t('settings.file')" class="frontend-form-input">
<el-input v-model="frontendFormData.file"/>
</el-form-item>
<el-form-item :label="$t('settings.buildUrl')" class="frontend-form-input">
<el-input v-model="frontendFormData.buildUrl"/>
</el-form-item>
<el-form-item :label="$t('settings.buildDir')" class="frontend-form-input">
<el-input v-model="frontendFormData.buildDir"/>
</el-form-item>
<el-form-item class="install-frontend-button">
<el-button :loading="buttonLoading" type="primary" @click="installNewFrontend">{{ $t('settings.install') }}</el-button>
</el-form-item>
</el-form>
</el-form-item>
</el-form>
</template>
<script>
import i18n from '@/lang'
import { mapGetters } from 'vuex'
import FrontendStatusButton from './FrontendStatusButton'
export default {
name: 'FrontendsTable',
components: { FrontendStatusButton },
data() {
return {
buttonLoading: false,
frontendInputOpen: false,
frontendFormData: {
name: '',
ref: '',
file: '',
buildUrl: '',
buildDir: ''
},
rules: {
name: { required: true, message: 'Please input Name', trigger: 'blur' }
}
}
},
computed: {
...mapGetters([
'settings'
]),
availableFrontends() {
return this.settings.frontends
},
labelPosition() {
return this.isMobile ? 'top' : 'right'
},
labelWidth() {
if (this.isMobile) {
return '120px'
} else if (this.isTablet) {
return '200px'
} else {
return '280px'
}
},
isDesktop() {
return this.$store.state.app.device === 'desktop'
},
isMobile() {
return this.$store.state.app.device === 'mobile'
},
isTablet() {
return this.$store.state.app.device === 'tablet'
}
},
async mounted() {
await this.$store.dispatch('FetchFrontends')
},
methods: {
installNewFrontend() {
this.$refs['frontendFormData'].validate(async(valid) => {
if (valid) {
this.buttonLoading = true
try {
await this.$store.dispatch('InstallFrontend', this.frontendFormData)
} catch (e) {
this.buttonLoading = false
return
}
this.buttonLoading = false
this.$message({
message: i18n.t('settings.frontendSuccess'),
type: 'success',
duration: 5 * 1000
})
this.frontendFormData = {
name: '',
ref: '',
file: '',
buildUrl: '',
buildDir: ''
}
} else {
return false
}
})
},
toggleFrontendInput() {
this.frontendInputOpen = !this.frontendInputOpen
}
}
}
</script>