Wire Profile Backend to Frontend (#71)

* Search updates * fixes2 * Some more work * start instance page wiring * Pack installation + Profile viewing * Remove print statement * Fix disappearing profiles * fix compile err * Finish Instance Running * remove print statement * fix prettier * Fix clippy + early return
2023-04-08 18:54:38 -07:00
parent 764d75181f
commit a62d931fe2
27 changed files with 502 additions and 739 deletions
--- a/theseus_gui/src/pages/Browse.vue
+++ b/theseus_gui/src/pages/Browse.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { ref, computed } from 'vue'
+import { ref } from 'vue'
 import { ofetch } from 'ofetch'
 import {
  Pagination,
@@ -13,39 +13,35 @@ import {
  Card,
  ClientIcon,
  ServerIcon,
+  AnimatedLogo,
 } from 'omorphia'
 import Multiselect from 'vue-multiselect'
 import { useSearch } from '@/store/state'
 import { get_categories, get_loaders, get_game_versions } from '@/helpers/tags'

-// Pull search store
 const searchStore = useSearch()

-const selectedVersions = ref([])
 const showSnapshots = ref(false)
+const loading = ref(true)

-// Sets the clear button's disabled attr
-const isClearDisabled = computed({
-  get() {
-    if (searchStore.facets.length > 0) return false
-    if (searchStore.orFacets.length > 0) return false
+const [categories, loaders, availableGameVersions] = await Promise.all([
+  get_categories(),
+  get_loaders(),
+  get_game_versions(),
+])

-    if (searchStore.environments.server === true || searchStore.environments.client === true)
-      return false
-    if (searchStore.openSource === true) return false
-    if (selectedVersions.value.length > 0) return false
-    return true
-  },
-})
+const getSearchResults = async (shouldLoad = false) => {
+  const queryString = searchStore.getQueryString()
+  if (shouldLoad === true) {
+    loading.value = true
+  }
+  const response = await ofetch(`https://api.modrinth.com/v2/search${queryString}`)
+  loading.value = false
+  searchStore.setSearchResults(response)
+}

-const categories = await get_categories()
-const loaders = await get_loaders()
-const availableGameVersions = await get_game_versions()
+getSearchResults(true)

-/**
- * Adds or removes facets from state
- * @param {String} facet The facet to commit to state
- */
 const toggleFacet = async (facet) => {
  const index = searchStore.facets.indexOf(facet)

@@ -55,10 +51,6 @@ const toggleFacet = async (facet) => {
  await getSearchResults()
 }

-/**
- * Adds or removes orFacets from state
- * @param {String} orFacet The orFacet to commit to state
- */
 const toggleOrFacet = async (orFacet) => {
  const index = searchStore.orFacets.indexOf(orFacet)

@@ -68,68 +60,15 @@ const toggleOrFacet = async (orFacet) => {
  await getSearchResults()
 }

-/**
- * Makes the API request to labrinth
- */
-const getSearchResults = async () => {
-  const queryString = searchStore.getQueryString()
-  const response = await ofetch(`https://api.modrinth.com/v2/search${queryString}`)
-
-  searchStore.setSearchResults(response)
-}
-await getSearchResults()
-
-/**
- * For when user enters input in search bar
- */
-const refreshSearch = async () => {
-  await getSearchResults()
-}
-
-/**
- * For when the user changes the Sort dropdown
- * @param {Object} e Event param to see selected option
- */
-const handleSort = async (e) => {
-  searchStore.filter = e.option
-  await getSearchResults()
-}
-
-/**
- * For when user changes Limit dropdown
- * @param {Object} e Event param to see selected option
- */
-const handleLimit = async (e) => {
-  searchStore.limit = e.option
-  await getSearchResults()
-}
-
-/**
- * For when user pages results
- * @param {Number} page The new page to display
- */
 const switchPage = async (page) => {
  searchStore.currentPage = parseInt(page)
  if (page === 1) searchStore.offset = 0
-  else searchStore.offset = searchStore.currentPage * 10 - 10
+  else searchStore.offset = (searchStore.currentPage - 1) * searchStore.limit
  await getSearchResults()
 }

-/**
- * For when a user interacts with version filters
- */
-const handleVersionSelect = async () => {
-  searchStore.activeVersions = selectedVersions.value.map((ver) => ver)
-  await getSearchResults()
-}
-
-/**
- * For when user resets all filters
- */
 const handleReset = async () => {
  searchStore.resetFilters()
-  selectedVersions.value = []
-  isClearDisabled.value = true
  await getSearchResults()
 }
 </script>
@@ -137,7 +76,19 @@ const handleReset = async () => {
 <template>
  <div class="search-container">
    <aside class="filter-panel">
-      <Button role="button" :disabled="isClearDisabled" @click="handleReset"
+      <Button
+        role="button"
+        :disabled="
+          !(
+            searchStore.facets.length > 0 ||
+            searchStore.orFacets.length > 0 ||
+            searchStore.environments.server === true ||
+            searchStore.environments.client === true ||
+            searchStore.openSource === true ||
+            searchStore.activeVersions.length > 0
+          )
+        "
+        @click="handleReset"
        ><ClearIcon />Clear Filters</Button
      >
      <div class="categories">
@@ -177,18 +128,18 @@ const handleReset = async () => {
        <SearchFilter
          v-model="searchStore.environments.client"
          display-name="Client"
-          :facet-name="client"
+          facet-name="client"
          class="filter-checkbox"
-          @click="refreshSearch"
+          @click="getSearchResults"
        >
          <ClientIcon aria-hidden="true" />
        </SearchFilter>
        <SearchFilter
          v-model="searchStore.environments.server"
          display-name="Server"
-          :facet-name="server"
+          facet-name="server"
          class="filter-checkbox"
-          @click="refreshSearch"
+          @click="getSearchResults"
        >
          <ServerIcon aria-hidden="true" />
        </SearchFilter>
@@ -197,7 +148,7 @@ const handleReset = async () => {
        <h2>Minecraft versions</h2>
        <Checkbox v-model="showSnapshots" class="filter-checkbox">Show snapshots</Checkbox>
        <multiselect
-          v-model="selectedVersions"
+          v-model="searchStore.activeVersions"
          :options="
            showSnapshots
              ? availableGameVersions.map((x) => x.version)
@@ -211,14 +162,17 @@ const handleReset = async () => {
          :close-on-select="false"
          :clear-search-on-select="false"
          :show-labels="false"
-          :selectable="() => selectedVersions.length <= 6"
          placeholder="Choose versions..."
-          @update:model-value="handleVersionSelect"
+          @update:model-value="getSearchResults"
        />
      </div>
      <div class="open-source">
        <h2>Open source</h2>
-        <Checkbox v-model="searchStore.openSource" class="filter-checkbox" @click="refreshSearch">
+        <Checkbox
+          v-model="searchStore.openSource"
+          class="filter-checkbox"
+          @click="getSearchResults"
+        >
          Open source
        </Checkbox>
      </div>
@@ -231,12 +185,13 @@ const handleReset = async () => {
            <input
              v-model="searchStore.searchInput"
              type="text"
-              placeholder="Search.."
-              @input="refreshSearch"
+              placeholder="Search modpacks..."
+              @input="getSearchResults"
            />
          </div>
          <span>Sort by</span>
          <DropdownSelect
+            v-model="searchStore.filter"
            name="Sort dropdown"
            :options="[
              'Relevance',
@@ -245,19 +200,18 @@ const handleReset = async () => {
              'Recently published',
              'Recently updated',
            ]"
-            :default-value="searchStore.filter"
-            :model-value="searchStore.filter"
            class="sort-dropdown"
-            @change="handleSort"
+            @change="getSearchResults"
          />
          <span>Show per page</span>
          <DropdownSelect
+            v-model="searchStore.limit"
            name="Limit dropdown"
-            :options="['5', '10', '15', '20', '50', '100']"
+            :options="[5, 10, 15, 20, 50, 100]"
            :default-value="searchStore.limit.toString()"
            :model-value="searchStore.limit.toString()"
            class="limit-dropdown"
-            @change="handleLimit"
+            @change="getSearchResults"
          />
        </div>
      </Card>
@@ -266,7 +220,8 @@ const handleReset = async () => {
        :count="searchStore.pageCount"
        @switch-page="switchPage"
      />
-      <section class="project-list display-mode--list instance-results" role="list">
+      <AnimatedLogo v-if="loading" class="loading" />
+      <section v-else class="project-list display-mode--list instance-results" role="list">
        <ProjectCard
          v-for="result in searchStore.searchResults"
          :id="`${result?.project_id}/`"
@@ -396,18 +351,9 @@ const handleReset = async () => {
    margin: 0 1rem 0 17rem;
    width: 100%;

-    .instance-project-item {
-      width: 100%;
-      height: auto;
-      cursor: pointer;
-    }
-
-    .result-project-item {
-      a {
-        &:hover {
-          text-decoration: none !important;
-        }
-      }
+    .loading {
+      margin: 2rem;
+      text-align: center;
    }
  }
 }
--- a/theseus_gui/src/pages/Index.vue
+++ b/theseus_gui/src/pages/Index.vue
@@ -1,22 +1,17 @@
 <script setup>
-import { useInstances, useNews } from '@/store/state'
 import RowDisplay from '@/components/RowDisplay.vue'
+import { shallowRef } from 'vue'
+import { list } from '@/helpers/profile.js'

-const instanceStore = useInstances()
-const newsStore = useNews()
-instanceStore.fetchInstances()
-newsStore.fetchNews()
-
-// Remove once state is populated with real data
-const recentInstances = instanceStore.instances.slice(0, 4)
-const popularInstances = instanceStore.instances.filter((i) => i.downloads > 50 || i.trending)
+const profiles = await list()
+const recentInstances = shallowRef(Object.values(profiles))
 </script>

 <template>
  <div class="page-container">
    <RowDisplay label="Jump back in" :instances="recentInstances" :can-paginate="false" />
-    <RowDisplay label="Popular packs" :instances="popularInstances" :can-paginate="true" />
-    <RowDisplay label="News & updates" :news="newsStore.news" :can-paginate="true" />
+    <RowDisplay label="Popular packs" :instances="recentInstances" :can-paginate="true" />
+    <RowDisplay label="Test" :instances="recentInstances" :can-paginate="true" />
  </div>
 </template>

--- a/theseus_gui/src/pages/Library.vue
+++ b/theseus_gui/src/pages/Library.vue
@@ -1,14 +1,15 @@
 <script setup>
-import { useInstances } from '@/store/state'
 import GridDisplay from '@/components/GridDisplay.vue'
+import { shallowRef } from 'vue'
+import { list } from '@/helpers/profile.js'

-const instances = useInstances()
-instances.fetchInstances()
+const profiles = await list()
+const instances = shallowRef(Object.values(profiles))
 </script>

 <template>
  <div>
-    <GridDisplay label="Instances" :instances="instances.instances" />
-    <GridDisplay label="Modpacks" :instances="instances.instances" />
+    <GridDisplay label="Instances" :instances="instances" />
+    <GridDisplay label="Modpacks" :instances="instances" />
  </div>
 </template>
--- a/theseus_gui/src/pages/instance/Index.vue
+++ b/theseus_gui/src/pages/instance/Index.vue
@@ -2,13 +2,15 @@
  <div class="instance-container">
    <div class="side-cards">
      <Card class="instance-card">
-        <Avatar size="lg" :src="getInstance(instanceStore).img" />
+        <Avatar size="lg" :src="convertFileSrc(instance.metadata.icon)" />
        <div class="instance-info">
-          <h2 class="name">{{ getInstance(instanceStore).name }}</h2>
-          Fabric {{ getInstance(instanceStore).version }}
+          <h2 class="name">{{ instance.metadata.name }}</h2>
+          <span class="metadata"
+            >{{ instance.metadata.loader }} {{ instance.metadata.game_version }}</span
+          >
        </div>
        <span class="button-group">
-          <Button color="primary" class="instance-button">
+          <Button color="primary" class="instance-button" @click="run($route.params.id)">
            <PlayIcon />
            Play
          </Button>
@@ -18,15 +20,15 @@
        </span>
      </Card>
      <div class="pages-list">
-        <RouterLink :to="`/instance/${$route.params.id}/`" class="btn">
+        <RouterLink :to="`/instance/${encodeURIComponent($route.params.id)}/`" class="btn">
          <BoxIcon />
          Mods
        </RouterLink>
-        <RouterLink :to="`/instance/${$route.params.id}/options`" class="btn">
+        <RouterLink :to="`/instance/${encodeURIComponent($route.params.id)}/options`" class="btn">
          <SettingsIcon />
          Options
        </RouterLink>
-        <RouterLink :to="`/instance/${$route.params.id}/logs`" class="btn">
+        <RouterLink :to="`/instance/${encodeURIComponent($route.params.id)}/logs`" class="btn">
          <FileIcon />
          Logs
        </RouterLink>
@@ -34,26 +36,20 @@
    </div>
    <div class="content">
      <Promotion />
-      <router-view />
+      <router-view :instance="instance" />
    </div>
  </div>
 </template>
 <script setup>
 import { BoxIcon, SettingsIcon, FileIcon, Button, Avatar, Card, Promotion } from 'omorphia'
 import { PlayIcon, OpenFolderIcon } from '@/assets/icons'
-import { useInstances } from '@/store/state'
+import { get, run } from '@/helpers/profile'
+import { useRoute } from 'vue-router'
+import { shallowRef } from 'vue'
+import { convertFileSrc } from '@tauri-apps/api/tauri'

-const instanceStore = useInstances()
-instanceStore.fetchInstances()
-</script>
-<script>
-export default {
-  methods: {
-    getInstance(instanceStore) {
-      return instanceStore.instances.find((i) => i.id === parseInt(this.$route.params.id))
-    },
-  },
-}
+const route = useRoute()
+const instance = shallowRef(await get(route.params.id))
 </script>

 <style scoped lang="scss">
@@ -101,6 +97,10 @@ Button {
  color: var(--color-contrast);
 }

+.metadata {
+  text-transform: capitalize;
+}
+
 .instance-container {
  display: flex;
  flex-direction: row;
--- a/theseus_gui/src/pages/instance/Mods.vue
+++ b/theseus_gui/src/pages/instance/Mods.vue
@@ -10,6 +10,7 @@
          Sort By
          <DropdownSelect
            v-model="sortFilter"
+            name="sort-by"
            :options="['Name', 'Version', 'Author']"
            default-value="Name"
            class="dropdown"
@@ -33,9 +34,9 @@
        <div class="table-cell table-text">Author</div>
        <div class="table-cell table-text">Actions</div>
      </div>
-      <div v-for="mod in search" :key="mod.name" class="table-row">
+      <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>
+          <Button v-if="true" icon-only>
            <UpdatedIcon />
          </Button>
          <Button v-else disabled icon-only>
@@ -43,10 +44,14 @@
          </Button>
        </div>
        <div class="table-cell table-text name-cell">
-          <router-link :to="`/project/${mod.slug}/`" class="mod-text">
+          <router-link v-if="mod.slug" :to="`/project/${mod.slug}/`" class="mod-text">
            <Avatar :src="mod.icon" />
            {{ mod.name }}
          </router-link>
+          <div v-else class="mod-text">
+            <Avatar :src="mod.icon" />
+            {{ mod.name }}
+          </div>
        </div>
        <div class="table-cell table-text">{{ mod.version }}</div>
        <div class="table-cell table-text">{{ mod.author }}</div>
@@ -54,118 +59,17 @@
          <Button icon-only>
            <TrashIcon />
          </Button>
-          <input id="switch-1" type="checkbox" class="switch stylized-toggle" checked />
+          <input
+            id="switch-1"
+            type="checkbox"
+            class="switch stylized-toggle"
+            :checked="mod.disabled"
+          />
        </div>
      </div>
    </div>
  </Card>
 </template>
-
-<script>
-export default {
-  name: 'Mods',
-  data() {
-    return {
-      searchFilter: '',
-      sortFilter: '',
-      mods: [
-        {
-          name: 'Fabric API',
-          slug: 'fabric-api',
-          icon: 'https://cdn.modrinth.com/data/P7dR8mSH/icon.png',
-          version: '0.76.0+1.19.4',
-          author: 'modmuss50',
-          description:
-            'Lightweight and modular API providing common hooks and intercompatibility measures utilized by mods using the Fabric toolchain.',
-          outdated: true,
-        },
-        {
-          name: 'Spirit',
-          slug: 'spirit',
-          icon: 'https://cdn.modrinth.com/data/b1LdOZlE/465598dc5d89f67fb8f8de6def21240fa35e3a54.png',
-          version: '2.2.4',
-          author: 'CodexAdrian',
-          description: 'Create your own configurable mob spawner!',
-          outdated: true,
-        },
-        {
-          name: 'Botarium',
-          slug: 'botarium',
-          icon: 'https://cdn.modrinth.com/data/2u6LRnMa/98b286b0d541ad4f9409e0af3df82ad09403f179.gif',
-          version: '2.0.5',
-          author: 'CodexAdrian',
-          description:
-            'A crossplatform API for devs that makes transfer and storage of items, fluids and energy easier, as well as some other helpful things',
-          outdated: true,
-        },
-        {
-          name: 'Tempad',
-          slug: 'tempad',
-          icon: 'https://cdn.modrinth.com/data/gKNwt7xu/icon.gif',
-          version: '2.2.4',
-          author: 'CodexAdrian',
-          description: 'Create a portal to anywhere from anywhere',
-          outdated: false,
-        },
-        {
-          name: 'Sodium',
-          slug: 'sodium',
-          icon: 'https://cdn.modrinth.com/data/AANobbMI/icon.png',
-          version: '0.4.10',
-          author: 'jellysquid3',
-          description: 'Modern rendering engine and client-side optimization mod for Minecraft',
-          outdated: false,
-        },
-      ],
-    }
-  },
-  computed: {
-    search() {
-      const filtered = this.mods.filter((mod) => {
-        return mod.name.toLowerCase().includes(this.searchFilter.toLowerCase())
-      })
-
-      return this.updateSort(filtered, this.sortFilter)
-    },
-  },
-  methods: {
-    updateSort(projects, sort) {
-      switch (sort) {
-        case 'Version':
-          return projects.slice().sort((a, b) => {
-            if (a.version < b.version) {
-              return -1
-            }
-            if (a.version > b.version) {
-              return 1
-            }
-            return 0
-          })
-        case 'Author':
-          return projects.slice().sort((a, b) => {
-            if (a.author < b.author) {
-              return -1
-            }
-            if (a.author > b.author) {
-              return 1
-            }
-            return 0
-          })
-        default:
-          return projects.slice().sort((a, b) => {
-            if (a.name < b.name) {
-              return -1
-            }
-            if (a.name > b.name) {
-              return 1
-            }
-            return 0
-          })
-      }
-    },
-  },
-}
-</script>
 <script setup>
 import {
  Avatar,
@@ -178,6 +82,97 @@ import {
  UpdatedIcon,
  DropdownSelect,
 } from 'omorphia'
+import { computed, ref, shallowRef } from 'vue'
+import { convertFileSrc } from '@tauri-apps/api/tauri'
+
+const props = defineProps({
+  instance: {
+    type: Object,
+    default() {
+      return {}
+    },
+  },
+})
+
+const projects = shallowRef([])
+for (const project of Object.values(props.instance.projects)) {
+  if (project.metadata.type === 'modrinth') {
+    let owner = project.metadata.members.find((x) => x.role === 'Owner')
+    projects.value.push({
+      name: project.metadata.project.title,
+      slug: project.metadata.project.slug,
+      author: owner ? owner.user.username : null,
+      version: project.metadata.version.version_number,
+      file_name: project.file_name,
+      icon: project.metadata.project.icon_url,
+      disabled: project.disabled,
+    })
+  } else if (project.metadata.type === 'inferred') {
+    projects.value.push({
+      name: project.metadata.title ?? project.file_name,
+      author: project.metadata.authors[0],
+      version: project.metadata.version,
+      file_name: project.file_name,
+      icon: project.metadata.icon ? convertFileSrc(project.metadata.icon) : null,
+      disabled: project.disabled,
+    })
+  } else {
+    projects.value.push({
+      name: project.file_name,
+      author: '',
+      version: null,
+      file_name: project.file_name,
+      icon: null,
+      disabled: project.disabled,
+    })
+  }
+}
+
+const searchFilter = ref('')
+const sortFilter = ref('')
+
+const search = computed(() => {
+  const filtered = projects.value.filter((mod) => {
+    return mod.name.toLowerCase().includes(searchFilter.value.toLowerCase())
+  })
+
+  return updateSort(filtered, sortFilter.value)
+})
+
+function updateSort(projects, sort) {
+  switch (sort) {
+    case 'Version':
+      return projects.slice().sort((a, b) => {
+        if (a.version < b.version) {
+          return -1
+        }
+        if (a.version > b.version) {
+          return 1
+        }
+        return 0
+      })
+    case 'Author':
+      return projects.slice().sort((a, b) => {
+        if (a.author < b.author) {
+          return -1
+        }
+        if (a.author > b.author) {
+          return 1
+        }
+        return 0
+      })
+    default:
+      return projects.slice().sort((a, b) => {
+        if (a.name < b.name) {
+          return -1
+        }
+        if (a.name > b.name) {
+          return 1
+        }
+        return 0
+      })
+  }
+}
 </script>

 <style scoped lang="scss">
--- a/theseus_gui/src/pages/project/Index.vue
+++ b/theseus_gui/src/pages/project/Index.vue
@@ -22,7 +22,6 @@
          ]"
        >
          <EnvironmentIndicator
-            :type-only="moderation"
            :client-side="data.client_side"
            :server-side="data.server_side"
            :type="data.project_type"
@@ -30,7 +29,7 @@
        </Categories>
        <hr class="card-divider" />
        <div class="button-group">
-          <Button color="primary" class="instance-button">
+          <Button color="primary" class="instance-button" @click="install">
            <DownloadIcon />
            Install
          </Button>
@@ -209,6 +208,7 @@ import {
  OpenCollectiveIcon,
 } from '@/assets/external'
 import { get_categories, get_loaders } from '@/helpers/tags'
+import { install as pack_install } from '@/helpers/pack'
 import dayjs from 'dayjs'
 import relativeTime from 'dayjs/plugin/relativeTime'
 import { ofetch } from 'ofetch'
@@ -230,11 +230,20 @@ const [data, versions, members, dependencies] = await Promise.all([
 watch(
  () => route.params.id,
  () => {
-    router.go()
+    if (route.params.id) router.go()
  }
 )

 dayjs.extend(relativeTime)
+
+async function install() {
+  if (data.value.project_type === 'modpack') {
+    let id = await pack_install(versions.value[0].id)
+
+    let router = useRouter()
+    await router.push({ path: `/instance/${encodeURIComponent(id)}` })
+  }
+}
 </script>

 <style scoped lang="scss">