Adrito-M

components/addTask.vue

@@ -4,6 +4,7 @@
       <input
         type="text"
         name="add task"
+        v-model="task"
         class="
           todo-add-task-input
           px-4
@@ -25,7 +26,6 @@
       type="button"
       class="
         todo-add-task
-        bg-transparent
         hover:bg-green-500
         text-green-700 text-sm
         hover:text-white
@@ -35,26 +35,62 @@
         hover:border-transparent
         rounded
       "
+      :class="isAddingTask ? 'bg-green-500' :'bg-transparent'"
       @click="addTask"
     >
-      Add Task
+      <span v-show="!isAddingTask">Add Task</span>
+      <img
+        src="../static/loading.png"
+        width="18px"
+        height="20px"
+        alt="Adding..."
+        v-show="isAddingTask"
+      />
     </button>
   </aside>
 </template>
 
 <script>
 import { defineComponent } from '@nuxtjs/composition-api'
+import axios from 'axios'
+const API_BASE_URL = 'https://todo-app-csoc.herokuapp.com/';
 
 export default defineComponent({
   emits: ['newTask'],
+  data() {
+    return {
+      task: '',
+      isAddingTask: false
+    }
+  },
   methods: {
-    addTask() {
-      /**
-       * @todo Complete this function.
-       * @todo 1. Send the request to add the task to the backend server.
-       * @todo 2. Add the task in the dom.
-       * @hint use emit to make a event that parent can observe
-       */
+    async addTask() {
+
+      if (this.isAddingTask) return
+      this.isAddingTask = true
+
+      if (this.task.trim() === '') {
+        this.$toast.error('Task name can not be empty')
+        return
+      }
+
+      await axios({
+        url: API_BASE_URL + 'todo/create/',
+        method: 'POST',
+        headers: {Authorization: `token ${this.$store.getters.token}`},
+        data: {title: this.task.trim()}
+      })
+
+      const newTodo = await axios({
+        url: API_BASE_URL + 'todo/',
+        method: 'GET',
+        headers: {Authorization: `token ${this.$store.getters.token}`},
+      }).then(obj => obj.data.pop())
+      newTodo.editing = false
+      this.$emit('newTask', newTodo)
+      this.task = ''
+      this.$toast.success('Task created successfully')
+      this.isAddingTask = false
     },
   },
 })

components/navbar.vue

@@ -52,8 +52,9 @@ export default defineComponent({
     },
   },
   methods: {
-    logout() {
+    async logout() {
       this.$store.commit('setToken', null)
+      await new Promise(r => setTimeout(r, 1000));
       this.$router.replace('/login')
     },
   },

components/search.vue

@@ -0,0 +1,51 @@
+<template>
+      <input
+        @input="searched"
+        type="text"
+        name="add task"
+        v-model="searchTerm"
+        class="
+          todo-search-input
+          px-4
+          py-2
+          placeholder-blueGray-300
+          text-blueGray-600
+          bg-white
+          rounded
+          text-sm
+          border border-blueGray-300
+          outline-none
+          focus:outline-none focus:ring
+          w-full
+        "
+        placeholder="Search"
+      />
+</template>
+
+<script>
+import { defineComponent } from '@nuxtjs/composition-api'
+
+export default defineComponent({
+  emits: ['query'],
+  data() {
+    return {
+      searchTerm: ''
+    }
+  },
+  methods: {
+    searched() {
+      this.$emit('query', this.searchTerm.toLowerCase())
+    },
+  },
+})
+</script>
+
+
+<style>
+  .todo-search-input {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+    width: min(464px, 100vw - 48px);
+    margin-top: 40px;
+}
+</style>

middleware/auth.ts

@@ -1,9 +1,6 @@
 import { defineNuxtMiddleware } from '@nuxtjs/composition-api'
 
-export default defineNuxtMiddleware((context) => {
-  /***
-   * @todo Redirect the user to login page if token is not present in store.
-   * @todo Redirect the user to main page if token is present in store
-   * @hints check what propeties context has
-   */
+export default defineNuxtMiddleware(({store, route, redirect}) => {
+  if (store.getters.auth && (route.path === '/login' || route.path === '/register')) return redirect('/')
+  else if (!store.getters.auth && (route.path === '/')) return redirect('/login')
 })