feat(Component):Initialize comments filter form

Author: xGooddevilx

src/components/comments/CommentsFilterForm.vue

@@ -0,0 +1,48 @@
+<script>
+import { useModelRef } from '@/composables/model.composable';
+import VForm from '../form/VForm.vue';
+import VInput from '../form/VInput.vue';
+import { t } from '@/services/language.service';
+export default {
+    name: 'CommentsFilterForm',
+    setup() {
+
+
+     const filters = useModelRef('modelValue');        
+
+        const statusItems = [
+            {
+                key:'PENDING',
+                text:t('Pending')
+            },
+            {
+                key:'REJECTED',
+                text:t('Rejected')
+            },
+            {
+                key:'CONFIRMED',
+                text:t('Confirmed')
+            }
+        ]
+
+        return {
+            filters,
+            statusItems
+        }
+    },
+    components: {
+        VForm,
+        VInput
+    },
+    emits: ['update:modelValue'],
+
+}
+</script>
+
+<template>
+    <VForm class="flex">
+        <div class="col-3">
+            <VInput v-model="filters.searchQuery" :placeholder="$t('SearchInputPlaceholder')" id="searchQuery" />
+        </div>
+    </VForm>
+</template>

src/locales/en/messages.js

@@ -20,6 +20,8 @@ export default {
     "Email": "Email",
     "Loading": "Loading",
     "Previous": "Previous",
+    "SearchInputPlaceholder":'Search...',
+    "Text":"Text",
     "Next": "Next",
     "From": "From",
     "Size": "Size",
@@ -38,4 +40,6 @@ export default {
     "Dark": "Dark",
     "System": "System",
     "Settings": "Settings",
+    "Actions":"Actions",
+    "EmailPlaceholder":"Email"
 };

src/locales/fa/messages.js

@@ -1,41 +1,46 @@
 export default {
-    "Login": "ورود",
-    "Username": "نام کاریری",
-    "Password": "رمز عبور",
-    "Submit": "ارسال",
-    "Cancel": "انصراف",
-    "Dashboard": "داشبورد",
-    "Users": "کاربران",
-    "Comments": "نظرات",
-    "Confirm":"تایید شده",
-    "Rejected":"رد شده",
-    "Pending":"در انتظار تایید",
+    Login: "ورود",
+    Username: "نام کاریری",
+    Password: "رمز عبور",
+    Submit: "ارسال",
+    Cancel: "انصراف",
+    Dashboard: "داشبورد",
+    Users: "کاربران",
+    Comments: "نظرات",
+    Confirm: "تایید شده",
+    Rejected: "رد شده",
+    Pending: "در انتظار تایید",
     "Authorization Error": "خطای دسترسی",
     "No data available": "داده\u200Cای موجود نیست",
     "You are successfully logged in": "شما با موفقیت وارد سیستم شدید",
     "Incorrect username or password": "نام کاربری یا گذرواژه اشتباه است",
     "System error": "خطای سیستم",
-    "Id": "شناسه",
-    "Name": "نام",
-    "Email": "یارانامه",
-    "Loading": "درحال بارگذاری",
-    "Previous": "قبلی",
-    "Next": "بعدی",
-    "From": "از",
-    "Size": "اندازه",
-    "Todos": "کارها",
-    "Title": "عنوان",
-    "User": "کاربر",
-    "Status": "وضعیت",
-    "Completed": "تکمیل شده",
+    Id: "شناسه",
+    Post: "پست",
+    Name: "نام",
+    Email: "یارانامه",
+    Loading: "درحال بارگذاری",
+    Previous: "قبلی",
+    Next: "بعدی",
+    From: "از",
+    Size: "اندازه",
+    SearchInputPlaceholder: "جست و جو...",
+    Text: "متن",
+    Todos: "کارها",
+    Title: "عنوان",
+    User: "کاربر",
+    Status: "وضعیت",
+    Completed: "تکمیل شده",
     "Not completed": "تکمیل نشده",
     "Filter by title": "فیلتر بر اساس عنوان",
     "Filter by user": "فیلتر بر اساس کاربر",
     "Filter by status": "فیلتر بر اساس وضعیت",
-    "Language": "زبان",
-    "Theme": "زمینه",
-    "Light": "روشن",
-    "Dark": "تیره",
-    "System": "سیستم",
-    "Settings": "تنظیمات",
+    Language: "زبان",
+    Theme: "زمینه",
+    Light: "روشن",
+    Dark: "تیره",
+    System: "سیستم",
+    Settings: "تنظیمات",
+    Actions: "عملیات",
+    EmailPlaceholder: "Email",
 };

src/views/CommentsView.vue

@@ -1,6 +1,6 @@
 <template>
-    <div>
         <div class="h3 mb-4">{{ $t('Comments') }}</div>
+        <CommentsFilterForm class="mb-4" v-model="filters"/>
         <VTableServer :items="comments" :itemsLength="comments.length" :is-loading="commentsIsLoading">
             <VColumn :header="$t('Id')" field="id" />
             <VColumn :header="$t('Name')" field="name" />
@@ -12,7 +12,7 @@
                     </button>
                 </template>
             </VColumn>
-            <VColumn :header="$t('Body')" field="body" />
+            <VColumn :header="$t('Text')" field="body" />
             <VColumn :header="$t('Status')" field="id">
                 <template #body="{ item }">
                     <span v-if="item.status==='PENDING'">
@@ -40,20 +40,28 @@
                 </template>
             </VColumn>
         </VTableServer>
-    </div>
 </template>
 
 <script>
+import CommentsFilterForm from '@/components/comments/CommentsFilterForm.vue';
 import VColumn from '@/components/data-table/VColumn.vue';
 import VTableServer from '@/components/data-table/VTableServer.vue';
 import { useFetchComments } from '@/composables/comments.composable';
+import { useApplyFilters } from '@/composables/filter.composable';
 import { watch } from 'vue';
 
 export default {
     name: 'CommentsView',
     setup() {
         const { comments, commentsIsLoading, fetchComments } = useFetchComments()
 
+         const filters = useApplyFilters({
+                querySearch: undefined,
+                status: undefined,
+                email: undefined
+            });
+
+
         function fetch() {
             const config = {}
             return fetchComments(config)
@@ -64,12 +72,14 @@ export default {
        
         return {
             comments,
-            commentsIsLoading
+            commentsIsLoading,
+            filters
         }
     },
     components: {
         VTableServer,
-        VColumn
+        VColumn,
+        CommentsFilterForm
     }
 }
 </script>