Export UI (#297)

* Exporting

* Linter

* Fixed helper error

* Delete export

theseus_gui/src/assets/icons/index.js

@@ -2,3 +2,5 @@ export { default as ServerIcon } from './server.svg'
 export { default as MinimizeIcon } from './minimize.svg'
 export { default as MaximizeIcon } from './maximize.svg'
 export { default as SwapIcon } from './arrow-left-right.svg'
+export { default as PackageIcon } from './package.svg'
+export { default as VersionIcon } from './milestone.svg'

theseus_gui/src/assets/icons/milestone.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-milestone"><path d="M18 6H5a2 2 0 0 0-2 2v3a2 2 0 0 0 2 2h13l4-3.5L18 6Z"/><path d="M12 13v8"/><path d="M12 3v3"/></svg>

theseus_gui/src/assets/icons/package.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-package"><path d="M16.5 9.4 7.55 4.24"/><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/><polyline points="3.29 7 12 12 20.71 7"/><line x1="12" x2="12" y1="22" y2="12"/></svg>

theseus_gui/src/components/ui/ExportModal.vue

@@ -0,0 +1,238 @@
+<script setup>
+import { Button, Checkbox, Modal, SendIcon, XIcon } from 'omorphia'
+import { PackageIcon, VersionIcon } from '@/assets/icons'
+import { ref } from 'vue'
+import { export_profile_mrpack, get_potential_override_folders } from '@/helpers/profile.js'
+import { open } from '@tauri-apps/api/dialog'
+import { handleError } from '@/store/notifications.js'
+
+const props = defineProps({
+  instance: {
+    type: Object,
+    required: true,
+  },
+})
+
+defineExpose({
+  show: () => {
+    exportModal.value.show()
+    initFiles()
+  },
+})
+
+const exportModal = ref(null)
+const nameInput = ref(props.instance.metadata.name)
+const versionInput = ref('1.0.0')
+const files = ref([])
+const folders = ref([])
+
+const initFiles = async () => {
+  const newFolders = new Map()
+  files.value = []
+  await get_potential_override_folders(props.instance.path).then((filePaths) =>
+    filePaths
+      .map((folder) => ({
+        path: folder,
+        name: folder.split('/').pop(),
+        selected: false,
+      }))
+      .forEach((pathData) => {
+        const parent = pathData.path.split('/').slice(0, -1).join('/')
+        if (parent !== '') {
+          if (newFolders.has(parent)) {
+            newFolders.get(parent).push(pathData)
+          } else {
+            newFolders.set(parent, [pathData])
+          }
+        } else {
+          files.value.push(pathData)
+        }
+      })
+  )
+  folders.value = [...newFolders.entries()].map(([name, value]) => [
+    {
+      name,
+      showingMore: false,
+    },
+    value,
+  ])
+}
+
+await initFiles()
+
+const exportPack = async () => {
+  const filesToExport = files.value.filter((file) => file.selected).map((file) => file.path)
+  folders.value.forEach((args) => {
+    args[1].forEach((child) => {
+      if (child.selected) {
+        filesToExport.push(child.path)
+      }
+    })
+  })
+  console.log(filesToExport)
+  const outputPath = await open({
+    directory: true,
+    multiple: false,
+  })
+
+  if (outputPath) {
+    console.log(outputPath)
+    export_profile_mrpack(
+      props.instance.path,
+      outputPath + `/${nameInput.value} ${versionInput.value}.mrpack`,
+      filesToExport,
+      versionInput.value
+    ).catch((err) => handleError(err))
+    exportModal.value.hide()
+  }
+}
+</script>
+
+<template>
+  <Modal ref="exportModal" header="Export modpack">
+    <div class="modal-body">
+      <div class="labeled_input">
+        <p>Modpack Name</p>
+        <div class="iconified-input">
+          <PackageIcon />
+          <input v-model="nameInput" type="text" placeholder="Modpack name" class="input" />
+          <Button @click="nameInput = ''">
+            <XIcon />
+          </Button>
+        </div>
+      </div>
+      <div class="labeled_input">
+        <p>Version number</p>
+        <div class="iconified-input">
+          <VersionIcon />
+          <input v-model="versionInput" type="text" placeholder="1.0.0" class="input" />
+          <Button @click="versionInput = ''">
+            <XIcon />
+          </Button>
+        </div>
+      </div>
+      <div class="table">
+        <div class="table-head">
+          <div class="table-cell">Select files as overrides</div>
+        </div>
+        <div class="table-content">
+          <div v-for="[path, children] of folders" :key="path.name" class="table-row">
+            <div class="table-cell file-entry">
+              <div class="file-primary">
+                <Checkbox
+                  :model-value="children.every((child) => child.selected)"
+                  :label="path.name"
+                  class="select-checkbox"
+                  @update:model-value="
+                    (newValue) => children.forEach((child) => (child.selected = newValue))
+                  "
+                />
+                <Checkbox
+                  v-model="path.showingMore"
+                  class="select-checkbox dropdown"
+                  collapsing-toggle-style
+                />
+              </div>
+              <div v-if="path.showingMore" class="file-secondary">
+                <div v-for="child in children" :key="child.path" class="file-secondary-row">
+                  <Checkbox v-model="child.selected" :label="child.name" class="select-checkbox" />
+                </div>
+              </div>
+            </div>
+          </div>
+          <div v-for="file in files" :key="file.path" class="table-row">
+            <div class="table-cell file-entry">
+              <div class="file-primary">
+                <Checkbox v-model="file.selected" :label="file.name" class="select-checkbox" />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="button-row push-right">
+        <Button @click="exportModal.hide">
+          <XIcon />
+          Cancel
+        </Button>
+        <Button disabled>
+          <SendIcon />
+          Share
+        </Button>
+        <Button color="primary" @click="exportPack">
+          <PackageIcon />
+          Export
+        </Button>
+      </div>
+    </div>
+  </Modal>
+</template>
+
+<style scoped lang="scss">
+.modal-body {
+  padding: var(--gap-xl);
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-md);
+}
+
+.labeled_input {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-sm);
+
+  p {
+    margin: 0;
+  }
+}
+
+.select-checkbox {
+  button.checkbox {
+    border: none;
+  }
+
+  &.dropdown {
+    margin-left: auto;
+  }
+}
+
+.table-content {
+  max-height: 18rem;
+  overflow-y: auto;
+}
+
+.table {
+  border: 1px solid var(--color-bg);
+}
+
+.file-entry {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-sm);
+}
+
+.file-primary {
+  display: flex;
+  align-items: center;
+  gap: var(--gap-sm);
+}
+
+.file-secondary {
+  margin-left: var(--gap-xl);
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-sm);
+  height: 100%;
+  vertical-align: center;
+}
+
+.file-secondary-row {
+  display: flex;
+  align-items: center;
+  gap: var(--gap-sm);
+}
+
+.button-row {
+  display: flex;
+  gap: var(--gap-sm);
+}
+</style>

