feature/bookmark-list — Big heavy work to get dividers in favourite list. Not sure it is worth it.

Author: jeandat

app/favourite/favourite-list.controller.js

@@ -9,7 +9,8 @@
 
         var vm = this;
         vm.title = 'FavouriteListController';
-        vm.faves = favouriteService.faves;
+        vm.faves = [];
+        vm.faveKeys = [];
         vm.deleteFave = deleteFave;
         vm.navigate = navigate;
 
@@ -19,17 +20,28 @@
 
         function activate() {
             $log.debug(vm.title + ' instantiated');
+            favouriteService.faves.$watch(generateIndex);
+            generateIndex();
         }
 
-        function deleteFave(fave){
-            vm.faves.$remove(fave);
+        function generateIndex(){
+            vm.faves = _.groupBy(favouriteService.faves, nameOrTitle);
+            vm.faveKeys = _.sortBy(_.keys(vm.faves));
+            //////////
+            function nameOrTitle(fave) {
+                return _.first(fave.name || fave.title);
+            }
+        }
+
+        function deleteFave(fave) {
+            favouriteService.faves.$remove(fave);
         }
 
-        function navigate(fave){
-            if(fave.type === 'character'){
-                $state.go('app.characterDetailInModal', {character:fave});
+        function navigate(fave) {
+            if (fave.type === 'character') {
+                $state.go('app.characterDetailInModal', {character: fave});
             } else {
-                $state.go('app.comicDetailInModal', {comic:fave});
+                $state.go('app.comicDetailInModal', {comic: fave});
             }
         }
     }

app/favourite/favourite-list.jade

@@ -2,8 +2,10 @@ ion-view(view-title='Favourites')
     ion-content
         ion-nav-view(name='app-favourites-detail')
         ion-list
-            ion-item.item-avatar(ng-click='vm.navigate(fave)' ng-repeat="fave in vm.faves | orderBy:'name || title' track by fave.id")
+            div.item.item-divider(ng-repeat-start="letter in vm.faveKeys" ng-bind='letter')
+            ion-item.item-avatar(ng-click='vm.navigate(fave)' ng-repeat="fave in vm.faves[letter] | orderBy:'name || title' track by fave.id")
                 img(img-cache ic-src='{{::fave.thumbnailUrl}}')
-                h2 {{fave.name || fave.title}}
-                p.fave__meta {{::fave.type}}
+                h2(ng-bind='::fave.name || fave.title')
+                p.fave__meta(ng-bind='::fave.type')
                 ion-option-button.button-assertive(ng-click='vm.deleteFave(fave)') Delete
+            div(ng-repeat-end)

app/favourite/favourite.factory.js

@@ -27,19 +27,19 @@
         function watch() {
             $log.info(faves.length + ' items in favourite list');
             // WARNING: when adding, I'm using angularfire because it handles a strange conceptual choice in Firebase which I don't like.
-            // When listening to 'child_added' you are called once per item in the db corresponding to your ref. 
+            // When listening to 'child_added' you are called once per item in the db corresponding to your ref.
             // It is not just new events ; but also existing ones. You don't get to write boilerplate code to overcome this with angularfire.
             faves.$watch(function (data) {
                 $log.debug('Firebase event:', data);
                 if (data.event === 'child_added')
-                // Listeners will receive an actual record with $id and $priority keys. 
+                // Listeners will receive an actual record with $id and $priority keys.
                 // If you just send raw values, you will lose the ability to remove it.
                     $rootScope.$emit('fave:added', faves.$getRecord(data.key));
             });
             // WARNING: when deleting, I'm using firebase directly because angularfire just give you the deleted key but not the actual
-            // record. And you can't get it yourself because by the time you get notified, the local is already deleted.
+            // record. And you can't get it yourself because by the time you get notified, the local one is already deleted.
             // So in order to get best of both world and do what I want to do the easy way, I'm mixing here angularfire and pure firebase
-            // code. 
+            // code.
             var ref = faves.$ref();
             ref.on('child_removed', function (snapshot) {
                 var value = snapshot.val();