From 20c9dacf71541ce0546cbd84c2c72c4f5fd589d6 Mon Sep 17 00:00:00 2001
From: Jiiks <jiiks@windowslive.com>
Date: Fri, 2 Feb 2018 22:47:50 +0200
Subject: [PATCH] Category support for plugin settings

---
 .../ui/components/bd/PluginSettingsModal.vue  | 20 +++++++++++++++++--
 tests/plugins/Example/config.json             |  3 +++
 2 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/client/src/ui/components/bd/PluginSettingsModal.vue b/client/src/ui/components/bd/PluginSettingsModal.vue
index ac997ba0..259e660b 100644
--- a/client/src/ui/components/bd/PluginSettingsModal.vue
+++ b/client/src/ui/components/bd/PluginSettingsModal.vue
@@ -13,7 +13,17 @@
         <div class="bd-backdrop" @click="attemptToClose"></div>
         <Modal :headerText="plugin.name + ' Settings'" :close="attemptToClose">
             <div slot="body" class="bd-plugin-settings-body">
-                <PluginSetting v-for="setting in configCache" :key="setting.id" :setting="setting" :change="settingChange"/>
+
+                <template v-for="category in categories">
+                    <template v-if="category === 'default'">
+                        <PluginSetting v-for="setting in configCache" v-if="!setting.category || setting.category === 'default'" :key="setting.id" :setting="setting" :change="settingChange" />
+                    </template>
+                    <div v-else class="bd-category-container">
+                        <span>{{category}}</span>
+                        <PluginSetting v-for="setting in configCache" v-if="setting.category === category" :key="setting.id" :setting="setting" :change="settingChange" />
+                    </div>
+                </template>
+
             </div>
             <div slot="footer" class="bd-footer-alert" :class ="{'bd-active': changed, 'bd-warn': warnclose}">
                 <div class="bd-footer-alert-text">Unsaved changes</div>
@@ -34,7 +44,8 @@
             return {
                 changed: false,
                 warnclose: false,
-                configCache: []
+                configCache: [],
+                categories: ['default']
             }
         },
         components: {
@@ -75,6 +86,11 @@
         },
         beforeMount() {
             this.configCache = JSON.parse(JSON.stringify(this.plugin.pluginConfig));
+            this.configCache.forEach(s => {
+                if (!s.category || s.category === 'default') return;
+                if (this.categories.includes(s.category)) return;
+                this.categories.push(s.category);
+            });
             this.changed = this.checkForChanges();
         }
     }
diff --git a/tests/plugins/Example/config.json b/tests/plugins/Example/config.json
index 491f8eb7..a59f311d 100644
--- a/tests/plugins/Example/config.json
+++ b/tests/plugins/Example/config.json
@@ -9,6 +9,7 @@
     "defaultConfig": [
         {
             "id": "test-setting-1",
+            "category":  "test category", 
             "type": "bool",
             "value": false,
             "text": "Bool Test Setting",
@@ -16,6 +17,7 @@
         },
         {
             "id": "test-setting-2",
+            "category":  "test category 2", 
             "type": "text",
             "value": "defaultValue",
             "text": "Text Test Setting",
@@ -37,6 +39,7 @@
         },
         {
             "id": "test-setting-5",
+            "category":  "test category", 
             "type": "bool",
             "value": false,
             "text": "Bool Test Setting 4",