Adding things from button or file (#136)
* Initial commit * Update Mods.vue * instances * Run lint * Update pnpm-lock.yaml * Update pnpm-lock.yaml * Buttons colorized * Update pnpm-lock.yaml * Switch to chips * Close modal when file is selected * fix icons --------- Co-authored-by: Geometrically <18202329+Geometrically@users.noreply.github.com> Co-authored-by: Jai A <jaiagr+gpg@pm.me>
This commit is contained in:
Adrian O.V
GitHub
parent
6198cc961a
commit
84d731b670
@ -1,6 +1,9 @@
|
||||
<template>
|
||||
<Modal ref="modal" header="Create instance">
|
||||
<div class="modal-body">
|
||||
<div class="modal-header">
|
||||
<Chips v-model="creationType" :items="['custom', 'from file']" />
|
||||
</div>
|
||||
<div v-if="creationType === 'custom'" class="modal-body">
|
||||
<div class="image-upload">
|
||||
<Avatar :src="display_icon" size="md" :rounded="true" />
|
||||
<div class="image-input">
|
||||
@ -79,6 +82,10 @@
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="modal-body">
|
||||
<Button @click="openFile"> <FolderOpenIcon /> Import from file </Button>
|
||||
<div class="info"><InfoIcon /> Or drag and drop your .mrpack file</div>
|
||||
</div>
|
||||
</Modal>
|
||||
</template>
|
||||
|
||||
@ -93,6 +100,8 @@ import {
|
||||
XIcon,
|
||||
CodeIcon,
|
||||
Checkbox,
|
||||
FolderOpenIcon,
|
||||
InfoIcon,
|
||||
} from 'omorphia'
|
||||
import { computed, ref, shallowRef } from 'vue'
|
||||
import { get_loaders } from '@/helpers/tags'
|
||||
@ -107,6 +116,8 @@ import {
|
||||
} from '@/helpers/metadata'
|
||||
import { handleError } from '@/store/notifications.js'
|
||||
import Multiselect from 'vue-multiselect'
|
||||
import { listen } from '@tauri-apps/api/event'
|
||||
import { install_from_file } from '@/helpers/pack.js'
|
||||
|
||||
const profile_name = ref('')
|
||||
const game_version = ref('')
|
||||
@ -118,6 +129,7 @@ const display_icon = ref(null)
|
||||
const showAdvanced = ref(false)
|
||||
const creating = ref(false)
|
||||
const showSnapshots = ref(false)
|
||||
const creationType = ref('from file')
|
||||
|
||||
defineExpose({
|
||||
show: () => {
|
||||
@ -184,16 +196,16 @@ const create_instance = async () => {
|
||||
const loader_version_value =
|
||||
loader_version.value === 'other' ? specified_loader_version.value : loader_version.value
|
||||
|
||||
create(
|
||||
modal.value.hide()
|
||||
creating.value = false
|
||||
|
||||
await create(
|
||||
profile_name.value,
|
||||
game_version.value,
|
||||
loader.value,
|
||||
loader.value === 'vanilla' ? null : loader_version_value ?? 'stable',
|
||||
icon.value
|
||||
).catch(handleError)
|
||||
|
||||
modal.value.hide()
|
||||
creating.value = false
|
||||
}
|
||||
|
||||
const upload_icon = async () => {
|
||||
@ -234,14 +246,27 @@ const selectable_versions = computed(() => {
|
||||
const toggle_advanced = () => {
|
||||
showAdvanced.value = !showAdvanced.value
|
||||
}
|
||||
|
||||
const openFile = async () => {
|
||||
const newProject = await open({ multiple: false })
|
||||
if (!newProject) return
|
||||
|
||||
modal.value.hide()
|
||||
await install_from_file(newProject).catch(handleError)
|
||||
}
|
||||
|
||||
listen('tauri://file-drop', async (event) => {
|
||||
modal.value.hide()
|
||||
await install_from_file(event.payload[0]).catch(handleError)
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
<style lang="scss" scoped>
|
||||
.modal-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 1rem;
|
||||
gap: 1rem;
|
||||
padding: var(--gap-lg);
|
||||
gap: var(--gap-md);
|
||||
}
|
||||
|
||||
.input-label {
|
||||
@ -284,4 +309,33 @@ const toggle_advanced = () => {
|
||||
.selector {
|
||||
max-width: 20rem;
|
||||
}
|
||||
|
||||
.labeled-divider {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.labeled-divider:after {
|
||||
background-color: var(--color-raised-bg);
|
||||
content: 'Or';
|
||||
color: var(--color-base);
|
||||
padding: var(--gap-sm);
|
||||
position: relative;
|
||||
top: -0.5rem;
|
||||
}
|
||||
|
||||
.info {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 0.5rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: var(--gap-lg);
|
||||
padding-bottom: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -28,18 +28,22 @@
|
||||
class="dropdown"
|
||||
/>
|
||||
</span>
|
||||
<Button
|
||||
<DropdownButton
|
||||
:options="['search', 'from_file']"
|
||||
default-value="search"
|
||||
name="add-content-dropdown"
|
||||
color="primary"
|
||||
@click="
|
||||
router.push({
|
||||
path: `/browse/${props.instance.metadata.loader === 'vanilla' ? 'datapack' : 'mod'}`,
|
||||
query: { i: $route.params.id },
|
||||
})
|
||||
"
|
||||
@option-click="handleContentOptionClick"
|
||||
>
|
||||
<PlusIcon />
|
||||
<span class="no-wrap"> Add content </span>
|
||||
</Button>
|
||||
<template #search>
|
||||
<SearchIcon />
|
||||
<span class="no-wrap"> Search addons </span>
|
||||
</template>
|
||||
<template #from_file>
|
||||
<FolderOpenIcon />
|
||||
<span class="no-wrap"> Add from file </span>
|
||||
</template>
|
||||
</DropdownButton>
|
||||
</span>
|
||||
</div>
|
||||
<div class="second-row">
|
||||
@ -63,15 +67,15 @@
|
||||
@option-click="toggleSelected"
|
||||
>
|
||||
<template #toggle>
|
||||
<GlobeIcon />
|
||||
<EditIcon />
|
||||
Toggle selected
|
||||
</template>
|
||||
<template #disable>
|
||||
<EditIcon />
|
||||
<XIcon />
|
||||
Disable selected
|
||||
</template>
|
||||
<template #enable>
|
||||
<HashIcon />
|
||||
<CheckCircleIcon />
|
||||
Enable selected
|
||||
</template>
|
||||
</DropdownButton>
|
||||
@ -182,7 +186,6 @@ import {
|
||||
Avatar,
|
||||
Button,
|
||||
TrashIcon,
|
||||
PlusIcon,
|
||||
Card,
|
||||
CheckIcon,
|
||||
SearchIcon,
|
||||
@ -190,6 +193,7 @@ import {
|
||||
DropdownSelect,
|
||||
AnimatedLogo,
|
||||
Chips,
|
||||
FolderOpenIcon,
|
||||
Checkbox,
|
||||
formatProjectType,
|
||||
DropdownButton,
|
||||
@ -198,17 +202,22 @@ import {
|
||||
HashIcon,
|
||||
Modal,
|
||||
XIcon,
|
||||
CheckCircleIcon,
|
||||
} from 'omorphia'
|
||||
import { computed, ref, watch } from 'vue'
|
||||
import { convertFileSrc } from '@tauri-apps/api/tauri'
|
||||
import { useRouter } from 'vue-router'
|
||||
import {
|
||||
add_project_from_path,
|
||||
get,
|
||||
remove_project,
|
||||
toggle_disable_project,
|
||||
update_all,
|
||||
update_project,
|
||||
} from '@/helpers/profile.js'
|
||||
import { handleError } from '@/store/notifications.js'
|
||||
import { open } from '@tauri-apps/api/dialog'
|
||||
import { listen } from '@tauri-apps/api/event'
|
||||
|
||||
const router = useRouter()
|
||||
|
||||
@ -228,49 +237,55 @@ const props = defineProps({
|
||||
})
|
||||
|
||||
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,
|
||||
version: project.metadata.version.version_number,
|
||||
file_name: project.file_name,
|
||||
icon: project.metadata.project.icon_url,
|
||||
disabled: project.disabled,
|
||||
updateVersion: project.metadata.update_version,
|
||||
outdated: !!project.metadata.update_version,
|
||||
project_type: project.metadata.project.project_type,
|
||||
})
|
||||
} 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,
|
||||
file_name: project.file_name,
|
||||
icon: project.metadata.icon ? convertFileSrc(project.metadata.icon) : null,
|
||||
disabled: project.disabled,
|
||||
outdated: false,
|
||||
project_type: project.metadata.project_type,
|
||||
})
|
||||
} else {
|
||||
projects.value.push({
|
||||
path,
|
||||
name: project.file_name,
|
||||
author: '',
|
||||
version: null,
|
||||
file_name: project.file_name,
|
||||
icon: null,
|
||||
disabled: project.disabled,
|
||||
outdated: false,
|
||||
project_type: null,
|
||||
})
|
||||
|
||||
const initProjects = (initInstance) => {
|
||||
projects.value = []
|
||||
for (const [path, project] of Object.entries(initInstance.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,
|
||||
version: project.metadata.version.version_number,
|
||||
file_name: project.file_name,
|
||||
icon: project.metadata.project.icon_url,
|
||||
disabled: project.disabled,
|
||||
updateVersion: project.metadata.update_version,
|
||||
outdated: !!project.metadata.update_version,
|
||||
project_type: project.metadata.project.project_type,
|
||||
})
|
||||
} 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,
|
||||
file_name: project.file_name,
|
||||
icon: project.metadata.icon ? convertFileSrc(project.metadata.icon) : null,
|
||||
disabled: project.disabled,
|
||||
outdated: false,
|
||||
project_type: project.metadata.project_type,
|
||||
})
|
||||
} else {
|
||||
projects.value.push({
|
||||
path,
|
||||
name: project.file_name,
|
||||
author: '',
|
||||
version: null,
|
||||
file_name: project.file_name,
|
||||
icon: null,
|
||||
disabled: project.disabled,
|
||||
outdated: false,
|
||||
project_type: null,
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
initProjects(props.instance)
|
||||
|
||||
const searchFilter = ref('')
|
||||
const selectAll = ref(false)
|
||||
const sortFilter = ref('')
|
||||
@ -392,6 +407,31 @@ async function removeMod(mod) {
|
||||
projects.value = projects.value.filter((x) => mod.path !== x.path)
|
||||
}
|
||||
|
||||
const handleContentOptionClick = async (args) => {
|
||||
if (args.option === 'search') {
|
||||
await router.push({
|
||||
path: `/browse/${props.instance.metadata.loader === 'vanilla' ? 'datapack' : 'mod'}`,
|
||||
})
|
||||
} else if (args.option === 'from_file') {
|
||||
const newProject = await open({ multiple: true })
|
||||
console.log(newProject)
|
||||
if (!newProject) return
|
||||
|
||||
for (const project of newProject) {
|
||||
console.log(project)
|
||||
await add_project_from_path(props.instance.path, project, 'mod').catch(handleError)
|
||||
initProjects(await get(props.instance.path).catch(handleError))
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
listen('tauri://file-drop', async (event) => {
|
||||
for (const file of event.payload) {
|
||||
await add_project_from_path(props.instance.path, file, 'mod').catch(handleError)
|
||||
initProjects(await get(props.instance.path).catch(handleError))
|
||||
}
|
||||
})
|
||||
|
||||
async function deleteSelected() {
|
||||
for (const project of selected.value) {
|
||||
await remove_project(props.instance.path, project.path).catch(handleError)
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user