Skip to content

Commit 77a643e

Browse files
JGefrohJGefroh
committed
Merge pull request #43 from JGefroh/feature/tags
FEATURE: Added task tagging.
2 parents 9b72bd9 + e1feccc commit 77a643e

File tree

16 files changed

+314
-39
lines changed

16 files changed

+314
-39
lines changed

‎ToDoListClient/src/app/modules/common/ViewState.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
isAscending: null,
99
sortField: null,
1010
isShowingMinutes: null,
11+
tagsToFilterBy: [],
1112
input: {
1213
name: null,
1314
group: null
@@ -16,7 +17,8 @@
1617
completedTaskViewState: {
1718
isAscending: null,
1819
sortField: null,
19-
isShowingMinutes: null
20+
isShowingMinutes: null,
21+
tagsToFilterBy: []
2022
},
2123
statisticsViewState: {
2224
isAscending: null,

‎ToDoListClient/src/app/modules/common/filters/TagFilter.js‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
/**
2+
* Created by Joseph on 8/25/2014.
3+
*/
4+
(function() {
5+
function TagFilter() {
6+
return function(tasks, tagsToFilterBy) {
7+
if (!tasks || !tagsToFilterBy) {
8+
return tasks;
9+
}
10+
11+
if (tagsToFilterBy.length === 0) {
12+
return tasks;
13+
}
14+
15+
return tasks.filter(function(task, index, array) {
16+
var isIncluded = false;
17+
angular.forEach(task.tags, function(taskTag, index) {
18+
angular.forEach(tagsToFilterBy, function(filterTag, index) {
19+
if (filterTag === taskTag) {
20+
isIncluded = true;
21+
}
22+
});
23+
});
24+
return isIncluded;
25+
});
26+
};
27+
}
28+
angular
29+
.module('jgefroh.FiltersModule')
30+
.filter('tagFilter', TagFilter);
31+
})();

‎ToDoListClient/src/app/modules/task/TaskService.js‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -113,6 +113,21 @@
113113
task.totalTimeTracked = fakeTotalTimeTracked;
114114
}
115115
};
116+
117+
/**
118+
* Gets a set of tags that are used by the tasks.
119+
*/
120+
this.getUsedTags = function(tasks) {
121+
var usedTags = [];
122+
angular.forEach(tasks, function(task, index) {
123+
angular.forEach(task.tags, function(tag, index) {
124+
if (usedTags.indexOf(tag) === -1) {
125+
usedTags.push(tag);
126+
}
127+
});
128+
});
129+
return usedTags;
130+
}
116131
}
117132
angular
118133
.module('ToDoList.TaskModule')

‎ToDoListClient/src/app/modules/task/common/TagDisplay.html‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<div class="row">
2+
<div class="col-xs-12">
3+
<span data-ng-repeat="tag in task.tags"
4+
data-ng-bind="tag"
5+
data-ng-class="{'task-tag-inactive':tagsToFilterBy.indexOf(tag) === -1,
6+
'task-tag-active':tagsToFilterBy.indexOf(tag) !== -1}"
7+
class="badge task-tag"></span>
8+
</div>
9+
</div>

‎ToDoListClient/src/app/modules/task/common/TagDisplay.js‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
/**
2+
* Created by Joseph on 8/25/2014.
3+
*/
4+
(function() {
5+
function TagDisplayDirective() {
6+
function TagDisplayDirectiveCtrl() {
7+
}
8+
return {
9+
restrict: 'A',
10+
scope: {
11+
task: '=',
12+
tagsToFilterBy: '='
13+
},
14+
templateUrl: 'TagDisplay.html',
15+
controller: [TagDisplayDirectiveCtrl]
16+
}
17+
}
18+
angular
19+
.module('ToDoList.TaskModule')
20+
.directive('tagDisplay', [TagDisplayDirective]);
21+
})();

