Display resp. edit the current note's category

controller/notescontroller.php

@@ -96,11 +96,12 @@ public function create($content="") {
      *
      * @param int $id
      * @param string $content
+     * @param string $category
      * @return DataResponse
      */
-    public function update($id, $content) {
-        return $this->respond(function () use ($id, $content) {
-            return $this->notesService->update($id, $content, $this->userId);
+    public function update($id, $content, $category) {
+        return $this->respond(function () use ($id, $content, $category) {
+            return $this->notesService->update($id, $content, $this->userId, $category);
         });
     }
 

css/notes.css

@@ -139,16 +139,23 @@
 }
 
 #app-content .note-meta {
-    position: relative;
-    padding: 0 45px 30px 45px;
+    position: fixed;
+    bottom: 0;
+    width: 100%;
+    padding: 0 45px 0px 45px;
     margin: -10px 0 0;
+    background-color: white; /* TODO Theming! */
     -ms-user-select: none;
     -moz-user-select: none;
     -webkit-user-select: none;
     z-index: 5;
 }
 #app-content .note-meta > * {
-    opacity: .4;
+    opacity: .5;
+}
+
+#app-content .note-meta > .note-category {
+    padding-right: 1ex;
 }
 
 #app-content .note-meta > .note-error {
@@ -159,7 +166,9 @@
     padding: 0.5ex 1ex;
 }
 #app-content .note-meta-right {
-    float: right;
+    position: fixed;
+    bottom: 10px;
+    right: 10px;
 }
 
 #app-content .note-meta > .saving {
@@ -172,11 +181,59 @@
     opacity: 1;
     margin: 0 1ex;
 }
+
+#app-content .note-meta form {
+    display: inline;
+}
+
+#app-content .note-meta .edit {
+    background-color: transparent;
+    border: none;
+}
+
+#app-content .note-meta .note-category {
+    cursor: pointer;
+}
+
+#app-content .note-meta .edit {
+    opacity: 0.5;
+}
+#app-content .note-meta:hover .note-category,
+#app-content .note-meta:hover .edit {
+    opacity: 1;
+}
+
+
 .btn-fullscreen {
     padding: 15px;
 }
 
 
