Merge pull request #43 from JGefroh/feature/tags

FEATURE: Added task tagging.
JGefroh · Mar 12, 2015 · 77a643e · 77a643e
2 parents 9b72bd9 + e1feccc
commit 77a643e
Show file tree

Hide file tree

Showing 16 changed files with 314 additions and 39 deletions.
diff --git a/ToDoListClient/src/app/modules/common/ViewState.js b/ToDoListClient/src/app/modules/common/ViewState.js
@@ -8,6 +8,7 @@
                 isAscending: null,
                 sortField: null,
                 isShowingMinutes: null,
+                tagsToFilterBy: [],
                 input: {
                     name: null,
                     group: null
@@ -16,7 +17,8 @@
             completedTaskViewState: {
                 isAscending: null,
                 sortField: null,
-                isShowingMinutes: null
+                isShowingMinutes: null,
+                tagsToFilterBy: []
             },
             statisticsViewState: {
                 isAscending: null,

diff --git a/ToDoListClient/src/app/modules/common/filters/TagFilter.js b/ToDoListClient/src/app/modules/common/filters/TagFilter.js
@@ -0,0 +1,31 @@
+/**
+ * Created by Joseph on 8/25/2014.
+ */
+(function() {
+    function TagFilter() {
+        return function(tasks, tagsToFilterBy) {
+            if (!tasks || !tagsToFilterBy) {
+                return tasks;
+            }
+
+            if (tagsToFilterBy.length === 0) {
+                return tasks;
+            }
+
+            return tasks.filter(function(task, index, array) {
+                var isIncluded = false;
+                angular.forEach(task.tags, function(taskTag, index) {
+                    angular.forEach(tagsToFilterBy, function(filterTag, index) {
+                        if (filterTag === taskTag) {
+                            isIncluded = true;
+                        }
+                    });
+                });
+                return isIncluded;
+            });
+        };
+    }
+    angular
+        .module('jgefroh.FiltersModule')
+        .filter('tagFilter', TagFilter);
+})();
diff --git a/ToDoListClient/src/app/modules/task/TaskService.js b/ToDoListClient/src/app/modules/task/TaskService.js
@@ -113,6 +113,21 @@
                 task.totalTimeTracked = fakeTotalTimeTracked;
             }
         };
+
+        /**
+         * Gets a set of tags that are used by the tasks.
+         */
+        this.getUsedTags = function(tasks) {
+            var usedTags = [];
+            angular.forEach(tasks, function(task, index) {
+                angular.forEach(task.tags, function(tag, index) {
+                    if (usedTags.indexOf(tag) === -1) {
+                        usedTags.push(tag);
+                    }
+                });
+            });
+            return usedTags;
+        }
     }
     angular
         .module('ToDoList.TaskModule')

diff --git a/ToDoListClient/src/app/modules/task/common/TagDisplay.html b/ToDoListClient/src/app/modules/task/common/TagDisplay.html
@@ -0,0 +1,9 @@
+<div class="row">
+    <div class="col-xs-12">
+                <span data-ng-repeat="tag in task.tags"
+                      data-ng-bind="tag"
+                      data-ng-class="{'task-tag-inactive':tagsToFilterBy.indexOf(tag) === -1,
+                                    'task-tag-active':tagsToFilterBy.indexOf(tag) !== -1}"
+                      class="badge task-tag"></span>
+    </div>
+</div>
diff --git a/ToDoListClient/src/app/modules/task/common/TagDisplay.js b/ToDoListClient/src/app/modules/task/common/TagDisplay.js
@@ -0,0 +1,21 @@
+/**
+ * Created by Joseph on 8/25/2014.
+ */
+(function() {
+    function TagDisplayDirective() {
+        function TagDisplayDirectiveCtrl() {
+        }
+        return {
+            restrict: 'A',
+            scope: {
+                task: '=',
+                tagsToFilterBy: '='
+            },
+            templateUrl: 'TagDisplay.html',
+            controller: [TagDisplayDirectiveCtrl]
+        }
+    }
+    angular
+        .module('ToDoList.TaskModule')
+        .directive('tagDisplay', [TagDisplayDirective]);
+})();
diff --git a/ToDoListClient/src/app/modules/task/completed/CompletedTasks.html b/ToDoListClient/src/app/modules/task/completed/CompletedTasks.html
@@ -6,6 +6,18 @@
         <h3>Completed Tasks<span class="small"> - tasks that you have completed.</span></h3>
     </div>
 </div>
