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.

+3


source to share


1 answer


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>

      

+4


source







All Articles