Implement comments page task

src/App.vue

@@ -1,15 +1,17 @@
 <template>
     <RouterView />
-    <VToasts/>
+    <VToasts />
+    <CustomToast />
 </template>
 
 <script>
-    // Components
-    import VToasts from '@/components/VToasts.vue';
+// Components
+import VToasts from '@/components/VToasts.vue';
+import CustomToast from './components/comments/CustomToast.vue';
 
-    export default {
-        name: 'App',
+export default {
+    name: 'App',
 
-        components: { VToasts }
-    };
-</script>
+    components: { VToasts, CustomToast }
+};
+</script>

src/components/VToasts.vue

@@ -8,9 +8,9 @@
             aria-live="assertive"
             aria-atomic="true"
         >
+            <div class="toast-header" v-html="item.title" v-if="!!item.title"></div>
             <div class="d-flex justify-content-between align-items-center">
                 <div class="toast-body" v-html="item.body"></div>
-
                 <button
                     v-if="item.clearable"
                     type="button"
@@ -29,7 +29,6 @@
 
     export default {
         name: 'VToasts',
-
         setup() {
             let items = installToast();
 

src/components/comments/CommentsFilterForm.vue

@@ -0,0 +1,63 @@
+<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';
+import VSelect from '../form/VSelect.vue';
+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
+        }
+    },
+    props: {
+        modelValue: {
+            type: Object,
+            required: true
+        }
+    },
+    components: {
+        VForm,
+        VInput,
+        VSelect
+    },
+    emits: ['update:modelValue'],
+
+}
+</script>
+
+<template>
+    <VForm class="row">
+        <div class="col-3">
+            <VInput v-model="filters.searchQuery" :placeholder="$t('SearchInputPlaceholder')" id="searchQuery" />
+        </div>
+        <div class="col-3">
+            <VInput v-model="filters.email" :placeholder="$t('EmailPlaceholder')" />
+        </div>
+        <div class="col-2">
+            <VSelect v-model="filters.status" :items="statusItems" item-key="key" item-text="text"
+                :placeholder="$t('Filter by status')" clearable />
+        </div>
+    </VForm>
+</template>

src/components/comments/CustomToast.vue

@@ -0,0 +1,41 @@
+<template>
+    <div class="toast-container bottom-0 end-0">
+        <div v-for="item of items" :key="item.id"
+            :class="`toast show align-items-center border-1 m-2 fw-medium text-bg-${item.theme}`" role="alert"
+            aria-live="assertive" aria-atomic="true">
+            <div class="toast-header" v-html="item.title" v-if="!!item.title"></div>
+            <div class="d-flex justify-content-between align-items-center">
+                <div class="toast-body">
+                    <button @click="handleCallbackCall(item.id,item.callback)" class="btn btn-secondary">
+                        Undo
+                    </button>
+                </div>
+                <button v-if="item.clearable" type="button" class="btn-close p-3" aria-label="Close"
+                    @click="hideToast(item.id)"></button>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import { installCustomToast, useCustomToast } from '@/composables/customToast.composable';
+
+export default {
+    name: 'CustomToast',
+    setup() {
+        let items = installCustomToast();
+
+        const { hideToast } = useCustomToast();
+        const handleCallbackCall = (id,callback) => {
+            callback?.()
+            hideToast(id)
+        }
+
+        return {
+            items,
+            hideToast,
+            handleCallbackCall
+        };
+    },
+}
+</script>

src/components/layout/side-menu/VSideMenu.vue

@@ -24,19 +24,25 @@
 
                 {{ $t('Todos') }}
             </VSideMenuItem>
+            <VSideMenuItem :to="{ name: 'Comments' }">
+                <template #icon>
+                    <i class="bi-chat-dots-fill"></i>
+                </template>
+                {{ $t('Comments') }}
+            </VSideMenuItem>
         </nav>
     </aside>
 </template>
 
 <script>
-    // Components
-    import VSideMenuItem from '@/components/layout/side-menu/VSideMenuItem.vue';
+// Components
+import VSideMenuItem from '@/components/layout/side-menu/VSideMenuItem.vue';
 
