add AppConfigPanel view/route

app/src/i18n/locales/en.json

@@ -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}).",

app/src/router/routes.js

@@ -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' }
       ]
     }
   },

app/src/views/app/AppConfigPanel.vue

@@ -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>