Profile mods page (#119)

* Finish profile mods page

* commit missing

* finish pr

* Run lint

theseus_gui/src/components/ui/Instance.vue

@@ -193,7 +193,7 @@ onUnmounted(() => unlisten())
         <PlayIcon />
       </div>
       <div v-else-if="modLoading === true && playing === false" class="cta loading-cta">
-        <AnimatedLogo class="loading" />
+        <AnimatedLogo class="loading-indicator" />
       </div>
       <div
         v-else-if="playing === true"
@@ -210,6 +210,18 @@ onUnmounted(() => unlisten())
 </template>
 
 <style lang="scss">
+.loading-indicator {
+  width: 2.5rem !important;
+  height: 2.5rem !important;
+
+  svg {
+    width: 2.5rem !important;
+    height: 2.5rem !important;
+  }
+}
+</style>
+
+<style lang="scss" scoped>
 .instance-small-card {
   background-color: var(--color-bg) !important;
   display: flex;
@@ -329,16 +341,6 @@ onUnmounted(() => unlisten())
     display: flex;
     justify-content: center;
     align-items: center;
-
-    .loading {
-      width: 2.5rem !important;
-      height: 2.5rem !important;
-
-      svg {
-        width: 2.5rem !important;
-        height: 2.5rem !important;
-      }
-    }
   }
 }
 

theseus_gui/src/pages/Browse.vue

