Skip to content

Commit 42b775d

Browse files
kossiecoderkossiecoder
committed
58
1 parent 325cfd8 commit 42b775d

File tree

6 files changed

+183
-145
lines changed

6 files changed

+183
-145
lines changed

‎db.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,7 @@
6161
"id": 18
6262
},
6363
{
64-
"subject": "new todo2222",
64+
"subject": "new todo222",
6565
"completed": true,
6666
"id": 21
6767
}

‎src/components/TodoForm.vue

Lines changed: 171 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,171 @@
1+
<template>
2+
<div v-if="loading">
3+
Loading..
4+
</div>
5+
<form
6+
v-else
7+
@submit.prevent="onSave"
8+
>
9+
<div class="row">
10+
<div class="col-6">
11+
<div class="form-group">
12+
<label>Subject</label>
13+
<input
14+
v-model="todo.subject"
15+
type="text"
16+
class="form-control"
17+
>
18+
</div>
19+
</div>
20+
<div v-if="editing" class="col-6">
21+
<div class="form-group">
22+
<label>Status</label>
23+
<div>
24+
<button
25+
class="btn"
26+
type="button"
27+
:class="todo.completed ? 'btn-success' : 'btn-danger'"
28+
@click="toggleTodoStatus"
29+
>
30+
{{ todo.completed ? 'Completed' : 'Incomplete' }}
31+
</button>
32+
</div>
33+
</div>
34+
</div>
35+
<div class="col-12">
36+
<div class="form-group">
37+
<label>Body</label>
38+
<textarea v-model="todo.body" class="form-control" cols="30" rows="10"></textarea>
39+
</div>
40+
</div>
41+
</div>
42+
43+
<button
44+
type="submit"
45+
class="btn btn-primary"
46+
:disabled="!todoUpdated"
47+
>
48+
Save
49+
</button>
50+
<button
51+
class="btn btn-outline-dark ml-2"
52+
@click="moveToTodoListPage"
53+
>
54+
Cancel
55+
</button>
56+
</form>
57+
<Toast
58+
v-if="showToast"
59+
:message="toastMessage"
60+
:type="toastAlertType"
61+
/>
62+
</template>
63+
64+
<script>
65+
import { useRoute, useRouter } from 'vue-router';
66+
import axios from 'axios';
67+
import { ref, computed } from 'vue';
68+
import _ from 'lodash';
69+
import Toast from '@/components/Toast.vue';
70+
import { useToast } from '@/composables/toast';
71+
72+
export default {
73+
components: {
74+
Toast
75+
},
76+
props: {
77+
editing: {
78+
type: Boolean,
79+
default: false
80+
}
81+
},
82+
setup(props) {
83+
const route = useRoute();
84+
const router = useRouter();
85+
const todo = ref({
86+
subject: '',
87+
completed: false,
88+
body: ''
89+
});
90+
const originalTodo = ref(null);
91+
const loading = ref(false);
92+
const {
93+
toastMessage,
94+
toastAlertType,
95+
showToast,
96+
triggerToast
97+
} = useToast();
98+
99+
const todoId = route.params.id
100+
101+
const getTodo = async () => {
102+
loading.value = true;
103+
try {
104+
const res = await axios.get(`
105+
http://localhost:3000/todos/${todoId}
106+
`);
107+
108+
todo.value = { ...res.data };
109+
originalTodo.value = { ...res.data };
110+
111+
loading.value = false;
112+
} catch (error) {
113+
loading.value = false;
114+
console.log(error);
115+
triggerToast('Something went wrong', 'danger');
116+
}
117+
};
118+
119+
const todoUpdated = computed(() => {
120+
return !_.isEqual(todo.value, originalTodo.value)
121+
});
122+
123+
const toggleTodoStatus = () => {
124+
todo.value.completed = !todo.value.completed;
125+
};
126+
127+
const moveToTodoListPage = () => {
128+
router.push({
129+
name: 'Todos'
130+
})
131+
};
132+
133+
if (props.editing) {
134+
getTodo();
135+
}
136+
137+
const onSave = async () => {
138+
try {
139+
const res = await axios.put(`
140+
http://localhost:3000/todos/${todoId}
141+
`, {
142+
subject: todo.value.subject,
143+
completed: todo.value.completed
144+
});
145+
146+
originalTodo.value = {...res.data};
147+
triggerToast('Successfully saved!');
148+
} catch (error) {
149+
console.log(error);
150+
triggerToast('Something went wrong', 'danger')
151+
}
152+
};
153+
154+
return {
155+
todo,
156+
loading,
157+
toggleTodoStatus,
158+
moveToTodoListPage,
159+
onSave,
160+
todoUpdated,
161+
showToast,
162+
toastMessage,
163+
toastAlertType,
164+
};
165+
}
166+
}
167+
</script>
168+
169+
<style>
170+
171+
</style>

‎src/composables/toast.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ export const useToast = () => {
1212
toastMessage.value = '';
1313
toastAlertType.value = '';
1414
showToast.value = false;
15-
}, 1000)
15+
}, 5000)
1616
}
1717

