-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
-
+
+
@@ -43,15 +107,21 @@
import router from '../../router'
import {HTTP} from '../../http-common'
import message from '../../message'
+ import Datepicker from 'vue-bulma-datepicker'
export default {
+ components: {
+ Datepicker
+ },
data() {
return {
listID: this.$route.params.id,
list: {},
newTask: '',
error: '',
- loading: false
+ loading: false,
+ isTaskEdit: false,
+ taskEditTask: {},
}
},
beforeMount() {
@@ -69,6 +139,7 @@
},
methods: {
loadList() {
+ this.isTaskEdit = false
this.loading = true
HTTP.get(`lists/` + this.$route.params.id, {headers: {'Authorization': 'Bearer ' + localStorage.getItem('token')}})
@@ -104,18 +175,50 @@
HTTP.post(`tasks/` + e.target.id, {done: e.target.checked}, {headers: {'Authorization': 'Bearer ' + localStorage.getItem('token')}})
.then(response => {
- for (const t in this.list.tasks) {
- if (this.list.tasks[t].id === response.data.id) {
- this.$set(this.list.tasks, t, response.data)
- break
- }
- }
+ this.updateTaskByID(e.target.id, response.data)
this.handleSuccess({message: 'The task was successfully ' + (e.target.checked ? 'un-' :'') + 'marked as done.'})
})
.catch(e => {
this.handleError(e)
})
},
+ editTask(id) {
+ // Find the slected task and set it to the current object
+ for (const t in this.list.tasks) {
+ if (this.list.tasks[t].id === id) {
+ this.taskEditTask = this.list.tasks[t]
+ break
+ }
+ }
+
+ this.isTaskEdit = true
+ },
+ editTaskSubmit() {
+ this.loading = true
+
+ // Convert the date in a unix timestamp
+ let duedate = (+ new Date(this.taskEditTask.dueDate)) / 1000
+ let reminderdate = (+ new Date(this.taskEditTask.reminderDate)) / 1000
+ this.taskEditTask.dueDate = duedate
+ this.taskEditTask.reminderDate = reminderdate
+
+ HTTP.post(`tasks/` + this.taskEditTask.id, this.taskEditTask, {headers: {'Authorization': 'Bearer ' + localStorage.getItem('token')}})
+ .then(response => {
+ this.updateTaskByID(this.taskEditTask.id, response.data)
+ this.handleSuccess({message: 'The task was successfully updated.'})
+ })
+ .catch(e => {
+ this.handleError(e)
+ })
+ },
+ updateTaskByID(id, updatedTask) {
+ for (const t in this.list.tasks) {
+ if (this.list.tasks[t].id === id) {
+ this.$set(this.list.tasks, t, updatedTask)
+ break
+ }
+ }
+ },
handleError(e) {
this.loading = false
message.error(e, this)
@@ -137,15 +240,31 @@
display: block;
padding: 0.5rem 1rem;
border-bottom: 1px solid darken(#fff, 10%);
- cursor: pointer;
+
+ label{
+ width: 96%;
+ display: inline-block;
+ cursor: pointer;
+ }
input[type="checkbox"] {
vertical-align: middle;
}
+
+ .settings{
+ float: right;
+ width: 4%;
+ cursor: pointer;
+ }
}
.task:last-child {
border-bottom: none;
}
}
+
+ .taskedit{
+ min-height: calc(100% - 1rem);
+ margin-top: 1rem;
+ }
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
index 2d3207f9..b5c82a72 100644
--- a/src/main.js
+++ b/src/main.js
@@ -17,12 +17,16 @@ import { faSignOutAlt } from '@fortawesome/free-solid-svg-icons'
import { faPlus } from '@fortawesome/free-solid-svg-icons'
import { faListOl } from '@fortawesome/free-solid-svg-icons'
import { faTasks } from '@fortawesome/free-solid-svg-icons'
+import { faCog } from '@fortawesome/free-solid-svg-icons'
+import { faAngleRight } from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
library.add(faSignOutAlt)
library.add(faPlus)
library.add(faListOl)
library.add(faTasks)
+library.add(faCog)
+library.add(faAngleRight)
Vue.component('icon', FontAwesomeIcon)