Add new input elements to feedback form

client/src/components/Feedback.vue

@@ -2,56 +2,140 @@
   <div>
     <h1>Feedback</h1>
     <div>
-      <h1>Motivation</h1>
       <p>Würden Sie den Kurs weiterempfehlen?</p>
-      <ItCheckbox :checked="recommend" @toggle="recommend = !recommend" />
+      <ItCheckbox :checked="recommend" @toggle="recommend = !recommend"/>
     </div>
     <div>
-      <h2>Zufriedenheit insgesamt</h2>
+      <ItRadioGroup v-model="satisfaction" label="Zufriedenheit insgesamt" :items="ratings"/>
-      <ItCheckbox />
+      <ItRadioGroup v-model="goalAttainment" label="Zielerreichung insgesamt" :items="ratings"/>
+      <ItRadioGroup v-model="proficiency"
+                    label="Wie beurteilen Sie Ihre Sicherheit bezüglichen den Themen nach dem Kurs?"
+                    :items="percentages"/>
     </div>
-    <RadioGroup v-model="selected">
+    <ItRadioGroup label="Motivation" v-model="selected" :items="motivations"/>
-      <RadioGroupLabel>Motivation</RadioGroupLabel>
+    <ItRadioGroup v-model="materialsReceived" label="Haben Sie Vorbereitungsunterlagen (z.B. eLearning) erhalten?" :items="yesNo" />
-      <div class="flex flex-row justify-around">
+    <ItRadioGroup v-model="materialsRating" label="Falls ja: Wie beurteilen Sie die Vorbereitungsunterlagen (z.B.
-        <RadioGroupOption
+eLearning)?" :items="ratings" />
-          v-for="motivation in motivations"
+    <ItRadioGroup v-model="instructorCompetence" label="Der Kursleiter war themenstark, fachkompetent." :items="ratings" />
-          :key="motivation.id"
+    <ItRadioGroup v-model="instructorRespect" label="Fragen und Anregungen der Kursteilnehmenden wurden ernst
-          v-slot="{ checked }"
+genommen u. aufgegriffen." :items="ratings" />
-          :value="motivation.id"
+    <ItRadioGroup v-model="howDiscovered" label="Wie sind Sie auf das Kursangebot aufmerksam geworden?" :items="discoveryReasons" />
-        >
+    <h3>Motivation</h3>
-          <div :class="checked ? 'bg-blue-200' : ''">
+    <ItCheckbox /> Persönliches Interesse
-            <RadioGroupLabel>
+    <ItCheckbox /> Berufliches Interesse
-              {{ motivation.name }}
+    <ItCheckbox /> Pflichtkurs
-            </RadioGroupLabel>
+    <ItCheckbox /> Andere Gründe
-          </div>
-        </RadioGroupOption>
-      </div>
-    </RadioGroup>
   </div>
 </template>
 
 <script setup>
-import ItCheckbox from "@/components/ui/ItCheckbox.vue";
+  import ItCheckbox from '@/components/ui/ItCheckbox.vue';
-import {
+  import {ref} from 'vue';
-  RadioGroup,
+  import ItRadioGroup from '@/components/ui/ItRadioGroup.vue';
-  RadioGroupDescription,
-  RadioGroupLabel,
-  RadioGroupOption,
-} from "@headlessui/vue";
-import { ref } from "vue";
 
