53

Author: kossiecoder

src/components/Toast.vue

@@ -0,0 +1,32 @@
+<template>
+    <div 
+        class="alert toast-box" 
+        :class="`alert-${type}`"
+        role="alert"
+    >
+        {{ message }}
+    </div>
+</template>
+
+<script>
+export default {
+    props: {
+        message: {
+            type: String,
+            required: true
+        },
+        type: {
+            type: String,
+            default: 'success'
+        }
+    }
+}
+</script>
+
+<style>
+    .toast-box {
+        position: fixed;
+        top: 10px;
+        right: 10px;
+    }
+</style>

src/pages/todos/_id.vue

@@ -49,32 +49,49 @@
       Cancel
     </button>
   </form>
+  <Toast 
+    v-if="showToast" 
+    :message="toastMessage"
+    :type="toastAlertType"
+  />
 </template>
 
 <script>
 import { useRoute, useRouter } from 'vue-router';
 import axios from 'axios';
 import { ref, computed } from 'vue';
 import _ from 'lodash';
+import Toast from '@/components/Toast.vue';
 
 export default {
+  components: {
+    Toast
+  },
     setup() {
         const route = useRoute();
         const router = useRouter();
         const todo = ref(null);
         const originalTodo = ref(null);
         const loading = ref(true);
+        const showToast = ref(false);
+        const toastMessage = ref('');
+        const toastAlertType = ref('');
         const todoId = route.params.id
 
         const getTodo = async () => {
-          const res = await axios.get(`
-            http://localhost:3000/todos/${todoId}
-          `);
+          try {
+            const res = await axios.get(`
+              http://localhost:3000/todos/${todoId}
+            `);
 
-          todo.value = { ...res.data };
-          originalTodo.value = { ...res.data };
+            todo.value = { ...res.data };
+            originalTodo.value = { ...res.data };
 
-          loading.value = false;
+            loading.value = false;
+          } catch (error) {
+            console.log(error);
+            tiggerToast('Something went wrong', 'danger');
+          }
         };
 
         const todoUpdated = computed(() => {
@@ -93,15 +110,32 @@ export default {
 
         getTodo();
 
+        const tiggerToast = (message, type = 'success') => {
+          toastMessage.value = message;
+          toastAlertType.value = type;
+          showToast.value = true;
+          setTimeout(() => {
+            toastMessage.value = '';
+            toastAlertType.value = '';
+            showToast.value = false;
+          }, 3000)
+        }
+
         const onSave = async () => {
-          const res = await axios.put(`
-            http://localhost:3000/todos/${todoId}
-          `, {
-            subject: todo.value.subject,
-            completed: todo.value.completed
-          });
+          try {
+            const res = await axios.put(`
+              http://localhost:3000/todos/${todoId}
+            `, {
+              subject: todo.value.subject,
+              completed: todo.value.completed
+            });
 
-          originalTodo.value = {...res.data};
+            originalTodo.value = {...res.data};
+            tiggerToast('Successfully saved!');
+          } catch (error) {
+            console.log(error);
+            tiggerToast('Something went wrong', 'danger')
+          }
         };
 
         return {
@@ -111,6 +145,9 @@ export default {
           moveToTodoListPage,
           onSave,
           todoUpdated,
+          showToast,
+          toastMessage,
+          toastAlertType,
         };
     }
 }