| author | Alexandre Segura <mex.zktk@gmail.com> |
| Mon, 20 Mar 2017 12:26:06 +0100 | |
| changeset 450 | 8602c254b9eb |
| parent 400 | c85505149eea |
| permissions | -rw-r--r-- |
|
320
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
1 |
<template> |
|
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
2 |
|
|
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
3 |
<form> |
|
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
4 |
<button @click="close" type="button" class="close" data-dismiss="alert" aria-label="Close"> |
|
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
5 |
<span aria-hidden="true">×</span> |
|
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
6 |
</button> |
|
450
8602c254b9eb
Validate form with at least one tag, improve validation.
Alexandre Segura <mex.zktk@gmail.com>
parents:
400
diff
changeset
|
7 |
<div class="form-group" v-bind:class="titleFormGroupClass" style="clear: both;"> |
|
320
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
8 |
<label class="control-label">Titre</label> |
|
450
8602c254b9eb
Validate form with at least one tag, improve validation.
Alexandre Segura <mex.zktk@gmail.com>
parents:
400
diff
changeset
|
9 |
<input name="title" v-model="title" type="text" class="form-control input-sm" placeholder="Donnez un titre court" @input="titleError = false"> |
|
8602c254b9eb
Validate form with at least one tag, improve validation.
Alexandre Segura <mex.zktk@gmail.com>
parents:
400
diff
changeset
|
10 |
<span class="help-block small" v-show="titleError">Vous devez spécifier un titre</span> |
|
320
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
11 |
</div> |
|
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
12 |
<div class="form-group"> |
|
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
13 |
<label class="control-label">Description</label> |
|
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
14 |
<textarea name="description" v-model="description" class="form-control input-sm" placeholder="Décrivez ce que vous voyez"></textarea> |
|
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
15 |
</div> |
|
450
8602c254b9eb
Validate form with at least one tag, improve validation.
Alexandre Segura <mex.zktk@gmail.com>
parents:
400
diff
changeset
|
16 |
<div class="form-group" v-bind:class="tagsFormGroupClass"> |
| 400 | 17 |
<label class="control-label">Mots-clés</label> |
|
450
8602c254b9eb
Validate form with at least one tag, improve validation.
Alexandre Segura <mex.zktk@gmail.com>
parents:
400
diff
changeset
|
18 |
<tag-list ref="taglist" v-bind:original-tags="originalTags" @change="tagsError = false"></tag-list> |
|
8602c254b9eb
Validate form with at least one tag, improve validation.
Alexandre Segura <mex.zktk@gmail.com>
parents:
400
diff
changeset
|
19 |
<span class="help-block small" v-show="tagsError">Vous devez spécifier au moins un mot-clé</span> |
|
320
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
20 |
</div> |
|
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
21 |
<button @click="save" class="btn btn-block btn-sm btn-primary">Valider</button> |
|
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
22 |
</form> |
|
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
23 |
|
|
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
24 |
</template> |
|
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
25 |
|
|
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
26 |
<script> |
|
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
27 |
|
|
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
28 |
import TagList from '../tagform/TagList.vue' |
|
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
29 |
|
|
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
30 |
export default {
|
|
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
31 |
props: [ |
|
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
32 |
'original-title', |
|
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
33 |
'original-description', |
|
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
34 |
'original-tags' |
|
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
35 |
], |
|
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
36 |
components: {
|
|
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
37 |
'tag-list': TagList |
|
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
38 |
}, |
|
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
39 |
data() {
|
|
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
40 |
return {
|
|
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
41 |
title: '', |
|
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
42 |
description: '', |
|
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
43 |
tags: [], |
|
450
8602c254b9eb
Validate form with at least one tag, improve validation.
Alexandre Segura <mex.zktk@gmail.com>
parents:
400
diff
changeset
|
44 |
titleError: false, |
|
8602c254b9eb
Validate form with at least one tag, improve validation.
Alexandre Segura <mex.zktk@gmail.com>
parents:
400
diff
changeset
|
45 |
tagsError: false |
|
320
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
46 |
} |
|
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
47 |
}, |
|
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
48 |
computed: {
|
|
450
8602c254b9eb
Validate form with at least one tag, improve validation.
Alexandre Segura <mex.zktk@gmail.com>
parents:
400
diff
changeset
|
49 |
titleFormGroupClass: function() {
|
|
320
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
50 |
return {
|
|
450
8602c254b9eb
Validate form with at least one tag, improve validation.
Alexandre Segura <mex.zktk@gmail.com>
parents:
400
diff
changeset
|
51 |
'has-error': this.titleError |
|
8602c254b9eb
Validate form with at least one tag, improve validation.
Alexandre Segura <mex.zktk@gmail.com>
parents:
400
diff
changeset
|
52 |
} |
|
8602c254b9eb
Validate form with at least one tag, improve validation.
Alexandre Segura <mex.zktk@gmail.com>
parents:
400
diff
changeset
|
53 |
}, |
|
8602c254b9eb
Validate form with at least one tag, improve validation.
Alexandre Segura <mex.zktk@gmail.com>
parents:
400
diff
changeset
|
54 |
tagsFormGroupClass: function() {
|
|
8602c254b9eb
Validate form with at least one tag, improve validation.
Alexandre Segura <mex.zktk@gmail.com>
parents:
400
diff
changeset
|
55 |
return {
|
|
8602c254b9eb
Validate form with at least one tag, improve validation.
Alexandre Segura <mex.zktk@gmail.com>
parents:
400
diff
changeset
|
56 |
'has-error': this.tagsError |
|
320
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
57 |
} |
|
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
58 |
} |
|
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
59 |
}, |
|
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
60 |
mounted() {
|
|
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
61 |
if (this.originalTitle) {
|
|
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
62 |
this.title = this.originalTitle; |
|
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
63 |
} |
|
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
64 |
if (this.originalDescription) {
|
|
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
65 |
this.description = this.originalDescription; |
|
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
66 |
} |
|
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
67 |
}, |
|
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
68 |
methods: {
|
|
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
69 |
close: function(e) {
|
|
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
70 |
e.preventDefault(); |
|
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
71 |
this.$emit('close');
|
|
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
72 |
}, |
|
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
73 |
save: function(e) {
|
|
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
74 |
e.preventDefault(); |
|
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
75 |
|
|
450
8602c254b9eb
Validate form with at least one tag, improve validation.
Alexandre Segura <mex.zktk@gmail.com>
parents:
400
diff
changeset
|
76 |
Object.assign(this, {
|
|
8602c254b9eb
Validate form with at least one tag, improve validation.
Alexandre Segura <mex.zktk@gmail.com>
parents:
400
diff
changeset
|
77 |
titleError: false, |
|
8602c254b9eb
Validate form with at least one tag, improve validation.
Alexandre Segura <mex.zktk@gmail.com>
parents:
400
diff
changeset
|
78 |
tagsError: false, |
|
8602c254b9eb
Validate form with at least one tag, improve validation.
Alexandre Segura <mex.zktk@gmail.com>
parents:
400
diff
changeset
|
79 |
}); |
|
320
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
80 |
if (this.title.trim().length === 0) {
|
|
450
8602c254b9eb
Validate form with at least one tag, improve validation.
Alexandre Segura <mex.zktk@gmail.com>
parents:
400
diff
changeset
|
81 |
this.titleError = true; |
|
8602c254b9eb
Validate form with at least one tag, improve validation.
Alexandre Segura <mex.zktk@gmail.com>
parents:
400
diff
changeset
|
82 |
} |
|
8602c254b9eb
Validate form with at least one tag, improve validation.
Alexandre Segura <mex.zktk@gmail.com>
parents:
400
diff
changeset
|
83 |
if (this.$refs.taglist.tags.length === 0) {
|
|
8602c254b9eb
Validate form with at least one tag, improve validation.
Alexandre Segura <mex.zktk@gmail.com>
parents:
400
diff
changeset
|
84 |
this.tagsError = true; |
|
8602c254b9eb
Validate form with at least one tag, improve validation.
Alexandre Segura <mex.zktk@gmail.com>
parents:
400
diff
changeset
|
85 |
} |
|
8602c254b9eb
Validate form with at least one tag, improve validation.
Alexandre Segura <mex.zktk@gmail.com>
parents:
400
diff
changeset
|
86 |
if (this.titleError || this.tagsError) {
|
|
320
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
87 |
return; |
|
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
88 |
} |
|
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
89 |
|
|
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
90 |
this.$emit('save', {
|
|
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
91 |
title: this.title, |
|
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
92 |
description: this.description, |
|
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
93 |
tags: this.$refs.taglist.tags |
|
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
94 |
}); |
|
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
95 |
} |
|
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
96 |
} |
|
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
97 |
} |
|
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
98 |
|
|
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
99 |
</script> |
|
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
100 |
|
|
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
101 |
<style> |
|
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
102 |
.popover {
|
|
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
103 |
min-width: 300px; |
|
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
104 |
} |
|
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
105 |
.popover-content .form-group {
|
|
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
106 |
margin-bottom: 10px; |
|
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
107 |
} |
|
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
108 |
.popover-content .form-group label {
|
|
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
109 |
font-size: 12px; |
|
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
110 |
} |
|
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
111 |
.popover-content .taglist {
|
|
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
112 |
margin: 10px 0 15px; |
|
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
113 |
} |
|
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
114 |
</style> |