1 <template> |
1 <template> |
2 <form v-bind:action="formAction" method="post"> |
2 <div> |
3 <slot> |
3 <button v-if="annotation" @click="readonly = !readonly" |
4 <!-- CSRF token --> |
4 class="btn btn-xs pull-right" |
5 </slot> |
5 v-bind:class="{ 'btn-primary': readonly, 'btn-warning': !readonly }"> |
6 <input type="hidden" name="fragment" v-model="fragment"> |
6 <i class="fa fa-edit" v-if="readonly"></i> |
|
7 <span v-if="readonly">Modifier</span> |
|
8 <i class="fa fa-ban" v-if="!readonly"></i> |
|
9 <span v-if="!readonly">Annuler</span> |
|
10 </button> |
7 <div v-if="!annotation" class="alert alert-warning"> |
11 <div v-if="!annotation" class="alert alert-warning"> |
8 Aucune annotation sélectionnée. |
12 Aucune annotation sélectionnée. |
9 </div> |
13 </div> |
10 <div v-if="annotation" class="form-group form-group-sm"> |
14 <form v-bind:action="formAction" method="post"> |
11 <label class="control-label">Titre</label> |
15 <slot> |
12 <input type="text" class="form-control" name="title" v-model="title"> |
16 <!-- CSRF token --> |
13 </div> |
17 </slot> |
14 <div v-if="annotation" class="form-group form-group-sm"> |
18 <input type="hidden" name="fragment" v-model="fragment"> |
15 <label class="control-label">Description</label> |
19 <div v-if="annotation" class="form-group form-group-sm"> |
16 <textarea class="form-control" name="description" v-model="description"></textarea> |
20 <label class="control-label">Titre</label> |
17 </div> |
21 <input type="text" class="form-control" name="title" v-model="title" v-if="!readonly"> |
18 <div v-if="annotation" class="form-group form-group-sm"> |
22 <p v-if="readonly" class="small" v-bind:class="{ 'text-muted': !title }">{{ title || 'Pas de titre' }}</p> |
19 <label class="control-label">Mots-clé</label> |
23 </div> |
20 <tag-list ref="taglist" v-bind:original-tags="annotation.tags" @change="onTagsChange($event.tags)"></tag-list> |
24 <div v-if="annotation" class="form-group form-group-sm"> |
21 <input type="hidden" name="tags" v-model="serializedTags"> |
25 <label class="control-label">Description</label> |
22 </div> |
26 <textarea class="form-control" name="description" v-model="description" v-if="!readonly" placeholder="Décrivez ce que vous voyez"></textarea> |
23 <button type="submit" v-if="annotation" v-bind:class="{ disabled: !hasChanged }" |
27 <p v-if="readonly" class="small" v-bind:class="{ 'text-muted': !description }">{{ description || 'Pas de description' }}</p> |
24 class="btn btn-block btn-sm btn-primary">Sauvegarder</button> |
28 </div> |
25 </form> |
29 <div v-if="annotation" class="form-group form-group-sm"> |
|
30 <label class="control-label">Mots-clé</label> |
|
31 <tag-list ref="taglist" |
|
32 v-bind:original-tags="annotation.tags" |
|
33 v-bind:readonly="readonly" |
|
34 @change="onTagsChange($event.tags)"></tag-list> |
|
35 <input type="hidden" name="tags" v-model="serializedTags"> |
|
36 </div> |
|
37 <button type="submit" v-if="annotation && !readonly" v-bind:class="{ disabled: !hasChanged }" |
|
38 class="btn btn-block btn-sm btn-primary">Enregistrer une nouvelle version</button> |
|
39 </form> |
|
40 </div> |
26 </template> |
41 </template> |
27 |
42 |
28 <script> |
43 <script> |
29 |
44 |
30 import TagList from '../tagform/TagList.vue' |
45 import TagList from '../tagform/TagList.vue' |
31 import _ from 'lodash' |
46 import _ from 'lodash' |
32 |
47 |
33 var defaults = { |
48 var defaults = { |
34 'title': '', |
49 title: '', |
35 'description': '', |
50 description: '', |
36 'fragment': '', |
51 fragment: '', |
37 'tags': [], |
52 tags: [], |
|
53 readonly: true, |
38 } |
54 } |
39 |
55 |
40 export default { |
56 export default { |
41 props: ['action', 'annotation'], |
57 props: { |
|
58 action: String, |
|
59 annotation: { |
|
60 type: Object, |
|
61 default: function () { |
|
62 return null; |
|
63 } |
|
64 }, |
|
65 }, |
42 components: { |
66 components: { |
43 'tag-list': TagList |
67 'tag-list': TagList |
44 }, |
68 }, |
45 data() { |
69 data() { |
46 return defaults; |
70 return defaults; |
48 watch: { |
72 watch: { |
49 annotation: function(annotation) { |
73 annotation: function(annotation) { |
50 if (annotation) { |
74 if (annotation) { |
51 // Make sure we have an actual copy |
75 // Make sure we have an actual copy |
52 Object.assign(this, { |
76 Object.assign(this, { |
53 'title': annotation.title, |
77 title: annotation.title, |
54 'description': annotation.description, |
78 description: annotation.description, |
55 'fragment': annotation.fragment, |
79 fragment: annotation.fragment, |
56 'tags': annotation.tags.slice() |
80 tags: annotation.tags.slice(), |
|
81 readonly: true, |
57 }); |
82 }); |
58 } else { |
83 } else { |
59 this.reset(); |
84 this.reset(); |
60 } |
85 } |
61 } |
86 } |