+<div class="row">
+    <div class="col-xs-12">
+        <label>Tags: </label>
+            <span data-ng-repeat="tag in completedCtrl.usedTags"
+                  data-ng-bind="tag"
+                  data-ng-click="completedCtrl.toggleTagFilter(tag)"
+                  style="cursor: pointer;"
+                  data-ng-class="{'task-tag-inactive':completedCtrl.viewState.tagsToFilterBy.indexOf(tag) === -1,
+                                    'task-tag-active':completedCtrl.viewState.tagsToFilterBy.indexOf(tag) !== -1}"
+                  class="badge task-tag"></span>
+    </div>
+</div>
 <div class="row">
     <div class="col-xs-12">
         <div class="pull-right">
@@ -31,7 +43,7 @@ <h3>Completed Tasks<span class="small"> - tasks that you have completed.</span><
     </div>
 </div>
 <br/>
-<div ng-repeat="task in completedCtrl.tasks | filter: { complete: true}  | orderBy:completedCtrl.viewState.sortField.value:!completedCtrl.viewState.isAscending">
+<div ng-repeat="task in completedCtrl.tasks | filter: { complete: true}  | tagFilter:completedCtrl.viewState.tagsToFilterBy | orderBy:completedCtrl.viewState.sortField.value:!completedCtrl.viewState.isAscending">
     <div data-ng-include data-src="'modules/task/completed/CompletedTasksCard.html'"></div>
     <hr class="hr-small">
 </div>

diff --git a/ToDoListClient/src/app/modules/task/completed/CompletedTasksCard.html b/ToDoListClient/src/app/modules/task/completed/CompletedTasksCard.html
@@ -2,7 +2,25 @@
     <div class="col-xs-2">
         <div data-ng-include data-src="'modules/task/completed/CompletedTasksActions.html'"></div>
     </div>
-    <div class="col-xs-7">
+    <div class="col-xs-10">
+        <div class="row">
+            <div class="col-xs-4">
+                Created <span data-ng-bind="task.timestampCreated | date:'MMMM dd \'at\' h:mma'"></span>
+            </div>
+            <div class="col-xs-4">
+                Completed <span data-ng-bind="task.timestampCompleted| date:'MMMM dd \'at\' h:mma'"></span>
+            </div>
+            <div class="col-xs-4 text-right">
+                Tracked for
+                <a data-ng-click="completedCtrl.viewState.isShowingMinutes = !completedCtrl.viewState.isShowingMinutes"
+                   style="cursor: pointer">
+                    <span data-ng-if="completedCtrl.viewState.isShowingMinutes"
+                          data-ng-bind="(task.totalTimeTracked | msToMinutes) + ' minutes'"></span>
+                    <span data-ng-if="!completedCtrl.viewState.isShowingMinutes"
+                          data-ng-bind="(task.totalTimeTracked | msToHours:2) + ' hours'"></span>
+                </a>
+            </div>
+        </div>
         <div class="row">
             <div class="col-xs-9">
                         <span data-ng-bind="task.group"
@@ -16,20 +34,8 @@
                           data-ng-class="{'task-highlighted':task.tracking}"></span>
             </div>
         </div>
