Watch route changes for feedback properly

This commit is contained in:
taskylizard 2023-11-19 12:04:11 +00:00
parent b07cf62030
commit ae2bb3f74a
3 changed files with 10 additions and 10 deletions

View File

@ -1,12 +1,13 @@
<script setup lang="ts"> <script setup lang="ts">
import { reactive, ref } from "vue"; import { reactive, ref } from "vue";
import { useRoute } from "vitepress"; import { useRouter } from "vitepress";
import { type FeedbackType, getFeedbackOption, feedbackOptions } from "../../types/Feedback"; import { type FeedbackType, getFeedbackOption, feedbackOptions } from "../../types/Feedback";
const loading = ref<boolean>(false); const loading = ref<boolean>(false);
const error = ref<unknown>(null); const error = ref<unknown>(null);
const success = ref<boolean>(false); const success = ref<boolean>(false);
const { path } = useRoute();
const router = useRouter();
const feedback = reactive<FeedbackType>({ message: "", contact: "" }); const feedback = reactive<FeedbackType>({ message: "", contact: "" });
@ -18,7 +19,7 @@ async function handleSubmit(type?: FeedbackType["type"]) {
message: feedback.message, message: feedback.message,
type: feedback.type, type: feedback.type,
contact: feedback.contact, contact: feedback.contact,
page: path, page: router.route.path,
}; };
try { try {
@ -68,7 +69,7 @@ async function handleSubmit(type?: FeedbackType["type"]) {
</div> </div>
<div v-else-if="feedback.type && !success" class="step"> <div v-else-if="feedback.type && !success" class="step">
<div> <div>
<p class="desc">The wiki is... {{ path }}</p> <p class="desc">Page: {{ router.route.path }}</p>
<div> <div>
<span>{{ getFeedbackOption(feedback.type)?.label }}</span> <span>{{ getFeedbackOption(feedback.type)?.label }}</span>
<button style="margin-left: 0.5rem" class="btn" @click="feedback.type = undefined"> <button style="margin-left: 0.5rem" class="btn" @click="feedback.type = undefined">
@ -84,8 +85,8 @@ async function handleSubmit(type?: FeedbackType["type"]) {
class="btn btn-primary" class="btn btn-primary"
:disabled=" :disabled="
feedback.message.length < 5 || feedback.message.length < 5 ||
feedback.message.length > 1000 || || feedback.message.length > 1000
feedback.contact.length > 100 || feedback.contact.length > 100
" "
@click="handleSubmit()"> @click="handleSubmit()">
Submit Submit

View File

@ -4,7 +4,7 @@ export const FeedbackSchema = z.object({
message: z.string().min(5).max(1000), message: z.string().min(5).max(1000),
type: z.enum(["bug", "suggestion", "appreciate", "other"]), type: z.enum(["bug", "suggestion", "appreciate", "other"]),
contact: z.string().optional(), contact: z.string().optional(),
page: z.string().min(3).max(10), page: z.string().optional(),
}); });
export const feedbackOptions = [ export const feedbackOptions = [

View File

@ -1,6 +1,5 @@
import { type Component } from "vue"; /* eslint-disable ts/consistent-type-imports */
declare module "*.vue" { declare module "*.vue" {
const component: Component; const component: import("vue").Component;
export default component; export default component;
} }