equal
deleted
inserted
replaced
1 <template> |
1 <template> |
2 <div> |
2 <div> |
3 <button |
3 <button |
4 data-intro="Proposez une nouvelle version" data-position="left" |
4 data-intro="Proposez une nouvelle version" data-position="left" |
5 v-if="annotation && isAuthenticated" @click="readonly = !readonly" |
5 v-if="annotation && isAuthenticated" |
|
6 @click="onCancelClick" |
6 class="btn btn-xs pull-right" |
7 class="btn btn-xs pull-right" |
7 v-bind:class="{ 'btn-primary': readonly, 'btn-warning': !readonly }"> |
8 v-bind:class="{ 'btn-primary': readonly, 'btn-warning': !readonly }"> |
8 <i class="fa fa-edit" v-if="readonly"></i> |
9 <i class="fa fa-edit" v-if="readonly"></i> |
9 <span v-if="readonly">Modifier</span> |
10 <span v-if="readonly">Modifier</span> |
10 <i class="fa fa-ban" v-if="!readonly"></i> |
11 <i class="fa fa-ban" v-if="!readonly"></i> |
18 <!-- CSRF token --> |
19 <!-- CSRF token --> |
19 </slot> |
20 </slot> |
20 <input type="hidden" name="fragment" v-model="fragment"> |
21 <input type="hidden" name="fragment" v-model="fragment"> |
21 <div v-if="annotation" class="form-group form-group-sm"> |
22 <div v-if="annotation" class="form-group form-group-sm"> |
22 <label v-if="!readonly || title" class="small text-muted">Titre</label> |
23 <label v-if="!readonly || title" class="small text-muted">Titre</label> |
23 <input type="text" class="form-control" name="title" v-model="title" v-if="!readonly"> |
24 <input type="text" class="form-control" name="title" v-model="title" v-if="!readonly" ref="title"> |
24 <p v-if="readonly && title" v-bind:class="{ 'text-muted': !title }">{{ title || 'Pas de titre' }}</p> |
25 <p v-if="readonly && title" v-bind:class="{ 'text-muted': !title }">{{ title || 'Pas de titre' }}</p> |
25 </div> |
26 </div> |
26 <div v-if="annotation" class="form-group form-group-sm"> |
27 <div v-if="annotation" class="form-group form-group-sm"> |
27 <label v-if="!readonly || description" class="small text-muted">Description</label> |
28 <label v-if="!readonly || description" class="small text-muted">Description</label> |
28 <textarea class="form-control" name="description" v-model="description" v-if="!readonly" placeholder="Décrivez ce que vous voyez"></textarea> |
29 <textarea class="form-control" name="description" v-model="description" v-if="!readonly" placeholder="Décrivez ce que vous voyez"></textarea> |
34 v-bind:original-tags="annotation.tags" |
35 v-bind:original-tags="annotation.tags" |
35 v-bind:readonly="readonly" |
36 v-bind:readonly="readonly" |
36 @change="onTagsChange($event.tags)"></tag-list> |
37 @change="onTagsChange($event.tags)"></tag-list> |
37 <input type="hidden" name="tags" v-model="serializedTags"> |
38 <input type="hidden" name="tags" v-model="serializedTags"> |
38 </div> |
39 </div> |
39 <p class="small text-center text-muted" v-if="annotation"> |
40 <p class="small text-center text-muted" v-if="annotation && annotation.annotation_guid"> |
40 <a v-bind:href="revisionsUrlComputed">Dernière version</a> |
41 <a v-bind:href="revisionsUrlComputed">Dernière version</a> |
41 <span>{{ dateComputed }} par</span> |
42 <span>{{ dateComputed }} par</span> |
42 <a v-bind:href="authorUrlComputed">{{ annotation.author }}</a> |
43 <a v-bind:href="authorUrlComputed">{{ annotation.author }}</a> |
43 </p> |
44 </p> |
44 <button type="submit" v-if="annotation && !readonly" v-bind:class="{ disabled: !hasChanged }" |
45 <button type="submit" v-if="annotation && !readonly" v-bind:class="{ disabled: !hasChanged }" |
45 class="btn btn-block btn-sm btn-primary">Enregistrer une nouvelle version</button> |
46 class="btn btn-block btn-sm btn-primary">{{ submitButtonText }}</button> |
46 </form> |
47 </form> |
47 </div> |
48 </div> |
48 </template> |
49 </template> |
49 |
50 |
50 <script> |
51 <script> |
64 readonly: true, |
65 readonly: true, |
65 } |
66 } |
66 |
67 |
67 export default { |
68 export default { |
68 props: { |
69 props: { |
69 action: String, |
|
70 annotation: { |
70 annotation: { |
71 type: Object, |
71 type: Object, |
72 default: function () { |
72 default: function () { |
73 return null; |
73 return null; |
74 } |
74 } |
76 isAuthenticated: { |
76 isAuthenticated: { |
77 type: Boolean, |
77 type: Boolean, |
78 default: false |
78 default: false |
79 }, |
79 }, |
80 revisionsUrl: String, |
80 revisionsUrl: String, |
81 authorUrl: String |
81 authorUrl: String, |
|
82 newAnnotationUrl: String, |
|
83 editAnnotationUrl: String |
82 }, |
84 }, |
83 components: { |
85 components: { |
84 'tag-list': TagList |
86 'tag-list': TagList |
85 }, |
87 }, |
86 data() { |
88 data() { |
125 return moment(this.annotation.created).locale('fr').fromNow(); |
127 return moment(this.annotation.created).locale('fr').fromNow(); |
126 } |
128 } |
127 }, |
129 }, |
128 formAction: function() { |
130 formAction: function() { |
129 if (this.annotation) { |
131 if (this.annotation) { |
130 return this.action.replace(':annotation_guid', this.annotation.annotation_guid); |
132 if (this.annotation.annotation_guid) { |
131 } |
133 return this.editAnnotationUrl.replace(':annotation_guid', this.annotation.annotation_guid); |
|
134 } |
|
135 |
|
136 return this.newAnnotationUrl |
|
137 } |
|
138 }, |
|
139 submitButtonText: function() { |
|
140 return this.isNewAnnotation ? 'Enregistrer' : 'Enregister une nouvelle version' |
|
141 }, |
|
142 isNewAnnotation: function() { |
|
143 return this.annotation && !this.annotation.annotation_guid |
132 }, |
144 }, |
133 serializedTags: function() { |
145 serializedTags: function() { |
134 var tags = this.tags.map(function(tag) { |
146 var tags = this.tags.map(function(tag) { |
135 return { |
147 return { |
136 tag_input: (typeof tag.tag_link === "string" && tag.tag_link.length) ? tag.tag_link : tag.tag_label, |
148 tag_input: (typeof tag.tag_link === "string" && tag.tag_link.length) ? tag.tag_link : tag.tag_label, |
149 || this.description !== this.annotation.description |
161 || this.description !== this.annotation.description |
150 || !_.isEqual(this.annotation.tags, this.tags); |
162 || !_.isEqual(this.annotation.tags, this.tags); |
151 } |
163 } |
152 }, |
164 }, |
153 methods: { |
165 methods: { |
|
166 onCancelClick: function() { |
|
167 if (this.isNewAnnotation) { |
|
168 this.$emit('close') |
|
169 } else { |
|
170 this.readonly = !this.readonly |
|
171 } |
|
172 }, |
154 onTagsChange: function(tags) { |
173 onTagsChange: function(tags) { |
155 this.tags = tags; |
174 this.tags = tags; |
156 }, |
175 }, |
157 reset: function() { |
176 reset: function() { |
158 Object.assign(this, defaults); |
177 Object.assign(this, defaults); |
162 Object.assign(this, { |
181 Object.assign(this, { |
163 title: annotation.title, |
182 title: annotation.title, |
164 description: annotation.description, |
183 description: annotation.description, |
165 fragment: annotation.fragment, |
184 fragment: annotation.fragment, |
166 tags: annotation.tags.slice(), |
185 tags: annotation.tags.slice(), |
167 readonly: true, |
186 readonly: !this.isNewAnnotation, |
168 }); |
187 }); |
|
188 |
|
189 if (!annotation.annotation_guid) { |
|
190 setTimeout(() => { |
|
191 $(this.$refs.title).focus() |
|
192 }, 500); |
|
193 } |
169 } |
194 } |
170 } |
195 } |
171 } |
196 } |
172 |
197 |
173 </script> |
198 </script> |