-    </div>
-    <div class="col-xs-3 text-right">
-        Created <span data-ng-bind="task.timestampCreated | date:'MMMM dd \'at\' h:mma'"></span>
-        <br/>
-
-        Completed <span data-ng-bind="task.timestampCompleted| date:'MMMM dd \'at\' h:mma'"></span>
-        <br/><br/>
-        Tracked for
-        <a data-ng-click="completedCtrl.viewState.isShowingMinutes = !completedCtrl.viewState.isShowingMinutes"
-           style="cursor: pointer">
-                    <span data-ng-if="completedCtrl.viewState.isShowingMinutes"
-                          data-ng-bind="(task.totalTimeTracked | msToMinutes) + ' minutes'"></span>
-                    <span data-ng-if="!completedCtrl.viewState.isShowingMinutes"
-                          data-ng-bind="(task.totalTimeTracked | msToHours:2) + ' hours'"></span>
-        </a>
+        <div data-tag-display
+             data-task="task"
+             data-tags-to-filter-by="completedCtrl.viewState.tagsToFilterBy"></div>
     </div>
 </div>
diff --git a/ToDoListClient/src/app/modules/task/completed/CompletedTasksCtrl.js b/ToDoListClient/src/app/modules/task/completed/CompletedTasksCtrl.js
@@ -23,6 +23,7 @@
             TaskService.getTasks(UserService.user.id, true).then(function(tasks) {
                 vm.operations.getTasks.status = null;
                 vm.tasks = tasks;
+                updateTags();
             })
             .catch(function(error) {
                 vm.operations.getTasks.status = 'ERROR';
@@ -45,6 +46,7 @@
                 }
                 var index = vm.tasks.indexOf(task);
                 vm.tasks.splice(index, 1);
+                updateTags();
             })
             .catch(function() {
                 vm.operations.deleteTask.tasks[task.id].status = 'ERROR';
@@ -69,6 +71,7 @@
                 else {
                     AlertService.setAlert('alert-warning', 'Task Incomplete!', 'A task has been marked as incomplete.', 2000);
                 }
+                updateTags();
             })
             .catch(function() {
                 vm.operations.markIncomplete.tasks[task.id].status = 'ERROR';
@@ -78,7 +81,35 @@
                 task.readOnly = false;
             });
         };
-
+
+        vm.toggleTagFilter = function(tag) {
+            if (vm.viewState.tagsToFilterBy.indexOf(tag) === -1) {
+                vm.viewState.tagsToFilterBy.push(tag);
+            }
+            else {
+                vm.viewState.tagsToFilterBy.splice(vm.viewState.tagsToFilterBy.indexOf(tag), 1);
+            }
+        };
+
+        function updateTags() {
+            updateUsedTags();
+            updateFilterTags();
+        }
+
+        function updateUsedTags() {
+            vm.usedTags = TaskService.getUsedTags($filter('filter')(vm.tasks, {complete: true}));
+        }
+
+        function updateFilterTags() {
+            var tagsToKeep = [];
+            angular.forEach(vm.viewState.tagsToFilterBy, function(filterTag, index) {
+                if (vm.usedTags.indexOf(filterTag) !== -1) {
+                    tagsToKeep.push(filterTag);
+                }
+            });
+            vm.viewState.tagsToFilterBy = tagsToKeep;
+        }
+
         function initialize() {
             UserService.reserveID($stateParams.userID);
             initializeViewState();

diff --git a/ToDoListClient/src/app/modules/task/remaining/RemainingTasks.html b/ToDoListClient/src/app/modules/task/remaining/RemainingTasks.html
@@ -38,6 +38,18 @@ <h3>Remaining Tasks<span class="small"> - tasks that you have not yet completed.
             </button>
         </div>
     </div>
+    <div class="row">
+        <div class="col-xs-12">
+            <label>Tags: </label>
+            <span data-ng-repeat="tag in remainingCtrl.usedTags"
+                  data-ng-bind="tag"
+                  data-ng-click="remainingCtrl.toggleTagFilter(tag)"
+                  style="cursor: pointer;"
+                  data-ng-class="{'task-tag-inactive':remainingCtrl.viewState.tagsToFilterBy.indexOf(tag) === -1,
+                                    'task-tag-active':remainingCtrl.viewState.tagsToFilterBy.indexOf(tag) !== -1}"
+                  class="badge task-tag"></span>
+        </div>
+    </div>
     <div class="row">
         <div class="col-xs-12">
             <div class="pull-right">
