Started vueifying tag system

resources/assets/js/vues/tag-manager.js

@@ -0,0 +1,65 @@
+const draggable = require('vuedraggable');
+
+let data = {
+    pageId: false,
+    tags: [],
+};
+
+const components = {draggable};
+
+let computed = {
+
+};
+
+let methods = {
+
+    addEmptyTag() {
+        this.tags.push({name: '', value: '', key: Math.random().toString(36).substring(7)});
+    },
+
+    /**
+     * When an tag changes check if another empty editable field needs to be added onto the end.
+     * @param tag
+     */
+    tagChange(tag) {
+        let tagPos = this.tags.indexOf(tag);
+        if (tagPos !== this.tags.length-1 || tag.name !== '' || tag.value !== '') return;
+        this.addEmptyTag();
+    },
+
+    /**
+     * When an tag field loses focus check the tag to see if its
+     * empty and therefore could be removed from the list.
+     * @param tag
+     */
+    tagBlur(tag) {
+        let isLast = (this.tags.indexOf(tag) === this.tags.length-1);
+        if (tag.name !== '' || tag.value !== '' || isLast) return;
+        let cPos = this.tags.indexOf(tag);
+        this.tags.splice(cPos, 1);
+    },
+
+    removeTag(tag) {
+        let tagPos = this.tags.indexOf(tag);
+        if (tagPos === -1) return;
+        this.tags.splice(tagPos, 1);
+    }
+};
+
+function mounted() {
+    this.pageId = Number(this.$el.getAttribute('page-id'));
+
+    let url = window.baseUrl(`/ajax/tags/get/page/${this.pageId}`);
+    this.$http.get(url).then(response => {
+        let tags = response.data;
+        for (let i = 0, len = tags.length; i < len; i++) {
+            tags[i].key = Math.random().toString(36).substring(7);
+        }
+        this.tags = tags;
+        this.addEmptyTag();
+    });
+}
+
+module.exports = {
+    data, computed, methods, mounted, components
+};

resources/assets/js/vues/vues.js

@@ -9,6 +9,7 @@ let vueMapping = {
     'entity-dashboard': require('./entity-search'),
     'code-editor': require('./code-editor'),
     'image-manager': require('./image-manager'),
+    'tag-manager': require('./tag-manager'),
 };
 
 window.vues = {};