From 93ad401c7dacb8ebe6528b7db60e8c5cf25c82a8 Mon Sep 17 00:00:00 2001
From: ljf <ljf+git@grimaud.me>
Date: Tue, 31 Aug 2021 16:58:06 +0200
Subject: [PATCH] [enh] Tabs in config panel

---
 app/src/views/app/AppConfigPanel.vue | 50 ++++++++++++++++------------
 1 file changed, 28 insertions(+), 22 deletions(-)

diff --git a/app/src/views/app/AppConfigPanel.vue b/app/src/views/app/AppConfigPanel.vue
index 620cac58..8c97d5e5 100644
--- a/app/src/views/app/AppConfigPanel.vue
+++ b/app/src/views/app/AppConfigPanel.vue
@@ -1,29 +1,35 @@
 <template>
   <view-base :queries="queries" @queries-response="onQueriesResponse" skeleton="card-form-skeleton">
     <template v-if="panels" #default>
-      <card-form
-        v-for="{ name, id: id_, sections, help, serverError } in panels" :key="id_"
-        :title="name" icon="wrench" title-tag="h2"
-        :validation="$v.forms[id_]" :id="id_ + '-form'" :server-error="serverError"
-        collapsable
-        @submit.prevent="applyConfig(id_)"
-      >
-        <template v-if="help" #disclaimer>
-          <div class="alert alert-info" v-html="help" />
-        </template>
+      <b-tabs pills card vertical>
+        <b-tab v-for="{ name, id: id_, sections, help, serverError } in panels"
+               :key="id_"
+               :title="name"
+        >
+          <card-form
+            :key="id_"
+            :title="name" icon="wrench" title-tag="h2"
+            :validation="$v.forms[id_]" :id="id_ + '-form'" :server-error="serverError"
+            @submit.prevent="applyConfig(id_)"
+          >
+            <template v-if="help" #disclaimer>
+              <div class="alert alert-info" v-html="help" />
+            </template>
 
-        <div v-for="section in sections" :key="section.id" class="mb-5">
-          <b-card-title v-if="section.name" title-tag="h3">
-            {{ section.name }} <small v-if="section.help">{{ section.help }}</small>
-          </b-card-title>
-          <template v-for="(field, fname) in section.fields">
-            <form-field :key="fname" v-model="forms[id_][fname]"
-                        :validation="$v.forms[id_][fname]"
-                        v-if="isVisible(field.visibleIf)" v-bind="field"
-            />
-          </template>
-        </div>
-      </card-form> {{ errors.main.str }}
+            <div v-for="section in sections" :key="section.id" class="mb-5">
+              <b-card-title v-if="section.name" title-tag="h3">
+                {{ section.name }} <small v-if="section.help">{{ section.help }}</small>
+              </b-card-title>
+              <template v-for="(field, fname) in section.fields">
+                <form-field :key="fname" v-model="forms[id_][fname]"
+                            :validation="$v.forms[id_][fname]"
+                            v-if="isVisible(field.visibleIf)" v-bind="field"
+                />
+              </template>
+            </div>
+          </card-form>
+        </b-tab>
+      </b-tabs>
     </template>
 
     <!-- if no config panel -->