Refactor and extend : order tasks by most recently added story
story: show tasks in order of most recently added
part of the refactor and extend stories
as a user I wish to show tasks in most recently added order
learnings featured:
- using angular’s
orderBy
filter
The first approach I will do is a simple brute force approach which sorts the active project’s tasks every time we save. This is pretty inefficient for larger data, but very simple to implement.
In a future post, a more flexible approach will be to make the display order independent of the order of the saved data. This will require storing and retrieving tasks using something like a primary key. Currently we update tasks based on their position in the displayed list (remember $index
) and we assume that this index can be used to index the stored tasks array. But to be more flexible we need to reference tasks indepdendent of their position in the displayed list.
Steps
- use a createDate when storing tasks
- create sort method
orderProjectTasks
- call sort method on add and edit of tasks
store a ‘createDate’ for all tasks
Modify createTask
method in ‘controllers.js’ to add a create date saved in ISO standard
// Called when the form is submitted
$scope.createTask = function(task) {
if (!$scope.activeProject || !task) {
return;
}
$scope.activeProject.tasks.push({
title: task.title,
isDone: 'NO',
createDate: (new Date()).toISOString()
});
$scope.taskModal.hide();
// Inefficient, but save all the projects
Projects.save($scope.projects);
task.title = "";
};
Modify editTask
method in ‘controllers.js’ to preserve the createDate during edit
// Open our new task modal
$scope.editTask = function(i, task) {
$scope.task = {title: task.title, isDone: task.isDone, createDate: task.createDate};
$scope.taskIndex = i;
$scope.editTaskModal.show();
};
create a sort method using angular’s orderBy
Modify ‘controllers.js’ method to add a couple of variables: get a handle on the orderBy filter to use later, use a predicate indicating the field to sort by, and a reverse flag to indicate if the order is in reverse
var orderBy = $filter('orderBy');
$scope.predicate = 'createDate';
$scope.reverse = true;
Modify ‘controllers.js’ and add orderProjectTasks
method that uses angular’s orderBy
passing in these varables:
// Called to select the given project
$scope.orderProjectTasks = function(project) {
project.tasks = orderBy(project.tasks,$scope.predicate,$scope.reverse);
};
call the sort method: orderProjectTasks
on add and edit of tasks
Modify createTask
method in ‘controllers.js’ to call the orderProjectTasks
method
// Called when the form is submitted
$scope.createTask = function(task) {
if (!$scope.activeProject || !task) {
return;
}
$scope.activeProject.tasks.push({
title: task.title,
isDone: 'NO',
createDate: (new Date()).toISOString()
});
$scope.taskModal.hide();
// Inefficient, but save all the projects
$scope.orderProjectTasks($scope.activeProject);
Projects.save($scope.projects);
task.title = "";
};
Modify updateTask
method in ‘controllers.js’ to call the orderProjectTasks
method
// Called when the form is submitted
$scope.updateTask = function(i, task) {
if (!$scope.activeProject || !task) {
return;
}
$scope.activeProject.tasks[i] = task;
$scope.editTaskModal.hide();
// Inefficient, but save all the projects
$scope.orderProjectTasks($scope.activeProject);
Projects.save($scope.projects);
};
the code for this can be found on my github page