@@ -62,7 +74,7 @@ <h3>Remaining Tasks<span class="small"> - tasks that you have not yet completed.
         </div>
     </div>
     <br/>
-    <div ng-repeat="task in remainingCtrl.tasks | filter: { complete: false}  | orderBy:remainingCtrl.viewState.sortField.value:!remainingCtrl.viewState.isAscending">
+    <div ng-repeat="task in remainingCtrl.tasks | filter: { complete: false}  | tagFilter:remainingCtrl.viewState.tagsToFilterBy | orderBy:remainingCtrl.viewState.sortField.value:!remainingCtrl.viewState.isAscending">
         <div data-ng-include data-src="'modules/task/remaining/RemainingTasksCard.html'"></div>
         <hr class="hr-small">
     </div>
@@ -77,5 +89,5 @@ <h3>Remaining Tasks<span class="small"> - tasks that you have not yet completed.
             A server error occurred while loading tasks.
         </h3>
     </div>
-    <div data-ng-include="" src="'modules/task/remaining/TaskModification.html'"></div>
+    <div data-ng-include="" data-src="'modules/task/remaining/TaskModification.html'"></div>
 </div>
diff --git a/ToDoListClient/src/app/modules/task/remaining/RemainingTasksCard.html b/ToDoListClient/src/app/modules/task/remaining/RemainingTasksCard.html
@@ -2,7 +2,23 @@
     <div class="col-xs-2">
         <div data-ng-include data-src="'modules/task/remaining/RemainingTasksActions.html'"></div>
     </div>
-    <div class="col-xs-8">
+    <div class="col-xs-10">
+        <div class="row">
+            <div class="col-xs-6">
+                <span data-ng-bind="task.timestampCreated | date:'MMMM dd \'at\' h:mma'"
+                      class="small"></span>
+            </div>
+            <div class="col-xs-6 text-right">
+                Tracked for
+                <a data-ng-click="remainingCtrl.viewState.isShowingMinutes = !remainingCtrl.viewState.isShowingMinutes"
+                   style="cursor: pointer">
+                    <span data-ng-if="remainingCtrl.viewState.isShowingMinutes"
+                          data-ng-bind="(task.totalTimeTracked | msToMinutes) + ' minutes'"></span>
+                    <span data-ng-if="!remainingCtrl.viewState.isShowingMinutes"
+                          data-ng-bind="(task.totalTimeTracked | msToHours:2) + ' hours'"></span>
+                </a>
+            </div>
+        </div>
         <div class="row">
             <div class="col-xs-9">
                         <span data-ng-bind="task.group"
@@ -16,18 +32,8 @@
                           data-ng-class="{'task-highlighted':task.tracking}"></span>
             </div>
         </div>
-    </div>
-    <div class="col-xs-2 text-right">
-        <span data-ng-bind="task.timestampCreated | date:'MMMM dd \'at\' h:mma'"></span>
-        <br/><br/>
-
-        Tracked for
-        <a data-ng-click="remainingCtrl.viewState.isShowingMinutes = !remainingCtrl.viewState.isShowingMinutes"
-           style="cursor: pointer">
-                    <span data-ng-if="remainingCtrl.viewState.isShowingMinutes"
-                          data-ng-bind="(task.totalTimeTracked | msToMinutes) + ' minutes'"></span>
-                    <span data-ng-if="!remainingCtrl.viewState.isShowingMinutes"
-                          data-ng-bind="(task.totalTimeTracked | msToHours:2) + ' hours'"></span>
-        </a>
+        <div data-tag-display
+             data-task="task"
+             data-tags-to-filter-by="remainingCtrl.viewState.tagsToFilterBy"></div>
     </div>
 </div>