Added functions to edit a task

package-lock.json

@@ -3458,6 +3458,12 @@
         }
       }
     },
+    "css-parse": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/css-parse/-/css-parse-1.7.0.tgz",
+      "integrity": "sha1-Mh9s9zeCpv91ERE5D8BeLGV9jJs=",
+      "dev": true
+    },
     "css-select": {
       "version": "1.3.0-rc0",
       "resolved": "https://registry.npmjs.org/css-select/-/css-select-1.3.0-rc0.tgz",
@@ -5043,6 +5049,12 @@
         "write": "^0.2.1"
       }
     },
+    "flatpickr": {
+      "version": "2.6.3",
+      "resolved": "https://registry.npmjs.org/flatpickr/-/flatpickr-2.6.3.tgz",
+      "integrity": "sha1-RXNXUy3rE189pktCW/RDVzeWFWQ=",
+      "dev": true
+    },
     "flatten": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/flatten/-/flatten-1.0.2.tgz",
@@ -5274,8 +5286,7 @@
         "code-point-at": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true,
+          "dev": true
-          "optional": true
         },
         "concat-map": {
           "version": "0.0.1",
@@ -5285,8 +5296,7 @@
         "console-control-strings": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true,
+          "dev": true
-          "optional": true
         },
         "core-util-is": {
           "version": "1.0.2",
@@ -5403,8 +5413,7 @@
         "inherits": {
           "version": "2.0.3",
           "bundled": true,
-          "dev": true,
+          "dev": true
-          "optional": true
         },
         "ini": {
           "version": "1.3.5",
@@ -5416,7 +5425,6 @@
           "version": "1.0.0",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "number-is-nan": "^1.0.0"
           }
@@ -5542,8 +5550,7 @@
         "number-is-nan": {
           "version": "1.0.1",
           "bundled": true,
-          "dev": true,
+          "dev": true
-          "optional": true
         },
         "object-assign": {
           "version": "4.1.1",
@@ -5555,7 +5562,6 @@
           "version": "1.4.0",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "wrappy": "1"
           }
@@ -5677,7 +5683,6 @@
           "version": "1.0.2",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",
@@ -14828,6 +14833,62 @@
         }
       }
     },
+    "stylus": {
+      "version": "0.54.5",
+      "resolved": "https://registry.npmjs.org/stylus/-/stylus-0.54.5.tgz",
+      "integrity": "sha1-QrlWCTHKcJDOhRWnmLqeaqPW3Hk=",
+      "dev": true,
+      "requires": {
+        "css-parse": "1.7.x",
+        "debug": "*",
+        "glob": "7.0.x",
+        "mkdirp": "0.5.x",
+        "sax": "0.5.x",
+        "source-map": "0.1.x"
+      },
+      "dependencies": {
+        "glob": {
+          "version": "7.0.6",
+          "resolved": "https://registry.npmjs.org/glob/-/glob-7.0.6.tgz",
+          "integrity": "sha1-IRuvr0nlJbjNkyYNFKsTYVKz9Xo=",
+          "dev": true,
+          "requires": {
+            "fs.realpath": "^1.0.0",
+            "inflight": "^1.0.4",
+            "inherits": "2",
+            "minimatch": "^3.0.2",
+            "once": "^1.3.0",
+            "path-is-absolute": "^1.0.0"
+          }
+        },
+        "sax": {
+          "version": "0.5.8",
+          "resolved": "http://registry.npmjs.org/sax/-/sax-0.5.8.tgz",
+          "integrity": "sha1-1HLbIo6zMcJQaw6MFVJK25OdEsE=",
+          "dev": true
+        },
+        "source-map": {
+          "version": "0.1.43",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.1.43.tgz",
+          "integrity": "sha1-wkvBRspRfBRx9drL4lcbK3+eM0Y=",
+          "dev": true,
+          "requires": {
+            "amdefine": ">=0.0.4"
+          }
+        }
+      }
+    },
+    "stylus-loader": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/stylus-loader/-/stylus-loader-3.0.2.tgz",
+      "integrity": "sha512-+VomPdZ6a0razP+zinir61yZgpw2NfljeSsdUF5kJuEzlo3khXhY19Fn6l8QQz1GRJGtMCo8nG5C04ePyV7SUA==",
+      "dev": true,
+      "requires": {
+        "loader-utils": "^1.0.2",
+        "lodash.clonedeep": "^4.5.0",
+        "when": "~3.6.x"
+      }
+    },
     "supports-color": {
       "version": "5.5.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
@@ -15569,6 +15630,22 @@
       "resolved": "https://registry.npmjs.org/vue/-/vue-2.5.17.tgz",
       "integrity": "sha512-mFbcWoDIJi0w0Za4emyLiW72Jae0yjANHbCVquMKijcavBGypqlF7zHRgMa5k4sesdv7hv2rB4JPdZfR+TPfhQ=="
     },
+    "vue-bulma-datepicker": {
+      "version": "1.3.6",
+      "resolved": "https://registry.npmjs.org/vue-bulma-datepicker/-/vue-bulma-datepicker-1.3.6.tgz",
+      "integrity": "sha512-Je52A06f/SzdSdJYiEy0u7qM6MK7hTY/F8U7+j3JL/nwsMeVKxrC+GMcD+i56sGvzDq66OddYsG492epVASPDw==",
+      "dev": true,
+      "requires": {
+        "flatpickr": "2.6.3",
+        "vue-click-outside": "1.0.6"
+      }
+    },
+    "vue-click-outside": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/vue-click-outside/-/vue-click-outside-1.0.6.tgz",
+      "integrity": "sha1-vz4CFyENd3gpnMOd3PicwDYInyI=",
+      "dev": true
+    },
     "vue-eslint-parser": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-2.0.3.tgz",
