Csoc week3

components/addTask.vue

@@ -3,6 +3,7 @@
     <label for="add task" class="flex-1">
       <input
         type="text"
+        v-model.trim="inputText"
         name="add task"
         class="
           todo-add-task-input
@@ -35,6 +36,7 @@
         hover:border-transparent
         rounded
       "
+      id="addbtn"
       @click="addTask"
     >
       Add Task
@@ -47,15 +49,47 @@ import { defineComponent } from '@nuxtjs/composition-api'
 
 export default defineComponent({
   emits: ['newTask'],
+  data(){
+    return{
+      inputText:""
+    }
+  },
   methods: {
-    addTask() {
+    async 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
        */
+      console.log("debyg");
+      console.log(this.inputText);
+
+      if(this.inputText=='')
+      {
+      this.$toast.error('Cannot Add empty Todo');
+      return
+      }
+
+      const data={title: this.inputText,}
+      const headers={Authorization: 'Token ' + this.$store.getters.token}
+
+      this.$axios.post('todo/create/',data,{headers})
+        .then((response) => {
+          this.$toast.success('Todo added!...')
+          this.$emit('newTask')
+        })
+        .catch((err) => {
+          this.$toast.error("Unable to add task!..")
+        })
     },
   },
 })
 </script>
+
+<style>
+#addbtn
+{
+  background-color: rgb(105, 208, 105);
+}
+</style>

components/navbar.vue

@@ -9,6 +9,9 @@
           <li class="font-semibold text-white">
             <nuxt-link to="/">Tasks</nuxt-link>
           </li>
+          <li>
+
+          </li>
         </ul>
         <ul v-else class="flex">
           <li class="text-white mr-2">
@@ -19,6 +22,7 @@
           </li>
         </ul>
       </transition>
+      <div v-if="auth"><h2 class="font-bold text-white text-xl">Welcome  {{name}}</h2></div>
       <div v-if="auth" class="w-28 inline-block relative">
         <div class="group inline-block relative">
           <a
@@ -32,6 +36,7 @@
               hover:bg-gray-400
             "
             href="#"
+            id="idol"
             @click="logout"
           >
             Logout
@@ -46,16 +51,32 @@
 import { defineComponent } from '@nuxtjs/composition-api'
 
 export default defineComponent({
+  // data(){return{
+  //   username:""
+  // }},
   computed: {
     auth() {
       return this.$store.getters.auth
+    },
+       name: function(){
+      return this.$store.getters.name
     },
   },
+
   methods: {
     logout() {
       this.$store.commit('setToken', null)
       this.$router.replace('/login')
+      this.$toast.success('Logged out!...')
     },
   },
 })
 </script>
+
+<style>
+#idol{
+  color: white;
+  /* border: 10px red solid; */
+  background-color: black;
+}
+</style>

middleware/auth.ts

@@ -6,4 +6,21 @@ export default defineNuxtMiddleware((context) => {
    * @todo Redirect the user to main page if token is present in store
    * @hints check what propeties context has
    */
+  // hh
+  let y = context.store.getters.token;
+  let x = context.route.fullPath;
+  console.log("hola")
+  console.log(y)
+  console.log(x)
+  console.log("hola2")
+
+  if (y === null && x === '/') 
+  {
+    context.redirect('login/');
+  }
+  else if (y != null && x != '/')
+  {
+    context.redirect('/');
+  }
+
 })

pages/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <main class="max-w-lg mx-auto px-6">
+  <main class="max-w-lg mx-auto px-8">
     <add-task @newTask="getTasks" />
     <transition>
       <span v-if="loading">Fetching Tasks....</span>
@@ -24,16 +24,17 @@
               :id="todo.id"
               type="text"
               :class="[
-                'hideme appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:ring todo-edit-task-input',
+                'appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:ring todo-edit-task-input',
               ]"
               :name="todo.title"
               placeholder="Edit The Task"
+              v-model.trim="editTitle"
+              v-show="!todos[index].editing"
             />
           </label>
           <div class="">
             <button
               class="
-                hideme
                 bg-transparent
                 hover:bg-gray-500
                 text-gray-700 text-sm
@@ -46,15 +47,18 @@
                 todo-update-task
               "
               type="button"
+              v-show="!todos[index].editing"
               @click="updateTask(index, todo.id)"
             >
               Done
             </button>
           </div>
+
           <div :class="['todo-task text-gray-600']">
             {{ todo.title }}
           </div>
           <span class="">
+
             <button
               style="margin-right: 5px"
               type="button"
@@ -67,7 +71,8 @@
                 px-2
                 py-2
               "
-              @click="editTask(index)"
+              v-show="!todos[index].editing"
+           @click="editTask(index, todo.id)"
             >
               <img
                 src="https://res.cloudinary.com/nishantwrp/image/upload/v1587486663/CSOC/edit.png"
@@ -76,17 +81,21 @@
                 alt="Edit"
               />
             </button>
+
             <button
               type="button"
               class="
                 bg-transparent