+/* category and auto-complete */
+
+form.category #category {
+    width: 15em;
+}
+
+form.category .icon-confirm {
+    margin-right: 0;
+}
+.ui-autocomplete.category-autocomplete {
+    z-index: 5000 !important;
+    max-height: 200px;
+    overflow-y: auto;
+    overflow-x: hidden;
+    border-top: 1px solid var(--color-border);
+    border-radius: 0;
+    border-top-left-radius: 3px;
+    border-top-right-radius: 3px;
+}
+.category-autocomplete .ui-menu-item a {
+    font-weight: inherit;
+    white-space: nowrap;
+}
+
+
 /* markdown styling */
 
 .CodeMirror .CodeMirror-code {

db/note.php

@@ -42,7 +42,7 @@ class Note extends Entity {
     public $modified;
     public $title;
     public $category;
-    public $content;
+    public $content = null;
     public $favorite = false;
     public $error = false;
     public $errorMessage='';
@@ -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/notecontroller.js

@@ -7,7 +7,7 @@
 
 app.controller('NoteController', function($routeParams, $scope, NotesModel,
                                           SaveQueue, note, debounce,
-                                          $document) {
+                                          $document, $timeout) {
     'use strict';
 
     NotesModel.updateIfExists(note);
@@ -56,6 +56,39 @@ app.controller('NoteController', function($routeParams, $scope, NotesModel,
         SaveQueue.addManual(note);
     };
 
+    $scope.editCategory = false;
+    $scope.showEditCategory = function() {
+        $('#category').val($scope.note.category);
+        $scope.editCategory = true;
+        $('#category').autocomplete({
+            source: NotesModel.getCategories(NotesModel.getAll(), 0, false),
+            minLength: 0,
+            position: { my: 'left bottom', at: 'left top', of: '#category' },
+            open: function() {
+                 $timeout(function() {
+                     var width = $('form.category').innerWidth() - 2;
+                     $('.ui-autocomplete.ui-menu').width(width);
+                 });
+            },
+        }).autocomplete('widget').addClass('category-autocomplete');
+        // fix space between input and confirm-button
+        $('form.category .icon-confirm').insertAfter('#category');
+
+        $timeout(function() {
+            $('#category').focus();
+                $('#category').autocomplete('search', '');
+        });
+    };
+    $scope.closeCategory = function() {
+        $scope.editCategory = false;
+        var category = $('#category').val();
+        if($scope.note.category !== category) {
+            $scope.note.category = category;
+            $scope.note.unsaved = true;
+            $scope.autoSave($scope.note);
+        }
+    };
+
     $document.unbind('keypress.notes.save');
     $document.bind('keypress.notes.save', function(event) {
         if(event.ctrlKey || event.metaKey) {

js/app/controllers/notescontroller.js

@@ -49,7 +49,7 @@ app.controller('NotesController', function($routeParams, $scope, $location,
 
     $window.onbeforeunload = function() {
         var notes = NotesModel.getAll();
-        for(var i=0; i<notes.length; i++) {
+        for(var i=0; i<notes.length; i+=1) {
             if(notes[i].unsaved) {
                 return t('notes', 'There are unsaved notes. Leaving ' +
                                   'the page will discard all changes!');

js/app/services/notesmodel.js

@@ -39,12 +39,16 @@ app.factory('NotesModel', function () {
         updateIfExists: function(updated) {
             var note = this.notesIds[updated.id];
             if(angular.isDefined(note)) {
-                note.title = updated.title;
-                note.modified = updated.modified;
-                note.content = updated.content;
-                note.favorite = updated.favorite;
-                note.error = updated.error;
-                note.errorMessage = updated.errorMessage;
+                // only update if it hat full data
+                if(updated.content !== null) {
+                    note.title = updated.title;
+                    note.modified = updated.modified;
+                    note.content = updated.content;
+                    note.favorite = updated.favorite;
+                    note.category = updated.category;
+                    note.error = updated.error;
+                    note.errorMessage = updated.errorMessage;
+                }
             } else {
                 this.notes.push(updated);
                 this.notesIds[updated.id] = updated;
@@ -59,7 +63,48 @@ app.factory('NotesModel', function () {
                     break;
                 }
             }
+        },
+    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);
+                }
+            }
+            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 new NotesModel();

templates/note.php

@@ -1,5 +1,7 @@
 	<textarea editor notes-timeout-change="onEdit()" name="editor" ng-if="note!==false"></textarea>
 	<div class="note-meta" ng-if="note!==false">
+		<span class="note-category" ng-class="{ uncategorized: !note.category }" title="<?php p($l->t('Category')); ?>" ng-show="!editCategory" ng-click="showEditCategory()">{{ note.category || '<?php p($l->t('Uncategorized')) ?>'}} <input type="button" class="edit icon icon-rename" title="<?php p($l->t('Edit category')); ?>"></span>
+		<span class="note-category" title="<?php p($l->t('Edit category')); ?>" ng-show="editCategory"><form class="category"><input type="text" id="category" name="category" ng-blur="closeCategory()" placeholder="<?php p($l->t('Uncategorized')); ?>"><input type="submit" class="icon-confirm" value=""></form></span>
 		<span class="note-word-count" ng-if="note.content.length > 0">{{note.content | wordCount}}</span>
 		<span class="note-unsaved" ng-if="note.unsaved" title="<?php p($l->t('The note has unsaved changes.')); ?>"><?php p($l->t('*')); ?></span>
 		<span class="note-error" ng-if="note.error" ng-click="manualSave()" title="<?php p($l->t('Click here to try again')); ?>"><?php p($l->t('Saving failed!')); ?></span>