FMHYedit/.vitepress/theme/components/Feedback.vue

216 lines
4.5 KiB
Vue
Raw Normal View History

2023-11-12 16:42:57 +00:00
<script setup lang="ts">
2024-01-25 16:32:45 +00:00
import { reactive, ref } from 'vue'
import { useRouter } from 'vitepress'
import {
type FeedbackType,
getFeedbackOption,
feedbackOptions
} from '../../types/Feedback'
2023-11-12 16:42:57 +00:00
2024-01-25 16:32:45 +00:00
const loading = ref<boolean>(false)
const error = ref<unknown>(null)
const success = ref<boolean>(false)
2024-01-25 16:32:45 +00:00
const router = useRouter()
2023-11-12 16:42:57 +00:00
2024-01-25 16:32:45 +00:00
const feedback = reactive<FeedbackType>({ message: '' })
2023-11-12 16:42:57 +00:00
2024-01-25 16:32:45 +00:00
async function handleSubmit(type?: FeedbackType['type']) {
if (type) feedback.type = type
loading.value = true
2023-11-12 16:42:57 +00:00
const body: FeedbackType = {
message: feedback.message,
type: feedback.type,
2024-01-25 16:32:45 +00:00
page: router.route.path
}
2023-11-12 16:42:57 +00:00
try {
2024-01-25 16:32:45 +00:00
const response = await fetch('https://feedback.tasky.workers.dev', {
method: 'POST',
2023-11-12 16:42:57 +00:00
headers: {
2024-01-25 16:32:45 +00:00
'Content-Type': 'application/json'
2023-11-12 16:42:57 +00:00
},
2024-01-25 16:32:45 +00:00
body: JSON.stringify(body)
})
2023-11-12 16:42:57 +00:00
2024-01-25 16:32:45 +00:00
const data = await response.json()
2023-11-12 16:42:57 +00:00
if (data.error) {
2024-01-25 16:32:45 +00:00
error.value = data.error
return
2023-11-12 16:42:57 +00:00
}
2024-01-25 16:32:45 +00:00
if (data.status === 'ok') {
success.value = true
2023-11-12 16:42:57 +00:00
}
2023-12-18 11:36:23 +00:00
} catch (error) {
2024-01-25 16:32:45 +00:00
error.value = error
2023-11-12 16:42:57 +00:00
} finally {
2024-01-25 16:32:45 +00:00
loading.value = false
2023-11-12 16:42:57 +00:00
}
}
</script>
<template>
<div class="wrapper">
<Transition name="fade" mode="out-in">
<div v-if="!feedback.type" class="step">
<div>
2023-11-14 15:10:49 +00:00
<div>
2023-11-12 16:42:57 +00:00
<p class="heading">Feedback</p>
</div>
</div>
<div class="button-container">
2023-12-15 20:49:17 +00:00
<button
v-for="item in feedbackOptions"
:key="item.value"
class="btn"
2024-01-25 16:32:45 +00:00
@click="handleSubmit(item.value as FeedbackType['type'])"
>
2023-11-12 16:42:57 +00:00
<span>{{ item.label }}</span>
2023-11-14 15:10:49 +00:00
</button>
2023-11-12 16:42:57 +00:00
</div>
</div>
2023-11-14 15:10:49 +00:00
<div v-else-if="feedback.type && !success" class="step">
2023-11-12 16:42:57 +00:00
<div>
<p class="desc">Page: {{ router.route.path }}</p>
2023-11-12 16:42:57 +00:00
<div>
<span>{{ getFeedbackOption(feedback.type)?.label }}</span>
2024-01-25 16:32:45 +00:00
<button
style="margin-left: 0.5rem"
class="btn"
@click="feedback.type = undefined"
>
2023-11-12 16:42:57 +00:00
<span class="i-carbon-close-large">close</span>
</button>
2023-11-14 15:10:49 +00:00
</div>
2023-11-12 16:42:57 +00:00
</div>
2023-12-15 20:49:17 +00:00
<textarea
v-model="feedback.message"
autofocus
class="input"
2024-01-25 16:32:45 +00:00
placeholder="What a lovely wiki!"
/>
2023-11-19 21:35:33 +00:00
<p class="desc mb-2">
2024-01-25 16:32:45 +00:00
If you'd prefer to be contacted through another platform, feel free to
mention it in the message or join our
<a
class="text-primary font-semibold text-underline"
href="https://discord.gg/Stz6y6NgNg"
>
Discord
</a>
.
2023-11-19 21:35:33 +00:00
</p>
2023-12-15 20:49:17 +00:00
<button
type="submit"
class="btn btn-primary"
2024-01-25 16:32:45 +00:00
:disabled="
feedback.message.length < 5 || feedback.message.length > 1000
"
@click="handleSubmit()"
>
2023-11-12 16:42:57 +00:00
Submit
</button>
</div>
<div v-else class="step">
<p class="heading">Thanks for your feedback!</p>
</div>
</Transition>
</div>
</template>
<style scoped>
2023-12-15 20:49:17 +00:00
.step > * + * {
2023-11-12 16:42:57 +00:00
margin-top: 1rem;
}
.btn {
border: 1px solid var(--vp-c-divider);
background-color: var(--vp-c-bg);
border-radius: 8px;
transition:
border-color 0.25s,
background-color 0.25s;
display: inline-block;
font-size: 14px;
font-weight: 500;
line-height: 1.5;
margin: 0;
padding: 0.375rem 0.75rem;
text-align: center;
vertical-align: middle;
white-space: nowrap;
}
.btn:disabled {
opacity: 0.5;
}
.btn:hover {
border-color: var(--vp-c-brand);
}
.btn-primary {
color: #fff;
background-color: var(--vp-c-brand);
border-color: var(--vp-c-brand);
}
.btn-primary:hover {
background-color: var(--vp-c-brand-darker);
border-color: var(--vp-c-brand-darker);
}
.heading {
font-size: 1.2rem;
font-weight: 700;
}
.button-container {
display: grid;
grid-gap: 0.5rem;
}
.wrapper {
margin: 2rem 0;
padding: 1.5rem;
border: 1px solid var(--vp-c-divider);
border-radius: 8px;
background: var(--vp-c-bg-alt);
}
.input {
width: 100%;
height: 100px;
border: 1px solid #ccc;
border-radius: 4px;
padding: 0.375rem 0.75rem;
}
.contact-input {
height: 50px;
border: 1px solid #ccc;
border-radius: 4px;
padding: 0.375rem 0.75rem;
}
.desc {
display: block;
line-height: 20px;
font-size: 12px;
font-weight: 500;
color: var(--vp-c-text-2);
}
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.25s ease;
}
.fade-enter-from,
.fade-leave-to {
opacity: 0;
}
</style>