How can I sort an array of corner lights for weeks and days?
I'm working on a to-do list that groups tasks by week (based on added due dates and groups) to the days of the week. The database structure looks like this:
users
userA
tasks
taskobject1
taskobject2
..
userB
tasks
taskobject1
task object2
I am using ng-repeat to display all tasks to view for each user. I would like to be able to sort them first by which week they fall and then like this:
#week1
--monday--
task a
task b
--tuesday--
task c
task d
..
#week2
--monday--
task a
..
Even a conceptual answer would be helpful. I don't know where to start.
Thank.
source to share
See also this post which contains a directive for this grouping: Is it possible for: .sort (compare) and .reverse array in angularfire?
There are several approaches you could take here.
Date-structured data
If records will always be retrieved by this structure, you can simply save them that way;
/users/usera/tasks/week1/monday/taska/...
Then you can simply select them at the level tasks
as an object and you will get a pre-sorted JSON object with the values nested in the respective levels.
This approach is not very compatible with AngularFire, which is designed to bind objects or collections rather than nested data trees, but should work with some care.
Using priorities
A second approach would be to add priorities to tasks that would be an epoch timestamp. Now when you want to get them, you can run At / endAt specific points in the tree and get the records. Each will have a time stamp that you can use to identify the week and day.
var ref = new Firebase(ref).startAt(twoWeeksAgo).endAt(nextThursday);
$scope.list = $fireabse(ref).$asArray();
However, this does not segment the records. You will need to either examine each entry in the ng-repeat, or add headers on the fly:
// in the controller
var last = null;
$scope.priorityChanged(priority) {
/**
* here we would use a library like moment.js to parse the priority as a date
* and then do a comparison to see if two elements are for the same day, such as
**/
var current = moment(priority).startOf('day');
var changed = last === null || !last.isSame(current);
last = current;
return changed;
};
$scope.getDayName = function($priority) {
return moment($priority).format('dddd');
};
<!-- in the view -->
<li ng-repeat="item in list" ng-init="changed = priorityChanged(item.$priority)">
<h3 ng-show="changed">{{getDayName(item.$priority)}}</h3>
{{item|json}}
</li>
This approach is easily compatible with AngularFire.
Roll up your own list
The last approach would be to cut the AngularFire and dump your own. For example, if each week has a week and a weekday, we can do the following:
app.service('DatedList', function($timeout) {
return function(pathToList) {
var list = {};
pathToList.on('child_added', function(snap) {
$timeout(function() { // force Angular to run $digest when changes occur
var data = snap.val();
var week_number = data.week;
var week_day = data.day;
list[week_number][week_day] = data;
});
});
//todo: write similar processing for child_changed and child_removed
return list;
}
});
app.controller('ctrl', function($scope, DatedList) {
var listRef = new Firebase(URL).limit(500);
$scope.weeks = DatedList(listRef);
});
<div controller="ctrl">
<div ng-repeat="(week, days) in weeks">
<h1>{{week}}</h1>
<div ng-repeat="(day, items) in days">
<h2>{{day}}</h2>
<div ng-repeat="item in items">
{{item|json}}
</div>
</div>
</div>
</div>
source to share