# HG changeset patch
# User Alexandre Segura <mex.zktk@gmail.com>
# Date 1487687667 -3600
# Node ID 625ac8b8bb87d2b460e07899748f309614eb00ff
# Parent  1670e5e1ed9706f2d578a019e32e72b0e3cb2dd5
Improve change detection in TagList.

diff -r 1670e5e1ed97 -r 625ac8b8bb87 src_js/iconolab-bundle/src/components/editor/AnnotationForm.vue
--- a/src_js/iconolab-bundle/src/components/editor/AnnotationForm.vue	Tue Feb 21 14:35:45 2017 +0100
+++ b/src_js/iconolab-bundle/src/components/editor/AnnotationForm.vue	Tue Feb 21 15:34:27 2017 +0100
@@ -17,10 +17,10 @@
         </div>
         <div v-if="annotation" class="form-group form-group-sm">
             <label class="control-label">Mots-clé</label>
-            <tag-list ref="taglist" v-bind:tags="tags" @change="onTagsChange($event.tags)"></tag-list>
+            <tag-list ref="taglist" v-bind:original-tags="annotation.tags" @change="onTagsChange($event.tags)"></tag-list>
             <input type="hidden" name="tags" v-model="serializedTags">
         </div>
-        <button type="submit" v-if="annotation" v-bind:class="{ disabled: !hasChanged() }"
+        <button type="submit" v-if="annotation" v-bind:class="{ disabled: !hasChanged }"
             class="btn btn-block btn-sm btn-primary">Sauvegarder</button>
     </form>
 </template>
@@ -28,6 +28,14 @@
 <script>
 
     import TagList from '../tagform/TagList.vue'
+    import _ from 'lodash'
+
+    var defaults = {
+        'title': '',
+        'description': '',
+        'fragment': '',
+        'tags': [],
+    }
 
     export default {
         props: ['action', 'annotation'],
@@ -35,12 +43,7 @@
             'tag-list': TagList
         },
         data() {
-            return {
-                'title': '',
-                'description': '',
-                'fragment': '',
-                'tags': [],
-            }
+            return defaults;
         },
         watch: {
             annotation: function(annotation) {
@@ -74,6 +77,13 @@
                 });
 
                 return JSON.stringify(tags);
+            },
+            hasChanged: function() {
+                if (!this.annotation) { return false; }
+
+                return this.title !== this.annotation.title
+                    || this.description !== this.annotation.description
+                    || !_.isEqual(this.annotation.tags, this.tags);
             }
         },
         methods: {
@@ -81,20 +91,8 @@
                 this.tags = tags;
             },
             reset: function() {
-                Object.assign(this, {
-                    'title': '',
-                    'description': '',
-                    'fragment': '',
-                    'tags': []
-                });
+                Object.assign(this, defaults);
             },
-            hasChanged: function() {
-                if (!this.annotation) { return false; }
-
-                return this.title !== this.annotation.title
-                    || this.description !== this.annotation.description
-                    || this.tags !== this.annotation.tags;
-            }
         }
     }
 
diff -r 1670e5e1ed97 -r 625ac8b8bb87 src_js/iconolab-bundle/src/components/tagform/TagList.vue
--- a/src_js/iconolab-bundle/src/components/tagform/TagList.vue	Tue Feb 21 14:35:45 2017 +0100
+++ b/src_js/iconolab-bundle/src/components/tagform/TagList.vue	Tue Feb 21 15:34:27 2017 +0100
@@ -2,7 +2,6 @@
     <div>
         <div class="tag-list">
             <tag-list-item ref="items"
-                key="tag.tag_label + tag.accuracy + tag.relevancy"
                 v-for="(tag, index) in tags"
                 v-if="tags.length > 0"
                 v-bind:label="tag.tag_label"
@@ -18,21 +17,30 @@
 
     import TagListItem from './TagListItem.vue'
     import Typeahead from './Typeahead.vue'
+    import _ from 'lodash'
 
     export default {
         props: {
-            tags: {
+            originalTags: {
                 type: Array,
                 default: function () {
                     return [];
                 }
             },
         },
+        data() {
+            return {
+                tags: _.cloneDeep(this.originalTags)
+            }
+        },
         components: {
             "typeahead": Typeahead,
             "tag-list-item": TagListItem
         },
         watch: {
+            originalTags: function(originalTags) {
+                this.tags = _.cloneDeep(this.originalTags);
+            },
             tags: function(tags) {
                 this.$emit('change', { tags: tags });
             }
@@ -54,7 +62,7 @@
             },
             removeItemAt: function(index) {
                 this.tags.$remove(this.tags[index]);
-            },
+            }
         }
 
     }