Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Completed #10

Open
wants to merge 9 commits into
base: main
Choose a base branch
from
Open

Completed #10

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
e379041
Update Task left
jayantpranjal0 Jun 30, 2022
88b9739
Completed
jayantpranjal0 Jul 1, 2022
7502fb4
Completed
jayantpranjal0 Aug 1, 2022
5d03707
Some Changes Made
jayantpranjal0 Aug 13, 2022
fa617aa
Update package.json
jayantpranjal0 Aug 14, 2022
3687c08
Update package.json
jayantpranjal0 Aug 14, 2022
169903d
Update package.json
jayantpranjal0 Aug 14, 2022
862a2a5
Update package.json
jayantpranjal0 Aug 14, 2022
dac44ab
Update package.json
jayantpranjal0 Aug 14, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
36 changes: 23 additions & 13 deletions components/addTask.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,7 @@
<template>
<aside class="mx-auto flex justify-between mt-24 px-4">
<label for="add task" class="flex-1">
<input
type="text"
name="add task"
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

name attribute cannot have spaces in between

class="
<input type="text" name="add task" class="
todo-add-task-input
px-4
py-2
Expand All @@ -17,13 +14,9 @@
outline-none
focus:outline-none focus:ring
w-full
"
placeholder="Enter Task"
/>
" v-model.trim="newTask" placeholder="Enter Task" />
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice catch on trimming

</label>
<button
type="button"
class="
<button type="button" class="
todo-add-task
bg-transparent
hover:bg-green-500
Expand All @@ -34,9 +27,7 @@
border border-green-500
hover:border-transparent
rounded
"
@click="addTask"
>
" @click="addTask">
Add Task
</button>
</aside>
Expand All @@ -55,6 +46,25 @@ export default defineComponent({
* @todo 2. Add the task in the dom.
* @hint use emit to make a event that parent can observe
*/
var newTask = this.newTask
if (newTask == '') {
return
}
this.$toast.info('Adding...')
const headers = {
Authorization: 'Token ' + this.$store.getters.token,
}
this.$axios({
headers: headers,
url: 'todo/create/',
method: 'post',
data: { title: newTask }
}).then(() => {
this.$toast.success('Todo added successfully!')
this.$router.go()
}).catch(() =>
this.$toast.error('Some error occurred!')
)
},
},
})
Expand Down
9 changes: 9 additions & 0 deletions middleware/auth.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,4 +6,13 @@ export default defineNuxtMiddleware((context) => {
* @todo Redirect the user to main page if token is present in store
* @hints check what propeties context has
*/
const path=context.route.fullPath
const token=context.store.getters.token

if (token === null && path === '/'){
context.redirect('login/');
}
else if(token != null && path != '/'){
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Prefer using strict equalities

context.redirect('/');
}
})
136 changes: 74 additions & 62 deletions pages/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,7 @@
<transition>
<span v-if="loading">Fetching Tasks....</span>
<ul v-else class="flex-col mt-9 mx-auto">
<li
v-for="(todo, index) in todos"
:key="todo.id"
class="
<li v-for="(todo, index) in todos" :key="todo.id" class="
border
flex
border-gray-500
Expand All @@ -17,23 +14,14 @@
justify-between
items-center
mb-2
"
>
">
<label :for="todo.id">
<input
: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',
]"
:name="todo.title"
placeholder="Edit The Task"
/>
<input v-show="todo.editing" :id="todo.id" type="text" :class="[
'appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:ring todo-edit-task-input',
]" v-model.trim="todos[index].title" :name="todo.title" placeholder="Edit The Task" />
</label>
<div class="">
<button
class="
hideme
<button v-show="todo.editing" class="
bg-transparent
hover:bg-gray-500
text-gray-700 text-sm
Expand All @@ -44,57 +32,37 @@
hover:border-transparent
rounded
todo-update-task
"
type="button"
@click="updateTask(index, todo.id)"
>
" type="button" @click="updateTask(index, todo.id)">
Done
</button>
</div>
<div :class="['todo-task text-gray-600']">
<div v-show="!todo.editing" :class="['todo-task text-gray-600']">
{{ todo.title }}
</div>
<span class="">
<button
style="margin-right: 5px"
type="button"
class="
<span v-show="!todo.editing" class="">
<button style="margin-right: 5px" type="button" class="
bg-transparent
hover:bg-yellow-500 hover:text-white
border border-yellow-500
hover:border-transparent
rounded
px-2
py-2
"
@click="editTask(index)"
>
<img
src="https://res.cloudinary.com/nishantwrp/image/upload/v1587486663/CSOC/edit.png"
width="18px"
height="20px"
alt="Edit"
/>
" @click="editTask(index)">
<img src="https://res.cloudinary.com/nishantwrp/image/upload/v1587486663/CSOC/edit.png" width="18px"
height="20px" alt="Edit" />
</button>
<button
type="button"
class="
<button type="button" class="
bg-transparent
hover:bg-red-500 hover:text-white
border border-red-500
hover:border-transparent
rounded
px-2
py-2
"
@click="deleteTask(index, todo.id)"
>
<img
src="https://res.cloudinary.com/nishantwrp/image/upload/v1587486661/CSOC/delete.svg"
width="18px"
height="22px"
alt="Delete"
/>
" @click="deleteTask(index, todo.id)">
<img src="https://res.cloudinary.com/nishantwrp/image/upload/v1587486661/CSOC/delete.svg" width="18px"
height="22px" alt="Delete" />
</button>
</span>
</li>
Expand All @@ -108,27 +76,19 @@ 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,
},
],
loading: false,
}
},
mounted() {
this.getTasks()
this.loading = true,
this.getTasks()
},
methods: {
async getTasks() {
Expand All @@ -138,6 +98,24 @@ export default defineComponent({
* @hints use store and set loading true
* @caution you have to assign new value to todos for it to update
*/
const headers = {
Authorization: 'Token ' + this.$store.getters.token,
}
this.$axios({
headers: headers,
url: 'todo/',
method: 'get',
}).then((res) => {
this.loading = false
res.data.forEach((todo) => {
todo.editing = false
})
this.todos = res.data
}).catch((err) =>
$toast.error(
"Some Error Occurred!"
)
)
},
/**
* Function to update a single todo
Expand All @@ -147,7 +125,24 @@ 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) {},
updateTask(_index, _id) {
const headers = {
Authorization: 'Token ' + this.$store.getters.token,
}
const data = { title: this.todos[_index].title }
this.$axios({
headers: headers,
url: 'todo/' + _id + '/',
method: 'patch',
data: data,
})
.then(() => {
this.$router.go()
})
.catch(() =>
this.$toast.error('Updation failed. Please try again later.')
)
},
/**
* toggle visibility of input and buttons for a single todo
* @argument {number} index - index of element to toggle
Expand All @@ -165,7 +160,24 @@ export default defineComponent({
* @todo 1. Send the request to delete the task to the backend server.
* @todo 2. Remove the task from the dom.
*/
deleteTask(_index, _id) {},
deleteTask(_index, _id) {
const headers = {
Authorization: 'Token ' + this.$store.getters.token,
}
this.$toast.info('Deleting....')
this.$axios({
headers: headers,
url: 'todo/' + _id + '/',
method: 'delete',
})
.then(() => {
this.$toast.success('Todo deleted successfully!')
this.$router.go()
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Think of how you can delete the task and prevent reloading the page

})
.catch(() =>
this.$toast.error("Some error occured!"),
)
},
},
})
</script>
Loading