47 </form> |
47 </form> |
48 </div> |
48 </div> |
49 </template> |
49 </template> |
50 |
50 |
51 <script> |
51 <script> |
52 |
52 import TagList from "../tagform/TagList.vue"; |
53 import TagList from '../tagform/TagList.vue' |
53 import _ from "lodash"; |
54 import _ from 'lodash' |
54 import showdown from "showdown"; |
55 import showdown from 'showdown' |
55 import moment from "moment"; |
56 import moment from 'moment' |
56 |
57 |
57 const converter = new showdown.Converter(); |
58 const converter = new showdown.Converter() |
58 |
59 |
59 var defaults = { |
60 var defaults = { |
60 title: "", |
61 title: '', |
61 description: "", |
62 description: '', |
62 fragment: "", |
63 fragment: '', |
63 tags: [], |
64 tags: [], |
64 readonly: true |
65 readonly: true, |
65 }; |
66 } |
66 |
67 |
67 export default { |
68 export default { |
68 props: { |
69 props: { |
69 annotation: { |
70 annotation: { |
70 type: Object, |
71 type: Object, |
71 default: function() { |
72 default: function () { |
72 return null; |
73 return null; |
73 } |
74 } |
74 }, |
75 }, |
75 isAuthenticated: { |
76 isAuthenticated: { |
76 type: Boolean, |
77 type: Boolean, |
77 default: false |
78 default: false |
78 }, |
79 }, |
79 revisionsUrl: String, |
80 revisionsUrl: String, |
80 authorUrl: String, |
81 authorUrl: String, |
81 newAnnotationUrl: String, |
82 newAnnotationUrl: String, |
82 editAnnotationUrl: String |
83 editAnnotationUrl: String |
83 }, |
84 }, |
84 components: { |
85 components: { |
85 "tag-list": TagList |
86 'tag-list': TagList |
86 }, |
87 }, |
87 data() { |
88 data() { |
88 return defaults; |
89 return defaults; |
89 }, |
90 }, |
90 mounted() { |
91 mounted() { |
91 if (this.annotation) { |
92 if (this.annotation) { |
92 this.loadAnnotation(this.annotation); |
93 this.loadAnnotation(this.annotation); |
93 } |
94 } |
94 }, |
95 }, |
95 watch: { |
96 watch: { |
96 annotation: function(annotation) { |
97 annotation: function(annotation) { |
97 if (annotation) { |
98 if (annotation) { |
98 this.loadAnnotation(annotation); |
99 this.loadAnnotation(annotation); |
99 } else { |
100 } else { |
100 this.reset(); |
101 this.reset(); |
101 } |
102 } |
102 } |
103 } |
103 }, |
104 }, |
104 computed: { |
105 computed: { |
105 descriptionComputed: function() { |
106 descriptionComputed: function() { |
106 return converter.makeHtml(this.description); |
107 return converter.makeHtml(this.description); |
107 }, |
108 }, |
108 lastRevisionText: function() { |
109 lastRevisionText: function() { |
109 if (this.annotation) { |
110 if (this.annotation) { |
110 var date = moment(this.annotation.created).locale("fr"); |
111 var date = moment(this.annotation.created).locale('fr'); |
111 return ( |
112 return 'Dernière version ' + date.fromNow() + ' par ' + this.annotation.author; |
112 "Dernière version " + |
113 } |
113 date.fromNow() + |
114 }, |
114 " par " + |
115 revisionsUrlComputed: function() { |
115 this.annotation.author |
116 if (this.annotation) { |
116 ); |
117 return this.revisionsUrl.replace(':annotation_guid', this.annotation.annotation_guid); |
117 } |
118 } |
118 }, |
119 }, |
119 revisionsUrlComputed: function() { |
120 authorUrlComputed: function() { |
120 if (this.annotation) { |
121 if (this.annotation) { |
121 return this.revisionsUrl.replace( |
122 return this.authorUrl.replace('--username--', this.annotation.author); |
122 ":annotation_guid", |
123 } |
123 this.annotation.annotation_guid |
124 }, |
124 ); |
125 dateComputed: function() { |
125 } |
126 if (this.annotation) { |
126 }, |
127 return moment(this.annotation.created).locale('fr').fromNow(); |
127 authorUrlComputed: function() { |
128 } |
128 if (this.annotation) { |
129 }, |
129 return this.authorUrl.replace("--username--", this.annotation.author); |
130 formAction: function() { |
130 } |
131 if (this.annotation) { |
131 }, |
132 if (this.annotation.annotation_guid) { |
132 dateComputed: function() { |
133 return this.editAnnotationUrl.replace(':annotation_guid', this.annotation.annotation_guid); |
133 if (this.annotation) { |
134 } |
134 return moment(this.annotation.created) |
135 |
135 .locale("fr") |
136 return this.newAnnotationUrl |
136 .fromNow(); |
137 } |
137 } |
138 }, |
138 }, |
139 submitButtonText: function() { |
139 formAction: function() { |
140 return this.isNewAnnotation ? 'Enregistrer' : 'Enregister une nouvelle version' |
140 if (this.annotation) { |
141 }, |
141 if (this.annotation.annotation_guid) { |
142 isNewAnnotation: function() { |
142 return this.editAnnotationUrl.replace( |
143 return this.annotation && !this.annotation.annotation_guid |
143 ":annotation_guid", |
144 }, |
144 this.annotation.annotation_guid |
145 serializedTags: function() { |
145 ); |
146 var tags = this.tags.map(function(tag) { |
|
147 return { |
|
148 tag_input: (typeof tag.tag_link === "string" && tag.tag_link.length) ? tag.tag_link : tag.tag_label, |
|
149 tag_label: tag.tag_label, |
|
150 accuracy: tag.accuracy, |
|
151 relevancy: tag.relevancy |
|
152 } |
|
153 }); |
|
154 |
|
155 return JSON.stringify(tags); |
|
156 }, |
|
157 hasChanged: function() { |
|
158 if (!this.annotation) { return false; } |
|
159 |
|
160 return this.title !== this.annotation.title |
|
161 || this.description !== this.annotation.description |
|
162 || !_.isEqual(this.annotation.tags, this.tags); |
|
163 } |
|
164 }, |
|
165 methods: { |
|
166 onCancelClick: function() { |
|
167 if (this.isNewAnnotation) { |
|
168 this.$emit('close') |
|
169 } else { |
|
170 this.readonly = !this.readonly |
|
171 } |
|
172 }, |
|
173 onTagsChange: function(tags) { |
|
174 this.tags = tags; |
|
175 }, |
|
176 reset: function() { |
|
177 Object.assign(this, defaults); |
|
178 }, |
|
179 loadAnnotation(annotation) { |
|
180 // Make sure we have an actual copy |
|
181 Object.assign(this, { |
|
182 title: annotation.title, |
|
183 description: annotation.description, |
|
184 fragment: annotation.fragment, |
|
185 tags: annotation.tags.slice(), |
|
186 readonly: !this.isNewAnnotation, |
|
187 }); |
|
188 |
|
189 if (!annotation.annotation_guid) { |
|
190 setTimeout(() => { |
|
191 $(this.$refs.title).focus() |
|
192 }, 500); |
|
193 } |
|
194 } |
|
195 } |
146 } |
196 } |
147 |
197 |
148 return this.newAnnotationUrl; |
|
149 } |
|
150 }, |
|
151 submitButtonText: function() { |
|
152 return this.isNewAnnotation |
|
153 ? "Enregistrer" |
|
154 : "Enregister une nouvelle version"; |
|
155 }, |
|
156 isNewAnnotation: function() { |
|
157 return this.annotation && !this.annotation.annotation_guid; |
|
158 }, |
|
159 serializedTags: function() { |
|
160 var tags = this.tags.map(function(tag) { |
|
161 return { |
|
162 tag_input: |
|
163 typeof tag.tag_link === "string" && tag.tag_link.length |
|
164 ? tag.tag_link |
|
165 : tag.tag_label, |
|
166 tag_label: tag.tag_label, |
|
167 accuracy: tag.accuracy, |
|
168 relevancy: tag.relevancy |
|
169 }; |
|
170 }); |
|
171 |
|
172 return JSON.stringify(tags); |
|
173 }, |
|
174 hasChanged: function() { |
|
175 if (!this.annotation) { |
|
176 return false; |
|
177 } |
|
178 |
|
179 return ( |
|
180 this.title !== this.annotation.title || |
|
181 this.description !== this.annotation.description || |
|
182 !_.isEqual(this.annotation.tags, this.tags) |
|
183 ); |
|
184 } |
|
185 }, |
|
186 methods: { |
|
187 onCancelClick: function() { |
|
188 if (this.isNewAnnotation) { |
|
189 this.$emit("close"); |
|
190 } else { |
|
191 this.readonly = !this.readonly; |
|
192 } |
|
193 }, |
|
194 onTagsChange: function(tags) { |
|
195 this.tags = tags; |
|
196 }, |
|
197 reset: function() { |
|
198 Object.assign(this, defaults); |
|
199 }, |
|
200 loadAnnotation(annotation) { |
|
201 // Make sure we have an actual copy |
|
202 Object.assign(this, { |
|
203 title: annotation.title, |
|
204 description: annotation.description, |
|
205 fragment: annotation.fragment, |
|
206 tags: annotation.tags.slice(), |
|
207 readonly: !this.isNewAnnotation |
|
208 }); |
|
209 |
|
210 if (!annotation.annotation_guid) { |
|
211 setTimeout(() => { |
|
212 $(this.$refs.title).focus(); |
|
213 }, 500); |
|
214 } |
|
215 } |
|
216 } |
|
217 }; |
198 </script> |
218 </script> |
199 |
219 |
200 <style scoped> |
220 <style scoped> |
201 form { |
221 form { |
202 margin-bottom: 20px; |
222 margin-bottom: 20px; |
203 clear: both; |
223 clear: both; |
204 } |
224 } |
205 |
225 |
206 label { |
226 label { |
207 font-weight: normal; |
227 font-weight: normal; |
208 } |
228 } |