ramon
/
vbv
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add open feedback component, update vertical bar chart

This commit is contained in:
Christian Cueni 2023-01-26 15:38:20 +01:00
parent 956970ce5f
commit b7038c1a9c
4 changed files with 63 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
client/src/components/ui/OpenFeedback.vue Normal file
View File

@ -0,0 +1,22 @@
<template>
<QuestionSummary :title="props.title" :text="props.text">
<h5 class="mb-8 text-base">{{ answers.length }} {{ $t("feedback.answers") }}</h5>
<ol>
<li v-for="answer of props.answers" :key="answer" class="mb-2 last:mb-0">
<p>{{ answer }}</p>
</li>
</ol>
</QuestionSummary>
</template>
<script setup lang="ts">
import QuestionSummary from "@/components/ui/QuestionSummary.vue";
const props = defineProps<{
answers: string[];
title: string;
text: string;
}>();
</script>
<style lang="postcss" scoped></style>

33
client/src/components/ui/VerticalBarChart.vue
View File

@ -1,6 +1,6 @@
<template>
<QuestionSummary :title="props.title" :text="props.text">
<h5 class="text-base mb-6">{{ answers }} {{ $t("feedback.answers") }}</h5>
<h5 class="mb-6 text-base">{{ answers }} {{ $t("feedback.answers") }}</h5>
<div
class="grid grid-cols-horizontal-bar-chart-slim grid-rows-horizontal-bar-chart overflow-hidden pt-[10px] grid-areas-horizontal-bar-chart md:grid-cols-horizontal-bar-chart"
>
@ -33,10 +33,14 @@
{{ $t("general.no") }}
</PopoverButton>
<PopoverPanel
class="absolute top-[-200%] font-normal z-10 w-[120px] border border-gray-500 bg-white p-1 text-left text-sm"
class="absolute top-[-200%] z-10 w-[120px] border border-gray-500 bg-white p-1 text-left text-sm font-normal"
>
<p>
{{ `"${$t('general.no')}" ${numberOfRatings["no"]} ${$t("feedback.answers")}` }}
{{
`"${$t("general.no")}" ${numberOfRatings["no"]} ${$t(
"feedback.answers"
)}`
}}
</p>
</PopoverPanel>
</Popover>
@ -47,10 +51,14 @@
{{ $t("general.yes") }}
</PopoverButton>
<PopoverPanel
class="absolute top-[-200%] font-normal z-10 w-[120px] border border-gray-500 bg-white p-1 text-left text-sm"
class="absolute top-[-200%] z-10 w-[120px] border border-gray-500 bg-white p-1 text-left text-sm font-normal"
>
<p>
{{ `"${$t('general.yes')}" ${numberOfRatings["yes"]} ${$t("feedback.answers")}` }}
{{
`"${$t("general.yes")}" ${numberOfRatings["yes"]} ${$t(
"feedback.answers"
)}`
}}
</p>
</PopoverPanel>
</Popover>
@ -60,18 +68,23 @@
</template>
<script setup lang="ts">
import { Popover, PopoverButton, PopoverPanel } from "@headlessui/vue";
import QuestionSummary from "@/components/ui/QuestionSummary.vue";
import { Popover, PopoverButton, PopoverPanel } from "@headlessui/vue";
import { computed } from "vue";
const props = defineProps<{
ratio: number;
ratings: boolean[];
title: string;
text: string;
}>();
const positiveAnswers = computed(() => props.ratings.filter((rating) => rating));
const negtiveAnswers = computed(() => props.ratings.filter((rating) => !rating));
const ratio = computed(() => {
return Math.min(props.ratio, 1);
const ratio =
positiveAnswers.value.length /
(positiveAnswers.value.length + negtiveAnswers.value.length);
return Math.min(ratio, 1);
});
const redHeight = computed(() => {
@ -84,8 +97,8 @@ const answers = computed(() => {
const numberOfRatings = computed(() => {
return {
yes: props.ratings.filter((rating) => rating).length,
no: props.ratings.filter((rating) => !rating).length,
yes: positiveAnswers.value.length,
no: negtiveAnswers.value.length,
};
});

21
client/src/pages/cockpit/FeedbackPage.vue
View File

@ -20,19 +20,26 @@
<li v-for="(question, i) in orderedQuestions">
<RatingScale
v-if="ratingKeys.includes(question.key)"
class="bg-white mb-8"
class="mb-8 bg-white"
:ratings="feedbackData.questions[question.key]"
:title="`${$t('feedback.questionTitle')} ${i}`"
:title="`${$t('feedback.questionTitle')} ${i + 1}`"
:text="question.question"
/>
<VerticalBarChart
class="bg-white mb-8"
class="mb-8 bg-white"
v-else-if="verticalChartKyes.includes(question.key)"
:title="`${$t('feedback.questionTitle')} ${i}`"
:title="`${$t('feedback.questionTitle')} ${i + 1}`"
:ratings="feedbackData.questions[question.key]"
:text="question.question"
:ratio="0.2"
/>
<OpenFeedback
class="mb-8 bg-white"
v-if="openKeys.includes(question.key)"
:title="`${$t('feedback.questionTitle')} ${i + 1}`"
:text="question.question"
:answers="feedbackData.questions[question.key].filter((a) => a !== '')"
></OpenFeedback>
<!-- HorizontalBarChart
v-else
:title="`${$t('feedback.questionTitle')} ${i}`"
@ -47,6 +54,7 @@
<script setup lang="ts">
import HorizontalBarChart from "@/components/ui/HorizontalBarChart.vue";
import OpenFeedback from "@/components/ui/OpenFeedback.vue";
import RatingScale from "@/components/ui/RatingScale.vue";
import VerticalBarChart from "@/components/ui/VerticalBarChart.vue";
import { itGet } from "@/fetchHelpers";
@ -120,6 +128,11 @@ const ratingKeys = [
"instructor_respect",
];
const verticalChartKyes = ["received_materials", "would_recommend"];
const openKeys = [
"course_negative_feedback",
"course_positive_feedback",
"instructor_open_feedback",
];
const feedbackData = reactive({});

5
server/vbv_lernwelt/feedback/views.py
View File

@ -52,10 +52,7 @@ def get_feedback_for_circle(request, course_id, circle_id):
)
# I guess this is ok for the üK case
feedback_data = {
"amount": len(feedbacks),
"questions": {}
}
feedback_data = {"amount": len(feedbacks), "questions": {}}
if feedback_data["amount"] == 0:
return Response(status=200, data=feedback_data)