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

@@ -287,3 +287,30 @@
         padding-left: 90px;
     }
 }
+
+
+/* icons for sidebar */
+.nav-icon-uncategorized {
+        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 {
+	font-weight: bold;
+}

db/note.php

@@ -69,7 +69,7 @@ public static function fromFile(File $file, Folder $notesFolder, $tags=[], $only
         $note->setModified($file->getMTime());
         $note->setTitle(pathinfo($file->getName(),PATHINFO_FILENAME)); // remove extension
         $subdir = substr(dirname($file->getPath()), strlen($notesFolder->getPath())+1);
-        $note->setCategory($subdir ? $subdir : null);
+        $note->setCategory($subdir ? $subdir : '');
         if(is_array($tags) && in_array(\OC\Tags::TAG_FAVORITE, $tags)) {
             $note->setFavorite(true);
             //unset($tags[array_search(\OC\Tags::TAG_FAVORITE, $tags)]);

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,7 @@ 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);
         });
@@ -45,6 +52,56 @@ app.controller('NotesController', function($routeParams, $scope, $location,
         });
     };
 
+    $scope.toggleFolderSelector = function () {
+        $scope.folderSelectorOpen = !$scope.folderSelectorOpen;
+    };
+
+    $scope.setFilter = function (category) {
+        $scope.filterOrder = category===null ? $scope.orderRecent : $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;
+    };
+
+    $scope.nthIndexOf = function(str, pattern, n) {
+        var i = -1;
+        while (n-- && i++ < str.length) {
+            i = str.indexOf(pattern, i);
+            if (i < 0) {
+                break;
+            }
+        }
+        return i;
+    };
+
+    $scope.getCategories = _.memoize(function (notes, maxLevel) {
+        var categories = {};
+        for(var i=0; i<notes.length; i++) {
+            var cat = notes[i].category;
+            if(maxLevel>0) {
+                var index = $scope.nthIndexOf(cat, '/', maxLevel);
+                if(index>0) {
+                    cat = cat.substring(0, index);
+                }
+            }
+            if(categories[cat]===undefined) {
+                categories[cat] = 1;
+            } else {
+                categories[cat]++;
+            }
+        }
+        var result = [];
+        for(var category in categories) {
+            result.push({ name: category, count: categories[category]});
+        }
+        return result;
+    });
 
     $window.onbeforeunload = function() {
         var notes = NotesModel.getAll();

js/app/filters/groupNotes.js

@@ -0,0 +1,24 @@
+/**
+ * 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;
+		}
+	});
+}]);

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': !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, 1) | 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-uncategorized': !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"
+		   ng-if="note.isCategory"
+                   ng-click="setFilter(filterCategory + '/' + note.title)"
+                   >{{ 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"
@@ -83,7 +126,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">