‎ToDoListClient/src/app/modules/task/completed/CompletedTasks.html‎

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,18 @@
66
<h3>Completed Tasks<span class="small"> - tasks that you have completed.</span></h3>
77
</div>
88
</div>
9+
<div class="row">
10+
<div class="col-xs-12">
11+
<label>Tags: </label>
12+
<span data-ng-repeat="tag in completedCtrl.usedTags"
13+
data-ng-bind="tag"
14+
data-ng-click="completedCtrl.toggleTagFilter(tag)"
15+
style="cursor: pointer;"
16+
data-ng-class="{'task-tag-inactive':completedCtrl.viewState.tagsToFilterBy.indexOf(tag) === -1,
17+
'task-tag-active':completedCtrl.viewState.tagsToFilterBy.indexOf(tag) !== -1}"
18+
class="badge task-tag"></span>
19+
</div>
20+
</div>
921
<div class="row">
1022
<div class="col-xs-12">
1123
<div class="pull-right">
@@ -31,7 +43,7 @@ <h3>Completed Tasks<span class="small"> - tasks that you have completed.</span><
3143
</div>
3244
</div>
3345
<br/>
34-
<div ng-repeat="task in completedCtrl.tasks | filter: { complete: true} | orderBy:completedCtrl.viewState.sortField.value:!completedCtrl.viewState.isAscending">
46+
<div ng-repeat="task in completedCtrl.tasks | filter: { complete: true} | tagFilter:completedCtrl.viewState.tagsToFilterBy | orderBy:completedCtrl.viewState.sortField.value:!completedCtrl.viewState.isAscending">
3547
<div data-ng-include data-src="'modules/task/completed/CompletedTasksCard.html'"></div>
3648
<hr class="hr-small">
3749
</div>

‎ToDoListClient/src/app/modules/task/completed/CompletedTasksCard.html‎

Lines changed: 22 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,25 @@
22
<div class="col-xs-2">
33
<div data-ng-include data-src="'modules/task/completed/CompletedTasksActions.html'"></div>
44
</div>
5-
<div class="col-xs-7">
5+
<div class="col-xs-10">
6+
<div class="row">
7+
<div class="col-xs-4">
8+
Created <span data-ng-bind="task.timestampCreated | date:'MMMM dd \'at\' h:mma'"></span>
9+
</div>
10+
<div class="col-xs-4">
11+
Completed <span data-ng-bind="task.timestampCompleted| date:'MMMM dd \'at\' h:mma'"></span>
12+
</div>
13+
<div class="col-xs-4 text-right">
14+
Tracked for
15+
<a data-ng-click="completedCtrl.viewState.isShowingMinutes = !completedCtrl.viewState.isShowingMinutes"
16+
style="cursor: pointer">
17+
<span data-ng-if="completedCtrl.viewState.isShowingMinutes"
18+
data-ng-bind="(task.totalTimeTracked | msToMinutes) + ' minutes'"></span>
19+
<span data-ng-if="!completedCtrl.viewState.isShowingMinutes"
20+
data-ng-bind="(task.totalTimeTracked | msToHours:2) + ' hours'"></span>
21+
</a>
22+
</div>
23+
</div>
624
<div class="row">
725
<div class="col-xs-9">
826
<span data-ng-bind="task.group"
@@ -16,20 +34,8 @@
1634
data-ng-class="{'task-highlighted':task.tracking}"></span>
1735
</div>
1836
</div>
19-
</div>
20-
<div class="col-xs-3 text-right">
21-
Created <span data-ng-bind="task.timestampCreated | date:'MMMM dd \'at\' h:mma'"></span>
22-
<br/>
23-
24-
Completed <span data-ng-bind="task.timestampCompleted| date:'MMMM dd \'at\' h:mma'"></span>
25-
<br/><br/>
26-
Tracked for
27-
<a data-ng-click="completedCtrl.viewState.isShowingMinutes = !completedCtrl.viewState.isShowingMinutes"
28-
style="cursor: pointer">
29-
<span data-ng-if="completedCtrl.viewState.isShowingMinutes"
30-
data-ng-bind="(task.totalTimeTracked | msToMinutes) + ' minutes'"></span>
31-
<span data-ng-if="!completedCtrl.viewState.isShowingMinutes"
32-
data-ng-bind="(task.totalTimeTracked | msToHours:2) + ' hours'"></span>
33-
</a>
37+
<div data-tag-display
38+
data-task="task"
39+
data-tags-to-filter-by="completedCtrl.viewState.tagsToFilterBy"></div>
3440
</div>
3541
</div>

