From 36847175c77163847e97658f39470f9751314ed4 Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Thu, 22 Dec 2022 21:26:00 +0100
Subject: [PATCH] Add custom textarea component

---
 client/src/components/Feedback.vue      | 59 +++++++++++++------------
 client/src/components/ui/ItTextarea.vue | 18 ++++++++
 client/src/pages/StyleGuidePage.vue     |  4 ++
 3 files changed, 52 insertions(+), 29 deletions(-)
 create mode 100644 client/src/components/ui/ItTextarea.vue

diff --git a/client/src/components/Feedback.vue b/client/src/components/Feedback.vue
index 19b1293b..bc687170 100644
--- a/client/src/components/Feedback.vue
+++ b/client/src/components/Feedback.vue
@@ -50,34 +50,32 @@ eLearning)?"
 genommen u. aufgegriffen."
       :items="RATINGS"
     />
-    <div class="mb-8">
-      <p class="mb-4">Was ich dem Kursleiter sonst noch sagen wollte:</p>
-      <textarea
-        v-model="instructorOpenFeedback"
-        rows="4"
-        class="block w-full rounded-md border-gray-300 py-3 px-4 shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
-      />
-    </div>
-    <div class="mb-8">
-      <p class="mb-4">Wo sehen Sie Verbesserungspotenzial?</p>
-      <textarea
-        v-model="courseNegativeFeedback"
-        rows="4"
-        class="block w-full rounded-md border-gray-300 py-3 px-4 shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
-      />
-      <!--      class="block w-full rounded-md border-gray-300 py-3 px-4 shadow-sm focus:border-indigo-500 focus:ring-indigo-500"-->
-    </div>
-    <div class="mb-8">
-      <p class="mb-4">Was hat Ihnen besonders gut gefallen?</p>
-      <textarea
-        v-model="coursePositiveFeedback"
-        rows="4"
-        class="block w-full rounded-md border-gray-300 py-3 px-4 shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
-      />
-      <!--      class="block w-full rounded-md border-gray-300 py-3 px-4 shadow-sm focus:border-indigo-500 focus:ring-indigo-500"-->
-    </div>
-    <button class="btn-blue" @click="sendFeedback">Senden und abschliessen</button>
-    <hr />
+    <ItTextarea
+      v-if="stepNo === 7"
+      v-model="instructorOpenFeedback"
+      :label="instructorOpenFeedbackLabel"
+      class="mb-8"
+    />
+    <ItTextarea
+      v-if="stepNo === 8"
+      v-model="courseNegativeFeedback"
+      :label="courseNegativeFeedbackLabel"
+      class="mb-8"
+    />
+    <ItTextarea
+      v-if="stepNo === 9"
+      v-model="coursePositiveFeedback"
+      :label="coursePositiveFeedbackLabel"
+      class="mb-8"
+    />
+    <!--    <button class="btn-blue" @click="sendFeedback">Senden und abschliessen</button>-->
+    <button class="btn-blue mr-4" :disabled="stepNo <= 0" @click="previousStep">
+      Zurück
+    </button>
+    <button class="btn-blue" :disabled="stepNo >= MAX_STEPS - 1" @click="nextStep">
+      Weiter
+    </button>
+    <hr class="mb-10 mt-10" />
     <pre>
      satisfaction {{ satisfaction }}
      goalAttainment {{ goalAttainment }}
@@ -102,7 +100,7 @@ import {
   YES_NO,
 } from "@/components/learningPath/feedback.constants";
 import ItRadioGroup from "@/components/ui/ItRadioGroup.vue";
-import { COMPLETION_SUCCESS } from "@/constants";
+import ItTextarea from "@/components/ui/ItTextarea.vue";
 import { graphql } from "@/gql/";
 import type { SendFeedbackInput } from "@/gql/graphql";
 import { useCircleStore } from "@/stores/circle";
@@ -112,6 +110,9 @@ import log from "loglevel";
 import { reactive, ref } from "vue";
 
 const { page } = defineProps<{ page: LearningContent }>();
+const instructorOpenFeedbackLabel = "Was ich dem Kursleiter sonst noch sagen wollte:";
+const courseNegativeFeedbackLabel = "Wo sehen Sie Verbesserungspotenzial?";
+const coursePositiveFeedbackLabel = "Was hat Ihnen besonders gut gefallen?";
 
 const sendFeedbackMutation = graphql(`
   mutation SendFeedbackMutation($input: SendFeedbackInput!) {
diff --git a/client/src/components/ui/ItTextarea.vue b/client/src/components/ui/ItTextarea.vue
new file mode 100644
index 00000000..b6bd424d
--- /dev/null
+++ b/client/src/components/ui/ItTextarea.vue
@@ -0,0 +1,18 @@
+<template>
+  <div class="border p-12">
+    <h2 class="text-5xl mb-12 leading-normal font-bold block">{{ label }}</h2>
+    <textarea
+      :value="modelValue"
+      class="w-full border-gray-500 h-40"
+      @input="$emit('update:modelValue', $event.target.value)"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  modelValue: string;
+  label: string;
+}>();
+defineEmits(["update:modelValue"]);
+</script>
diff --git a/client/src/pages/StyleGuidePage.vue b/client/src/pages/StyleGuidePage.vue
index ece569d0..9f458609 100644
--- a/client/src/pages/StyleGuidePage.vue
+++ b/client/src/pages/StyleGuidePage.vue
@@ -6,6 +6,7 @@ import ItCheckboxGroup from "@/components/ui/ItCheckboxGroup.vue";
 import ItDropdown from "@/components/ui/ItDropdown.vue";
 import ItDropdownSelect from "@/components/ui/ItDropdownSelect.vue";
 import ItRadioGroup from "@/components/ui/ItRadioGroup.vue";
+import ItTextarea from "@/components/ui/ItTextarea.vue";
 import logger from "loglevel";
 import { reactive, ref } from "vue";
 
@@ -94,6 +95,8 @@ const sourceItems = [
   },
 ];
 
+const textValue = ref("abc");
+
 function log(data: any) {
   logger.info(data);
 }
@@ -409,6 +412,7 @@ function log(data: any) {
         Click Me
       </ItDropdown>
     </div>
+    <ItTextarea v-model="textValue" label="Hallo Velo" class="mb-8" />
     <ItCheckboxGroup
       v-model="sourceValues"
       :label="sourceLabel"