-                hover:bg-red-500 hover:text-white
+                hover:bg-red-500 
+                hover:text-white
                 border border-red-500
                 hover:border-transparent
                 rounded
                 px-2
                 py-2
               "
+              id="styd"
+              v-show="!todos[index].editing"
               @click="deleteTask(index, todo.id)"
             >
               <img
@@ -108,37 +117,60 @@ import { defineComponent } from '@nuxtjs/composition-api'
 import addTask from '~/components/addTask.vue'
 
 export default defineComponent({
+    middleware: 'auth',
   components: { addTask },
   data() {
     return {
       hello: 'hello world!',
-      todos: [
-        {
-          title: 'Henlo',
-          id: 1,
-          editing: false,
-        },
-        {
-          title: 'Frens',
-          id: 2,
-          editing: false,
-        },
-      ],
+      todos: [],
+      todoText:"",
+      editTitle:"",
       loading: false,
     }
   },
   mounted() {
-    this.getTasks()
+    this.getTasks(),
+    this.getname()
   },
   methods: {
     async getTasks() {
-      /***
-       * @todo Fetch the tasks created by the user and display them.
-       * @todo also the function to display a single new task added
-       * @hints use store and set loading true
-       * @caution you have to assign new value to todos for it to update
-       */
+        this.loading = true;
+        const headers={
+        Authorization: 'Token ' + this.$store.getters.token
+      }
+      this.$axios.get('todo/',{headers})
+        .then((response) => 
+        {
+        console.log("data");
+        console.log(response.data);
+        this.todos=response.data;
+        this.loading = false;
+   response.data.forEach((value)=>{
+        value.editing=false
+          })        })
+          .catch((err) => {
+          this.$toast.error("Error!..")
+        })
     },
+
+      getname(){
+        console.log("check getname")
+        const headers={
+        Authorization: 'Token ' + this.$store.getters.token
+      }
+      this.$axios.get('https://todo-app-csoc.herokuapp.com/auth/profile/',{headers})
+        .then((response) => {
+          console.log("inside getname")
+          console.log(response.data)
+
+          this.$store.commit('setName', response.data.name)
+        })
+        .catch((err) => {
+          console.log(err)
+        })
+    },
+
+
     /**
      * Function to update a single todo
      * @argument {number} _index - index of element to update in todos array
@@ -147,25 +179,69 @@ export default defineComponent({
      * @todo 1. Send the request to update the task to the backend server.
      * @todo 2. Update the task in the dom.
      */
-    updateTask(_index, _id) {},
+    async updateTask(_index, _id) {         
+      console.log("updatingg")
+      console.log("data67");
+      const data={title: this.editTitle,}
+      const headers={Authorization: 'Token ' + this.$store.getters.token}
+
+      if(this.todos[_index].title!= ''){
+       await this.$axios.patch(`https://todo-app-csoc.herokuapp.com/todo/${_id}/`,data,{headers})
+        .then((response) => 
+        {
+        console.log("data66");
+        console.log(response);
+        console.log(this.todos[_index].editing)
+        console.log("data77");
+        this.todos[_index].title=this.editTitle
+        this.editTitle=''
+        this.$toast.success('Task Updated')
+        this.todos[_index].editing = !this.todos[_index].editing;
+        })
+          .catch((err) => {
+          this.$toast.error("Error!..")
+        })
+      }
+        this.todos[_index].editing = !this.todos[_index].editing;
+        console.log("errrr")
+},
     /**
      * toggle visibility of input and buttons for a single todo
      * @argument {number} index - index of element to toggle
      * @todo add in bindings in dom so that 'hideme' class is dynamic or use conditional rendering
      * @hint read about class bindings in vue
      */
-    editTask(index) {
-      this.todos[index].editing = !this.todos[index].editing
+    editTask(index,id) {
+      console.log("editngg")
+      console.log(this.todos[index].editing);
+      this.todos[index].editing = !this.todos[index].editing;
+      console.log(this.todos[index].editing);
+    },
+
+    deleteTask(_index, _id) {
+      console.log("inside del")
+      this.$toast.info('Please wait...')
+      const headers={
+      Authorization: 'Token ' + this.$store.getters.token
+      }
+      this.$axios.delete(`https://todo-app-csoc.herokuapp.com/todo/${_id}/`,{headers})
+         .then((response) => {
+          this.todos.splice(_index,1)
+          this.$toast.success('Task deleted!')
+        })
+        .catch((err) => {
+          this.$toast.error('Unable to delete the task!..')
+        })
     },
-    /**
-     * Function to delete a single todo
-     * @argument {number} _index - index of element to update in todos array
-     * @argument {number} _id - id of todo obtained from API
-     * @todo Complete this function.
-     * @todo 1. Send the request to delete the task to the backend server.
-     * @todo 2. Remove the task from the dom.
-     */
-    deleteTask(_index, _id) {},
   },
 })
 </script>
+
+<style>
+#styd{
+  background-color: red;
+}
+#edbtn{
+  background:rgb(77, 77, 219);
+}
+</style>