src_js/iconolab-bundle/src/components/editor/AnnotationForm.vue
changeset 333 625ac8b8bb87
parent 327 44a122f0f2de
child 339 ba89f767b091
--- 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;
-            }
         }
     }