Skip to content

Commit d3352c4

Browse files
author
wang junliang
committed
v0.0.5 edit task [2024.7.3]
1 parent b32625b commit d3352c4

File tree

16 files changed

+366
-138
lines changed

16 files changed

+366
-138
lines changed

‎FrontEnd/app.vue.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ const app = Vue.createApp({
1414

1515
topMenu:[
1616
{path:'/', caption:'Home'},
17-
{path:'/tasks', caption:'tasks'},
17+
{path:'/tasks/?next_period=uncompleted', caption:'tasks'},
1818
{path:'/about', caption:'about'},
1919
],
2020
}

‎FrontEnd/components/TaskAdd.vue.js

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
import { createTask } from '../api.js';
2+
3+
export default {
4+
data() {
5+
return {
6+
task:{
7+
user_id: 1,
8+
title: '',
9+
description: '',
10+
priority:'',
11+
due_date: ''
12+
}
13+
};
14+
},
15+
methods: {
16+
addTask() {
17+
console.log(">> addTask: {url:", createTask(), ", task:", this.task)
18+
19+
axios.post( createTask(), this.task )
20+
.then(response => {
21+
// Emit an event with the new task data
22+
this.$emit('task-added');
23+
// Clear the form
24+
this.title = '';
25+
this.description = '';
26+
this.priority = '';
27+
this.due_date = '';
28+
})
29+
.catch(error => {
30+
console.error('Error adding task:', error);
31+
});
32+
},
33+
cancel(){
34+
this.$router.push('/');
35+
}
36+
},
37+
38+
template:`
39+
<div class="add-task">
40+
<h2>Add a New Task</h2>
41+
<form @submit.prevent="addTask">
42+
43+
<div>
44+
<label for="user_id">user_id</label>
45+
<input type="text" id="user_id" v-model="task.user_id">
46+
</div>
47+
48+
<div>
49+
<label for="title">Title</label>
50+
<input type="text" id="title" v-model="task.title" required>
51+
</div>
52+
53+
<div>
54+
<label for="description">Description</label>
55+
<textarea id="description" v-model="task.description"></textarea>
56+
</div>
57+
58+
<div>
59+
<label for="priority">priority</label>
60+
<input type="text" id="priority" v-model="task.priority" placeholder="low / medium / high">
61+
</div>
62+
63+
<div>
64+
<label for="due_date">due_date</label>
65+
<input type="text" id="due_date" v-model="task.due_date" placeholder="2024-06-28">
66+
</div>
67+
68+
<div class="btn_box">
69+
<button type="submit">添加任务(Add Task)</button>
70+
<button type="reset" class='cancel' @click="cancel">取消(Cancel)</button>
71+
</div>
72+
</form>
73+
</div>
74+
`
75+
};

‎FrontEnd/components/TaskEdit.vue.js

Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
import { getTask, updateTask } from '../api.js';
2+
3+
export default {
4+
data() {
5+
return {
6+
task:{
7+
user_id: 1,
8+
task_id: 1,
9+
title: '1',
10+
description: '2',
11+
priority:'',
12+
due_date: ''
13+
}
14+
};
15+
},
16+
17+
mounted(){
18+
this.task.task_id=this.$route.query.task_id;
19+
this.getTask(this.task.task_id)
20+
},
21+
22+
methods: {
23+
getTask(task_id){
24+
axios.get( getTask(task_id) )
25+
.then(response => {
26+
// Emit an event with the new task data
27+
this.$emit('task-edited');
28+
this.task=response.data
29+
})
30+
.catch(error => {
31+
console.error('Error editting task:', error);
32+
});
33+
},
34+
35+
updateTask() {
36+
console.log(">> updateTask: {url:", updateTask(this.task.task_id), ", task:", this.task)
37+
38+
axios.put( updateTask(this.task.task_id), this.task)
39+
.then(response => {
40+
// Emit an event with the new task data
41+
this.$emit('task-added');
42+
// go back to details
43+
this.$router.push("/tasks/"+this.task.task_id)
44+
})
45+
.catch(error => {
46+
console.error('Error adding task:', error);
47+
});
48+
},
49+
cancel(){
50+
this.$router.push('/');
51+
}
52+
},
53+
54+
template:`
55+
<div class="add-task">
56+
<h2>Edit task: </h2>
57+
<form @submit.prevent="updateTask">
58+
<input type="hidden" id="task_id" v-model="task.task_id">
59+
<input type="hidden" id="user_id" v-model="task.user_id">
60+
61+
<div class="grey">
62+
<label>task_id: {{task.task_id}}</label>
63+
<label>user_id: {{task.user_id}}</label>
64+
</div>
65+
66+
<div>
67+
<label for="title">Title</label>
68+
<input type="text" id="title" v-model="task.title" required>
69+
</div>
70+
71+
<div>
72+
<label for="description">Description</label>
73+
<textarea id="description" v-model="task.description"></textarea>
74+
</div>
75+
76+
<div>
77+
<label for="priority">priority</label>
78+
<select id="priority" v-model="task.priority">
79+
<option value="low">low</option>
80+
<option value="medium">medium</option>
81+
<option value="high">high</option>
82+
</select>
83+
</div>
84+
85+
<div>
86+
<label for="due_date">due_date</label>
87+
<input type="text" id="due_date" v-model="task.due_date" placeholder="2024-06-28">
88+
</div>
89+
90+
<div>
91+
<label for="completed">completed</label>
92+
<select id="completed" v-model="task.completed">
93+
<option value="true">true</option>
94+
<option value="false">false</option>
95+
</select>
96+
</div>
97+
98+
<div class="btn_box">
99+
<button type="submit">更新任务(Update Task)</button>
100+
<button type="reset" class='cancel' @click="cancel">取消(Cancel)</button>
101+
</div>
102+
</form>
103+
</div>
104+
`
105+
};

‎FrontEnd/components/TaskForm.vue.js

Lines changed: 0 additions & 71 deletions
This file was deleted.

‎FrontEnd/components/TaskItem.vue.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,8 @@ export default {
1515
//console.log(updatedTask, getTasks() )
1616
//axios.put(`http://j3.biomooc.com:8501/tasks/${updatedTask.id}`, updatedTask)
1717

18-
//axios.put( updateTask(updatedTask.task_id), updatedTask)
19-
axios.post( getTasks()+"/?action=put", updatedTask)
18+
axios.put( updateTask(updatedTask.task_id), updatedTask)
19+
//axios.post( getTasks()+"/?action=put", updatedTask)
2020
.then(response => {
2121
// 处理成功响应，可以在此处进行其他操作，比如更新视图状态
2222
//console.log('Task completion updated successfully:', response.data);

‎FrontEnd/components/TaskList.vue.js

Lines changed: 15 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import TaskItem from './TaskItem.vue.js';
2-
import TaskForm from './TaskForm.vue.js';
2+
import TaskAdd from './TaskAdd.vue.js';
3+
import TaskEdit from './TaskEdit.vue.js';
34
import { getTasks, createTask } from '../api.js';
45

56
export default {
@@ -8,7 +9,7 @@
89
default:""
910
} },
1011

11-
components: { TaskItem, TaskForm},
12+
components: { TaskItem, TaskAdd, TaskEdit},
1213

1314
data() {
1415
return {
@@ -78,12 +79,18 @@
7879

7980
template:`
8081
<div class="container">
81-
<TaskForm v-show="action=='add'"></TaskForm>
82-
83-
<h2>{{title}} ({{tasks.length}})</h2>
84-
<ul class=task>
85-
<TaskItem v-for="task in tasks" :key="task.id" :task="task" />
86-
</ul>
82+
<template v-if="action=='add'">
83+
<TaskAdd></TaskAdd>
84+
</template>
85+
<template v-if="action=='edit'">
86+
<TaskEdit></TaskEdit>
87+
</template>
88+
<template v-else>
89+
<h2>{{title}} ({{tasks.length}})</h2>
90+
<ul class=task>
91+
<TaskItem v-for="task in tasks" :key="task.id" :task="task" />
92+
</ul>
93+
</template>
8794
</div>
8895
`
8996
};

‎FrontEnd/index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@
2323

2424
<title>
2525
日程管理软件 | dawnTodo.py
26-
v0.0.4
26+
v0.0.5
2727
</title>
2828
</head>
2929

0 commit comments

Comments
 (0)