57

Author: kossiecoder

src/pages/todos/_id.vue

@@ -75,11 +75,11 @@ export default {
         const originalTodo = ref(null);
         const loading = ref(true);
         const {
-              toastMessage,
-              toastAlertType,
-              showToast,
-              triggerToast
-            } = useToast();
+          toastMessage,
+          toastAlertType,
+          showToast,
+          triggerToast
+        } = useToast();
 
         const todoId = route.params.id        
 
@@ -115,8 +115,6 @@ export default {
 
         getTodo();
 
-        
-
         const onSave = async () => {
           try {
             const res = await axios.put(`

src/pages/todos/create/index.vue

@@ -0,0 +1,13 @@
+<template>
+  Create Page
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>

src/pages/todos/index.vue

@@ -1,6 +1,15 @@
 <template>
   <div>
-    <h2>To-Do List</h2>
+    <div class="d-flex justify-content-between mb-3">
+      <h2>To-Do List</h2>
+      <button 
+        class="btn btn-primary"
+        @click="moveToCreatePage"
+      >
+        Create Todo
+      </button>
+    </div>
+    
     <input
       class="form-control"
       type="text" 
@@ -56,6 +65,7 @@ import TodoList from '@/components/TodoList.vue';
 import axios from 'axios';
 import Toast from '@/components/Toast.vue';
 import { useToast } from '@/composables/toast';
+import {useRouter} from 'vue-router';
 
 export default {
   components: {
@@ -64,6 +74,7 @@ export default {
     Toast,
   },
   setup() {
+    const router = useRouter();
     const todos = ref([]);
     const error = ref('');
     const numberOfTodos = ref(0);
@@ -146,6 +157,12 @@ export default {
       
     };
 
+    const moveToCreatePage = () => {
+      router.push({
+        name: 'TodoCreate',
+      })
+    };
+
     let timeout = null;
     const searchTodo = () => {
       clearTimeout(timeout);
@@ -173,6 +190,7 @@ export default {
       toastMessage,
       toastAlertType,
       showToast,
+      moveToCreatePage,
     };
   }
 }

src/router/index.js

@@ -2,6 +2,7 @@ import { createRouter, createWebHistory } from 'vue-router';
 import Home from '../pages/index.vue';
 import Todos from '../pages/todos/index.vue';
 import Todo from '../pages/todos/_id.vue';
+import TodoCreate from '../pages/todos/create/index.vue';
 
 const router = createRouter({
     history: createWebHistory(),
@@ -16,6 +17,11 @@ const router = createRouter({
             name: 'Todos',
             component: Todos
         },
+        {
+            path: '/todos/create',
+            name: 'TodoCreate',
+            component: TodoCreate
+        },
         {
             path: '/todos/:id',
             name: 'Todo',