document tag editor

gui/app/components/document/document-meta.js

@@ -13,13 +13,18 @@ import { computed } from '@ember/object';
 import { inject as service } from '@ember/service';
 import Component from '@ember/component';
 import { A } from "@ember/array"
+import { schedule } from '@ember/runloop';
 
 export default Component.extend({
     documentService: service('document'),
 	categoryService: service('category'),
 	sessionService: service('session'),
-	newCategory: '',
+	maxTags: 3,
 	categories: A([]),
+	newCategory: '',
+	tagz: A([]),
+	tagzModal: A([]),
+	newTag: '',
 	showCategoryModal: false,
 	hasCategories: computed('categories', function() {
 		return this.get('categories').length > 0;
@@ -36,6 +41,36 @@ export default Component.extend({
 		this.load();
 	},
 
+	didInsertElement() {
+		this._super(...arguments);
+
+		$('#document-tags-modal').on('show.bs.modal', (event) => { // eslint-disable-line no-unused-vars
+			schedule('afterRender', () => {
+				$("#add-tag-field").focus();
+
+				$("#add-tag-field").off("keydown").on("keydown", function(e) {
+					if (e.shiftKey) {
+						return false;
+					}
+
+					if (e.which === 13 || e.which === 45 || e.which === 189 || e.which === 8 || e.which === 127 || (e.which >= 65 && e.which <= 90) || (e.which >= 97 && e.which <= 122) || (e.which >= 48 && e.which <= 57)) {
+						return true;
+					}
+
+					return false;
+				});
+
+				// make copy of tags for editing
+				this.set('tagzEdit', this.get('tagz'));
+			});
+		});
+	},
+
+    willDestroyElement() {
+		this._super(...arguments);
+		$("#add-tag-field").off("keydown");
+    },
+
 	load() {
 		this.get('categoryService').getUserVisible(this.get('folder.id')).then((categories) => {
 			let cats = A(categories);
@@ -109,6 +144,48 @@ export default Component.extend({
 			});
 
 			return true;
-		}
-    }
+		},
+
+		onAddTag(e) {
+			e.preventDefault();
+
+            let tags = this.get("tagzEdit");
+            let tag = this.get('newTag');
+            tag = tag.toLowerCase().trim();
+
+            // empty or dupe?
+            if (tag.length === 0 || _.contains(tags, tag) || tags.length >= this.get('maxTags') || tag.startsWith('-')) {
+				$('#add-tag-field').addClass('is-invalid');
+                return;
+            }
+
+            tags.pushObject(tag);
+            this.set('tagzEdit', tags);
+            this.set('newTag', '');
+			$('#add-tag-field').removeClass('is-invalid');
+		},
+
+        onRemoveTag(tagToRemove) {
+            this.set('tagzEdit', _.without(this.get("tagzEdit"), tagToRemove));
+        },
+
+        onSaveTags() {
+            let tags = this.get("tagzEdit");
+
+			let save = "#";
+            _.each(tags, function(tag) {
+                save = save + tag + "#";
+            });
+
+			let doc = this.get('document');
+			doc.set('tags', save);
+			this.attrs.onSaveDocument(doc);
+
+			this.load();
+			this.set('newTag', '');
+
+			$('#document-tags-modal').modal('hide');
+			$('#document-tags-modal').modal('dispose');
+		},
+	}
 });