ToolSettings view

app/src/router/routes.js

@@ -374,6 +374,15 @@ const routes = [
       breadcrumb: ['tool-list', 'tool-webadmin']
     }
   },
+  {
+    name: 'tool-settings',
+    path: '/tools/settings',
+    component: () => import(/* webpackChunkName: "views/tools/settings" */ '@/views/tool/ToolSettings'),
+    meta: {
+      args: { trad: 'tools_yunohost_settings' },
+      breadcrumb: ['tool-list', 'tool-settings']
+    }
+  },
   {
     name: 'tool-power',
     path: '/tools/power',

app/src/views/tool/ToolList.vue

@@ -24,6 +24,7 @@ export default {
         { routeName: 'tool-migrations', icon: 'share', translation: 'migrations' },
         { routeName: 'tool-firewall', icon: 'shield', translation: 'firewall' },
         { routeName: 'tool-adminpw', icon: 'key-modern', translation: 'tools_adminpw' },
+        { routeName: 'tool-settings', icon: 'cog', translation: 'tools_yunohost_settings' },
         { routeName: 'tool-webadmin', icon: 'cog', translation: 'tools_webadmin_settings' },
         { routeName: 'tool-power', icon: 'power-off', translation: 'tools_shutdown_reboot' }
       ]

app/src/views/tool/ToolSettings.vue

@@ -0,0 +1,64 @@
+<template>
+  <view-base
+    :queries="queries" @queries-response="onQueriesResponse"
+    ref="view" skeleton="card-form-skeleton"
+  >
+    <config-panels v-if="config.panels" v-bind="config" @submit="applyConfig" />
+  </view-base>
+</template>
+
+<script>
+import api, { objectToParams } from '@/api'
+import {
+  formatFormData,
+  formatYunoHostConfigPanels
+} from '@/helpers/yunohostArguments'
+import ConfigPanels from '@/components/ConfigPanels'
+
+
+export default {
+  name: 'ToolSettingsConfig',
+
+  components: {
+    ConfigPanels
+  },
+
+  props: {},
+
+  data () {
+    return {
+      queries: [
+        ['GET', 'settings?full']
+      ],
+      config: {}
+    }
+  },
+
+  methods: {
+    onQueriesResponse (config) {
+      this.config = formatYunoHostConfigPanels(config)
+    },
+
+    async applyConfig (id_) {
+      const formatedData = await formatFormData(
+        this.config.forms[id_],
+        { removeEmpty: false, removeNull: true, multipart: false }
+      )
+
+      api.put(
+        'settings',
+        { key: id_, args: objectToParams(formatedData) },
+        { key: 'tools.update_settings', name: this.name }
+      ).then(() => {
+        this.$refs.view.fetchQueries({ triggerLoading: true })
+      }).catch(err => {
+        if (err.name !== 'APIBadRequestError') throw err
+        const panel = this.config.panels.find(({ id }) => id_ === id)
+        if (err.data.name) {
+          this.config.errors[id_][err.data.name].message = err.message
+        } else this.$set(panel, 'serverError', err.message)
+      })
+    }
+  }
+}
+</script>