@@ -373,6 +373,22 @@ const handleInstanceSwitch = async (value) => {
 
 <style src="vue-multiselect/dist/vue-multiselect.css"></style>
 <style lang="scss">
+.filter-checkbox {
+  margin-bottom: 0.3rem;
+  font-size: 1rem;
+
+  svg {
+    display: flex;
+    align-self: center;
+    justify-self: center;
+  }
+
+  button.checkbox {
+    border: none;
+  }
+}
+</style>
+<style lang="scss" scoped>
 .project-type-dropdown {
   width: 100% !important;
 }
@@ -394,7 +410,8 @@ const handleInstanceSwitch = async (value) => {
 
 .iconified-input {
   input {
-    max-width: 20rem !important;
+    max-width: none !important;
+    flex-basis: auto;
   }
 }
 
@@ -461,21 +478,6 @@ const handleInstanceSwitch = async (value) => {
       margin-bottom: 0.5rem;
       font-size: 1.16rem;
     }
-
-    .filter-checkbox {
-      margin-bottom: 0.3rem;
-      font-size: 1rem;
-
-      svg {
-        display: flex;
-        align-self: center;
-        justify-self: center;
-      }
-
-      button.checkbox {
-        border: none;
-      }
-    }
   }
 
   .search {

theseus_gui/src/pages/Settings.vue

@@ -349,6 +349,17 @@ const setJavaInstall = (javaInstall) => {
 </template>
 
 <style lang="scss">
+.testing-loader {
+  height: 1rem !important;
+  width: 1rem !important;
+
+  svg {
+    height: inherit !important;
+    width: inherit !important;
+  }
+}
+</style>
+<style lang="scss" scoped>
 .concurrent-downloads {
   width: 80% !important;
 }
@@ -451,16 +462,6 @@ const setJavaInstall = (javaInstall) => {
   gap: 0.5rem;
 }
 
-.testing-loader {
-  height: 1rem !important;
-  width: 1rem !important;
-
-  svg {
-    height: inherit !important;
-    width: inherit !important;
-  }
-}
-
 .test-success {
   color: var(--color-green);
 }

theseus_gui/src/pages/instance/Index.vue

@@ -41,6 +41,7 @@
           <Button v-else-if="loading === true && playing === false" disabled class="instance-button"
             >Loading...</Button
           >
+          <!--TODO: https://github.com/tauri-apps/tauri/issues/4062 -->
           <Button class="instance-button" icon-only @click="open({ defaultPath: instance.path })">
             <OpenFolderIcon />
           </Button>

theseus_gui/src/pages/instance/Mods.vue

@@ -16,7 +16,7 @@
             class="dropdown"
           />
         </span>
-        <Button color="primary" @click="searchMod()">
+        <Button color="primary" @click="router.push({ path: '/browse/mod' })">
           <PlusIcon />
           <span class="no-wrap"> Add Content </span>
         </Button>
@@ -25,7 +25,7 @@
     <div class="table">
       <div class="table-row table-head">
         <div class="table-cell table-text">
-          <Button color="success" icon-only>
+          <Button icon-only :disabled="!projects.some((x) => x.outdated)" @click="updateAll">
             <UpdatedIcon />
           </Button>
         </div>
@@ -36,11 +36,10 @@
       </div>
       <div v-for="mod in search" :key="mod.file_name" class="table-row">
         <div class="table-cell table-text">
-          <Button v-if="mod.outdated" icon-only>
-            <UpdatedIcon />
-          </Button>
-          <Button v-else disabled icon-only>
-            <CheckIcon />
+          <AnimatedLogo v-if="mod.updating" class="btn icon-only updating-indicator"></AnimatedLogo>
+          <Button v-else :disabled="!mod.outdated" icon-only @click="updateProject(mod)">
+            <UpdatedIcon v-if="mod.outdated" />
+            <CheckIcon v-else />
           </Button>
         </div>
         <div class="table-cell table-text name-cell">
@@ -56,14 +55,15 @@
         <div class="table-cell table-text">{{ mod.version }}</div>
         <div class="table-cell table-text">{{ mod.author }}</div>
         <div class="table-cell table-text manage">
-          <Button icon-only>
+          <Button icon-only @click="removeMod(mod)">
             <TrashIcon />
           </Button>
           <input
             id="switch-1"
             type="checkbox"
             class="switch stylized-toggle"
-            :checked="mod.disabled"
+            :checked="!mod.disabled"
+            @change="toggleDisableMod(mod)"
           />
         </div>
       </div>
@@ -81,10 +81,17 @@ import {
   SearchIcon,
   UpdatedIcon,
   DropdownSelect,
+  AnimatedLogo,
 } from 'omorphia'
-import { computed, ref, shallowRef } from 'vue'
+import { computed, ref } from 'vue'
 import { convertFileSrc } from '@tauri-apps/api/tauri'
 import { useRouter } from 'vue-router'
+import {
+  remove_project,
+  toggle_disable_project,
+  update_all,
+  update_project,
+} from '@/helpers/profile.js'
 
 const router = useRouter()
 
@@ -97,11 +104,12 @@ const props = defineProps({
   },
 })
 
-const projects = shallowRef([])
-for (const project of Object.values(props.instance.projects)) {
+const projects = ref([])
+for (const [path, project] of Object.entries(props.instance.projects)) {
   if (project.metadata.type === 'modrinth') {
     let owner = project.metadata.members.find((x) => x.role === 'Owner')
     projects.value.push({
+      path,
       name: project.metadata.project.title,
       slug: project.metadata.project.slug,
       author: owner ? owner.user.username : null,
@@ -109,10 +117,12 @@ for (const project of Object.values(props.instance.projects)) {
       file_name: project.file_name,
       icon: project.metadata.project.icon_url,
       disabled: project.disabled,
-      outdated: project.metadata.update_version,
+      updateVersion: project.metadata.update_version,
+      outdated: !!project.metadata.update_version,
     })
   } else if (project.metadata.type === 'inferred') {
     projects.value.push({
+      path,
       name: project.metadata.title ?? project.file_name,
       author: project.metadata.authors[0],
       version: project.metadata.version,
@@ -123,6 +133,7 @@ for (const project of Object.values(props.instance.projects)) {
     })
   } else {
     projects.value.push({
+      path,
       name: project.file_name,
       author: '',
       version: null,
@@ -145,7 +156,7 @@ const search = computed(() => {
   return updateSort(filtered, sortFilter.value)
 })
 
-const updateSort = (projects, sort) => {
+function updateSort(projects, sort) {
   switch (sort) {
     case 'Version':
       return projects.slice().sort((a, b) => {
@@ -180,8 +191,49 @@ const updateSort = (projects, sort) => {
   }
 }
 
-const searchMod = () => {
-  router.push({ path: '/browse/mod' })
+async function updateAll() {
+  const setProjects = []
+  for (const [i, project] of projects.value.entries()) {
+    if (project.outdated) {
+      project.updating = true
+      setProjects.push(i)
+    }
+  }
+
+  const paths = await update_all(props.instance.path)
+
+  for (const [oldVal, newVal] of Object.entries(paths)) {
+    const index = projects.value.findIndex((x) => x.path === oldVal)
+    projects.value[index].path = newVal
+    projects.value[index].outdated = false
+
+    if (projects.value[index].updateVersion) {
+      projects.value[index].version = projects.value[index].updateVersion.version_number
+      projects.value[index].updateVersion = null
+    }
+  }
+  for (const project of setProjects) {
+    projects.value[project].updating = false
+  }
+}
+
+async function updateProject(mod) {
+  mod.updating = true
+  mod.path = await update_project(props.instance.path, mod.path)
+  mod.updating = false
+
+  mod.outdated = false
+  mod.version = mod.updateVersion.version_number
+  mod.updateVersion = null
+}
+
+async function toggleDisableMod(mod) {
+  mod.path = await toggle_disable_project(props.instance.path, mod.path)
+}
+
+async function removeMod(mod) {
+  await remove_project(props.instance.path, mod.path)
+  projects.value = projects.value.filter((x) => mod.path !== x.path)
 }
 </script>
 
@@ -241,3 +293,10 @@ const searchMod = () => {
   }
 }
 </style>
+<style lang="scss">
+.updating-indicator {
+  svg {
+    margin-left: 0.5rem !important;
+  }
+}
+</style>