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/index.html b/index.html index 1c806d6..37d108c 100644 --- a/index.html +++ b/index.html @@ -2,6 +2,7 @@ Task Manager + @@ -42,12 +43,12 @@

{{ cat.name }}

- + - -
-
+ + diff --git a/js/app.js b/js/app.js index 3db4db1..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 @@ -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 index faf5977..b01b5de 100644 --- 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); } } -}); \ No newline at end of file +});