forked from didirus/AstralRinth
c39bb78e38
* Start of app redesign * format * continue progress * Content page nearly done * Fix recursion issues with content page * Fix update all alignment * Discover page progress * Settings progress * Removed unlocked-size hack that breaks web * Revamp project page, refactor web project page to share code with app, fixed loading bar, misc UI/UX enhancements, update ko-fi logo, update arrow icons, fix web issues caused by floating-vue migration, fix tooltip issues, update web tooltips, clean up web hydration issues * Ads + run prettier * Begin auth refactor, move common messages to ui lib, add i18n extraction to all apps, begin Library refactor * fix ads not hiding when plus log in * rev lockfile changes/conflicts * Fix sign in page * Add generated * (mostly) Data driven search * Fix search mobile issue * profile fixes * Project versions page, fix typescript on UI lib and misc fixes * Remove unused gallery component * Fix linkfunction err * Search filter controls at top, localization for locked filters * Fix provided filter names * Fix navigating from instance browse to main browse * Friends frontend (#2995) * Friends system frontend * (almost) finish frontend * finish friends, fix lint * Fix lint --------- Signed-off-by: Geometrically <18202329+Geometrically@users.noreply.github.com> * Refresh macOS app icon * Update web search UI more * Fix link opens * Fix frontend build --------- Signed-off-by: Geometrically <18202329+Geometrically@users.noreply.github.com> Co-authored-by: Jai A <jaiagr+gpg@pm.me> Co-authored-by: Geometrically <18202329+Geometrically@users.noreply.github.com>
101 lines
2.7 KiB
Vue
101 lines
2.7 KiB
Vue
<script setup>
|
|
import { Button } from '@modrinth/ui'
|
|
import { ref } from 'vue'
|
|
import SearchCard from '@/components/ui/SearchCard.vue'
|
|
import { get_categories } from '@/helpers/tags.js'
|
|
import { handleError } from '@/store/notifications.js'
|
|
import { get_version, get_project } from '@/helpers/cache.js'
|
|
import { install as installVersion } from '@/store/install.js'
|
|
import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
|
|
|
|
const confirmModal = ref(null)
|
|
const project = ref(null)
|
|
const version = ref(null)
|
|
const categories = ref(null)
|
|
const installing = ref(false)
|
|
|
|
defineExpose({
|
|
async show(event) {
|
|
if (event.event === 'InstallVersion') {
|
|
version.value = await get_version(event.id, 'must_revalidate').catch(handleError)
|
|
project.value = await get_project(version.value.project_id, 'must_revalidate').catch(
|
|
handleError,
|
|
)
|
|
} else {
|
|
project.value = await get_project(event.id, 'must_revalidate').catch(handleError)
|
|
version.value = await get_version(
|
|
project.value.versions[project.value.versions.length - 1],
|
|
'must_revalidate',
|
|
).catch(handleError)
|
|
}
|
|
categories.value = (await get_categories().catch(handleError)).filter(
|
|
(cat) => project.value.categories.includes(cat.name) && cat.project_type === 'mod',
|
|
)
|
|
confirmModal.value.show()
|
|
},
|
|
})
|
|
|
|
async function install() {
|
|
confirmModal.value.hide()
|
|
await installVersion(project.value.id, version.value.id, null, 'URLConfirmModal')
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<ModalWrapper ref="confirmModal" :header="`Install ${project?.title}`">
|
|
<div class="modal-body">
|
|
<SearchCard
|
|
:project="project"
|
|
class="project-card"
|
|
:categories="categories"
|
|
@open="confirmModal.hide()"
|
|
/>
|
|
<div class="button-row">
|
|
<div class="markdown-body">
|
|
<p>
|
|
Installing <code>{{ version.id }}</code> from Modrinth
|
|
</p>
|
|
</div>
|
|
<div class="button-group">
|
|
<Button :loading="installing" color="primary" @click="install">Install</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</ModalWrapper>
|
|
</template>
|
|
|
|
<style scoped lang="scss">
|
|
.modal-body {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: var(--gap-md);
|
|
}
|
|
|
|
.button-row {
|
|
width: 100%;
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
gap: var(--gap-md);
|
|
}
|
|
|
|
.button-group {
|
|
display: flex;
|
|
flex-direction: row;
|
|
gap: var(--gap-sm);
|
|
}
|
|
|
|
.project-card {
|
|
background-color: var(--color-bg);
|
|
width: 100%;
|
|
|
|
:deep(.badge) {
|
|
border: 1px solid var(--color-raised-bg);
|
|
background-color: var(--color-accent-contrast);
|
|
}
|
|
}
|
|
</style>
|