1818
onUnmounted(() => {

‎src/pages/todos/_id.vue

Lines changed: 3 additions & 137 deletions
Original file line numberDiff line numberDiff line change
@@ -1,149 +1,15 @@
11
<template>
22
<h1>To-Do Page</h1>
3-
<div v-if="loading">
4-
Loading..
5-
</div>
6-
<form
7-
v-else
8-
@submit.prevent="onSave"
9-
>
10-
<div class="row">
11-
<div class="col-6">
12-
<div class="form-group">
13-
<label>Subject</label>
14-
<input
15-
v-model="todo.subject"
16-
type="text"
17-
class="form-control"
18-
>
19-
</div>
20-
</div>
21-
<div class="col-6">
22-
<div class="form-group">
23-
<label>Status</label>
24-
<div>
25-
<button
26-
class="btn"
27-
type="button"
28-
:class="todo.completed ? 'btn-success' : 'btn-danger'"
29-
@click="toggleTodoStatus"
30-
>
31-
{{ todo.completed ? 'Completed' : 'Incomplete' }}
32-
</button>
33-
</div>
34-
</div>
35-
</div>
36-
</div>
37-
38-
<button
39-
type="submit"
40-
class="btn btn-primary"
41-
:disabled="!todoUpdated"
42-
>
43-
Save
44-
</button>
45-
<button
46-
class="btn btn-outline-dark ml-2"
47-
@click="moveToTodoListPage"
48-
>
49-
Cancel
50-
</button>
51-
</form>
52-
<Toast
53-
v-if="showToast"
54-
:message="toastMessage"
55-
:type="toastAlertType"
56-
/>
3+
<TodoForm :editing="true" />
574
</template>
585

596
<script>
60-
import { useRoute, useRouter } from 'vue-router';
61-
import axios from 'axios';
62-
import { ref, computed } from 'vue';
63-
import _ from 'lodash';
64-
import Toast from '@/components/Toast.vue';
65-
import { useToast } from '@/composables/toast';
7+
import TodoForm from '@/components/TodoForm.vue';
668
679
export default {
6810
components: {
69-
Toast
11+
TodoForm
7012
},
71-
setup() {
72-
const route = useRoute();
73-
const router = useRouter();
74-
const todo = ref(null);
75-
const originalTodo = ref(null);
76-
const loading = ref(true);
77-
const {
78-
toastMessage,
79-
toastAlertType,
80-
showToast,
81-
triggerToast
82-
} = useToast();
83-
84-
const todoId = route.params.id
85-
86-
const getTodo = async () => {
87-
try {
88-
const res = await axios.get(`
89-
http://localhost:3000/todos/${todoId}
90-
`);
91-
92-
todo.value = { ...res.data };
93-
originalTodo.value = { ...res.data };
94-
95-
loading.value = false;
96-
} catch (error) {
97-
console.log(error);
98-
triggerToast('Something went wrong', 'danger');
99-
}
100-
};
101-
102-
const todoUpdated = computed(() => {
103-
return !_.isEqual(todo.value, originalTodo.value)
104-
});
105-
106-
const toggleTodoStatus = () => {
107-
todo.value.completed = !todo.value.completed;
108-
};
109-
110-
const moveToTodoListPage = () => {
111-
router.push({
112-
name: 'Todos'
113-
})
114-
};
115-
116-
getTodo();
117-
118-
const onSave = async () => {
119-
try {
120-
const res = await axios.put(`
121-
http://localhost:3000/todos/${todoId}
122-
`, {
123-
subject: todo.value.subject,
124-
completed: todo.value.completed
125-
});
126-
127-
originalTodo.value = {...res.data};
128-
triggerToast('Successfully saved!');
129-
} catch (error) {
130-
console.log(error);
131-
triggerToast('Something went wrong', 'danger')
132-
}
133-
};
134-
135-
return {
136-
todo,
137-
loading,
138-
toggleTodoStatus,
139-
moveToTodoListPage,
140-
onSave,
141-
todoUpdated,
142-
showToast,
143-
toastMessage,
144-
toastAlertType,
145-
};
146-
}
14713
}
14814
</script>
14915

‎src/pages/todos/create/index.vue

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,15 @@
11
<template>
2-
Create Page
2+
<h1>Create Todo</h1>
3+
<TodoForm />
34
</template>
45

56
<script>
6-
export default {
7+
import TodoForm from '@/components/TodoForm.vue';
78
9+
export default {
10+
components: {
11+
TodoForm
12+
}
813
}
914
</script>
1015

‎src/pages/todos/index.vue

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -18,8 +18,6 @@
1818
@keyup.enter="searchTodo"
1919
>
2020
<hr />
21-
<TodoSimpleForm @add-todo="addTodo" />
22-
<div style="color: red">{{ error }}</div>
2321

2422
<div v-if="!todos.length">
2523
There is nothing to display
@@ -60,7 +58,6 @@
6058

6159
<script>
6260
import { ref, computed, watch } from 'vue';
63-
import TodoSimpleForm from '@/components/TodoSimpleForm.vue';
6461
import TodoList from '@/components/TodoList.vue';
6562
import axios from 'axios';
6663
import Toast from '@/components/Toast.vue';
@@ -69,7 +66,6 @@ import {useRouter} from 'vue-router';
6966
7067
export default {
7168
components: {
72-
TodoSimpleForm,
7369
TodoList,
7470
Toast,
7571
},

0 commit comments

Comments
 (0)