15 <label class="control-label">Description</label> |
15 <label class="control-label">Description</label> |
16 <textarea class="form-control" name="description" v-model="description"></textarea> |
16 <textarea class="form-control" name="description" v-model="description"></textarea> |
17 </div> |
17 </div> |
18 <div v-if="annotation" class="form-group form-group-sm"> |
18 <div v-if="annotation" class="form-group form-group-sm"> |
19 <label class="control-label">Mots-clé</label> |
19 <label class="control-label">Mots-clé</label> |
20 <tag-list ref="taglist" v-bind:tags="tags" @change="onTagsChange($event.tags)"></tag-list> |
20 <tag-list ref="taglist" v-bind:original-tags="annotation.tags" @change="onTagsChange($event.tags)"></tag-list> |
21 <input type="hidden" name="tags" v-model="serializedTags"> |
21 <input type="hidden" name="tags" v-model="serializedTags"> |
22 </div> |
22 </div> |
23 <button type="submit" v-if="annotation" v-bind:class="{ disabled: !hasChanged() }" |
23 <button type="submit" v-if="annotation" v-bind:class="{ disabled: !hasChanged }" |
24 class="btn btn-block btn-sm btn-primary">Sauvegarder</button> |
24 class="btn btn-block btn-sm btn-primary">Sauvegarder</button> |
25 </form> |
25 </form> |
26 </template> |
26 </template> |
27 |
27 |
28 <script> |
28 <script> |
29 |
29 |
30 import TagList from '../tagform/TagList.vue' |
30 import TagList from '../tagform/TagList.vue' |
|
31 import _ from 'lodash' |
|
32 |
|
33 var defaults = { |
|
34 'title': '', |
|
35 'description': '', |
|
36 'fragment': '', |
|
37 'tags': [], |
|
38 } |
31 |
39 |
32 export default { |
40 export default { |
33 props: ['action', 'annotation'], |
41 props: ['action', 'annotation'], |
34 components: { |
42 components: { |
35 'tag-list': TagList |
43 'tag-list': TagList |
36 }, |
44 }, |
37 data() { |
45 data() { |
38 return { |
46 return defaults; |
39 'title': '', |
|
40 'description': '', |
|
41 'fragment': '', |
|
42 'tags': [], |
|
43 } |
|
44 }, |
47 }, |
45 watch: { |
48 watch: { |
46 annotation: function(annotation) { |
49 annotation: function(annotation) { |
47 if (annotation) { |
50 if (annotation) { |
48 // Make sure we have an actual copy |
51 // Make sure we have an actual copy |
72 relevancy: tag.relevancy |
75 relevancy: tag.relevancy |
73 } |
76 } |
74 }); |
77 }); |
75 |
78 |
76 return JSON.stringify(tags); |
79 return JSON.stringify(tags); |
|
80 }, |
|
81 hasChanged: function() { |
|
82 if (!this.annotation) { return false; } |
|
83 |
|
84 return this.title !== this.annotation.title |
|
85 || this.description !== this.annotation.description |
|
86 || !_.isEqual(this.annotation.tags, this.tags); |
77 } |
87 } |
78 }, |
88 }, |
79 methods: { |
89 methods: { |
80 onTagsChange: function(tags) { |
90 onTagsChange: function(tags) { |
81 this.tags = tags; |
91 this.tags = tags; |
82 }, |
92 }, |
83 reset: function() { |
93 reset: function() { |
84 Object.assign(this, { |
94 Object.assign(this, defaults); |
85 'title': '', |
|
86 'description': '', |
|
87 'fragment': '', |
|
88 'tags': [] |
|
89 }); |
|
90 }, |
95 }, |
91 hasChanged: function() { |
|
92 if (!this.annotation) { return false; } |
|
93 |
|
94 return this.title !== this.annotation.title |
|
95 || this.description !== this.annotation.description |
|
96 || this.tags !== this.annotation.tags; |
|
97 } |
|
98 } |
96 } |
99 } |
97 } |
100 |
98 |
101 </script> |
99 </script> |
102 |
100 |