@@ -16212,6 +16289,12 @@
       "integrity": "sha512-nqHUnMXmBzT0w570r2JpJxfiSD1IzoI+HGVdd3aZ0yNi3ngvQ4jv1dtHt5VGxfI2yj5yqImPhOK4vmIh2xMbGg==",
       "dev": true
     },
+    "when": {
+      "version": "3.6.4",
+      "resolved": "https://registry.npmjs.org/when/-/when-3.6.4.tgz",
+      "integrity": "sha1-RztRfsFZ4rhQBUl6E5g/CVQS404=",
+      "dev": true
+    },
     "which": {
       "version": "1.3.1",
       "resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz",

src/components/lists/ShowList.vue

@@ -8,31 +8,95 @@
 		</div>
 		<div class="content">
 			<h1>{{ list.title }}</h1>
+		</div>
+		<form @submit.prevent="addTask()">
+			<div class="field is-grouped">
+				<p class="control has-icons-left is-expanded" v-bind:class="{ 'is-loading': loading}">
+					<input class="input" v-bind:class="{ 'disabled': loading}" v-model="newTask" type="text" placeholder="Add a new task...">
+					<span class="icon is-small is-left">
+						<icon icon="tasks"/>
+					</span>
+				</p>
+				<p class="control">
+					<button type="submit" class="button is-success">
+					<span class="icon is-small">
+						<icon icon="plus"/>
+					</span>
+						Add
+					</button>
+				</p>
+			</div>
+		</form>
 
-			<form @submit.prevent="addTask()">
+		<div class="columns">
-				<div class="field is-grouped">
+			<div class="column">
-					<p class="control has-icons-left is-expanded" v-bind:class="{ 'is-loading': loading}">
+				<div class="box tasks" v-if="this.list.tasks && this.list.tasks.length > 0">
-						<input class="input" v-bind:class="{ 'disabled': loading}" v-model="newTask" type="text" placeholder="Add a new task...">
+					<div class="task" v-for="l in list.tasks" v-bind:key="l.id">
-						<span class="icon is-small is-left">
+						<label v-bind:for="l.id">
-							<icon icon="tasks"/>
+							<input @change="markAsDone" type="checkbox" v-bind:id="l.id" v-bind:checked="l.done">
-						</span>
+							{{l.text}}
-					</p>
+						</label>
-					<p class="control">
+						<div @click="editTask(l.id)" class="icon settings">
-						<button type="submit" class="button is-success">
+							<icon icon="cog"/>
-						<span class="icon is-small">
+						</div>
-							<icon icon="plus"/>
+					</div>
-						</span>
-							Add
-						</button>
-					</p>
 				</div>
-			</form>
+			</div>
+			<div class="column is-4" v-if="isTaskEdit">
+				<div class="card taskedit">
+					<header class="card-header">
+						<p class="card-header-title">
+							Edit Task
+						</p>
+						<a class="card-header-icon" @click="isTaskEdit = false">
+							<span class="icon">
+								<icon icon="angle-right"/>
+							</span>
+						</a>
+					</header>
+					<div class="card-content">
+						<div class="content">
+							<form  @submit.prevent="editTaskSubmit()">
+								<div class="field">
+									<label class="label" for="tasktext">Task Text</label>
+									<div class="control">
+										<input class="input" type="text" id="tasktext" placeholder="The task text is here..." v-model="taskEditTask.text">
+									</div>
+								</div>
+								<div class="field">
+									<label class="label" for="taskdescription">Description</label>
+									<div class="control">
+										<textarea class="textarea" placeholder="The tasks description goes here..." id="taskdescription" v-model="taskEditTask.description"></textarea>
+									</div>
+								</div>
 
-			<div class="box tasks" v-if="this.list.tasks && this.list.tasks.length > 0">
+								<div class="columns">
-				<label class="task" v-for="l in list.tasks" v-bind:key="l.id" v-bind:for="l.id">
+									<div class="column">
-					<input @change="markAsDone" type="checkbox" v-bind:id="l.id" v-bind:checked="l.done">
+										<div class="field">
-					{{l.text}}
+											<label class="label" for="taskduedate">Due Date</label>
-				</label>
+											<div class="control">
+												<input type="date" class="input" id="taskduedate" placeholder="The tasks due date is here..." v-model="taskEditTask.dueDate">
+											</div>
+										</div>
+									</div>
+									<div class="column">
+										<div class="field">
+											<label class="label" for="taskreminderdate">Reminder Date</label>
+											<div class="control">
+												<input type="date" class="input" id="taskreminderdate" placeholder="The tasks reminder date is here..." v-model="taskEditTask.reminderDate">
+											</div>
+										</div>
+									</div>
+								</div>
+
+								<button type="submit" class="button is-success is-fullwidth">
+									Save
+								</button>
+
+							</form>
+						</div>
+					</div>
+				</div>
 			</div>
 		</div>
 	</div>
@@ -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) {
+                        this.updateTaskByID(e.target.id, response.data)
-							if (this.list.tasks[t].id === response.data.id) {
-								this.$set(this.list.tasks, t, response.data)
-								break
-							}
-						}
                         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;
+	}
 </style>

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)