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:
parent
c92dfd53d9
commit
7517106633
3 changed files with 148 additions and 4 deletions
|
@ -7,9 +7,12 @@
|
||||||
"all": "All",
|
"all": "All",
|
||||||
"all_apps": "All apps",
|
"all_apps": "All apps",
|
||||||
"api_not_responding": "The YunoHost API is not responding. Maybe 'yunohost-api' is down or got restarted?",
|
"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_label": "Change Label",
|
||||||
"app_change_url": "Change URL",
|
"app_change_url": "Change URL",
|
||||||
"app_choose_category": "Choose a category",
|
"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_access_desc": "Groups / users currently allowed to access this app:",
|
||||||
"app_info_changelabel_desc": "Change app label in the portal.",
|
"app_info_changelabel_desc": "Change app label in the portal.",
|
||||||
"app_info_default_desc": "Redirect domain root to this application ({domain}).",
|
"app_info_default_desc": "Redirect domain root to this application ({domain}).",
|
||||||
|
|
|
@ -179,7 +179,7 @@ const routes = [
|
||||||
{
|
{
|
||||||
name: 'app-install',
|
name: 'app-install',
|
||||||
path: '/apps/install/:id',
|
path: '/apps/install/:id',
|
||||||
component: () => import(/* webpackChunkName: "views/apps" */ '@/views/app/AppInstall'),
|
component: () => import(/* webpackChunkName: "views/apps-install" */ '@/views/app/AppInstall'),
|
||||||
props: true,
|
props: true,
|
||||||
meta: {
|
meta: {
|
||||||
breadcrumb: [
|
breadcrumb: [
|
||||||
|
@ -192,7 +192,7 @@ const routes = [
|
||||||
{
|
{
|
||||||
name: 'app-install-custom',
|
name: 'app-install-custom',
|
||||||
path: '/apps/install-custom/:id',
|
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,
|
props: true,
|
||||||
meta: {
|
meta: {
|
||||||
breadcrumb: [
|
breadcrumb: [
|
||||||
|
@ -217,13 +217,26 @@ const routes = [
|
||||||
{
|
{
|
||||||
name: 'app-actions',
|
name: 'app-actions',
|
||||||
path: '/apps/:id/actions',
|
path: '/apps/:id/actions',
|
||||||
component: () => import(/* webpackChunkName: "views/apps" */ '@/views/app/AppActions'),
|
component: () => import(/* webpackChunkName: "views/apps-expe" */ '@/views/app/AppActions'),
|
||||||
props: true,
|
props: true,
|
||||||
meta: {
|
meta: {
|
||||||
breadcrumb: [
|
breadcrumb: [
|
||||||
{ name: 'app-list', trad: 'applications' },
|
{ name: 'app-list', trad: 'applications' },
|
||||||
{ name: 'app-info', param: 'id' },
|
{ 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