marzban-dev
138 lines
4.8 KiB
Vue
138 lines
4.8 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 showMoreComments = ref(false);
|
|
|
|
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();
|
|
}
|
|
};
|
|
|
|
// computed
|
|
|
|
const limitedComments = computed(() => {
|
|
if (showMoreComments.value) {
|
|
return comments.value?.results;
|
|
}
|
|
|
|
return comments.value?.results.slice(0, 3);
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<section
|
|
v-if="!!comments"
|
|
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-[125px] resize-none sm:min-h-[200px] field-sizing-content rounded-xl bg-white p-4 border border-slate-200 placeholder:text-xs lg:placeholder:text-sm placeholder:font-normal"
|
|
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 limitedComments"
|
|
:key="comment.id"
|
|
title=""
|
|
:content="comment.content"
|
|
:date="comment.timestamp"
|
|
:username="'منصور مرزبان'"
|
|
/>
|
|
|
|
<div
|
|
v-if="comments.count > 0"
|
|
class="flex items-center justify-center w-full"
|
|
>
|
|
<Pagination
|
|
v-if="showMoreComments"
|
|
:total="comments.count"
|
|
:items="comments.results.map((item, i) => ({ type: 'page', value: i }))"
|
|
/>
|
|
<Button
|
|
v-else
|
|
type="button"
|
|
variant="primary"
|
|
@click="showMoreComments = !showMoreComments"
|
|
class="rounded-full px-8"
|
|
end-icon="bi:plus"
|
|
>
|
|
نمایش همه
|
|
</Button>
|
|
</div>
|
|
<div
|
|
v-else
|
|
class="h-[400px] lg:flex-grow w-full border-[0.5px] flex-col-center border-slate-200 bg-white rounded-xl"
|
|
>
|
|
<NuxtImg
|
|
src="/img/heymlz/heymlz-contact-us.gif"
|
|
class="w-[200px] lg:w-[300px] translate-y-[-25px]"
|
|
/>
|
|
<span class="text-xl text-black font-semibold translate-y-[-25px]"> هیچ نظری ثبت نشده است </span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</template>
|