90 lines
2.1 KiB
Vue
90 lines
2.1 KiB
Vue
<script setup>
|
|
import { Modal, Button } from 'omorphia'
|
|
import { ref } from 'vue'
|
|
import { useFetch } from '@/helpers/fetch.js'
|
|
import SearchCard from '@/components/ui/SearchCard.vue'
|
|
import { handleError } from '@/store/notifications.js'
|
|
import { share_accept, share_install } from '@/helpers/shared_profiles.js'
|
|
|
|
const confirmModal = ref(null)
|
|
const linkId = ref(null)
|
|
const sharedProfile = ref(null)
|
|
|
|
defineExpose({
|
|
async show(event) {
|
|
linkId.value = event.id
|
|
sharedProfile.value = await useFetch(
|
|
`https://staging-api.modrinth.com/_internal/share/${encodeURIComponent(event.id)}`,
|
|
'shared profile'
|
|
)
|
|
|
|
confirmModal.value.show()
|
|
},
|
|
})
|
|
|
|
async function install() {
|
|
confirmModal.value.hide()
|
|
await share_accept(linkId.value).catch(handleError)
|
|
await share_install(sharedProfile.value.id).catch(handleError)
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<Modal 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>{{ sharedProfile.id }}</code> from user {{ sharedProfile.owner_id }}
|
|
</p>
|
|
</div>
|
|
<div class="button-group">
|
|
<Button color="primary" @click="install">Install</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Modal>
|
|
</template>
|
|
|
|
<style scoped lang="scss">
|
|
.modal-body {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: var(--gap-md);
|
|
padding: var(--gap-lg);
|
|
}
|
|
|
|
.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>
|