diff -r 1da12bcb9894 -r 55c024fc7c60 src_js/iconolab-bundle/src/components/editor/AnnotationForm.vue
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/src_js/iconolab-bundle/src/components/editor/AnnotationForm.vue	Mon Feb 20 17:29:55 2017 +0100
@@ -0,0 +1,99 @@
+<template>
+    <form v-bind:action="formAction" method="post">
+        <slot>
+            <!-- CSRF token -->
+        </slot>
+        <input type="hidden" name="fragment" v-model="fragment">
+        <div v-if="!annotation" class="alert alert-warning">
+            Aucune annotation sélectionnée.
+        </div>
+        <div v-if="annotation" class="form-group form-group-sm">
+            <label class="control-label">Titre</label>
+            <input type="text" class="form-control" name="title" v-model="title">
+        </div>
+        <div v-if="annotation" class="form-group form-group-sm">
+            <label class="control-label">Description</label>
+            <textarea class="form-control" name="description" v-model="description"></textarea>
+        </div>
+        <div v-if="annotation" class="form-group form-group-sm">
+            <label class="control-label">Mots-clé</label>
+            <tag-list ref="taglist" v-bind:tags="tags" @change="onTagsChange($event.tags)"></tag-list>
+            <input type="hidden" name="tags" v-model="serializedTags">
+        </div>
+        <button type="submit" v-if="annotation" v-bind:class="{ disabled: !hasChanged() }"
+            class="btn btn-block btn-sm btn-primary">Sauvegarder</button>
+    </form>
+</template>
+
+<script>
+
+    import TagList from '../tagform/TagList.vue'
+
+    export default {
+        props: ['action'],
+        components: {
+            'tag-list': TagList
+        },
+        data() {
+            return {
+                'title': '',
+                'description': '',
+                'fragment': '',
+                'tags': [],
+                'annotation': null,
+            }
+        },
+        computed: {
+            formAction: function() {
+                if (this.annotation) {
+                    return this.action.replace(':annotation_guid', this.annotation.annotation_guid);
+                }
+            },
+            serializedTags: function() {
+                var tags = this.tags.map(function(tag) {
+                    return {
+                        tag_input: (typeof tag.tag_link === "string" && tag.tag_link.length) ? tag.tag_link : tag.tag_label,
+                        tag_label: tag.tag_label,
+                        accuracy: tag.accuracy,
+                        relevancy: tag.relevancy
+                    }
+                });
+
+                return JSON.stringify(tags);
+            }
+        },
+        methods: {
+            setAnnotation: function(annotation) {
+                const clone = annotation;
+                this.annotation = clone;
+
+                Object.assign(this, annotation);
+            },
+            onTagsChange: function(tags) {
+                this.tags = tags;
+            },
+            reset: function() {
+                Object.assign(this, {
+                    'title': '',
+                    'description': '',
+                    'tags': [],
+                    'annotation': null
+                });
+            },
+            hasChanged: function() {
+                if (!this.annotation) { return false; }
+
+                return this.title !== this.annotation.title
+                    || this.description !== this.annotation.description
+                    || this.tags !== this.annotation.tags;
+            }
+        }
+    }
+
+</script>
+
+<style scoped>
+form {
+    margin-bottom: 20px;
+}
+</style>