SM: Task completion added.

Author: Steven Morrison

README.md

@@ -1,11 +1,10 @@
 ## VueJS Task Manager
-Version 0.0.1
+Version 1.0.0
 
 Trello inspired task manager written in JavaScript using the VueJS framework.
 
 ![Task Manager](screenshot.png?raw=true "Task Manager")
 
-### Work in progress (WIP):
+### Possible future Additions:
 * Task input focus open, and close on unfocus.
-* Unfocus on category create.
-* Possibly add completion feature.
+* Unfocus on category create.

index.html

@@ -30,7 +30,10 @@ <h3 class="category-name">{{ cat.name }}</h3>
                     </li>
                     <li v-for="(task, taskIndex) in cat.tasks" class="task-list-item">
                         <div class="delete-icon task-delete-icon" v-on:click="showModal(taskIndex, 'task-delete', index)">X</div>
-                        <p v-bind:class="{'task-complete': task.complete}">{{ task.text }}</p>
+                        
+                        <p v-bind:class="{'task-complete': task.complete}" v-on:click="toggleCompletion(taskIndex, index, task.complete)">
+                            {{ task.text }}
+                        </p>
 
                         <div class="clear"></div>
                     </li>

js/app.js

@@ -98,6 +98,16 @@ var app = new Vue({
             this.categories[data.parentIndex].tasks.splice(data.index, 1);
             this.updateAppStorage();
         },
+        toggleCompletion: function(taskIndex, index, complete) {
+            // Default false
+            var updatedStatus = 0;
+            // Switch val if necessary (!= false/updatedStatus)
+            if(!complete) updatedStatus = 1;
+
+            // Update data & update local storage
+            this.categories[index].tasks[taskIndex].complete = updatedStatus;
+            this.updateAppStorage();
+        },
         updateAppStorage: function() {
             // Check if this.categories isn't empty
             if(this.categories.length) {