make category changeable in editor

nextcloud · Sep 7, 2018 · a13c396 · a13c396
1 parent f2c9619
commit a13c396
Show file tree

Hide file tree

Showing 9 changed files with 119 additions and 9 deletions.
diff --git a/controller/notescontroller.php b/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);
         });
     }
 

diff --git a/css/notes.css b/css/notes.css
@@ -148,7 +148,11 @@
     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 {
@@ -172,11 +176,50 @@
     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:hover .note-category,
+#app-content .note-meta:hover .edit {
+    opacity: 1;
+}
+
+#app-content .note-meta form #category {
+    width: 12em;
+}
+
+
 .btn-fullscreen {
     padding: 15px;
 }
 
 
+.ui-autocomplete.ui-widget-content {
+    border-top: 1px solid var(--color-border);
+    border-radius: 0;
+    border-top-left-radius: 3px;
+    border-top-right-radius: 3px;
+}
+.ui-menu .ui-menu-item a {
+    font-weight: inherit;
+}
+.ui-menu .ui-menu-item a.ui-state-focus,
+.ui-menu .ui-menu-item a.ui-state-active {
+    margin: 0;
+}
+
+
 /* markdown styling */
 
 .CodeMirror .CodeMirror-code {

diff --git a/db/note.php b/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)]);

diff --git a/js/app/controllers/notecontroller.js b/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,31 @@ app.controller('NoteController', function($routeParams, $scope, NotesModel,
         SaveQueue.addManual(note);
     };
 
+    $scope.editCategory = false;
+    $scope.showEditCategory = function() {
+        $scope.editCategory = true;
+        $timeout(function() {
+            $('#category').focus();
+            if(!$scope.note.category) {
+                $('#category').autocomplete('search', '');
+            }
+        });
+    };
+    $scope.closeCategory = function() {
+        $scope.editCategory = false;
+        if($scope.note.unsaved) {
+            $scope.autoSave($scope.note);
+        }
+    };
+
+    $('#category').autocomplete({
+            source: NotesModel.getCategories(NotesModel.getAll(), 0, false),
+            minLength: 0,
+            position: { my: 'left bottom', at: 'left top' },
+    });
+    // fix space between input and confirm-button
+    $('form.category .icon-confirm').insertAfter('#category');
+
     $document.unbind('keypress.notes.save');
     $document.bind('keypress.notes.save', function(event) {
         if(event.ctrlKey || event.metaKey) {

diff --git a/js/app/controllers/notescontroller.js b/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!');

diff --git a/js/app/services/notesmodel.js b/js/app/services/notesmodel.js
@@ -43,6 +43,7 @@ app.factory('NotesModel', function () {
                 note.modified = updated.modified;
                 note.content = updated.content;
                 note.favorite = updated.favorite;
+                note.category = updated.category;
             } else {
                 this.notes.push(updated);
                 this.notesIds[updated.id] = updated;
@@ -57,7 +58,45 @@ 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);
+            }
+        }
+        return result;
+    }),
+
     };
 
     return new NotesModel();

diff --git a/js/public/app.min.js b/js/public/app.min.js
diff --git a/js/public/app.min.js.map b/js/public/app.min.js.map
diff --git a/templates/note.php b/templates/note.php
@@ -1,5 +1,7 @@
 	<textarea editor notes-timeout-change="onEdit()" name="editor"></textarea>
 	<div class="note-meta">
+		<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-model="note.category" ng-change="note.unsaved=true" 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>