From f5027408b572162f53a545f20171fa0cdb19be71 Mon Sep 17 00:00:00 2001 From: Steven Morrison Date: Sun, 19 Mar 2017 18:30:41 +0000 Subject: [PATCH 1/4] SM: Upgraded src files added. --- index.html | 16 ++++++++-------- js/modal.js | 14 +++++++++++--- 2 files changed, 19 insertions(+), 11 deletions(-) diff --git a/index.html b/index.html index 1c806d6..bd2cb8b 100644 --- a/index.html +++ b/index.html @@ -42,12 +42,12 @@

{{ cat.name }}

- + - -
-
+ + diff --git a/js/modal.js b/js/modal.js index faf5977..8c13131 100644 --- a/js/modal.js +++ b/js/modal.js @@ -1,6 +1,6 @@ /* -------------------------------------------------------- VueJS - Modal Component - Version: 0.0.1 + Version: 0.0.3 Author: Steven Morrison Website: www.zaffri.com GitHub: github.com/Zaffri @@ -10,8 +10,16 @@ var ZaffriModal = Vue.component('zaffri-modal', { template: "#zaffri-modal-template", props: ['data'], methods: { - hideModal: function(action = null) { - this.$emit('hide_modal_emit', action); + closeModal: function(action = null) { + var callbackData = {}; + + if(this.data.callbackData != undefined) callbackData = this.data.callbackData; + if(this.data.confirmCallback != undefined) this.confirmCallback(action, callbackData); + + this.data.visible = false; + }, + confirmCallback: function(action, callbackData) { + this.data.confirmCallback(action, callbackData); } } }); \ No newline at end of file From 0e67b05ca225c19df0c5d7161930158a91fad802 Mon Sep 17 00:00:00 2001 From: Steven Morrison Date: Mon, 27 Mar 2017 19:36:36 +0100 Subject: [PATCH 2/4] SM: Updated modal config - modal callback cant see Vue instance method. --- js/app.js | 41 ++++++++++++++++++++++++++++++----------- 1 file changed, 30 insertions(+), 11 deletions(-) diff --git a/js/app.js b/js/app.js index 3db4db1..6406928 100644 --- a/js/app.js +++ b/js/app.js @@ -12,17 +12,36 @@ 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: { + + // optional - for confirm modal type + cancelText: "Cancel", + callbackData: { type: null, index: 0, parentIndex: 0 // parentIndex for tasks (cat index) + }, + confirmCallback: function(action, data) { + + // Check action & handle callback data + if(action) { + if(data.type === "task-delete") + this.deleteCategory(data); + + if(data.type === "category-delete") + this.deleteTask(data); + } + console.log("DATA: " + JSON.stringify(data)); } }, categories: [] // all app data @@ -120,17 +139,17 @@ 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; + this.modalConfig.callbackData.type = type; + this.modalConfig.callbackData.index = index; + this.modalConfig.callbackData.parentIndex = parentIndex; // Set visible - this.modalVisible = true; + this.modalConfig.visible = true; }, hideModal: function(action) { - this.modalVisible = false; + // this.modalConfig.visible = false; // if action = true (confirm clicked) - if(action == true) { + /*if(action == true) { var actionData = this.zaffriModal.action; // check action type if(actionData.type == "category-delete") { @@ -138,7 +157,7 @@ var app = new Vue({ } else { this.deleteTask(actionData); } - } + }*/ } } }); \ No newline at end of file From 807928b487ca733c997d1a9bec8ab29e53cfda08 Mon Sep 17 00:00:00 2001 From: Steven Morrison Date: Sat, 1 Apr 2017 19:55:15 +0100 Subject: [PATCH 3/4] SM: Added modal 0.0.4 changes - callback fix. --- index.html | 3 ++- js/app.js | 36 +++++++++++++++++++++++++++++------- js/modal.js | 10 +++------- 3 files changed, 34 insertions(+), 15 deletions(-) diff --git a/index.html b/index.html index bd2cb8b..37d108c 100644 --- a/index.html +++ b/index.html @@ -2,6 +2,7 @@ Task Manager + @@ -42,7 +43,7 @@

{{ cat.name }}

