Newer
Older
Sébastien DA ROCHA
committed
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
<template>
<div v-frag v-if="field.field_type === 'char'">
<label for="field.name">{{ field.label }}</label>
<input
type="text"
:name="field.name"
:id="field.name"
v-model="field.value"
@blur="updateStore_extra_form"
/>
</div>
<div v-frag v-else-if="field.field_type === 'list'">
<label for="field.name">{{ field.label }}</label>
<Dropdown
:options="field.options"
:selected="selected_extra_form_list"
:selection.sync="selected_extra_form_list"
/>
</div>
<div v-frag v-else-if="field.field_type === 'integer'">
<label for="field.name">{{ field.label }}</label>
<div class="ui input">
<!-- //* si click sur fléche dans champ input, pas de focus, donc pas de blur, donc utilisation de @change -->
<input
type="number"
:name="field.name"
:id="field.name"
v-model.number="field.value"
@change="updateStore_extra_form"
/>
</div>
</div>
<div v-frag v-else-if="field.field_type === 'boolean'">
<div class="ui checkbox">
<input
type="checkbox"
:checked="field.value"
:name="field.name"
:id="field.name"
@change="updateStore_extra_form"
/>
<label for="field.name">{{ field.label }}</label>
</div>
</div>
<div v-frag v-else-if="field.field_type === 'date'">
<label for="field.name">{{ field.label }}</label>
<input
type="date"
:name="field.name"
:id="field.name"
v-model="field.value"
@blur="updateStore_extra_form"
/>
</div>
<div v-frag v-else-if="field.field_type === 'decimal'">
<label for="field.name">{{ field.label }}</label>
<div class="ui input">
<input
type="number"
step=".01"
:name="field.name"
:id="field.name"
v-model.number="field.value"
@change="updateStore_extra_form"
/>
</div>
</div>
<div v-frag v-else-if="field.field_type === 'text'">
<label :for="field.name">{{ field.label }}</label>
<textarea
:name="field.name"
rows="3"
v-model="field.value"
@blur="updateStore_extra_form"
></textarea>
</div>
</template>
<script>
import frag from "vue-frag";
import Dropdown from "@/components/Dropdown.vue";
export default {
name: "FeatureExtraForm",
directives: {
frag,
},
components: {
Dropdown,
},
props: ["field"],
computed: {
selected_extra_form_list: {
get() {
return this.field.value || "";
},
set(newValue) {
//* set the value selected in the dropdown
let newExtraForm = this.field;
newExtraForm["value"] = newValue;
this.$store.commit("feature/UPDATE_EXTRA_FORM", newExtraForm);
},
},
},
methods: {
updateStore_extra_form(evt) {
let newExtraForm = this.field;
if (this.field.field_type === "boolean") {
newExtraForm["value"] = evt.target.checked; //* if checkbox use "checked"
} else {
newExtraForm["value"] = evt.target.value;
}
Sébastien DA ROCHA
committed
this.$store.commit("feature/UPDATE_EXTRA_FORM", newExtraForm);
},
},
};
</script>