Watch route changes for feedback properly
This commit is contained in:
parent
b07cf62030
commit
ae2bb3f74a
@ -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
|
||||||
|
@ -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 = [
|
||||||
|
5
.vitepress/vue-shim.d.ts
vendored
5
.vitepress/vue-shim.d.ts
vendored
@ -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;
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user