-    export default {
-        name: 'VSideBar',
+export default {
+    name: 'VSideBar',
 
-        components: {
-            VSideMenuItem
-        }
+    components: {
+        VSideMenuItem
     }
+}
 </script>

src/composables/cache.composable.js

@@ -0,0 +1,16 @@
+import StorageService from "@/services/storage.service";
+
+export default function useLocaleStorageCache() {
+    const getCache = (key) => {
+        return StorageService.get(key);
+    };
+    const clearCache = (key) => StorageService.delete(key);
+
+    const setCache = (key, value) => StorageService.set(key, value);
+
+    return {
+        getCache,
+        clearCache,
+        setCache,
+    };
+}

src/composables/comments.composable.js

@@ -0,0 +1,43 @@
+import { computed, ref } from "vue";
+import { useLoading } from "./loading.composable";
+import { keyBy } from "@/utils";
+import CommentsService from "@/services/comments.service";
+
+export const useFetchComments = () => {
+    const { isLoading, startLoading, endLoading } = useLoading();
+    const comments = ref([]);
+    const commentsKeyById = computed(() => keyBy(comments.value, "id"));
+
+    /**
+     * @param {AxiosRequestConfig} [config]
+     */
+    const fetchComments = (config) => {
+        startLoading();
+        return CommentsService.getAll(config)
+            .then((response) => {
+                comments.value = response.data.map((item) => ({ ...item, status: "PENDING" }));
+                return response;
+            })
+            .finally(() => {
+                endLoading();
+            });
+    };
+
+    const changeStatus = (id, status) => {
+        const updatedItemIndex = comments.value.findIndex((comment) => comment.id === id);
+        comments.value[updatedItemIndex].status = status;
+
+        // comments.value = comments.value.map((comment) => {
+        //     if (comment.id === id) return { ...comment, status };
+        //     else return comment;
+        // });
+    };
+
+    return {
+        comments,
+        commentsIsLoading: isLoading,
+        commentsKeyById,
+        fetchComments,
+        changeStatus,
+    };
+};

src/composables/customToast.composable.js

@@ -0,0 +1,52 @@
+import { ref, getCurrentInstance } from 'vue';
+
+// Utils
+import { getUniqueId } from '@/utils';
+
+const items = ref([]);
+
+export function installCustomToast() {
+    const instance = getCurrentInstance();
+    if (instance.type.name !== 'CustomToast') {
+        throw new Error('installToast should only be called in the Custom toast component');
+    }
+
+    return items;
+}
+
+export function useCustomToast() {
+    function showToast({ theme, duration = 5000, clearable = true , title, callback}) {
+        const id = getUniqueId();
+
+        const _timeOutId = setTimeout(function () {
+            hideToast(id);
+        }, duration);
+
+        items.value.push({
+            id,
+            duration,
+            theme,
+            clearable,
+            title,
+            callback,
+            _time_out_id: _timeOutId
+        });
+
+        return id;
+    }
+
+    function hideToast(id) {
+        const index = items.value.findIndex(function (item) {
+            return item.id === id;
+        });
+
+        clearTimeout(items.value[index]._time_out_id);
+
+        items.value.splice(index, 1);
+    }
+
+    return {
+        showToast,
+        hideToast
+    };
+}

src/composables/posts.composable.js

@@ -0,0 +1,37 @@
+import { ref } from "vue";
+import { useLoading } from "./loading.composable";
+import PostsServices from "@/services/posts.services";
+import useLocaleStorageCache from "./cache.composable";
+
+export default function useFetchPost() {
+    const { endLoading, isLoading, startLoading } = useLoading();
+    const { getCache, setCache } = useLocaleStorageCache();
+
+    const post = ref(null);
+
+    async function fetchPost(id) {
+        const cachedPosts = getCache("cached-posts") || {};
+
+        if (cachedPosts[`post-${id}`]) {
+            post.value = cachedPosts[`post-${id}`];
+            return;
+        } else {
+            startLoading();
+            return PostsServices.getOneById(id)
+                .then((response) => {
+                    post.value = response.data;
+                    setCache('cached-posts', { ...cachedPosts, [`post-${id}`]: response.data })
+                    return response;
+                })
+                .finally(() => {
+                    endLoading();
+                });
+        }
+    }
+
+    return {
+        postIsLoading: isLoading,
+        post,
+        fetchPost,
+    };
+}

src/locales/en/messages.js

@@ -4,6 +4,10 @@ export default {
     "Password": "Password",
     "Submit": "Submit",
     "Cancel": "Cancel",
+    "Comments": "Comments",
+    "Confirm":"Confirm",
+    "Rejected":"Rejected",
+    "Pending":"Pending",
     "Dashboard": "Dashboard",
     "Users": "Users",
     "Authorization Error": "Authorization Error",
@@ -16,6 +20,8 @@ export default {
     "Email": "Email",
     "Loading": "Loading",
     "Previous": "Previous",
+    "SearchInputPlaceholder":'Search...',
+    "Text":"Text",
     "Next": "Next",
     "From": "From",
     "Size": "Size",
@@ -34,4 +40,10 @@ export default {
     "Dark": "Dark",
     "System": "System",
     "Settings": "Settings",
+    "Actions":"Actions",
+    "EmailPlaceholder":"Email",
+    "Post":"Post",
+    "RejectAll":"Reject All",
+    "ConfirmAll":"Confirm All",
+    "Confirmed":"Confirmed"
 };