-const motivations = [
+  const discoveryReasons = [
-  {
+    {
-    name: "Work",
+      name: 'Internet',
-    id: 1,
+      id: 'I'
-  },
+    },
-  {
+    {
-    name: "Fun",
+      name: 'Prospekt',
-    id: 2,
+      id: 'L'
-  },
+    },
-];
+    {
+      name: 'Zeitung',
+      id: 'N'
+    },
+    {
+      name: 'Persönliche Empfehlung',
+      id: 'R'
+    },
+    {
+      name: 'Öffentliche Veranstaltung',
+      id: 'E'
+    },
+    {
+      name: 'Andere',
+      id: 'O'
+    },
+  ];
+  const yesNo = [
+    {
+      name: 'Ja',
+      id: true
+    },
+    {
+      name: 'Nein',
+      id: false
+    },
+  ];
+  const ratings = [
+    {
+      name: 'sehr unzufrieden',
+      id: 1,
+    },
+    {
+      name: 'unzufrieden',
+      id: 2,
+    },
+    {
+      name: 'zufrieden',
+      id: 3,
+    },
+    {
+      name: 'sehr zufrieden',
+      id: 4,
+    },
+  ];
+  const percentages = [
+    {
+      name: '20%',
+      id: 20,
+    },
+    {
+      name: '40%',
+      id: 40,
+    },
+    {
+      name: '60%',
+      id: 60,
+    },
+    {
+      name: '80%',
+      id: 80,
+    },
+    {
+      name: '100%',
+      id: 100,
+    },
+  ];
+  const motivations = [
+    {
+      name: 'Persönliches Interesse',
+      id: 1,
+    },
+    {
+      name: 'Berufliches Interesse',
+      id: 2,
+    },
+    {
+      name: 'Pflichtkurs',
+      id: 3,
+    },
+    {
+      name: 'Andere Gründe',
+      id: 4,
+    },
+  ];
 
-const selected = ref(motivations[0]);
+  const selected = ref(null);
-const satisfaction = ref(0);
+  const satisfaction = ref(null);
-const recommend = ref(true);
+  const goalAttainment = ref(null);
+  const recommend = ref(true);
+  const proficiency = ref(null);
+  const materialsReceived = ref(null);
+  const materialsRating = ref(null);
+  const instructorCompetence = ref(null);
+  const instructorRespect = ref(null);
+  const howDiscovered = ref(null);
 </script>

client/src/components/ui/ItCheckbox.vue

@@ -39,8 +39,8 @@ const input = (e: Event) => {
       class="w-8 h-8 block flex-none bg-contain disabled:opacity-50 cy-checkbox cy-checkbox-checked"
       :class="
         checked
-          ? 'bg-[url(\'/static/icons/icon-checkbox-checked.svg\')] hover:bg-[url(\'/static/icons/icon-checkbox-checked-hover.svg\')]'
+          ? 'bg-[url(/static/icons/icon-checkbox-checked.svg)] hover:bg-[url(/static/icons/icon-checkbox-checked-hover.svg)]'
-          : 'bg-[url(\'/static/icons/icon-checkbox-unchecked.svg\')] hover:bg-[url(\'/static/icons/icon-checkbox-unchecked-hover.svg\')]'
+          : 'bg-[url(/static/icons/icon-checkbox-unchecked.svg)] hover:bg-[url(/static/icons/icon-checkbox-unchecked-hover.svg)]'
       "
       tabindex="0"
       @keydown.stop="keydown"

client/src/components/ui/ItRadioGroup.vue

@@ -0,0 +1,46 @@
+<template>
+  <RadioGroup :model-value="modelValue" @update:modelValue="$emit('update:modelValue', $event)"
+              class="mt-2 flex flex-row justify-between">
+    <RadioGroupLabel>{{ label }}</RadioGroupLabel>
+    <div class="flex justify-items-center space-x-4">
+      <RadioGroupOption
+        as="template"
+        v-for="item in items"
+        :key="item.id"
+        v-slot="{ checked, active }"
+        :value="item.id"
+      >
+        <div class="" :class="[
+            checked ? 'bg-blue-600 border-transparent text-white hover:bg-indigo-700' : 'bg-white border-gray-200 text-gray-900 hover:bg-gray-50',
+            active ? 'ring ring-offset-2 ring-indigo-500' : '',
+            'cursor-pointer focus:outline-none border rounded-md py-3 px-3 flex items-center justify-center text-sm font-medium uppercase']">
+          <RadioGroupLabel as="span">
+            {{ item.name }}
+          </RadioGroupLabel>
+        </div>
+      </RadioGroupOption>
+    </div>
+  </RadioGroup>
+
+</template>
+
+<script setup lang="ts">
+  interface RadioItem {
+    id: string;
+    name: string;
+  }
+
+  import {
+    RadioGroup,
+    RadioGroupDescription,
+    RadioGroupLabel,
+    RadioGroupOption,
+  } from "@headlessui/vue";
+
+  const props = defineProps<{
+    modelValue: any,
+    items: RadioItem[],
+    label: string
+  }>();
+  defineEmits(['update:modelValue']);
+</script>