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>