Merge pull request #86 from JsSucks/plugins

Merge

client/src/modules/plugin.js

@@ -38,18 +38,31 @@ export default class {
         return this.userConfig.config.find(setting => setting.id === settingId);
     }
 
-    saveSettings(newSettings) {
-        console.log(this);
-        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;
+    async sleep(ms) {
+        return new Promise(resolve => setTimeout(resolve, ms));
+    }
+
+    async saveSettings(newSettings) {
+        await this.sleep(2000); // Fake sleep to test loading
+        for (let category of newSettings) {
+            const oldCategory = this.pluginConfig.find(c => c.category === category.category);
+            for (let setting of category.settings) {
+                const oldSetting = oldCategory.settings.find(s => s.id === setting.id);
+                if (oldSetting.value === setting.value) continue;
+                oldSetting.value = setting.value;
+                if (this.settingChanged) this.settingChanged(category.category, setting.id, setting.value);
+            }
         }
-        if (changed && this.settingsSaved) this.settingsSaved(this.pluginConfig);
-        FileUtils.writeFile(`${this.pluginPath}/user.config.json`, JSON.stringify({enabled: this.enabled, config: this.pluginConfig}));
+
+        try {
+            await FileUtils.writeFile(`${this.pluginPath}/user.config.json`, JSON.stringify({ enabled: this.enabled, config: this.pluginConfig }));
+        } catch (err) {
+            throw err;
+        }
+
+        if (this.settingsChanged) this.settingsChanged(this.pluginConfig);
+
+        return this.pluginConfig;
     }
 
     start() {

client/src/styles/partials/bdsettings/plugin-settings-modal.scss

@@ -3,6 +3,12 @@
         padding: 0;
     }
 
+    .bd-modal .bd-modal-footer {
+        .bd-ok {
+            width: 100px;
+        }
+    }
+
     .bd-plugin-settings-body {
         padding: 0 15px;
 

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

@@ -34,8 +34,13 @@
             </div>
             <div slot="footer" class="bd-footer-alert" :class ="{'bd-active': changed, 'bd-warn': warnclose}">
                 <div class="bd-footer-alert-text">Unsaved changes</div>
-                <div class="bd-button bd-reset-button bd-tp" @click="resetSettings">Reset</div>
-                <div class="bd-button bd-ok" @click="saveSettings">Save Changes</div>
+                <div class="bd-button bd-reset-button bd-tp" :class="{'bd-disabled': saving}" @click="resetSettings">Reset</div>
+                <div class="bd-button bd-ok" :class="{'bd-disabled': saving}" @click="saveSettings">
+                    <div v-if="saving" class="bd-spinner-7"></div>
+                    <template v-else>
+                        Save Changes
+                    </template>
+                </div>
             </div>
         </Modal>
     </div>
@@ -53,7 +58,8 @@
                 changed: false,
                 warnclose: false,
                 configCache: [],
-                closing: false
+                closing: false,
+                saving: false
             }
         },
         components: {
@@ -81,13 +87,21 @@
                 }
                 this.changed = this.checkForChanges();
             },
-            saveSettings() {
-                //this.plugin.saveSettings(this.configCache);
-                //this.configCache = JSON.parse(JSON.stringify(this.plugin.pluginConfig));
-                // TODO later
-                this.changed = false;
+            async saveSettings() {
+                if (this.saving) return;
+                this.saving = true;
+                try {
+                    await this.plugin.saveSettings(this.configCache);
+                    this.configCache = JSON.parse(JSON.stringify(this.plugin.pluginConfig));
+                    this.changed = false;
+                } catch (err) {
+                    // TODO Display error that settings failed to save
+                    console.log(err);
+                }
+                this.saving = false;
             },
             resetSettings() {
+                if (this.saving) return;
                 this.configCache = JSON.parse(JSON.stringify(this.plugin.pluginConfig));
                 this.changed = false;
             },