fix: visual fixes

client/src/components/selfEvaluationFeedback/FeedbackReceived.vue

@@ -2,6 +2,7 @@
 import { computed } from "vue";
 import {
   type FeedbackRequest,
+  getFeedbackReceivedCaption,
   getSelfEvaluationCaption,
   getSmiley,
 } from "@/services/selfEvaluationFeedback";
@@ -49,7 +50,7 @@ const feedbackProviderName = computed(() => {
       </div>
       <div class="flex items-center justify-start space-x-2 bg-gray-200">
         <component :is="getSmiley(criteria.feedback_assessment)" class="h-6 w-6" />
-        <span>{{ getSelfEvaluationCaption(criteria.feedback_assessment) }}</span>
+        <span>{{ getFeedbackReceivedCaption(criteria.feedback_assessment) }}</span>
       </div>
     </div>
   </div>

client/src/components/ui/ItDropdownSelect.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { DropdownSelectable } from "@/types";
 import { Listbox, ListboxButton, ListboxOption, ListboxOptions } from "@headlessui/vue";
-import { computed } from "vue";
+import { computed } from "vue"; // https://stackoverflow.com/questions/64775876/vue-3-pass-reactive-object-to-component-with-two-way-binding
 
 // https://stackoverflow.com/questions/64775876/vue-3-pass-reactive-object-to-component-with-two-way-binding
 interface Props {
@@ -11,6 +11,7 @@ interface Props {
   };
   items?: DropdownSelectable[];
   borderless?: boolean;
+  placeholderText?: string | null;
 }
 
 const emit = defineEmits<{
@@ -25,6 +26,7 @@ const props = withDefaults(defineProps<Props>(), {
     };
   },
   items: () => [],
+  placeholderText: null,
 });
 
 const dropdownSelected = computed<DropdownSelectable>({
@@ -47,7 +49,12 @@ const dropdownSelected = computed<DropdownSelectable>({
         <span v-if="dropdownSelected.iconName" class="mr-4">
           <component :is="dropdownSelected.iconName"></component>
         </span>
-        <span class="block truncate">{{ dropdownSelected.name }}</span>
+        <span class="block truncate">
+          {{ dropdownSelected.name }}
+          <span v-if="placeholderText && !dropdownSelected.name" class="text-gray-900">
+            {{ placeholderText }}
+          </span>
+        </span>
         <span
           class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2"
         >

client/src/pages/learningPath/selfEvaluationPage/SelfEvaluationRequestFeedback.vue

@@ -91,6 +91,7 @@ const onRequestFeedback = async () => {
             </p>
             <ItDropdownSelect
               v-model="currentSessionRequestedMentor"
+              :placeholder-text="`${$t('a.Lernbegleitung auswählen')}…`"
               class="mt-6 w-80"
               :items="mentors"
             ></ItDropdownSelect>

client/src/services/selfEvaluationFeedback.ts

@@ -150,6 +150,19 @@ export const getSelfEvaluationCaption = (
   }
 };
 
+export const getFeedbackReceivedCaption = (
+  assessment: "FAIL" | "SUCCESS" | "UNKNOWN"
+) => {
+  switch (assessment) {
+    case "SUCCESS":
+      return t("receivedEvaluation.yes");
+    case "FAIL":
+      return t("receivedEvaluation.no");
+    case "UNKNOWN":
+      return t("a.Nicht bewertet");
+  }
+};
+
 export const getFeedbackEvaluationCaption = (
   assessment: "FAIL" | "SUCCESS" | "UNKNOWN",
   requester: User