feat:Initialized CustomToast component

Author: xGooddevilx

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

@@ -29,7 +29,6 @@
 
     export default {
         name: 'VToasts',
-
         setup() {
             let items = installToast();
 

src/components/comments/CustomToast.vue

@@ -0,0 +1,47 @@
+<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" 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(props) {
+        let items = installCustomToast();
+
+        const { hideToast } = useCustomToast();
+        const handleCallbackCall = () => {
+            props?.callbackFn?.()
+            hideToast()
+        }
+
+        return {
+            items,
+            hideToast,
+            handleCallbackCall
+        };
+    },
+    props: {
+        callbackFn: {
+            type: Function,
+        }
+    }
+
+}
+</script>

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({ body, theme, duration = 5000, clearable = true , title}) {
+        const id = getUniqueId();
+
+        const _timeOutId = setTimeout(function () {
+            hideToast(id);
+        }, duration);
+
+        items.value.push({
+            id,
+            body,
+            duration,
+            theme,
+            clearable,
+            title,
+            _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/views/CommentsView.vue

@@ -109,16 +109,15 @@ import VModal from "@/components/VModal.vue";
 import { useFetchComments } from "@/composables/comments.composable";
 import { useApplyFilters } from "@/composables/filter.composable";
 import useFetchPost from "@/composables/posts.composable";
-import { useToast } from "@/composables/toast.composable";
+import { useCustomToast } from "@/composables/customToast.composable";
 import ThemeColor from "@/enums/ThemeColor";
 import StorageService from "@/services/storage.service";
 import { computed, reactive, ref, watch } from "vue";
 
 export default {
     name: "CommentsView",
     setup() {
-        const { showToast } = useToast();
-
+        const { showToast } = useCustomToast();
         const { comments, commentsIsLoading, fetchComments, changeStatus: changeCommentStatus } = useFetchComments();
         fetchComments({});
 
@@ -196,20 +195,18 @@ export default {
         };
         const handleConfirmRejection = () => {
             changeCommentStatus(rejectComment.comment.id, "REJECTED");
-            showToast({ body: "Undo", theme: ThemeColor.WARNING, duration: 3000 });
+            showToast({ body:"Undo", theme: ThemeColor.WARNING, duration: 3000 });
             rejectComment.comment = null;
             rejectComment.modalIsOpen = false;
         };
 
         const selectedRows = ref([]);
-
         const handleStatusChangeAll = (status) => {
             selectedRows.value.forEach((commentId) => {
                 changeCommentStatus(commentId, status);
                 selectedRows.value = [];
             });
         };
-
         return {
             comments: filteredComments,
             commentsIsLoading,
@@ -233,5 +230,6 @@ export default {
         CommentsFilterForm,
         VModal,
     },
+
 };
 </script>