Improve change detection in TagList.
--- 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;
- }
}
}
--- 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]);
- },
+ }
}
}