theseus_gui/src/helpers/profile.js

@@ -98,7 +98,7 @@ export async function remove_project(path, projectPath) {
 /// included_overrides is an array of paths to override folders to include (ie: 'mods', 'resource_packs')
 // Version id is optional (ie: 1.1.5)
 export async function export_profile_mrpack(path, exportLocation, includedOverrides, versionId) {
-  return await invoke('profile_export_mrpack', {
+  return await invoke('plugin:profile|profile_export_mrpack', {
     path,
     exportLocation,
     includedOverrides,
@@ -115,7 +115,7 @@ export async function export_profile_mrpack(path, exportLocation, includedOverri
 // => [mods, resourcepacks]
 // allows selection for 'included_overrides' in export_profile_mrpack
 export async function get_potential_override_folders(profilePath) {
-  return await invoke('profile_get_potential_override_folders', { profilePath })
+  return await invoke('plugin:profile|profile_get_potential_override_folders', { profilePath })
 }
 
 // Run Minecraft using a pathed profile

theseus_gui/src/pages/instance/Index.vue

@@ -72,6 +72,13 @@
             Options
           </RouterLink>
         </div>
+        <hr class="card-divider" />
+        <div class="pages-list">
+          <Button class="transparent" @click="exportModal.show()">
+            <PackageIcon />
+            Export modpack
+          </Button>
+        </div>
       </Card>
     </div>
     <div class="content">
@@ -95,6 +102,7 @@
     <template #copy_link> <ClipboardCopyIcon /> Copy Link </template>
     <template #open_link> <ClipboardCopyIcon /> Open In Modrinth <ExternalIcon /> </template>
   </ContextMenu>
+  <ExportModal ref="exportModal" :instance="instance" />
 </template>
 <script setup>
 import {
@@ -127,11 +135,14 @@ import { handleError, useBreadcrumbs, useLoading } from '@/store/state'
 import { showInFolder } from '@/helpers/utils.js'
 import ContextMenu from '@/components/ui/ContextMenu.vue'
 import mixpanel from 'mixpanel-browser'
+import { PackageIcon } from '@/assets/icons/index.js'
+import ExportModal from '@/components/ui/ExportModal.vue'
 
 const route = useRoute()
 
 const router = useRouter()
 const breadcrumbs = useBreadcrumbs()
+const exportModal = ref(null)
 
 const instance = ref(await get(route.params.id).catch(handleError))
 
@@ -288,7 +299,20 @@ Button {
   flex-direction: column;
   padding: 1rem;
   min-height: calc(100% - 3.25rem);
-  overflow: hidden;
+  max-height: calc(100% - 3.25rem);
+  overflow-y: auto;
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+
+  &::-webkit-scrollbar {
+    width: 0;
+    background: transparent;
+  }
+
+  .card {
+    min-height: unset;
+    margin-bottom: 0;
+  }
 }
 
 .instance-nav {
@@ -341,7 +365,7 @@ Button {
   flex-direction: column;
   gap: var(--gap-xs);
 
-  a {
+  .btn {
     font-size: 100%;
     font-weight: 400;
     background: inherit;

theseus_gui/src/pages/instance/Mods.vue

@@ -56,6 +56,7 @@
         :options="['update_all', 'filter_update']"
         default-value="update_all"
         :disabled="!projects.some((x) => x.outdated)"
+        name="update-all-dropdown"
         @option-click="updateAll"
       >
         <template #update_all>

theseus_gui/src/pages/project/Index.vue

@@ -531,8 +531,8 @@ const handleOptionsClick = (args) => {
   min-height: calc(100vh - 3.25rem);
   height: fit-content;
   max-height: calc(100vh - 3.25rem);
-  overflow-y: auto;
   padding: 1rem 0.5rem 1rem 1rem;
+  overflow-y: auto;
   -ms-overflow-style: none;
   scrollbar-width: none;