- + diff --git a/js/app.js b/js/app.js index 6406928..201e8b2 100644 --- a/js/app.js +++ b/js/app.js @@ -13,6 +13,22 @@ var app = new Vue({ data: { newCategory: '', 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", + + // Only required for confirm modal + cancelText: "Cancel", + callbackData: {} + }, + /*modalConfig: { // Modal visibility visible: false, @@ -43,7 +59,7 @@ var app = new Vue({ } console.log("DATA: " + JSON.stringify(data)); } - }, + },*/ categories: [] // all app data }, created: function() { @@ -138,16 +154,22 @@ var app = new Vue({ } }, showModal: function(index, type, parentIndex = null) { // parentIndex for tasks (cat index) - // Modal action - this.modalConfig.callbackData.type = type; - this.modalConfig.callbackData.index = index; - this.modalConfig.callbackData.parentIndex = parentIndex; + // Assign callback data + this.modalConfig.callbackData = { + type: type, + index: index, + parentIndex: parentIndex + } + // Set visible this.modalConfig.visible = true; }, - hideModal: function(action) { - // this.modalConfig.visible = false; + modalCallback: function(action) { + this.modalConfig.visible = false; + console.log('Action: ' + action); + console.log('Data: ' + JSON.stringify(this.modalConfig.callbackData)); + // if action = true (confirm clicked) /*if(action == true) { var actionData = this.zaffriModal.action; diff --git a/js/modal.js b/js/modal.js index 8c13131..b01b5de 100644 --- a/js/modal.js +++ b/js/modal.js @@ -1,6 +1,6 @@ /* -------------------------------------------------------- VueJS - Modal Component - Version: 0.0.3 + Version: 0.0.4 Author: Steven Morrison Website: www.zaffri.com GitHub: github.com/Zaffri @@ -11,15 +11,11 @@ var ZaffriModal = Vue.component('zaffri-modal', { props: ['data'], methods: { closeModal: function(action = null) { - var callbackData = {}; - - if(this.data.callbackData != undefined) callbackData = this.data.callbackData; - if(this.data.confirmCallback != undefined) this.confirmCallback(action, callbackData); - + this.$emit('hide_modal_emit', action); this.data.visible = false; }, confirmCallback: function(action, callbackData) { this.data.confirmCallback(action, callbackData); } } -}); \ No newline at end of file +}); From 10f4d965bcc121bc4531f729f5a12e7b4cf4bcce Mon Sep 17 00:00:00 2001 From: Steven Morrison Date: Sat, 1 Apr 2017 20:09:43 +0100 Subject: [PATCH 4/4] SM: Cleaned up old modal code. --- README.md | 5 ++--- css/style.css | 2 +- js/app.js | 50 ++++++++------------------------------------------ 3 files changed, 11 insertions(+), 46 deletions(-) diff --git a/README.md b/README.md index c7c9c8c..9fa2e47 100644 --- 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. \ No newline at end of file diff --git a/css/style.css b/css/style.css index cf7dd00..038fa8b 100644 --- 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/js/app.js b/js/app.js index 201e8b2..496b190 100644 --- 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 @@ -28,38 +28,6 @@ var app = new Vue({ cancelText: "Cancel", callbackData: {} }, - /*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", - - // optional - for confirm modal type - cancelText: "Cancel", - callbackData: { - type: null, - index: 0, - parentIndex: 0 // parentIndex for tasks (cat index) - }, - confirmCallback: function(action, data) { - - // Check action & handle callback data - if(action) { - if(data.type === "task-delete") - this.deleteCategory(data); - - if(data.type === "category-delete") - this.deleteTask(data); - } - console.log("DATA: " + JSON.stringify(data)); - } - },*/ categories: [] // all app data }, created: function() { @@ -165,21 +133,19 @@ var app = new Vue({ this.modalConfig.visible = true; }, modalCallback: function(action) { + // Hide modal this.modalConfig.visible = false; - - console.log('Action: ' + action); - console.log('Data: ' + JSON.stringify(this.modalConfig.callbackData)); // if action = true (confirm clicked) - /*if(action == true) { - var actionData = this.zaffriModal.action; + if(action == true) { + 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); } - }*/ + } } } }); \ No newline at end of file