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
114
115
116
|
<template>
<q-page class="row q-pa-md q-gutter-md column">
<q-card v-for="(form, index) in forms" :key="index">
<q-card-section>
<div>
{{ form.prompt }}
</div>
<div>
{{ form.type }}
</div>
<div v-if="form.type == 'multiple_select'">
<ul>
<li v-for="item in form.extra" :key="item.id">
{{ item.id }}
</li>
<li>
<q-form @submit.prevent="form.new_choice" class="row">
<q-input
label="New choice" type="text"
class="col-10"
v-model="form.new_choice_value"
></q-input>
<q-btn label="Submit" type="submit" color="primary"/>
</q-form>
</li>
</ul>
</div>
<div v-if="form.type == 'range'">
<div>min: {{ form.extra.min }}</div>
<div>max: {{ form.extra.max }}</div>
</div>
</q-card-section>
</q-card>
<q-card>
<q-card-section>
<p>New form</p>
<q-form class="row" @submit.prevent="submit_new_form">
<q-select
label="Type"
class="col-12"
:options="options"
v-model="new_form_data.type"
></q-select>
<q-input
label="Prompt" type="text"
class="col-12"
v-model="new_form_data.prompt"
></q-input>
<q-input
label="Prompt Id" type="text"
class="col-12"
v-model="new_form_data.prompt_id"
></q-input>
<q-input v-if="new_form_data.type == 'range'"
label="Min" type="number" class="col-12"
v-model="new_form_data.extra.min"
></q-input>
<q-input v-if="new_form_data.type == 'range'"
label="Max" type="number" class="col-12"
v-model="new_form_data.extra.max"
></q-input>
<q-btn label="Submit" type="submit" color="primary"/>
</q-form>
</q-card-section>
</q-card>
</q-page>
</template>
<script>
import { defineComponent, ref } from 'vue'
import {
get_forms,
create_option,
create_form,
} from '../api.js'
export default defineComponent({
name: 'FormPage',
setup(){
let forms = ref([])
get_forms().then(json => {
forms.value = json
forms.value.forEach(form => {
form.new_choice_value = ""
form.new_choice = function(){
create_option(form, form.new_choice_value)
}
})
})
let new_form_data = ref({
"extra": {},
})
return {
forms,
options: [
"multiple_select",
"number",
"range",
"text",
],
new_form_data,
submit_new_form(){
if(new_form_data.value.type && new_form_data.value.prompt && new_form_data.value.prompt_id){
if(new_form_data.value.type == 'range' && new_form_data.value.extra.min && new_form_data.value.extra.max) {
console.log(new_form_data.value)
create_form(new_form_data.value)
} else if (new_form_data.value.type != 'range'){
new_form_data.value.extra = []
create_form(new_form_data.value)
}
}
},
}
}
})
</script>
|
