feat(View):Implement comments table & add status field to the data

Author: xGooddevilx

src/composables/comments.composable.js

@@ -15,7 +15,7 @@ export const useFetchComments = () => {
         startLoading();
         return CommentsService.getAll(config)
             .then((response) => {
-                comments.value = response.data;
+                comments.value = response.data.map(item=>({...item,status:"PENDING"}));
                 return response;
             })
             .finally(() => {

src/locales/en/messages.js

@@ -5,6 +5,9 @@ export default {
     "Submit": "Submit",
     "Cancel": "Cancel",
     "Comments": "Comments",
+    "Confirm":"Confirm",
+    "Rejected":"Rejected",
+    "Pending":"Pending",
     "Dashboard": "Dashboard",
     "Users": "Users",
     "Authorization Error": "Authorization Error",

src/locales/fa/messages.js

@@ -7,6 +7,9 @@ export default {
     "Dashboard": "داشبورد",
     "Users": "کاربران",
     "Comments": "نظرات",
+    "Confirm":"تایید شده",
+    "Rejected":"رد شده",
+    "Pending":"در انتظار تایید",
     "Authorization Error": "خطای دسترسی",
     "No data available": "داده\u200Cای موجود نیست",
     "You are successfully logged in": "شما با موفقیت وارد سیستم شدید",

src/views/CommentsView.vue

@@ -1,11 +1,75 @@
 <template>
     <div>
-        <h1>Comments Page</h1>
+        <div class="h3 mb-4">{{ $t('Comments') }}</div>
+        <VTableServer :items="comments" :itemsLength="comments.length" :is-loading="commentsIsLoading">
+            <VColumn :header="$t('Id')" field="id" />
+            <VColumn :header="$t('Name')" field="name" />
+            <VColumn :header="$t('Email')" field="email" />
+            <VColumn :header="$t('Post')" field="postId">
+                <template #body>
+                    <button class="btn btn-sm btn-outline-info" title="View Related Post">
+                        <i class="bi-eye" />
+                    </button>
+                </template>
+            </VColumn>
+            <VColumn :header="$t('Body')" field="body" />
+            <VColumn :header="$t('Status')" field="id">
+                <template #body="{ item }">
+                    <span v-if="item.status==='PENDING'">
+                        {{ $t('Pending') }}
+                    </span>
+                    <span v-if="item.status==='CONFIRMED'">
+                        {{$t('Confirmed')}}
+                    </span>
+                    <span v-if="item.status==='REJECTED'">
+                        {{ $('Rejected') }}
+                    </span>
+                </template>
+            </VColumn>
+            <VColumn :header="$t('Actions')" field="id">
+                <template #body>
+                    <div class="d-flex gap-2">
+                        <button class="btn btn-danger btn-sm">
+                            <i class="bi-ban" />
+                        </button>
+                        <button class="btn btn-success btn-sm z-3" data-bs-toggle="tooltip" data-bs-placement="top"
+                            data-bs-title="Tooltip on top">
+                            <i class="bi-check-circle" />
+                        </button>
+                    </div>
+                </template>
+            </VColumn>
+        </VTableServer>
     </div>
 </template>
 
 <script>
-    export default {
-        name: 'CommentsView'
+import VColumn from '@/components/data-table/VColumn.vue';
+import VTableServer from '@/components/data-table/VTableServer.vue';
+import { useFetchComments } from '@/composables/comments.composable';
+import { watch } from 'vue';
+
+export default {
+    name: 'CommentsView',
+    setup() {
+        const { comments, commentsIsLoading, fetchComments } = useFetchComments()
+
+        function fetch() {
+            const config = {}
+            return fetchComments(config)
+        }
+        fetch()
+        watch([], () => fetchComments())
+
+       
+        return {
+            comments,
+            commentsIsLoading
+        }
+    },
+    components: {
+        VTableServer,
+        VColumn
     }
+}
 </script>