Add inital view of tags

appinfo/routes.php

@@ -2,6 +2,7 @@
 return [
     'resources' => [
         'note' => ['url' => '/notes'],
+        'tag' => ['url' => '/tags'],
         'note_api' => ['url' => '/api/0.1/notes']
     ],
     'routes' => [

controller/notecontroller.php

@@ -17,25 +17,41 @@ use OCP\AppFramework\Http\DataResponse;
 use OCP\AppFramework\Http\JSONResponse;
 use OCP\AppFramework\Controller;
 
-use OCA\QuickNotes\Db\Note;
 use OCA\QuickNotes\Db\Color;
-use OCA\QuickNotes\Db\NoteShare;
-use OCA\QuickNotes\Db\NoteMapper;
 use OCA\QuickNotes\Db\ColorMapper;
+use OCA\QuickNotes\Db\Note;
+use OCA\QuickNotes\Db\NoteMapper;
+use OCA\QuickNotes\Db\NoteTag;
+use OCA\QuickNotes\Db\NoteTagMapper;
+use OCA\QuickNotes\Db\NoteShare;
 use OCA\QuickNotes\Db\NoteShareMapper;
+use OCA\QuickNotes\Db\Tag;
+use OCA\QuickNotes\Db\TagMapper;
 
 class NoteController extends Controller {
 
 	private $notemapper;
+	private $notetagmapper;
 	private $colormapper;
 	private $notesharemapper;
+	private $tagmapper;
 	private $userId;
 
-	public function __construct($AppName, IRequest $request, NoteMapper $notemapper, NoteShareMapper $notesharemapper, ColorMapper $colormapper, $UserId) {
+	public function __construct($AppName,
+	                            IRequest        $request,
+	                            NoteMapper      $notemapper,
+	                            NoteTagMapper   $notetagmapper,
+	                            NoteShareMapper $notesharemapper,
+	                            ColorMapper     $colormapper,
+	                            TagMapper       $tagmapper,
+	                            $UserId)
+	{
 		parent::__construct($AppName, $request);
 		$this->notemapper = $notemapper;
+		$this->notetagmapper = $notetagmapper;
 		$this->colormapper = $colormapper;
 		$this->notesharemapper = $notesharemapper;
+		$this->tagmapper = $tagmapper;
 		$this->userId = $UserId;
 	}
 
@@ -56,6 +72,7 @@ class NoteController extends Controller {
 			} else {
 				$note->setSharedWith(null);
 			}
+			$note->setTags($this->tagmapper->getTagsForNote($note->getId()));
 		}
 		$shareEntries = $this->notesharemapper->findForUser($this->userId);
 		$shares = array();

controller/tagcontroller.php

@@ -0,0 +1,46 @@
+<?php
+/**
+ * Nextcloud - quicknotes
+ *
+ * This file is licensed under the Affero General Public License version 3 or
+ * later. See the COPYING file.
+ *
+ * @author Matias De lellis <mati86dl@gmail.com>
+ * @copyright Matias De lellis 2019
+ */
+
+namespace OCA\QuickNotes\Controller;
+
+use OCP\IRequest;
+use OCP\AppFramework\Http;
+use OCP\AppFramework\Http\DataResponse;
+use OCP\AppFramework\Http\JSONResponse;
+use OCP\AppFramework\Controller;
+
+use OCA\QuickNotes\Db\Tag;
+use OCA\QuickNotes\Db\TagMapper;
+
+class TagController extends Controller {
+
+	private $tagmapper;
+	private $userId;
+
+	public function __construct($AppName,
+	                            IRequest  $request,
+	                            TagMapper $tagmapper,
+	                            $UserId)
+	{
+		parent::__construct($AppName, $request);
+		$this->tagmapper = $tagmapper;
+		$this->userId = $UserId;
+	}
+
+	/**
+	 * @NoAdminRequired
+	 */
+	 public function index() {
+		$notes = $this->tagmapper->findAll($this->userId);
+		return new DataResponse($notes);
+	}
+
+}

css/style.css

@@ -219,6 +219,13 @@ div[contenteditable="true"] {
     opacity: 0.5;
 }
 
+.slim-tag {
+    display: inline-block;
+    padding: 3px 5px;
+    background-color: rgba(0,0,0,0.08);
+    border-radius: 12px;
+}
+
 /* Modal Content */
 
 .modal-content {

db/note.php

@@ -14,6 +14,7 @@ class Note extends Entity implements JsonSerializable {
 	protected $userId;
 	protected $sharedWith;
 	protected $isShared;
+	protected $tags;
 
 	protected $color;
 
@@ -31,7 +32,8 @@ class Note extends Entity implements JsonSerializable {
 			'color' => $this->color,
 			'userid' => $this->userId,
 			'sharedwith' => $this->sharedWith,
-			'isshared' => $this->isShared
+			'isshared' => $this->isShared,
+			'tags' => $this->tags
 		];
 	}
 }

db/tagmapper.php

@@ -20,4 +20,12 @@ class TagMapper extends Mapper {
 		return $this->findEntities($sql, [$userId]);
 	}
 
+	public function getTagsForNote ($noteId) {
+		$sql = 'SELECT T.id, T.name FROM *PREFIX*quicknotes_tags T ';
+		$sql.= 'INNER JOIN *PREFIX*quicknotes_note_tags NT ';
+		$sql.= 'ON T.id = NT.tag_id ';
+		$sql.= 'WHERE NT.note_id = ?';
+		return $this->findEntities($sql, [$noteId]);
+	}
+
 }

js/script.js

@@ -145,9 +145,38 @@ Notes.prototype = {
     }
 };
 
+// this notes object holds all our tags
+var Tags = function (baseUrl) {
+    this._baseUrl = baseUrl;
+    this._tags = [];
+    this._loaded = false;
+};
+
+Tags.prototype = {
+    loadAll: function () {
+        var deferred = $.Deferred();
+        var self = this;
+        $.get(this._baseUrl).done(function (tags) {
+            self._tags = tags.reverse();
+            self._loaded = true;
+            deferred.resolve();
+        }).fail(function () {
+            deferred.reject();
+        });
+        return deferred.promise();
+    },
+    isLoaded: function () {
+        return this._loaded;
+    },
+    getAll: function () {
+        return this._tags;
+    }
+};
+
 // this will be the view that is used to update the html
-var View = function (notes) {
+var View = function (notes, tags) {
     this._notes = notes;
+    this._tags = tags;
 };
 
 View.prototype = {
@@ -580,10 +609,12 @@ View.prototype = {
         var html = Handlebars.templates['navigation']({
             colors: this._notes.getColors(),
             notes: this._notes.getAll(),
+            tags: this._tags.getAll(),
             newNoteTxt: t('quicknotes', 'New note'),
             allNotesTxt: t('quicknotes', 'All notes'),
             colorsTxt: t('quicknotes', 'Colors'),
             notesTxt: t('quicknotes', 'Notes'),
+            tagsTxt: t('quicknotes', 'Tags'),
         });
 
         $('#app-navigation ul').html(html);
@@ -730,18 +761,25 @@ new OCA.Search(search, function() {
  * Create modules
  */
 var notes = new Notes(OC.generateUrl('/apps/quicknotes/notes'));
-var view = new View(notes);
+var tags = new Tags(OC.generateUrl('/apps/quicknotes/tags'));
+
+var view = new View(notes, tags);
 
 /*
- * Render loading view
+ * Render initial loading view
  */
 view.renderContent();
 
 /*
- * Loading notes and render view.
+ * Loading notes and render final view.
  */
 notes.loadAll().done(function () {
+    tags.loadAll().done(function () {
         view.render();
+    }).fail(function () {
+        alert('Could not load tags');
+    });
+    // FIXME: So ugly...
 }).fail(function () {
     alert('Could not load notes');
 });

js/templates/navigation.handlebars

@@ -31,3 +31,14 @@
 		{{/each}}
 	</ul>
 </li>
+<li id="notes-folder" class="collapsible open">
+	<button class="collapse"></button>
+	<a href="#" class="icon-folder svg">{{tagsTxt}}</a>
+	<ul>
+		{{#each tags}}
+			<li class="note with-menu {{#if active}}active{{/if}}" data-id="{{ id }}">
+				<a href="#">{{{ name }}}</a>
+			</li>
+		{{/each}}
+	</ul>
+</li>

js/templates/note-item.handlebars

@@ -25,6 +25,11 @@
 		<div class='note-content'>
 			{{{ content }}}
 		</div>
+		<div class='note-tags'>
+			{{#each tags}}
+				<div class="slim-tag" data-id="{{ id }}">{{{ name }}}</div>
+			{{/each}}
+		</div>
 		{{/if}}
 	</div>
 </div>

js/templates/notes.handlebars

@@ -28,6 +28,13 @@
 			<div class='note-content'>
 				{{{ content }}}
 			</div>
+			<div class='note-tags'>
+				{{#each tags}}
+					<div class='slim-tag' data-id="{{ id }}">
+						{{{ name }}}
+					</div>
+				{{/each}}
+			</div>
 			{{/if}}
 		</div>
 	</div>