--- 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;
- }
}
}