Add new input elements to feedback form
This commit is contained in:
parent
425c91ff6b
commit
be0a53c16d
|
|
@ -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>
|
||||
<ItCheckbox />
|
||||
<ItRadioGroup v-model="satisfaction" label="Zufriedenheit insgesamt" :items="ratings"/>
|
||||
<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">
|
||||
<RadioGroupLabel>Motivation</RadioGroupLabel>
|
||||
<div class="flex flex-row justify-around">
|
||||
<RadioGroupOption
|
||||
v-for="motivation in motivations"
|
||||
:key="motivation.id"
|
||||
v-slot="{ checked }"
|
||||
:value="motivation.id"
|
||||
>
|
||||
<div :class="checked ? 'bg-blue-200' : ''">
|
||||
<RadioGroupLabel>
|
||||
{{ motivation.name }}
|
||||
</RadioGroupLabel>
|
||||
</div>
|
||||
</RadioGroupOption>
|
||||
</div>
|
||||
</RadioGroup>
|
||||
<ItRadioGroup label="Motivation" v-model="selected" :items="motivations"/>
|
||||
<ItRadioGroup v-model="materialsReceived" label="Haben Sie Vorbereitungsunterlagen (z.B. eLearning) erhalten?" :items="yesNo" />
|
||||
<ItRadioGroup v-model="materialsRating" label="Falls ja: Wie beurteilen Sie die Vorbereitungsunterlagen (z.B.
|
||||
eLearning)?" :items="ratings" />
|
||||
<ItRadioGroup v-model="instructorCompetence" label="Der Kursleiter war themenstark, fachkompetent." :items="ratings" />
|
||||
<ItRadioGroup v-model="instructorRespect" label="Fragen und Anregungen der Kursteilnehmenden wurden ernst
|
||||
genommen u. aufgegriffen." :items="ratings" />
|
||||
<ItRadioGroup v-model="howDiscovered" label="Wie sind Sie auf das Kursangebot aufmerksam geworden?" :items="discoveryReasons" />
|
||||
<h3>Motivation</h3>
|
||||
<ItCheckbox /> Persönliches Interesse
|
||||
<ItCheckbox /> Berufliches Interesse
|
||||
<ItCheckbox /> Pflichtkurs
|
||||
<ItCheckbox /> Andere Gründe
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import ItCheckbox from "@/components/ui/ItCheckbox.vue";
|
||||
import {
|
||||
RadioGroup,
|
||||
RadioGroupDescription,
|
||||
RadioGroupLabel,
|
||||
RadioGroupOption,
|
||||
} from "@headlessui/vue";
|
||||
import { ref } from "vue";
|
||||
import ItCheckbox from '@/components/ui/ItCheckbox.vue';
|
||||
import {ref} from 'vue';
|
||||
import ItRadioGroup from '@/components/ui/ItRadioGroup.vue';
|
||||
|
||||
const motivations = [
|
||||
{
|
||||
name: "Work",
|
||||
id: 1,
|
||||
},
|
||||
{
|
||||
name: "Fun",
|
||||
id: 2,
|
||||
},
|
||||
];
|
||||
const discoveryReasons = [
|
||||
{
|
||||
name: 'Internet',
|
||||
id: 'I'
|
||||
},
|
||||
{
|
||||
name: 'Prospekt',
|
||||
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 satisfaction = ref(0);
|
||||
const recommend = ref(true);
|
||||
const selected = ref(null);
|
||||
const satisfaction = ref(null);
|
||||
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>
|
||||
|
|
|
|||
|
|
@ -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-unchecked.svg\')] hover:bg-[url(\'/static/icons/icon-checkbox-unchecked-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)]'
|
||||
"
|
||||
tabindex="0"
|
||||
@keydown.stop="keydown"
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
Loading…
Reference in New Issue