show category selector in navigation

controller/notescontroller.php

@@ -82,10 +82,10 @@ public function get($id) {
      *
      * @param string $content
      */
-    public function create($content="") {
+    public function create($content='', $category=null) {
         $note = $this->notesService->create($this->userId);
         $note = $this->notesService->update(
-            $note->getId(), $content, $this->userId
+            $note->getId(), $content, $this->userId, $category
         );
         return new DataResponse($note);
     }

css/notes.css

@@ -220,6 +220,7 @@ form.category .icon-confirm {
 }
 .ui-autocomplete.category-autocomplete {
     z-index: 5000 !important;
+    position: fixed;
     max-height: 200px;
     overflow-y: auto;
     overflow-x: hidden;
@@ -348,3 +349,31 @@ form.category .icon-confirm {
         padding-left: 90px;
     }
 }
+
+
+/* icons for sidebar */
+.nav-icon-emptyfolder {
+        background-image: url('../img/folder-empty.svg?v=1');
+}
+.nav-icon-files {
+        background-image: url('../img/folder.svg?v=1');
+}
+.nav-icon-recent {
+        background-image: url('../img/recent.svg?v=1');
+}
+.nav-icon-favorites {
+        background-image: url('../img/star.svg?v=1');
+}
+
+
+
+.separator-below {
+	border-bottom: 1px solid var(--color-border);
+}
+.separator-above {
+	border-top: 1px solid var(--color-border);
+}
+.current-category-item > a,
+a.current-category-item {
+	font-weight: bold;
+}

js/app/controllers/notescontroller.js

@@ -14,6 +14,13 @@ app.controller('NotesController', function($routeParams, $scope, $location,
     $scope.notesLoaded = false;
     $scope.notes = NotesModel.getAll();
 
+    $scope.folderSelectorOpen = false;
+    $scope.filterCategory = null;
+
+    $scope.orderRecent = ['-favorite','-modified'];
+    $scope.orderAlpha = ['category','-favorite','title'];
+    $scope.filterOrder = $scope.orderRecent;
+
     var notesResource = Restangular.all('notes');
 
     // initial request for getting all notes
@@ -23,7 +30,8 @@ app.controller('NotesController', function($routeParams, $scope, $location,
     });
 
     $scope.create = function () {
-        notesResource.post().then(function (note) {
+        notesResource.post({category: $scope.filterCategory})
+                     .then(function (note) {
             NotesModel.add(note);
             $location.path('/notes/' + note.id);
         });
@@ -46,6 +54,30 @@ app.controller('NotesController', function($routeParams, $scope, $location,
         event.target.blur();
     };
 
+    $scope.getCategories = _.memoize(function (notes) {
+        return NotesModel.getCategories(notes, 1, true);
+    });
+
+    $scope.toggleFolderSelector = function () {
+        $scope.folderSelectorOpen = !$scope.folderSelectorOpen;
+    };
+
+    $scope.setFilter = function (category) {
+        if(category===null) {
+            $scope.filterOrder = $scope.orderRecent;
+        } else {
+            $scope.filterOrder = $scope.orderAlpha;
+        }
+        $scope.filterCategory = category;
+        $scope.folderSelectorOpen = false;
+    };
+
+    $scope.categoryFilter = function (note) {
+        if($scope.filterCategory!==null) {
+            return note.category===$scope.filterCategory || (note.category!==null && note.category.startsWith($scope.filterCategory+'/'));
+        }
+        return true;
+    };
 
     $window.onbeforeunload = function() {
         var notes = NotesModel.getAll();

js/app/filters/groupNotes.js

@@ -0,0 +1,27 @@
+/**
+ * group notes by (sub) category
+ */
+app.filter('groupNotes', ['$filter', function () {
+	'use strict';
+	return _.memoize(function (notes, category) {
+		if(category) {
+			// TODO don't use memoize => category-item einfach hinzufügen
+			var items = [];
+			var prevCat = null;
+			for(var i=0; i<notes.length; i+=1) {
+				var note = notes[i];
+				if(prevCat !== null && prevCat !== note.category) {
+					items.push({
+						isCategory: true,
+						title: note.category.substring(category.length+1),
+					});
+				}
+				prevCat = note.category;
+				items.push(note);
+			}
+			return items;
+		} else {
+			return notes;
+		}
+	});
+}]);

js/app/services/notesmodel.js

@@ -64,46 +64,47 @@ app.factory('NotesModel', function () {
                 }
             }
         },
-    nthIndexOf: function(str, pattern, n) {
-        var i = -1;
-        while (n-- && i++ < str.length) {
-            i = str.indexOf(pattern, i);
-            if (i < 0) {
-                break;
-            }
-        }
-        return i;
-    },
 
-    getCategories: _.memoize(function (notes, maxLevel, details) {
-        var categories = {};
-        for(var i=0; i<notes.length; i+=1) {
-            var cat = notes[i].category;
-            if(maxLevel>0) {
-                var index = this.nthIndexOf(cat, '/', maxLevel);
-                if(index>0) {
-                    cat = cat.substring(0, index);
+        nthIndexOf: function(str, pattern, n) {
+            var i = -1;
+            while (n-- && i++ < str.length) {
+                i = str.indexOf(pattern, i);
+                if (i < 0) {
+                    break;
                 }
-            }
-            if(categories[cat]===undefined) {
-                categories[cat] = 1;
-            } else {
-                categories[cat] += 1;
-            }
-        }
-        var result = [];
-        for(var category in categories) {
-            if(details) {
-                result.push({ name: category, count: categories[category]});
-            } else if(category) {
-                result.push(category);
-            }
-        }
-        if(!details) {
-            result.sort();
-        }
-        return result;
-    }),
+             }
+             return i;
+         },
+
+         getCategories: function (notes, maxLevel, details) {
+             var categories = {};
+             for(var i=0; i<notes.length; i+=1) {
+                 var cat = notes[i].category;
+                 if(maxLevel>0) {
+                     var index = this.nthIndexOf(cat, '/', maxLevel);
+                     if(index>0) {
+                         cat = cat.substring(0, index);
+                     }
+                 }
+                 if(categories[cat]===undefined) {
+                     categories[cat] = 1;
+                 } else {
+                     categories[cat] += 1;
+                 }
+             }
+             var result = [];
+             for(var category in categories) {
+                 if(details) {
+                     result.push({ name: category, count: categories[category]});
+                 } else if(category) {
+                     result.push(category);
+                 }
+             }
+             if(!details) {
+                 result.sort();
+             }
+             return result;
+         },
 
     };
 

templates/main.php

@@ -37,22 +37,65 @@
             </button>
         </div>
 
-        <ul>
+        <ul class="with-icon">
 <?php if(!$_['useSearchAPI']) { ?>
             <li class="note-search">
                 <span class="nav-entry icon-search">
                     <input type="text" ng-model="search" />
                 </span>
             </li>
 <?php } ?>
+
+            <li class="collapsible app-navigation-noclose separator-below" ng-class="{ open: folderSelectorOpen, 'current-category-item': true || !folderSelectorOpen && filterCategory!=null }" ng-show="notes.length>1">
+                <a class="nav-icon-files svg" ng-click="toggleFolderSelector()">{{!folderSelectorOpen && filterCategory!=null ? filterCategory || '<?php p($l->t('Uncategorized')); ?>' : '<?php p($l->t('Categories')); ?>'}}</a>
+
+                <ul>
+                <li data-id="recent" class="nav-recent app-navigation-noclose" ng-class="{ active: filterCategory==null && filterFavorite==false }" ng-show="notes.length>1">
+                        <a
+                            ng-click="setFilter(null)"
+                            class="nav-icon-recent svg"
+                        ><?php p($l->t('All notes')); ?></a>
+                </li>
+
+                <!-- category list -->
+                <li
+                  ng-repeat="category in (getCategories(notes) | orderBy:['name'])"
+                  class="nav-files"
+                  ng-class="{ active: filterCategory==category.name && filterFavorite==false }"
+                  title="{{ category.name || '<?php p($l->t('Uncategorized')); ?>' }}"
+                  >
+                       <a
+                           ng-click="setFilter(category.name)"
+                           class="svg"
+                           ng-class="{ 'nav-icon-emptyfolder': !category.name, 'nav-icon-files': category.name }"
+                       >{{ category.name || '<?php p($l->t('Uncategorized')); ?>' }}</a>
+                       <div class="app-navigation-entry-utils">
+                           <ul>
+                               <li class="app-navigation-entry-utils-counter">{{category.count}}</li>
+                           </ul>
+                      </div>
+                </li>
+                </ul>
+            </li>
+
             <!-- notes list -->
-            <li ng-repeat="note in filteredNotes = (notes| and:search | orderBy:['-favorite','-modified'])"
-                ng-class="{ active: note.id == route.noteId,'has-error': note.error }">
-                <a href="#/notes/{{ note.id }}" title="{{ note.title }}">
+            <li ng-repeat="note in filteredNotes = (notes | filter:categoryFilter | and:search | orderBy:filterOrder | groupNotes:filterCategory)"
+                ng-class="{ active: note.id == route.noteId, 'has-error': note.error, 'app-navigation-noclose': note.isCategory }"
+                class="note-item">
+
+		<a class="nav-icon-files svg separator-above current-category-item"
+		   ng-if="note.isCategory"
+                   ng-click="setFilter(filterCategory + '/' + note.title)"
+                   >&hellip; / {{ note.title }}</a>
+
+                <a href="#/notes/{{ note.id }}"
+		   title="{{ note.title }}"
+                   ng-if="!note.isCategory"
+                   >
                     {{ note.title }}
                     <span ng-if="note.unsaved">*</span>
                 </a>
-                <div class="app-navigation-entry-utils" ng-class="{'hidden': note.error }">
+                <div class="app-navigation-entry-utils" ng-class="{'hidden': note.error }" ng-if="!note.isCategory">
                     <ul>
                         <li class="app-navigation-entry-utils-menu-button button-delete">
                             <button class="svg action icon-delete"
@@ -85,7 +128,6 @@
                 </span>
                 <span class="nav-entry" ng-show="!search"><?php p($l->t('No notes found')); ?></span>
             </li>
-
         </ul>
 
         <div id="app-settings" ng-controller="NotesSettingsController">