feat: Enable toggling enabled mods (#29)

* feat: Enable toggling enabled mods

Co-authored-by: pg9182 <96569817+pg9182@users.noreply.github.com>

* chore: Update leftover comment

Co-authored-by: pg9182 <96569817+pg9182@users.noreply.github.com>

1 files changed, 37 insertions, 1 deletions

diff --git a/src-vue/src/views/ModsView.vue b/src-vue/src/views/ModsView.vue
index 934d6b9d..8e032183 100644
--- a/src-vue/src/views/ModsView.vue
+++ b/src-vue/src/views/ModsView.vue
@@ -4,7 +4,7 @@
         <div>
             <el-card shadow="hover" v-for="mod in installed_mods">
                 <el-switch style="--el-switch-on-color: #13ce66; --el-switch-off-color: #8957e5" v-model="mod.enabled"
-                    disabled />
+                    :before-change="() => updateWhichModsEnabled(mod)" :loading="global_load_indicator" />
                 {{mod.name}}
             </el-card>
         </div>
@@ -23,6 +23,7 @@ export default defineComponent({
     data() {
         return {
             installed_mods: [] as NorthstarMod[],
+            global_load_indicator: false
         }
     },
     async mounted() {
@@ -44,6 +45,41 @@ export default defineComponent({
                     position: 'bottom-right'
                 });
             });
+    },
+    methods: {
+        async updateWhichModsEnabled(mod: NorthstarMod) {
+            this.global_load_indicator = true;
+
+            // Setup up struct
+            let game_install = {
+                game_path: this.$store.state.game_path,
+                install_type: this.$store.state.install_type
+            } as GameInstall;
+
+            // enable/disable specific mod
+            try {
+                await invoke("set_mod_enabled_status_caller", {
+                    gameInstall: game_install,
+                    modName: mod.name,
+                    // Need to set it to the opposite of current state,
+                    // as current state is only updated after command is run
+                    isEnabled: !mod.enabled,
+                })
+            }
+            catch (error) {
+                ElNotification({
+                    title: 'Error',
+                    message: `${error}`,
+                    type: 'error',
+                    position: 'bottom-right'
+                });
+                this.global_load_indicator = false;
+                return false;
+            }
+
+            this.global_load_indicator = false;
+            return true;
+        }
     }
 });
 </script>