Make comments collapsable

frontend/components/product/ProductComments.vue

@@ -15,16 +15,17 @@ 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);
+const { mutateAsync: createComment, isPending: isCreateCommentPending } = useCreateComment(id);
 
 // methods
 
 const submitComment = async () => {
     if (userComment.value.length > 3) {
         await createComment({
-            content: userComment.value
+            content: userComment.value,
         });
 
         userComment.value = "";
@@ -32,6 +33,16 @@ const submitComment = async () => {
         await refetchComments();
     }
 };
+
+// computed
+
+const limitedComments = computed(() => {
+    if (showMoreComments.value) {
+        return comments.value!.results;
+    }
+
+    return comments.value!.results.slice(0, 3);
+});
 </script>
 
 <template>
@@ -43,9 +54,7 @@ const submitComment = async () => {
                 <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>
+                    <span class="typo-p-sm"> بر اساس {{ comments?.count }} نظر </span>
                 </div>
                 <form
                     @submit.prevent="submitComment"
@@ -66,8 +75,14 @@ const submitComment = async () => {
                     >
                         نظر بنویسید
                     </Button>
-                    <NuxtLink v-else to="/signin">
-                        <Button type="button" class="rounded-full w-full">
+                    <NuxtLink
+                        v-else
+                        to="/signin"
+                    >
+                        <Button
+                            type="button"
+                            class="rounded-full w-full"
+                        >
                             وارد شوید
                         </Button>
                     </NuxtLink>
@@ -75,18 +90,30 @@ const submitComment = async () => {
             </div>
             <div class="flex flex-col gap-8 w-full">
                 <Comment
-                    v-for="comment in comments!.results"
+                    v-for="comment in limitedComments"
                     :key="comment.id"
                     title=""
                     :content="comment.content"
                     :date="comment.timestamp"
                     :username="'منصور مرزبان'"
                 />
+
                 <div 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>
         </div>