Collect all information on survey to submit on backend

Author: thecodeholic

vue/src/components/viewer/QuestionViewer.vue

@@ -11,9 +11,12 @@
  <div class="mt-3">
  <div v-if="question.type === 'select'">
  <select
+ :value="modelValue"
+ @change="emits('update:modelValue', $event.target.value)"
  class="mt-1 block w-full py-2 px-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
  >
- <option v-for="option in question.data.options" :key="option.uuid">
+ <option value="">Please Select</option>
+ <option v-for="option in question.data.options" :key="option.uuid" :value="option.text">
  {{ option.text }}
  </option>
  </select>
@@ -27,6 +30,8 @@
  <input
  :id="option.uuid"
  :name="'question' + question.id"
+ :value="option.text"
+ @change="emits('update:modelValue', $event.target.value)"
  type="radio"
  class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300"
  />
@@ -46,6 +51,8 @@
  >
  <input
  :id="option.uuid"
+ v-model="model[option.text]"
+ @change="onCheckboxChange"
  type="checkbox"
  class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
  />
@@ -60,34 +67,50 @@
  <div v-else-if="question.type === 'text'">
  <input
  type="text"
+ :value="modelValue"
+ @input="emits('update:modelValue', $event.target.value)"
  class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md"
  />
  </div>
  <div v-else-if="question.type === 'textarea'">
  <textarea
- :value="value"
- @change="emits('input', $event.target.value)"
+ :value="modelValue"
+ @input="emits('update:modelValue', $event.target.value)"
  class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md"
  ></textarea>
  </div>
- <pre>{{value}}</pre>
  </div>
  </fieldset>
  <hr class="mb-4" />
 </template>
 
 <script setup>
-
-const { question, index, value } = defineProps({
+import { ref } from "vue";
+const { question, index, modelValue } = defineProps({
  question: Object,
  index: Number,
- value: String
+ modelValue: [String, Array],
 });
-const emits = defineEmits(['input', 'update']);
+const emits = defineEmits(["update:modelValue"]);
+
+let model;
+if (question.type === "checkbox") {
+ model = ref({});
+}
 
 function shouldHaveOptions() {
  return ["select", "radio", "checkbox"].includes(question.type);
 }
+
+function onCheckboxChange($event) {
+ const selectedOptions = [];
+ for (let uuid in model.value) {
+ if (model.value[uuid]) {
+ selectedOptions.push(uuid);
+ }
+ }
+ emits("update:modelValue", selectedOptions);
+}
 </script>
 
 <style></style>

vue/src/views/SurveyPublicView.vue

@@ -10,10 +10,8 @@
  <h1 class="text-3xl">{{ survey.title }}</h1>
  </div>
  </div>
- <pre>{{ model }}</pre>
  <div v-for="(question, ind) of survey.questions" :key="question.id">
-
- <QuestionViewer v-model="model.questions[question.id]" :question="question" :index="ind" />
+ <QuestionViewer v-model="questions[question.id]" :question="question" :index="ind" />
  </div>
 
  <button
@@ -37,21 +35,12 @@ const store = useStore();
 const loading = computed(() => store.state.currentSurvey.loading);
 const survey = computed(() => store.state.currentSurvey.data);
 
-const defaultValue = {
- questions: {},
-};
-console.log(survey.value.questions);
-if (survey.value.questions) {
- for (let question of survey.value.questions) {
- defaultValue.questions[question.id] = ''
- }
-}
-const model = ref(defaultValue);
+const questions = ref({});
 
 store.dispatch("getSurveyBySlug", route.params.slug);
 
 function submitSurvey() {
- console.log(JSON.stringify(model, undefined, 2));
+ console.log(JSON.stringify(questions.value, undefined, 2));
 }
 </script>