‎ToDoListClient/src/app/modules/task/completed/CompletedTasksCtrl.js‎

Lines changed: 32 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@
2323
TaskService.getTasks(UserService.user.id, true).then(function(tasks) {
2424
vm.operations.getTasks.status = null;
2525
vm.tasks = tasks;
26+
updateTags();
2627
})
2728
.catch(function(error) {
2829
vm.operations.getTasks.status = 'ERROR';
@@ -45,6 +46,7 @@
4546
}
4647
var index = vm.tasks.indexOf(task);
4748
vm.tasks.splice(index, 1);
49+
updateTags();
4850
})
4951
.catch(function() {
5052
vm.operations.deleteTask.tasks[task.id].status = 'ERROR';
@@ -69,6 +71,7 @@
6971
else {
7072
AlertService.setAlert('alert-warning', 'Task Incomplete!', 'A task has been marked as incomplete.', 2000);
7173
}
74+
updateTags();
7275
})
7376
.catch(function() {
7477
vm.operations.markIncomplete.tasks[task.id].status = 'ERROR';
@@ -78,7 +81,35 @@
7881
task.readOnly = false;
7982
});
8083
};
81-
84+
85+
vm.toggleTagFilter = function(tag) {
86+
if (vm.viewState.tagsToFilterBy.indexOf(tag) === -1) {
87+
vm.viewState.tagsToFilterBy.push(tag);
88+
}
89+
else {
90+
vm.viewState.tagsToFilterBy.splice(vm.viewState.tagsToFilterBy.indexOf(tag), 1);
91+
}
92+
};
93+
94+
function updateTags() {
95+
updateUsedTags();
96+
updateFilterTags();
97+
}
98+
99+
function updateUsedTags() {
100+
vm.usedTags = TaskService.getUsedTags($filter('filter')(vm.tasks, {complete: true}));
101+
}
102+
103+
function updateFilterTags() {
104+
var tagsToKeep = [];
105+
angular.forEach(vm.viewState.tagsToFilterBy, function(filterTag, index) {
106+
if (vm.usedTags.indexOf(filterTag) !== -1) {
107+
tagsToKeep.push(filterTag);
108+
}
109+
});
110+
vm.viewState.tagsToFilterBy = tagsToKeep;
111+
}
112+
82113
function initialize() {
83114
UserService.reserveID($stateParams.userID);
84115
initializeViewState();

‎ToDoListClient/src/app/modules/task/remaining/RemainingTasks.html‎

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,18 @@ <h3>Remaining Tasks<span class="small"> - tasks that you have not yet completed.
3838
</button>
3939
</div>
4040
</div>
41+
<div class="row">
42+
<div class="col-xs-12">
43+
<label>Tags: </label>
44+
<span data-ng-repeat="tag in remainingCtrl.usedTags"
45+
data-ng-bind="tag"
46+
data-ng-click="remainingCtrl.toggleTagFilter(tag)"
47+
style="cursor: pointer;"
48+
data-ng-class="{'task-tag-inactive':remainingCtrl.viewState.tagsToFilterBy.indexOf(tag) === -1,
49+
'task-tag-active':remainingCtrl.viewState.tagsToFilterBy.indexOf(tag) !== -1}"
50+
class="badge task-tag"></span>
51+
</div>
52+
</div>
4153
<div class="row">
4254
<div class="col-xs-12">
4355
<div class="pull-right">
@@ -62,7 +74,7 @@ <h3>Remaining Tasks<span class="small"> - tasks that you have not yet completed.
6274
</div>
6375
</div>
6476
<br/>
65-
<div ng-repeat="task in remainingCtrl.tasks | filter: { complete: false} | orderBy:remainingCtrl.viewState.sortField.value:!remainingCtrl.viewState.isAscending">
77+
<div ng-repeat="task in remainingCtrl.tasks | filter: { complete: false} | tagFilter:remainingCtrl.viewState.tagsToFilterBy | orderBy:remainingCtrl.viewState.sortField.value:!remainingCtrl.viewState.isAscending">
6678
<div data-ng-include data-src="'modules/task/remaining/RemainingTasksCard.html'"></div>
6779
<hr class="hr-small">
6880
</div>
@@ -77,5 +89,5 @@ <h3>Remaining Tasks<span class="small"> - tasks that you have not yet completed.
7789
A server error occurred while loading tasks.
7890
</h3>
7991
</div>
80-
<div data-ng-include="" src="'modules/task/remaining/TaskModification.html'"></div>
92+
<div data-ng-include="" data-src="'modules/task/remaining/TaskModification.html'"></div>
8193
</div>

