use vue-router in to do list

package-lock.json

@@ -12,7 +12,8 @@
                 "@fortawesome/fontawesome-svg-core": "^1.3.0",
                 "@fortawesome/free-solid-svg-icons": "^6.0.0",
                 "bootstrap": "^5.1.3",
-        "vue": "^2.5.11"
+                "vue": "^2.5.11",
+                "vue-router": "^3.0.1"
             },
             "devDependencies": {
                 "@fortawesome/fontawesome-free": "^6.0.0",
@@ -8662,6 +8663,11 @@
                 "node": ">=4"
             }
         },
+        "node_modules/vue-router": {
+            "version": "3.5.3",
+            "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.5.3.tgz",
+            "integrity": "sha512-FUlILrW3DGitS2h+Xaw8aRNvGTwtuaxrRkNSHWTizOfLUie7wuYwezeZ50iflRn8YPV5kxmU2LQuu3nM/b3Zsg=="
+        },
         "node_modules/vue-style-loader": {
             "version": "3.1.2",
             "resolved": "https://registry.npmjs.org/vue-style-loader/-/vue-style-loader-3.1.2.tgz",
@@ -16812,6 +16818,11 @@
                 }
             }
         },
+        "vue-router": {
+            "version": "3.5.3",
+            "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.5.3.tgz",
+            "integrity": "sha512-FUlILrW3DGitS2h+Xaw8aRNvGTwtuaxrRkNSHWTizOfLUie7wuYwezeZ50iflRn8YPV5kxmU2LQuu3nM/b3Zsg=="
+        },
         "vue-style-loader": {
             "version": "3.1.2",
             "resolved": "https://registry.npmjs.org/vue-style-loader/-/vue-style-loader-3.1.2.tgz",

package.json

@@ -13,7 +13,8 @@
         "@fortawesome/fontawesome-svg-core": "^1.3.0",
         "@fortawesome/free-solid-svg-icons": "^6.0.0",
         "bootstrap": "^5.1.3",
-    "vue": "^2.5.11"
+        "vue": "^2.5.11",
+        "vue-router": "^3.0.1"
     },
     "browserslist": [
         "> 1%",

src/App.vue

 <template>
   <div id="app">
-    <todo-list></todo-list>
+    <router-view></router-view>
   </div>
 </template>
 
 <script>
-import todoList from './components/todoList.vue';
 export default {
-  components : {
-    'todo-list' : todoList,
-  }
 }
 </script>
 

src/components/todoList.vue → src/components/Task.vue

 <template>
-  <div class="container text-center mt-5">
-    <div class="row tex-center">
-      <h3 class="mb-5">Todo app using Vue</h3>
-      <div class="d-flex align-items-center justify-content-center">
-        <input
-          type="text"
-          placeholder="Enter task"
-          class="input_task"
-          v-model="task"
-        />
-        <select
-          v-model="selected"
-          class="select_task"
-          :class="{ active: isActive }"
-        >
-          <option v-for="selected in statusselectedTasks">
-            {{ selected }}
-          </option>
-        </select>
-        <button
-          type="submit"
-          class="btn btn-warning btn_submit"
-          @click="submit()"
-        >
-          Add Task
-        </button>
-      </div>
+  <div class="container mt-5">
+    <div class="row">
+      <h3 class="mb-5 text-center">Todo app using Vue</h3>
     </div>
-    <h5 class="mt-5">list Task</h5>
+    <router-link
+      class="d-inline-block btn btn-primary mb-2"
+      :to="{ name: 'addTask' }"
+      >Add Task</router-link
+    >
     <div class="row">
       <table class="table table-bordered">
         <thead>
@@ -39,15 +19,19 @@
           </tr>
         </thead>
         <tbody>
-          <tr v-for="(item, index) in tasks">
+          <tr v-for="(item, index) in tasks" :key="index">
             <th>{{ index + 1 }}</th>
             <td>{{ item.name }}</td>
             <td>{{ item.status }}</td>
             <td>
-              <span class="icon_action icon_edit" @click="editTask(index)"
-                ><ion-icon name="create-outline"></ion-icon
-              ></span>
-              <span class="icon_action icon_del" @click="delTask(index)"
+              <router-link
+                tag="span"
+                class="icon_action icon_edit"
+                :to="{ name: 'editTask', params: { id: index } }"
+              >
+                <ion-icon name="create-outline"></ion-icon>
+              </router-link>
+              <span class="icon_action icon_del" @click="removeTask(index)"
                 ><ion-icon name="trash-outline"></ion-icon
               ></span>
             </td>
@@ -62,56 +46,22 @@
 export default {
   data: function () {
     return {
-      task: null,
-      selected: "",
-      editStatus: null,
-      isActive: false,
-      statusselectedTasks: ["to-do", "in-progress", "finished"],
-      tasks: [
-        {
-          name: "ABC",
-          status: "to-do",
-        },
-        {
-          name: "ABC",
-          status: "in-progress",
-        },
-        {
-          name: "ABC",
-          status: "finished",
-        },
-      ],
+      tasks: [],
     };
   },
-  methods: {
-    submit() {
-      if (this.task.length === 0) {
-        return;
-      }
 
-      if (this.editStatus === null) {
-        this.tasks.push({
-          name: this.task,
-          status: "to-do",
-        });
-      } else {
-        this.tasks[this.editStatus].name = this.task;
-        this.tasks[this.editStatus].status = this.selected;
+  created: function () {
+    if (localStorage.getItem("tasks")) {
+      this.tasks = JSON.parse(localStorage.getItem("tasks"));
     }
-      this.isActive = false;
-      this.selected = "";
-      this.task = null;
   },
 
-    editTask(index) {
-      (this.task = this.tasks[index].name),
-        (this.editStatus = index),
-        (this.isActive = true),
-        (this.selected = this.tasks[index].status);
-    },
-
-    delTask(index) {
+  methods: {
+    removeTask(index) {
+      if (confirm("Are you sure you want to delete task?")) {
         this.tasks.splice(index, 1);
+        localStorage.setItem("tasks", JSON.stringify(this.tasks));
+      }
     },
   },
 };

src/components/addTask.vue

+<template>
+  <div class="container">
+    <div class="row">
+      <h3 class="mb-5 text-center mt-3">Add task</h3>
+    </div>   
+
+    <div class="d-flex align-items-center justify-content-center">
+      <input
+        type="text"
+        placeholder="Enter task"
+        class="input_task"
+        v-model="task"
+      />
+      <button
+        type="submit"
+        class="btn btn-warning btn_submit"
+        @click="submit()"
+      >
+        Add Task
+      </button>
+      <router-link
+      class="d-inline-block btn btn-primary ml-1"
+      :to="{ name: 'Task' }"
+      >back</router-link>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data: function () {
+    return {
+      task: null,
+      tasks: [],
+    };
+  },
+  created: function () {
+    if (localStorage.getItem("tasks")) {
+      this.tasks = JSON.parse(localStorage.getItem("tasks"));
+    }
+  },
+  methods: {
+    submit() {
+      if (this.task == null) {
+        alert("Please enter the task!!");
+        return;
+      }
+
+      this.tasks.unshift({
+        name: this.task,
+        status: "to-do",
+      });
+
+      localStorage.setItem("tasks", JSON.stringify(this.tasks));
+      this.task = null;
+      this.$router.push("/");
+    },
+  },
+};
+</script>
+
+<style scoped>
+.input_task {
+  width: 250px;
+  padding: 4px 8px;
+  margin-right: 12px;
+}
+.btn_submit {
+  margin: 0 12px;
+
+}
+</style>
\ No newline at end of file

src/components/editTask.vue

+<template>
+  <div class="container">
+    <div class="row">
+      <h3 class="mb-5 text-center mt-3">Edit task</h3>
+    </div>
+    <div class="d-flex align-items-center justify-content-center">
+      <input
+        type="text"
+        placeholder="Enter task"
+        class="input_task"
+        v-model="task"
+      />
+      <select v-model="selected" class="select_task">
+        <option v-for="(selected, index) in statusselectedTasks" :key="index">
+          {{ selected }}
+        </option>
+      </select>
+      <button
+        type="submit"
+        class="btn btn-warning btn_submit"
+        @click="submit()"
+      >
+        Edit Task
+      </button>
+      <router-link
+        class="d-inline-block btn btn-primary ml-1"
+        :to="{ name: 'Task' }"
+        >back</router-link
+      >
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  created: function () {
+    if (localStorage.getItem("tasks")) {
+      this.tasks = JSON.parse(localStorage.getItem("tasks"));
+      this.selected = this.tasks[this.id].status;
+      this.task = this.tasks[this.id].name;
+    }
+  },
+
+  data: function () {
+    return {
+      id: this.$route.params.id,
+      task: null,
+      selected: "",
+      statusselectedTasks: ["to-do", "in-progress", "finished"],
+      tasks: [],
+    };
+  },
+
+  methods: {
+    submit() {
+      if (this.task == null) {
+        alert("Please enter the task!!");
+        return;
+      }
+
+      this.tasks[this.id].name = this.task;
+      this.tasks[this.id].status = this.selected;
+
+      localStorage.setItem("tasks", JSON.stringify(this.tasks));
+      this.task = null;
+      this.$router.push("/");
+    },
+  },
+};
+</script>
+
+<style scoped>
+.input_task {
+  width: 250px;
+  padding: 4px 8px;
+  margin-right: 12px;
+}
+.select_task {
+  width: 118px;
+  height: 37px;
+  display: block;
+}
+.btn_submit {
+  margin: 0 12px;
+}
+</style>
\ No newline at end of file

src/main.js

 import Vue from 'vue'
 import App from './App.vue'
+import VueRouter from 'vue-router'
+import { routes } from './routes'
 import 'bootstrap/dist/css/bootstrap.min.css'
+
+Vue.use(VueRouter);
+
+const router = new VueRouter({
+    mode: 'history',
+    routes
+});
 new Vue({
     el: '#app',
+    router,
     render: h => h(App)
 })
\ No newline at end of file

src/routes.js

+import Task from './components/Task.vue';
+import addTask from './components/addTask.vue';
+import editTask from './components/editTask.vue';
+
+export const routes = [
+    { path: '/', name: 'Task', component: Task },
+    { path: '/task/add', name: 'addTask', component: addTask },
+    { path: '/task/edit/:id', name: 'editTask', component: editTask }
+];
\ No newline at end of file