80

Author: kossiecoder

db.json

@@ -164,6 +164,42 @@
       "completed": false,
       "body": "asdf",
       "id": 35
+    },
+    {
+      "subject": "asd",
+      "completed": false,
+      "body": "asdfff",
+      "id": 36
+    },
+    {
+      "subject": "e",
+      "completed": false,
+      "body": "fff",
+      "id": 37
+    },
+    {
+      "subject": "f",
+      "completed": false,
+      "body": "fa",
+      "id": 38
+    },
+    {
+      "subject": "asdf",
+      "completed": false,
+      "body": "asdffffffdf",
+      "id": 39
+    },
+    {
+      "subject": "asdf",
+      "completed": false,
+      "body": "asdf",
+      "id": 40
+    },
+    {
+      "subject": "asdf",
+      "completed": false,
+      "body": "asdffff",
+      "id": 41
     }
   ]
 }

src/App.vue

@@ -15,58 +15,20 @@
   <div class="container">
       <router-view/>
   </div>
-  <transition name="slide">
-    <Toast 
-      v-if="showToast" 
-      :message="toastMessage"
-      :type="toastAlertType"
-    />
-  </transition>
+  
+  <Toast />
 </template>
 
 <script>
 import Toast from '@/components/Toast.vue';
-import { useToast } from '@/composables/toast';
 
 export default {
   components: {
     Toast
   },
-  setup() {
-    const {
-      toastMessage,
-      toastAlertType,
-      showToast,
-      triggerToast
-    } = useToast();
-
-    console.log(showToast.value);
-
-    return {
-      toastMessage,
-      toastAlertType,
-      showToast,
-      triggerToast
-    }
-  }
 }
 </script>
 
 <style scoped>
-.slide-enter-active,
-  .slide-leave-active {
-    transition: all 0.5s ease;
-  }
-
-  .slide-enter-from,
-  .slide-leave-to {
-    opacity: 0;
-    transform: translateY(-30px);
-  }
 
-  .slide-enter-to,
-  .slide-leave-from {
-    opacity: 1;
-    transform: translateY(0px);
-  }
 </style>

src/components/Toast.vue

@@ -1,32 +1,53 @@
 <template>
-    <div 
-        class="alert toast-box" 
-        :class="`alert-${type}`"
-        role="alert"
-    >
-        {{ message }}
+    <div class="toast-box">
+        <transition-group name="slide">
+            <div 
+                v-for="toast in toasts"
+                :key="toast.id"
+                class="alert" 
+                :class="`alert-${toast.type}`"
+                role="alert"
+            >
+                {{ toast.message }}
+            </div>
+        </transition-group>
     </div>
 </template>
 
 <script>
+import { useToast } from '@/composables/toast';
 export default {
-    props: {
-        message: {
-            type: String,
-            required: true
-        },
-        type: {
-            type: String,
-            default: 'success'
+    setup() {
+        const { toasts } = useToast();
+
+        return {
+            toasts
         }
     }
 }
 </script>
 
-<style>
+<style scoped>
     .toast-box {
         position: fixed;
         top: 10px;
         right: 10px;
     }
+
+    .slide-enter-active,
+  .slide-leave-active {
+    transition: all 0.5s ease;
+  }
+
+  .slide-enter-from,
+  .slide-leave-to {
+    opacity: 0;
+    transform: translateY(-30px);
+  }
+
+  .slide-enter-to,
+  .slide-leave-from {
+    opacity: 1;
+    transform: translateY(0px);
+  }
 </style>

src/composables/toast.js

@@ -3,18 +3,17 @@ import { useStore } from 'vuex';
 
 export const useToast = () => {
     const store = useStore();
-    const toastMessage = computed(() => store.getters['toast/toastMessageWithSmile']);
-    const toastAlertType = computed(() => store.state.toast.toastAlertType);
-    const showToast = computed(() => store.state.toast.showToast); 
+    const toasts = computed(() => store.state.toast.toasts);
+    // const toastMessage = computed(() => store.getters['toast/toastMessageWithSmile']);
+    // const toastAlertType = computed(() => store.state.toast.toastAlertType);
+    // const showToast = computed(() => store.state.toast.showToast); 
 
     const triggerToast = (message, type = 'success') => {
         store.dispatch('toast/triggerToast', message, type);
     }
 
     return {
-        toastMessage,
-        toastAlertType,
-        showToast,
+        toasts,
         triggerToast
     }
 }

src/store/modules/toast/index.js

@@ -1,32 +1,45 @@
 export default {
     namespaced: true,
     state: {
-        toastMessage: '',
-        toastAlertType: '',
-        showToast: false, 
+        toasts: [],
+        // toastMessage: '',
+        // toastAlertType: '',
+        // showToast: false, 
     },
     mutations: {
-        UPDATE_TOAST_MESSAGE (state, payload) {
-            state.toastMessage = payload;
+        // UPDATE_TOAST_MESSAGE (state, payload) {
+        //     state.toastMessage = payload;
+        // },
+        // UPDATE_TOAST_ALERT_TYPE (state, payload) {
+        //     state.toastAlertType = payload;
+        // },
+        // UPDATE_TOAST_STATUS (state, payload) {
+        //     state.showToast = payload;
+        // },
+        ADD_TOAST(state, payload) {
+            state.toasts.push(payload);
         },
-        UPDATE_TOAST_ALERT_TYPE (state, payload) {
-            state.toastAlertType = payload;
+        REMOVE_TOAST(state) {
+            state.toasts.shift();
         },
-        UPDATE_TOAST_STATUS (state, payload) {
-            state.showToast = payload;
-        }
     },
     actions: {
         triggerToast({ commit }, message, type = 'success') {
-            commit('UPDATE_TOAST_MESSAGE', message)
-            commit('UPDATE_TOAST_ALERT_TYPE', type)
-            commit('UPDATE_TOAST_STATUS', true)
+            // commit('UPDATE_TOAST_MESSAGE', message)
+            // commit('UPDATE_TOAST_ALERT_TYPE', type)
+            // commit('UPDATE_TOAST_STATUS', true)
+            commit('ADD_TOAST', {
+                id: Date.now(),
+                message,
+                type,
+            });
 
             setTimeout(() => {
-              commit('UPDATE_TOAST_MESSAGE', '')
-              commit('UPDATE_TOAST_ALERT_TYPE', '')
-              commit('UPDATE_TOAST_STATUS', false)
-            }, 5000)
+            //   commit('UPDATE_TOAST_MESSAGE', '')
+            //   commit('UPDATE_TOAST_ALERT_TYPE', '')
+            //   commit('UPDATE_TOAST_STATUS', false)
+                commit('REMOVE_TOAST');
+            }, 10000)
           }
     },
     getters: {