Skip to content
This repository was archived by the owner on Jan 22, 2024. It is now read-only.

Commit 5e246eb

Browse files
author
Steven Morrison
authored
Merge pull request #1 from Zaffri/modal-upgrade
Modal upgrade
2 parents f85e93d + 10f4d96 commit 5e246eb

File tree

5 files changed

+47
-36
lines changed

5 files changed

+47
-36
lines changed

‎README.md‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,11 @@
11
## VueJS Task Manager
2-
Version 1.0.0
2+
Version 0.1.0
33

44
Trello inspired task manager written in JavaScript using the VueJS framework.
55

66
![Task Manager](screenshot.JPG?raw=true)
77

8-
### Possible future Additions:
9-
* Add Z-indez to task deletion icon.
8+
### Future Additions:
109
* Category/Task edit.
1110
* Task input focus open, and close on unfocus.
1211
* Unfocus on category create.

‎css/style.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
/* --------------------------------------------------------
22
VueJS - Task Manager
3-
Version: 0.0.1
3+
Version: 0.1.0
44
Author: Steven Morrison
55
Website: www.zaffri.com
66
GitHub: github.com/Zaffri

‎index.html‎

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
<html>
33
<head>
44
<title>Task Manager</title>
5+
<meta charset="utf-8"/>
56
<link rel="stylesheet" href="css/style.css" />
67
<link rel="stylesheet" href="css/modal.css" />
78
</head>
@@ -42,12 +43,12 @@ <h3 class="category-name">{{ cat.name }}</h3>
4243
</ul>
4344

4445
<!-- Modal component -->
45-
<zaffri-modal v-if="modalVisible" v-bind:data="zaffriModal" v-on:hide_modal_emit="hideModal"></zaffri-modal>
46+
<zaffri-modal v-bind:data="modalConfig" v-on:hide_modal_emit="modalCallback"></zaffri-modal>
4647
</section>
4748

48-
<!-- Modal markup -->
49-
<div id="zaffri-modal-template" class="zaffri-modal-template">
50-
<div class="zaffri-modal">
49+
<!-- Modal Component markup -->
50+
<template id="zaffri-modal-template" class="zaffri-modal-template">
51+
<div v-if="data.visible" class="zaffri-modal">
5152

5253
<div class="zaffri-modal-body">
5354
<header><h3>{{ data.title }}</h3></header>
@@ -59,18 +60,18 @@ <h3 class="category-name">{{ cat.name }}</h3>
5960
<div class="zaffri-modal-button-area">
6061

6162
<div v-if="data.type == 'confirm'">
62-
<button v-on:click="hideModal(true)">{{ data.confirmText }}</button>
63-
<button v-on:click="hideModal(false)">{{ data.cancelText }}</button>
63+
<button @click="closeModal(true)">{{ data.confirmText }}</button>
64+
<button @click="closeModal(false)">{{ data.cancelText }}</button>
6465
</div>
6566

6667
<div v-else>
67-
<button v-on:click="hideModal">{{ data.confirmText }}</button>
68+
<button @click="closeModal">{{ data.confirmText }}</button>
6869
</div>
6970
</div>
7071
</div>
7172

7273
</div>
73-
</div>
74+
</template>
7475

7576
<script src="js/vue.dev.js"></script>
7677
<script src="js/modal.js"></script>

‎js/app.js‎

Lines changed: 28 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
/* --------------------------------------------------------
22
VueJS - Task Manager
3-
Version: 0.0.1
3+
Version: 0.1.0
44
Author: Steven Morrison
55
Website: www.zaffri.com
66
GitHub: github.com/Zaffri
@@ -12,18 +12,21 @@ var app = new Vue({
1212
storageKey: "zaffri-vuejs-task-manager",
1313
data: {
1414
newCategory: '',
15-
modalVisible: false,
16-
zaffriModal: {
15+
modalConfig: {
16+
// Modal visibility
17+
visible: false,
18+
19+
// type: notify || confirm
1720
type: "confirm",
21+
22+
// display data
1823
title: "Delete",
1924
messageBody: "Are you sure you want to delete this?",
2025
confirmText: "Confirm",
21-
cancelText: "Cancel", // for confirm modal type only
22-
action: {
23-
type: null,
24-
index: 0,
25-
parentIndex: 0 // parentIndex for tasks (cat index)
26-
}
26+
27+
// Only required for confirm modal
28+
cancelText: "Cancel",
29+
callbackData: {}
2730
},
2831
categories: [] // all app data
2932
},
@@ -119,24 +122,28 @@ var app = new Vue({
119122
}
120123
},
121124
showModal: function(index, type, parentIndex = null) { // parentIndex for tasks (cat index)
122-
// Modal action
123-
this.zaffriModal.action.type = type;
124-
this.zaffriModal.action.index = index;
125-
this.zaffriModal.action.parentIndex = parentIndex;
125+
// Assign callback data
126+
this.modalConfig.callbackData = {
127+
type: type,
128+
index: index,
129+
parentIndex: parentIndex
130+
}
131+
126132
// Set visible
127-
this.modalVisible = true;
133+
this.modalConfig.visible = true;
128134
},
129-
hideModal: function(action) {
130-
this.modalVisible = false;
131-
135+
modalCallback: function(action) {
136+
// Hide modal
137+
this.modalConfig.visible = false;
138+
132139
// if action = true (confirm clicked)
133140
if(action == true) {
134-
var actionData = this.zaffriModal.action;
141+
var callbackData = this.modalConfig.callbackData;
135142
// check action type
136-
if(actionData.type == "category-delete") {
137-
this.deleteCategory(actionData);
143+
if(callbackData.type == "category-delete") {
144+
this.deleteCategory(callbackData);
138145
} else {
139-
this.deleteTask(actionData);
146+
this.deleteTask(callbackData);
140147
}
141148
}
142149
}

‎js/modal.js‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
/* --------------------------------------------------------
22
VueJS - Modal Component
3-
Version: 0.0.1
3+
Version: 0.0.4
44
Author: Steven Morrison
55
Website: www.zaffri.com
66
GitHub: github.com/Zaffri
@@ -10,8 +10,12 @@ var ZaffriModal = Vue.component('zaffri-modal', {
1010
template: "#zaffri-modal-template",
1111
props: ['data'],
1212
methods: {
13-
hideModal: function(action = null) {
13+
closeModal: function(action = null) {
1414
this.$emit('hide_modal_emit', action);
15+
this.data.visible = false;
16+
},
17+
confirmCallback: function(action, callbackData) {
18+
this.data.confirmCallback(action, callbackData);
1519
}
1620
}
17-
});
21+
});

0 commit comments

Comments
 (0)