From b7038c1a9cbeef1cec6500609658f138b7dcc8c7 Mon Sep 17 00:00:00 2001
From: Christian Cueni <christian.cueni@iterativ.ch>
Date: Thu, 26 Jan 2023 15:38:20 +0100
Subject: [PATCH] Add open feedback component, update vertical bar chart

---
 client/src/components/ui/OpenFeedback.vue     | 22 +++++++++++++
 client/src/components/ui/VerticalBarChart.vue | 33 +++++++++++++------
 client/src/pages/cockpit/FeedbackPage.vue     | 21 +++++++++---
 server/vbv_lernwelt/feedback/views.py         |  5 +--
 4 files changed, 63 insertions(+), 18 deletions(-)
 create mode 100644 client/src/components/ui/OpenFeedback.vue

diff --git a/client/src/components/ui/OpenFeedback.vue b/client/src/components/ui/OpenFeedback.vue
new file mode 100644
index 00000000..df6a8a08
--- /dev/null
+++ b/client/src/components/ui/OpenFeedback.vue
@@ -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>
diff --git a/client/src/components/ui/VerticalBarChart.vue b/client/src/components/ui/VerticalBarChart.vue
index 4063bb9c..8719ebab 100644
--- a/client/src/components/ui/VerticalBarChart.vue
+++ b/client/src/components/ui/VerticalBarChart.vue
@@ -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,
   };
 });
 
diff --git a/client/src/pages/cockpit/FeedbackPage.vue b/client/src/pages/cockpit/FeedbackPage.vue
index a3a2501d..1c3efb71 100644
--- a/client/src/pages/cockpit/FeedbackPage.vue
+++ b/client/src/pages/cockpit/FeedbackPage.vue
@@ -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({});
 
diff --git a/server/vbv_lernwelt/feedback/views.py b/server/vbv_lernwelt/feedback/views.py
index 63edd568..3e515e03 100644
--- a/server/vbv_lernwelt/feedback/views.py
+++ b/server/vbv_lernwelt/feedback/views.py
@@ -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)