‎ToDoListClient/src/app/modules/task/remaining/RemainingTasksCard.html‎

Lines changed: 20 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,23 @@
22
<div class="col-xs-2">
33
<div data-ng-include data-src="'modules/task/remaining/RemainingTasksActions.html'"></div>
44
</div>
5-
<div class="col-xs-8">
5+
<div class="col-xs-10">
6+
<div class="row">
7+
<div class="col-xs-6">
8+
<span data-ng-bind="task.timestampCreated | date:'MMMM dd \'at\' h:mma'"
9+
class="small"></span>
10+
</div>
11+
<div class="col-xs-6 text-right">
12+
Tracked for
13+
<a data-ng-click="remainingCtrl.viewState.isShowingMinutes = !remainingCtrl.viewState.isShowingMinutes"
14+
style="cursor: pointer">
15+
<span data-ng-if="remainingCtrl.viewState.isShowingMinutes"
16+
data-ng-bind="(task.totalTimeTracked | msToMinutes) + ' minutes'"></span>
17+
<span data-ng-if="!remainingCtrl.viewState.isShowingMinutes"
18+
data-ng-bind="(task.totalTimeTracked | msToHours:2) + ' hours'"></span>
19+
</a>
20+
</div>
21+
</div>
622
<div class="row">
723
<div class="col-xs-9">
824
<span data-ng-bind="task.group"
@@ -16,18 +32,8 @@
1632
data-ng-class="{'task-highlighted':task.tracking}"></span>
1733
</div>
1834
</div>
19-
</div>
20-
<div class="col-xs-2 text-right">
21-
<span data-ng-bind="task.timestampCreated | date:'MMMM dd \'at\' h:mma'"></span>
22-
<br/><br/>
23-
24-
Tracked for
25-
<a data-ng-click="remainingCtrl.viewState.isShowingMinutes = !remainingCtrl.viewState.isShowingMinutes"
26-
style="cursor: pointer">
27-
<span data-ng-if="remainingCtrl.viewState.isShowingMinutes"
28-
data-ng-bind="(task.totalTimeTracked | msToMinutes) + ' minutes'"></span>
29-
<span data-ng-if="!remainingCtrl.viewState.isShowingMinutes"
30-
data-ng-bind="(task.totalTimeTracked | msToHours:2) + ' hours'"></span>
31-
</a>
35+
<div data-tag-display
36+
data-task="task"
37+
data-tags-to-filter-by="remainingCtrl.viewState.tagsToFilterBy"></div>
3238
</div>
3339
</div>

0 commit comments

Comments
 (0)