src_js/iconolab-bundle/src/components/editor/Tooltip.vue
changeset 320 81945eedc63f
child 400 c85505149eea
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/src_js/iconolab-bundle/src/components/editor/Tooltip.vue	Wed Feb 15 16:42:06 2017 +0100
@@ -0,0 +1,105 @@
+<template>
+
+    <form>
+        <button @click="close" type="button" class="close" data-dismiss="alert" aria-label="Close">
+            <span aria-hidden="true">&times;</span>
+        </button>
+        <div class="form-group" v-bind:class="titleFormGroup" style="clear: both;">
+            <label class="control-label">Titre</label>
+            <input name="title" v-model="title" type="text" class="form-control input-sm" placeholder="Donnez un titre court">
+        </div>
+        <div class="form-group">
+            <label class="control-label">Description</label>
+            <textarea name="description" v-model="description" class="form-control input-sm" placeholder="Décrivez ce que vous voyez"></textarea>
+        </div>
+        <div class="form-group">
+            <label class="control-label">Mots-clé</label>
+            <tag-list ref="taglist" v-bind:original-tags="originalTags"></tag-list>
+        </div>
+        <button @click="save" class="btn btn-block btn-sm btn-primary">Valider</button>
+    </form>
+
+</template>
+
+<script>
+
+    import TagList from '../tagform/TagList.vue'
+
+    export default {
+        props: [
+            'original-title',
+            'original-description',
+            'original-tags'
+        ],
+        components: {
+            'tag-list': TagList
+        },
+        data() {
+            return {
+                title: '',
+                description: '',
+                tags: [],
+                error: false
+            }
+        },
+        computed: {
+            titleFormGroup: function() {
+                return {
+                    'has-error': this.error
+                }
+            }
+        },
+        mounted() {
+            if (this.originalTitle) {
+                this.title = this.originalTitle;
+            }
+            if (this.originalDescription) {
+                this.description = this.originalDescription;
+            }
+            this.$on('error', (err) => {
+                if (err.title) {
+                    this.error = true;
+                }
+            });
+        },
+        methods: {
+            close: function(e) {
+                e.preventDefault();
+                this.$emit('close');
+            },
+            save: function(e) {
+                e.preventDefault();
+
+                this.error = false;
+                if (this.title.trim().length === 0) {
+                    this.$emit('error', {
+                        title: true
+                    });
+                    return;
+                }
+
+                this.$emit('save', {
+                    title: this.title,
+                    description: this.description,
+                    tags: this.$refs.taglist.tags
+                });
+            }
+        }
+    }
+
+</script>
+
+<style>
+.popover {
+    min-width: 300px;
+}
+.popover-content .form-group {
+    margin-bottom: 10px;
+}
+.popover-content .form-group label {
+    font-size: 12px;
+}
+.popover-content .taglist {
+    margin: 10px 0 15px;
+}
+</style>