|
1 <template> |
|
2 <form v-bind:action="formAction" method="post"> |
|
3 <slot> |
|
4 <!-- CSRF token --> |
|
5 </slot> |
|
6 <input type="hidden" name="fragment" v-model="fragment"> |
|
7 <div v-if="!annotation" class="alert alert-warning"> |
|
8 Aucune annotation sélectionnée. |
|
9 </div> |
|
10 <div v-if="annotation" class="form-group form-group-sm"> |
|
11 <label class="control-label">Titre</label> |
|
12 <input type="text" class="form-control" name="title" v-model="title"> |
|
13 </div> |
|
14 <div v-if="annotation" class="form-group form-group-sm"> |
|
15 <label class="control-label">Description</label> |
|
16 <textarea class="form-control" name="description" v-model="description"></textarea> |
|
17 </div> |
|
18 <div v-if="annotation" class="form-group form-group-sm"> |
|
19 <label class="control-label">Mots-clé</label> |
|
20 <tag-list ref="taglist" v-bind:tags="tags" @change="onTagsChange($event.tags)"></tag-list> |
|
21 <input type="hidden" name="tags" v-model="serializedTags"> |
|
22 </div> |
|
23 <button type="submit" v-if="annotation" v-bind:class="{ disabled: !hasChanged() }" |
|
24 class="btn btn-block btn-sm btn-primary">Sauvegarder</button> |
|
25 </form> |
|
26 </template> |
|
27 |
|
28 <script> |
|
29 |
|
30 import TagList from '../tagform/TagList.vue' |
|
31 |
|
32 export default { |
|
33 props: ['action'], |
|
34 components: { |
|
35 'tag-list': TagList |
|
36 }, |
|
37 data() { |
|
38 return { |
|
39 'title': '', |
|
40 'description': '', |
|
41 'fragment': '', |
|
42 'tags': [], |
|
43 'annotation': null, |
|
44 } |
|
45 }, |
|
46 computed: { |
|
47 formAction: function() { |
|
48 if (this.annotation) { |
|
49 return this.action.replace(':annotation_guid', this.annotation.annotation_guid); |
|
50 } |
|
51 }, |
|
52 serializedTags: function() { |
|
53 var tags = this.tags.map(function(tag) { |
|
54 return { |
|
55 tag_input: (typeof tag.tag_link === "string" && tag.tag_link.length) ? tag.tag_link : tag.tag_label, |
|
56 tag_label: tag.tag_label, |
|
57 accuracy: tag.accuracy, |
|
58 relevancy: tag.relevancy |
|
59 } |
|
60 }); |
|
61 |
|
62 return JSON.stringify(tags); |
|
63 } |
|
64 }, |
|
65 methods: { |
|
66 setAnnotation: function(annotation) { |
|
67 const clone = annotation; |
|
68 this.annotation = clone; |
|
69 |
|
70 Object.assign(this, annotation); |
|
71 }, |
|
72 onTagsChange: function(tags) { |
|
73 this.tags = tags; |
|
74 }, |
|
75 reset: function() { |
|
76 Object.assign(this, { |
|
77 'title': '', |
|
78 'description': '', |
|
79 'tags': [], |
|
80 'annotation': null |
|
81 }); |
|
82 }, |
|
83 hasChanged: function() { |
|
84 if (!this.annotation) { return false; } |
|
85 |
|
86 return this.title !== this.annotation.title |
|
87 || this.description !== this.annotation.description |
|
88 || this.tags !== this.annotation.tags; |
|
89 } |
|
90 } |
|
91 } |
|
92 |
|
93 </script> |
|
94 |
|
95 <style scoped> |
|
96 form { |
|
97 margin-bottom: 20px; |
|
98 } |
|
99 </style> |