tags input in editor, #41

app/assets/javascripts/app/frontend/controllers/editor.js

@@ -5,7 +5,8 @@ angular.module('app.frontend')
       scope: {
         save: "&",
         remove: "&",
-        note: "="
+        note: "=",
+        updateTags: "&"
       },
       templateUrl: 'frontend/editor.html',
       replace: true,
@@ -16,7 +17,7 @@ angular.module('app.frontend')
       link:function(scope, elem, attrs, ctrl) {
 
         /**
-         * Insert 4 spaces when a tab key is pressed, 
+         * Insert 4 spaces when a tab key is pressed,
          * only used when inside of the text editor.
          */
         var handleTab = function (event) {
@@ -85,6 +86,7 @@ angular.module('app.frontend')
       this.editorMode = 'edit';
       this.showExtensions = false;
       this.showMenu = false;
+      this.loadTagsString();
 
       if(note.safeText().length == 0 && note.dummy) {
         this.focusTitle(100);
@@ -236,4 +238,29 @@ angular.module('app.frontend')
       this.focusEditor(100);
     }
 
+    /* Tags */
+
+    this.loadTagsString = function() {
+      var string = "";
+      for(var tag of this.note.tags) {
+        string += "#" + tag.title + " ";
+      }
+      this.tagsString = string;
+    }
+
+    this.updateTagsFromTagsString = function($event) {
+      $event.target.blur();
+
+      var tags = this.tagsString.split("#");
+      tags = _.filter(tags, function(tag){
+        return tag.length > 0;
+      })
+      tags = _.map(tags, function(tag){
+        return tag.trim();
+      })
+
+      this.note.dummy = false;
+      this.updateTags()(this.note, tags);
+    }
+
   });

app/assets/javascripts/app/frontend/controllers/home.js

@@ -17,6 +17,23 @@ angular.module('app.frontend')
     $scope.tags = modelManager.tags;
     $scope.allTag.notes = modelManager.notes;
 
+    /*
+    Editor Callbacks
+    */
+
+    $scope.updateTagsForNote = function(note, stringTags) {
+      note.removeAllRelationships();
+      var tags = [];
+      for(var tagString of stringTags) {
+        tags.push(modelManager.findOrCreateTagByTitle(tagString));
+      }
+      for(var tag of tags) {
+        modelManager.createRelationshipBetweenItems(note, tag);
+      }
+      console.log("updating tags for note", note, tags);
+      apiController.sync();
+    }
+
     /*
     Tags Ctrl Callbacks
     */
@@ -43,20 +60,6 @@ angular.module('app.frontend')
       apiController.sync(callback);
     }
 
-    /*
-    Called to update the tag of a note after drag and drop change
-    The note object is a copy of the original
-    */
-    $scope.tagsUpdateNoteTag = function(noteCopy, newTag, oldTag) {
-
-      var originalNote = _.find(modelManager.notes, {uuid: noteCopy.uuid});
-      if(!newTag.all) {
-        modelManager.createRelationshipBetweenItems(newTag, originalNote);
-      }
-
-      apiController.sync(function(){});
-    }
-
     /*
     Notes Ctrl Callbacks
     */

app/assets/javascripts/app/frontend/controllers/tags.js

@@ -102,9 +102,4 @@ angular.module('app.frontend')
       return validNotes.length;
     }
 
-    this.handleDrop = function(e, newTag, note) {
-      this.updateNoteTag()(note, newTag, this.selectedTag);
-    }.bind(this)
-
-
   });

app/assets/javascripts/app/frontend/models/api/item.js

@@ -109,6 +109,7 @@ class Item {
 
   removeAllRelationships() {
     // must override
+    this.setDirty(true);
   }
 
   mergeMetadataFromItem(item) {

app/assets/javascripts/app/services/directives/draggable.js

@@ -1,109 +0,0 @@
-angular
-  .module('app.frontend')
-  .directive('draggable', function() {
-  return  {
-    scope: {
-      note: "="
-    },
-    link: function(scope, element) {
-      // this gives us the native JS object
-      var el = element[0];
-
-      el.draggable = true;
-
-      el.addEventListener(
-        'dragstart',
-        function(e) {
-          e.dataTransfer.effectAllowed = 'move';
-          e.dataTransfer.setData('Note', JSON.stringify(scope.note));
-          this.classList.add('drag');
-          return false;
-        },
-        false
-      );
-
-      el.addEventListener(
-        'dragend',
-        function(e) {
-          this.classList.remove('drag');
-          return false;
-        },
-        false
-      );
-    }
-  }
-});
-
-angular
-  .module('app.frontend')
-  .directive('droppable', function() {
-  return {
-    scope: {
-      drop: '&',
-      bin: '=',
-      tag: "="
-    },
-    link: function(scope, element) {
-      // again we need the native object
-      var el = element[0];
-
-      el.addEventListener(
-        'dragover',
-        function(e) {
-          e.dataTransfer.dropEffect = 'move';
-          // allows us to drop
-          if (e.preventDefault) e.preventDefault();
-          this.classList.add('over');
-          return false;
-        },
-        false
-      );
-
-      var counter = 0;
-
-      el.addEventListener(
-        'dragenter',
-        function(e) {
-          counter++;
-          this.classList.add('over');
-          return false;
-        },
-        false
-      );
-
-      el.addEventListener(
-        'dragleave',
-        function(e) {
-          counter--;
-           if (counter === 0) {
-             this.classList.remove('over');
-           }
-          return false;
-        },
-        false
-      );
-
-      el.addEventListener(
-        'drop',
-        function(e) {
-          // Stops some browsers from redirecting.
-          if (e.stopPropagation) e.stopPropagation();
-
-          this.classList.remove('over');
-
-          var binId = this.uuid;
-          var note = new Note(JSON.parse(e.dataTransfer.getData('Note')));
-          scope.$apply(function(scope) {
-            var fn = scope.drop();
-            if ('undefined' !== typeof fn) {
-              fn(e, scope.tag, note);
-            }
-          });
-
-          return false;
-        },
-        false
-      );
-    }
-  }
-});

app/assets/javascripts/app/services/modelManager.js

@@ -32,6 +32,17 @@ class ModelManager {
     return _.find(this.items, {uuid: itemId});
   }
 
+  findOrCreateTagByTitle(title) {
+    console.log("looking for tag", title);
+    var tag = _.find(this.tags, {title: title})
+    if(!tag) {
+      console.log("not found, creating");
+      tag = this.createItem({content_type: "Tag", title: title});
+      this.addItem(tag);
+    }
+    return tag;
+  }
+
   mapResponseItemsToLocalModels(items) {
     return this.mapResponseItemsToLocalModelsOmittingFields(items, null);
   }