Update tag

myapp/static/components/tags.js

@@ -1,3 +1,9 @@
+/*
+<tags-component v-bind:tags="document.tags" v-bind:resource="{id: document.id, name: 'document'}"></tags-component>
+<script type="text/javascript" src="/static/components/tags.js"></script>
+
+*/
+
 var tagsTemplate = `
 <div>
 <!-- Начало: Теги -->
@@ -7,9 +13,9 @@ var tagsTemplate = `
 
 <div class="btn btn-outline-success mb-1" v-on:click="showPanel(panels.standart)"><i class="fa fa-plus"></i></div>
 
-<div class="btn-group mr-2 mb-1" v-for="(tag, index) in sortedTags">
+<div class="btn-group mr-2 mb-1" v-for="(tag, tagIdx) in sortedTags">
 <a class="btn btn-outline-secondary text-monospace" :href="'/tag/' + tag.id">{{ tag.name }}</a>
-<div class="btn btn-outline-danger" v-on:click="removeTag(tag.id)"><i class="fa fa-remove"></i></div>
+<div class="btn btn-outline-danger" v-on:click="removeTag(tag)"><i class="fa fa-remove"></i></div>
 </div>
 
 </div>
@@ -25,8 +31,8 @@ var tagsTemplate = `
 </div>
 </div>
 
-<div class="row mt-3">
-<div class="col">
+<div class="row">
+<div class="col py-2">
 <template v-for="(tags, key, index) in groups">
 
 <a class="btn btn-outline-secondary mt-2 mr-2" v-if="(index % 2)===0" :href="'#' + index">{{ key }}</a>
@@ -56,8 +62,8 @@ var tagsTemplate = `
 <div class="col pr-0">
 <a :name="index" class="btn btn-outline-danger mr-2 mb-1">{{ key }}</a>
 <template v-for="(tag, tagIdx) in tags">
-<div class="btn btn-outline-secondary mr-2 mb-1" v-if="!tag_ids.includes(tag.id)" v-on:click="tag_add_to_node(tag)">{{ tag.name }}</div>
-<div class="btn btn-primary mr-2 mb-1" v-else v-on:click="removeTag(tag.id)">{{ tag.name }}</div>
+<button type="button" class="btn btn-primary mr-2 mb-1" v-if="tag_includes(tag)" v-on:click="removeTag(tag)">{{ tag.name }}</button>
+<button type="button" class="btn btn-outline-secondary mr-2 mb-1" v-else v-on:click="tag_add_to_node(tag)">{{ tag.name }}</button>
 </template>
 </div>
 </div>
@@ -72,10 +78,6 @@ Vue.component('tags-component', {
         return {
             newtag: '',
             groups: {},
-            forms: {
-                modal: false,
-                panel: false
-            },
             panels: {
                 standart: {
                     visible: false
@@ -86,7 +88,7 @@ Vue.component('tags-component', {
             }
         }
     },
-    props: ['tags', 'node', 'url'],
+    props: ['tags', 'resource'],
     template: tagsTemplate,
     methods: {
         arrayRemove: function(arr, value) {
@@ -95,31 +97,24 @@ Vue.component('tags-component', {
                 return ele != value;
             });
         },
-        removeTag: function (id) {
+        removeTag: function (tag) {
             /* Удаление тега из ресурса */
             let vm = this;
-            var tag = null;
-            for (var i = 0; i < vm.tags.length; i++) {
-                if (id == vm.tags[i].id) {
-                    tag = vm.tags[i]
-                }
-            }
-            if (!tag) {return;}
             axios.post(
                 '/api',
                 {
                     "jsonrpc": "2.0",
-                    "method": 'tag.deleteFrom' + vm.url,
+                    "method": 'tag.' + vm.resource.name + '.delete',
                     "params": {
-                        "id": vm.node,
-                        "tag": tag.id
+                        "tag": tag.id,
+                        "id": vm.resource.id
                     },
                     "id": 1
                 }
             ).then(
                 function(response) {
                     if ('result' in response.data) {
-                        vm.tags = vm.arrayRemove(vm.tags, tag);
+                        vm.tags = vm.arrayRemove(vm.tags, vm.tag_includes(tag));
                     } else if ('error' in response.data) {
                         console.log(response.data);
                     }
@@ -190,9 +185,9 @@ Vue.component('tags-component', {
                 '/api',
                 {
                     "jsonrpc": "2.0",
-                    "method": 'tag.addTo' + this.url,
+                    "method": 'tag.' + vm.resource.name + '.add',
                     "params": {
-                        "id": vm.node,
+                        "id": vm.resource.id,
                         "tag": tag.id
                     },
                     "id": 1
@@ -234,20 +229,19 @@ Vue.component('tags-component', {
             /* Показать/скрыть панель */
             panel.visible = !panel.visible;
         },
+        tag_includes: function(tag) {
+            let vm = this;
+            let result = vm.tags.find(function(element, index, array) {
+                return element.id===tag.id;
+            }, tag);
+            return result;
+        },
     },
     mounted: function() {
         let vm = this;
         vm.getTags();
     },
     computed: {
-        tag_ids: function() {
-            let vm = this;
-            var result = [];
-            for (var i = 0; i < vm.tags.length; i++) {
-                result.push(vm.tags[i].id);
-            }
-            return result;
-        },
         sortedTags: function() {
             let vm = this;
             if (vm.tags === undefined) {return [];}