Zaffri · Zaffri · Apr 1, 2017 · Mar 19, 2017 · Mar 27, 2017 · Apr 1, 2017
diff --git a/README.md b/README.md
@@ -1,12 +1,11 @@
 ## VueJS Task Manager
-Version 1.0.0
+Version 0.1.0
 
 Trello inspired task manager written in JavaScript using the VueJS framework.
 
 ![Task Manager](screenshot.JPG?raw=true)
 
-### Possible future Additions:
-* Add Z-indez to task deletion icon.
+### Future Additions:
 * Category/Task edit.
 * Task input focus open, and close on unfocus.
 * Unfocus on category create.
diff --git a/css/style.css b/css/style.css
@@ -1,6 +1,6 @@
 /* --------------------------------------------------------
 	VueJS - Task Manager
-	Version: 	0.0.1
+	Version: 	0.1.0
 	Author: 	Steven Morrison
 	Website:	www.zaffri.com
 	GitHub:		github.com/Zaffri

diff --git a/index.html b/index.html
@@ -2,6 +2,7 @@
 <html>
 <head>
     <title>Task Manager</title>
+    <meta charset="utf-8"/>
     <link rel="stylesheet" href="css/style.css" />
     <link rel="stylesheet" href="css/modal.css" />
 </head>
@@ -42,12 +43,12 @@ <h3 class="category-name">{{ cat.name }}</h3>
         </ul>
 
         <!-- Modal component -->
-        <zaffri-modal v-if="modalVisible" v-bind:data="zaffriModal" v-on:hide_modal_emit="hideModal"></zaffri-modal>
+        <zaffri-modal v-bind:data="modalConfig" v-on:hide_modal_emit="modalCallback"></zaffri-modal>
     </section>
 
-    <!-- Modal markup -->
-    <div id="zaffri-modal-template" class="zaffri-modal-template">
-        <div class="zaffri-modal">
+    <!-- Modal Component markup -->
+    <template id="zaffri-modal-template" class="zaffri-modal-template">
+        <div v-if="data.visible" class="zaffri-modal">
 
             <div class="zaffri-modal-body">
                 <header><h3>{{ data.title }}</h3></header>
@@ -59,18 +60,18 @@ <h3 class="category-name">{{ cat.name }}</h3>
                 <div class="zaffri-modal-button-area">
 
                     <div v-if="data.type == 'confirm'">
-                        <button v-on:click="hideModal(true)">{{ data.confirmText }}</button>
-                        <button v-on:click="hideModal(false)">{{ data.cancelText }}</button>
+                        <button @click="closeModal(true)">{{ data.confirmText }}</button>
+                        <button @click="closeModal(false)">{{ data.cancelText }}</button>
                     </div>
 
                     <div v-else>
-                        <button v-on:click="hideModal">{{ data.confirmText }}</button>
+                        <button @click="closeModal">{{ data.confirmText }}</button>
                     </div>
                 </div>
             </div>
 
         </div>
-    </div>
+    </template>
 
     <script src="js/vue.dev.js"></script>
     <script src="js/modal.js"></script>

diff --git a/js/app.js b/js/app.js
@@ -1,6 +1,6 @@
 /* --------------------------------------------------------
 	VueJS - Task Manager
-	Version: 	0.0.1
+	Version: 	0.1.0
 	Author: 	Steven Morrison
 	Website:	www.zaffri.com
 	GitHub:		github.com/Zaffri
@@ -12,18 +12,21 @@ var app = new Vue({
     storageKey: "zaffri-vuejs-task-manager",
     data: {
         newCategory: '',
-        modalVisible: false,
-        zaffriModal: {
+        modalConfig: {
+             // Modal visibility
+            visible: false,
+
+            // type: notify || confirm
             type: "confirm",
+
+            // display data
             title: "Delete",
             messageBody: "Are you sure you want to delete this?",
             confirmText: "Confirm",
-            cancelText: "Cancel", // for confirm modal type only
-            action: {
-                type: null,
-                index: 0,
-                parentIndex: 0 // parentIndex for tasks (cat index)
-            }
+
+            // Only required for confirm modal
+            cancelText: "Cancel",
+            callbackData: {}
         },
         categories: [] // all app data
     },
@@ -119,24 +122,28 @@ var app = new Vue({
             }
         },
         showModal: function(index, type, parentIndex = null) { // parentIndex for tasks (cat index)
-            // Modal action
-            this.zaffriModal.action.type = type;
-            this.zaffriModal.action.index = index;
-            this.zaffriModal.action.parentIndex = parentIndex;
+            // Assign callback data
+            this.modalConfig.callbackData = {
+                type: type,
+                index: index,
+                parentIndex: parentIndex
+            }
+
             // Set visible
-            this.modalVisible = true;
+            this.modalConfig.visible = true;
         },
-        hideModal: function(action) {
-            this.modalVisible = false;
-
+        modalCallback: function(action) {
+            // Hide modal
+            this.modalConfig.visible = false;
+
             // if action = true (confirm clicked)
             if(action == true) {
-                var actionData = this.zaffriModal.action;
+                var callbackData = this.modalConfig.callbackData;
                 // check action type
-                if(actionData.type == "category-delete") {
-                    this.deleteCategory(actionData);
+                if(callbackData.type == "category-delete") {
+                    this.deleteCategory(callbackData);
                 }   else {
-                    this.deleteTask(actionData);
+                    this.deleteTask(callbackData);
                 }
             }
         }

diff --git a/js/modal.js b/js/modal.js
@@ -1,6 +1,6 @@
 /* --------------------------------------------------------
 	VueJS - Modal Component
-	Version: 	0.0.1
+	Version: 	0.0.4
 	Author: 	Steven Morrison
 	Website:	www.zaffri.com
 	GitHub:		github.com/Zaffri
@@ -10,8 +10,12 @@ var ZaffriModal = Vue.component('zaffri-modal', {
     template: "#zaffri-modal-template",
     props: ['data'],
     methods: {
-        hideModal: function(action = null) {
+        closeModal: function(action = null) {
             this.$emit('hide_modal_emit', action);
+            this.data.visible = false;
+        },
+        confirmCallback: function(action, callbackData) {
+            this.data.confirmCallback(action, callbackData);
         }
     }
-});
+});