Functional plugin settings(almost)

client/src/modules/plugin.js

@@ -12,6 +12,7 @@ export default class {
 
     constructor(pluginInternals) {
         this.__pluginInternals = pluginInternals;
+        this.saveSettings = this.saveSettings.bind(this);
         this.hasSettings = this.pluginConfig && this.pluginConfig.length > 0;
         this.start = this.start.bind(this);
         this.stop = this.stop.bind(this);
@@ -31,6 +32,22 @@ export default class {
     get enabled() { return this.userConfig.enabled }
     get pluginConfig() { return this.userConfig.config }
 
+    getSetting(settingId) {
+        return this.userConfig.config.find(setting => setting.id === settingId);
+    }
+
+    saveSettings(newSettings) {
+        let changed = false;
+        for (let newSetting of newSettings) {
+            const setting = this.pluginConfig.find(s => s.id === newSetting.id && s.value !== newSetting.value);
+            if (!setting) continue;
+            setting.value = newSetting.value;
+            if (this.settingSaved) this.settingSaved(setting);
+            changed = true;
+        }
+        if (changed && this.settingsSaved) this.settingsSaved(this.pluginConfig);
+    }
+
     start() {
         if (this.onStart) {
             const started = this.onStart();

client/src/ui/components/bd/PluginSettingsModal.vue

@@ -11,56 +11,60 @@
 <template>
     <Modal :headerText="plugin.name + ' Settings'" :close="() => {  }">
         <div slot="body" class="bd-plugin-settings-body">
-            <div v-for="setting in plugin.pluginConfig" class="bd-form-item">
+            <PluginSetting v-for="setting in configCache" :key="setting.id" :setting="setting" :change="settingChange"/>
-                <div v-if="setting.type === 'bool'" class="bd-setting-switch">
-                    <div class="bd-title">
-                        <h3>{{setting.text}}</h3>
-                        <label class="bd-switch-wrapper">
-                            <input type="checkbox" class="bd-switch-checkbox" />
-                            <div class="bd-switch" :class="{'bd-checked': setting.value}" />
-                        </label>
-                    </div>
-                    <div class="bd-hint">{{setting.hint}}</div>
-                </div>
-
-                <div v-else-if="setting.type === 'text'" class="bd-form-textinput">
-                    <div class="bd-title">
-                        <h3>{{setting.text}}</h3>
-                        <div class="bd-textinput-wrapper">
-                            <input type="text" v-model="setting.value" @keyup.stop @keydown="textInputKd" />
-                        </div>
-                    </div>
-                    <div class="bd-hint">{{setting.hint}}</div>
-                </div>
-
-                <div class="bd-form-divider"></div>
-            </div>
         </div>
         <div slot="footer" class="bd-footer-alert" :class ="{'bd-active': changed}">
             <div class="bd-footer-alert-text">Unsaved changes</div>
-            <div class="bd-button bd-reset-button bd-tp">Reset</div>
+            <div class="bd-button bd-reset-button bd-tp" @click="resetSettings">Reset</div>
-            <div class="bd-button bd-ok">Save Changes</div>
+            <div class="bd-button bd-ok" @click="saveSettings">Save Changes</div>
         </div>
     </Modal>
 </template>
 <script>
     // Imports
     import { Modal } from '../common';
+    import PluginSetting from './pluginsetting/PluginSetting.vue';
 
     export default {
         props: ['plugin'],
         data() {
             return {
-                'changed': false
+                changed: false,
+                configCache: []
             }
         },
         components: {
-            Modal
+            Modal,
+            PluginSetting
         },
         methods: {
-            textInputKd(e) {
+            checkForChanges() {
-                this.changed = true;
+                for (let cachedSetting of this.configCache) {
+                    if (this.plugin.pluginConfig.find(s => s.id === cachedSetting.id && s.value !== cachedSetting.value)) {
+                        return true;
+                    }
+                }
+                return false;
+            },
+            textInputKd(settingId) {
+            },
+            settingChange(settingId, newValue) {
+                this.configCache.find(s => s.id === settingId).value = newValue;
+                this.changed = this.checkForChanges();
+            },
+            saveSettings() {
+                this.plugin.saveSettings(this.configCache);
+                this.configCache = JSON.parse(JSON.stringify(this.plugin.pluginConfig));
+                this.changed = false;
+            },
+            resetSettings() {
+                this.configCache = JSON.parse(JSON.stringify(this.plugin.pluginConfig));
+                this.changed = false;
             }
+        },
+        beforeMount() {
+            this.configCache = JSON.parse(JSON.stringify(this.plugin.pluginConfig));
+            this.changed = this.checkForChanges();
         }
     }
 </script>

client/src/ui/components/bd/pluginsetting/Bool.vue

@@ -0,0 +1,27 @@
+/**
+ * BetterDiscord Plugin Setting Bool Component
+ * Copyright (c) 2015-present Jiiks/JsSucks - https://github.com/Jiiks / https://github.com/JsSucks
+ * All rights reserved.
+ * https://betterdiscord.net
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+*/
+
+<template>
+    <div class="bd-setting-switch">
+        <div class="bd-title">
+            <h3>{{setting.text}}</h3>
+            <label class="bd-switch-wrapper">
+                <input type="checkbox" class="bd-switch-checkbox" />
+                <div class="bd-switch" :class="{'bd-checked': setting.value}" />
+            </label>
+        </div>
+        <div class="bd-hint">{{setting.hint}}</div>
+    </div>
+</template>
+<script>
+    export default {
+        props: ['setting', 'change']
+    }
+</script>

client/src/ui/components/bd/pluginsetting/PluginSetting.vue

@@ -0,0 +1,29 @@
+/**
+ * BetterDiscord Plugin Setting Component
+ * Copyright (c) 2015-present Jiiks/JsSucks - https://github.com/Jiiks / https://github.com/JsSucks
+ * All rights reserved.
+ * https://betterdiscord.net
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+*/
+
+<template>
+    <div class="bd-form-item">
+        <BoolSetting v-if="setting.type === 'bool'" :setting="setting" :change="change"/>
+        <StringSetting v-if="setting.type === 'text'" :setting="setting" :change="change"/>
+        <div class="bd-form-divider"></div>
+    </div>
+</template>
+<script>
+    // Imports
+    import BoolSetting from './Bool.vue';
+    import StringSetting from './String.vue';
+
+    export default {
+        props: ['setting', 'change'],
+        components: {
+            BoolSetting, StringSetting
+        }
+    }
+</script>

client/src/ui/components/bd/pluginsetting/String.vue

@@ -0,0 +1,31 @@
+/**
+ * BetterDiscord Plugin Setting String Component
+ * Copyright (c) 2015-present Jiiks/JsSucks - https://github.com/Jiiks / https://github.com/JsSucks
+ * All rights reserved.
+ * https://betterdiscord.net
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+*/
+
+<template>
+    <div class="bd-form-textinput">
+        <div class="bd-title">
+            <h3>{{setting.text}}</h3>
+            <div class="bd-textinput-wrapper">
+                <input type="text" :value="setting.value" @keyup.stop @input="input"/>
+            </div>
+        </div>
+        <div class="bd-hint">{{setting.hint}}</div>
+    </div>
+</template>
+<script>
+    export default {
+        props: ['setting', 'change'],
+        methods: {
+            input(e) {
+                this.change(this.setting.id, e.target.value);
+            }
+        }
+    }
+</script>