mirror of
https://github.com/YunoHost/yunohost-admin.git
synced 2024-09-03 20:06:15 +02:00
add AppConfigPanel view/route
This commit is contained in:
Axolotle
parent
c92dfd53d9
commit
7517106633
3 changed files with 148 additions and 4 deletions
|
|
@ -7,9 +7,12 @@
|
|||
"all": "All",
|
||||
"all_apps": "All apps",
|
||||
"api_not_responding": "The YunoHost API is not responding. Maybe 'yunohost-api' is down or got restarted?",
|
||||
"app_actions": "Actions",
|
||||
"app_change_label": "Change Label",
|
||||
"app_change_url": "Change URL",
|
||||
"app_choose_category": "Choose a category",
|
||||
"app_config_panel": "Config panel",
|
||||
"app_config_panel_no_panel": "This application doesn't have any configuration available",
|
||||
"app_info_access_desc": "Groups / users currently allowed to access this app:",
|
||||
"app_info_changelabel_desc": "Change app label in the portal.",
|
||||
"app_info_default_desc": "Redirect domain root to this application ({domain}).",
|
||||
|
|
|
|||
|
|
@ -179,7 +179,7 @@ const routes = [
|
|||
{
|
||||
name: 'app-install',
|
||||
path: '/apps/install/:id',
|
||||
component: () => import(/* webpackChunkName: "views/apps" */ '@/views/app/AppInstall'),
|
||||
component: () => import(/* webpackChunkName: "views/apps-install" */ '@/views/app/AppInstall'),
|
||||
props: true,
|
||||
meta: {
|
||||
breadcrumb: [
|
||||
|
|
@ -192,7 +192,7 @@ const routes = [
|
|||
{
|
||||
name: 'app-install-custom',
|
||||
path: '/apps/install-custom/:id',
|
||||
component: () => import(/* webpackChunkName: "views/apps" */ '@/views/app/AppInstall'),
|
||||
component: () => import(/* webpackChunkName: "views/apps-install-custom" */ '@/views/app/AppInstall'),
|
||||
props: true,
|
||||
meta: {
|
||||
breadcrumb: [
|
||||
|
|
@ -217,13 +217,26 @@ const routes = [
|
|||
{
|
||||
name: 'app-actions',
|
||||
path: '/apps/:id/actions',
|
||||
component: () => import(/* webpackChunkName: "views/apps" */ '@/views/app/AppActions'),
|
||||
component: () => import(/* webpackChunkName: "views/apps-expe" */ '@/views/app/AppActions'),
|
||||
props: true,
|
||||
meta: {
|
||||
breadcrumb: [
|
||||
{ name: 'app-list', trad: 'applications' },
|
||||
{ name: 'app-info', param: 'id' },
|
||||
{ name: 'app-actions', trad: 'action' }
|
||||
{ name: 'app-actions', trad: 'app_actions' }
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'app-config-panel',
|
||||
path: '/apps/:id/config-panel',
|
||||
component: () => import(/* webpackChunkName: "views/apps-expe" */ '@/views/app/AppConfigPanel'),
|
||||
props: true,
|
||||
meta: {
|
||||
breadcrumb: [
|
||||
{ name: 'app-list', trad: 'applications' },
|
||||
{ name: 'app-info', param: 'id' },
|
||||
{ name: 'app-config-panel', trad: 'app_config_panel' }
|
||||
]
|
||||
}
|
||||
},
|
||||
|
|
|
|||
128
app/src/views/app/AppConfigPanel.vue
Normal file
128
app/src/views/app/AppConfigPanel.vue
Normal file
|
|
@ -0,0 +1,128 @@
|
|||
<template>
|
||||
<div class="app-config-panel">
|
||||
<div v-if="panels">
|
||||
<b-alert variant="warning" show class="mb-4">
|
||||
<icon iname="exclamation-triangle" /> {{ $t('experimental_warning') }}
|
||||
</b-alert>
|
||||
|
||||
<b-form id="config-form" @submit.prevent="applyConfig">
|
||||
<b-card no-body v-for="panel in panels" :key="panel.id">
|
||||
<b-card-header class="d-flex align-items-center">
|
||||
<h2>{{ panel.name }} <small v-if="panel.help">{{ panel.help }}</small></h2>
|
||||
|
||||
<div class="ml-auto">
|
||||
<b-button v-b-toggle="[panel.id + '-collapse', panel.id + '-collapse-footer']" size="sm" variant="outline-secondary">
|
||||
<icon iname="chevron-right" /><span class="sr-only">{{ $t('words.collapse') }}</span>
|
||||
</b-button>
|
||||
</div>
|
||||
</b-card-header>
|
||||
|
||||
<b-collapse :id="panel.id + '-collapse'" visible>
|
||||
<b-card-body v-for="section in panel.sections" :key="section.id">
|
||||
<b-card-title>{{ section.name }} <small v-if="section.help">{{ section.help }}</small></b-card-title>
|
||||
|
||||
<form-item-helper v-for="arg in section.args" :key="arg.name" v-bind="arg" />
|
||||
</b-card-body>
|
||||
</b-collapse>
|
||||
|
||||
<b-collapse :id="panel.id + '-collapse-footer'" visible>
|
||||
<b-card-footer>
|
||||
<b-button
|
||||
type="submit" form="config-form"
|
||||
variant="success" class="ml-auto" v-t="'save'"
|
||||
/>
|
||||
</b-card-footer>
|
||||
</b-collapse>
|
||||
</b-card>
|
||||
</b-form>
|
||||
</div>
|
||||
|
||||
<!-- if no config panel -->
|
||||
<b-alert v-else-if="panels === null" variant="warning" show>
|
||||
<icon iname="exclamation-triangle" /> {{ $t('app_config_panel_no_panel') }}
|
||||
</b-alert>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// FIXME needs test and rework
|
||||
import api, { objectToParams } from '@/helpers/api'
|
||||
import { formatI18nField, formatYunoHostArgument } from '@/helpers/yunohostArguments'
|
||||
|
||||
export default {
|
||||
name: 'AppConfigPanel',
|
||||
|
||||
props: {
|
||||
id: {
|
||||
type: String,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
|
||||
data () {
|
||||
return {
|
||||
panels: undefined
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
fetchData () {
|
||||
Promise.all([
|
||||
api.get(`apps/${this.id}/config-panel`),
|
||||
this.$store.dispatch('FETCH_ALL', [
|
||||
{ uri: 'domains' },
|
||||
{ uri: 'domains/main', storeKey: 'main_domain' },
|
||||
{ uri: 'users' }
|
||||
])
|
||||
]).then((responses) => this.setupForm(responses[0]))
|
||||
},
|
||||
|
||||
setupForm (data) {
|
||||
if (!data.config_panel) {
|
||||
this.panels = null
|
||||
return
|
||||
}
|
||||
|
||||
const panels_ = []
|
||||
for (const { id, name, help, sections } of data.config_panel.panel) {
|
||||
const panel_ = { id, name, sections: [] }
|
||||
if (help) panel_.help = formatI18nField(help)
|
||||
for (const { name, help, options } of sections) {
|
||||
const section_ = { name }
|
||||
if (help) section_.help = formatI18nField(help)
|
||||
section_.args = options.map(option => formatYunoHostArgument(option))
|
||||
panel_.sections.push(section_)
|
||||
}
|
||||
panels_.push(panel_)
|
||||
}
|
||||
this.panels = panels_
|
||||
},
|
||||
|
||||
applyConfig () {
|
||||
// FIXME not tested
|
||||
const args = {}
|
||||
for (const panel of this.panels) {
|
||||
for (const section of panel.sections) {
|
||||
for (const arg of section.args) {
|
||||
if (arg.component === 'CheckboxItem') {
|
||||
args[arg.props.id] = arg.props.value ? 1 : 0
|
||||
} else {
|
||||
args[arg.props.id] = arg.props.value
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
api.post(`apps/${this.id}/config`, { args: objectToParams(args) }).then(response => {
|
||||
console.log('SUCCESS', response)
|
||||
}).catch(err => {
|
||||
console.log('ERROR', err)
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
created () {
|
||||
this.fetchData()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Loading…
Add table
Reference in a new issue