aboutsummaryrefslogtreecommitdiff
path: root/src/pages/FormPage.vue
diff options
context:
space:
mode:
Diffstat (limited to 'src/pages/FormPage.vue')
-rw-r--r--src/pages/FormPage.vue116
1 files changed, 116 insertions, 0 deletions
diff --git a/src/pages/FormPage.vue b/src/pages/FormPage.vue
new file mode 100644
index 0000000..c3040e2
--- /dev/null
+++ b/src/pages/FormPage.vue
@@ -0,0 +1,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>