marzban-dev
95 lines
3.3 KiB
Vue
95 lines
3.3 KiB
Vue
<script setup lang="ts">
|
|
// import
|
|
|
|
import useGetComments from "~/composables/api/product/useGetComments";
|
|
import useCreateComment from "~/composables/api/product/useCreateComment";
|
|
import { useAuth } from "~/composables/api/auth/useAuth";
|
|
|
|
// state
|
|
|
|
const route = useRoute();
|
|
|
|
const id = route.params.id as string | undefined;
|
|
const page = ref(1);
|
|
|
|
const { token } = useAuth();
|
|
const userComment = ref("");
|
|
|
|
const { data: comments, refetch: refetchComments } = useGetComments(id, page);
|
|
const { mutateAsync: createComment, isPending: isCreateCommentPending } =
|
|
useCreateComment(id);
|
|
|
|
// methods
|
|
|
|
const submitComment = async () => {
|
|
if (userComment.value.length > 3) {
|
|
await createComment({
|
|
content: userComment.value
|
|
});
|
|
|
|
userComment.value = "";
|
|
|
|
await refetchComments();
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<section class="bg-slate-50">
|
|
<div class="flex relative gap-8 my-42 container max-lg:flex-col">
|
|
<div
|
|
class="sticky top-0 flex flex-col gap-6 lg:min-w-[400px] h-fit bg-white p-8 rounded-xl border-[0.5px] border-slate-200"
|
|
>
|
|
<h3 class="typo-h-6 max-sm:text-xl md:typo-h-5 lg:typo-h-4">نظرات کاربران</h3>
|
|
<div class="flex flex-col gap-2">
|
|
<Rating :rate="2" />
|
|
<span class="typo-p-sm">
|
|
بر اساس {{ comments?.count }} نظر
|
|
</span>
|
|
</div>
|
|
<form
|
|
@submit.prevent="submitComment"
|
|
class="flex flex-col gap-6"
|
|
>
|
|
<textarea
|
|
:disabled="!token"
|
|
class="w-full min-h-[200px] field-sizing-content rounded-xl bg-white p-4 border border-slate-200"
|
|
v-model="userComment"
|
|
placeholder="نظر خود را بنویسید..."
|
|
/>
|
|
<Button
|
|
v-if="token"
|
|
type="submit"
|
|
class="rounded-full w-full"
|
|
:loading="isCreateCommentPending"
|
|
:disabled="isCreateCommentPending"
|
|
>
|
|
نظر بنویسید
|
|
</Button>
|
|
<NuxtLink v-else to="/signin">
|
|
<Button type="button" class="rounded-full w-full">
|
|
وارد شوید
|
|
</Button>
|
|
</NuxtLink>
|
|
</form>
|
|
</div>
|
|
<div class="flex flex-col gap-8 w-full">
|
|
<Comment
|
|
v-for="comment in comments!.results"
|
|
:key="comment.id"
|
|
title=""
|
|
:content="comment.content"
|
|
:date="comment.timestamp"
|
|
:username="'منصور مرزبان'"
|
|
/>
|
|
<div class="flex items-center justify-center w-full">
|
|
<Pagination
|
|
:total="comments!.count"
|
|
:items="comments!.results.map((item, i) => ({ type: 'page', value: i }))"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</template>
|