feat: self evaluation feedback front-end

client/src/components/selfEvaluationFeedback/FeedbackProvided.vue

@@ -0,0 +1,79 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import {
+  type FeedbackRequest,
+  getFeedbackEvaluationCaption,
+  getSelfEvaluationCaption,
+  getSmiley,
+} from "@/services/selfEvaluationFeedback";
+
+const props = defineProps<{
+  feedback: FeedbackRequest;
+}>();
+
+const feedbackRequesterAvatar = computed(() => {
+  return props.feedback.feedback_requester_user.avatar_url;
+});
+
+const feedbackRequesterName = computed(() => {
+  return `${props.feedback.feedback_requester_user.first_name} ${props.feedback.feedback_requester_user.last_name}`;
+});
+</script>
+
+<template>
+  <div
+    v-for="(criteria, index) in props.feedback.criteria"
+    :key="criteria.course_completion_id"
+    class="pb-10"
+  >
+    <span>{{ criteria.title }}</span>
+    <div class="mt-3 grid grid-cols-2 border-2 border-gray-200">
+      <!-- Feedback requester assessment -->
+      <div class="flex h-12 items-center pl-4">
+        <b>
+          {{
+            $t("a.Selbsteinschätzung von FEEDBACK_REQUESTER_NAME", {
+              FEEDBACK_REQUESTER_NAME: feedbackRequesterName,
+            })
+          }}
+        </b>
+        <img class="ml-2 h-7 w-7 rounded-full" :src="feedbackRequesterAvatar" />
+      </div>
+      <div class="flex items-center justify-start space-x-2 bg-white">
+        <component :is="getSmiley(criteria.self_assessment)" class="h-6 w-6" />
+        <span>{{ getSelfEvaluationCaption(criteria.self_assessment) }}</span>
+      </div>
+
+      <!-- Feedback provider assessment -->
+      <div class="flex h-12 items-center bg-gray-200 pl-4">
+        <b>{{ $t("a.Deine Fremdeinschätzung") }}</b>
+      </div>
+      <div class="flex items-center justify-between bg-gray-200">
+        <div class="flex justify-start space-x-2">
+          <component :is="getSmiley(criteria.feedback_assessment)" class="h-6 w-6" />
+          <span>
+            {{
+              getFeedbackEvaluationCaption(
+                criteria.feedback_assessment,
+                feedback.feedback_requester_user
+              )
+            }}
+          </span>
+        </div>
+        <router-link
+          v-if="!feedback.feedback_submitted"
+          :to="{
+            name: 'mentorSelfEvaluationFeedback',
+            params: { learningUnitId: feedback.learning_unit_id },
+            query: { step: index },
+          }"
+          class="mr-4 underline"
+        >
+          {{ $t("a.Bearbeiten") }}
+        </router-link>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped></style>

client/src/components/selfEvaluationFeedback/FeedbackProviderRankCriteria.vue

@@ -1,5 +1,8 @@
 <script setup lang="ts">
-import type { Criterion } from "@/services/selfEvaluationFeedback";
+import {
+  type Criterion,
+  getFeedbackEvaluationCaption,
+} from "@/services/selfEvaluationFeedback";
 import type { User } from "@/types";
 import { computed } from "vue";
 
@@ -45,11 +48,7 @@ const onFailed = () => {
     >
       <it-icon-smiley-happy class="mr-4 h-16 w-16"></it-icon-smiley-happy>
       <span class="text-lg font-bold">
-        {{
-          $t("a.Ja, NAME kann das.", {
-            NAME: requester.first_name,
-          })
-        }}
+        {{ getFeedbackEvaluationCaption("SUCCESS", requester) }}
       </span>
     </button>
     <button
@@ -59,11 +58,7 @@ const onFailed = () => {
     >
       <it-icon-smiley-thinking class="mr-4 h-16 w-16"></it-icon-smiley-thinking>
       <span class="text-lg font-bold">
-        {{
-          $t("a.Nein, NAME muss das nochmals anschauen.", {
-            NAME: requester.first_name,
-          })
-        }}
+        {{ getFeedbackEvaluationCaption("FAIL", requester) }}
       </span>
     </button>
   </div>

client/src/components/selfEvaluationFeedback/FeedbackProviderReleaseOverview.vue

@@ -1,5 +1,7 @@
 <script setup lang="ts">
 import type { FeedbackRequest } from "@/services/selfEvaluationFeedback";
+import FeedbackProvided from "@/components/selfEvaluationFeedback/FeedbackProvided.vue";
+import ItButton from "@/components/ui/ItButton.vue";
 
 defineProps<{
   feedback: FeedbackRequest;
@@ -9,12 +11,34 @@ const emit = defineEmits(["release"]);
 </script>
 
 <template>
-  <button
-    v-if="!feedback.feedback_submitted"
-    class="inline-flex flex-1 items-center border-2 p-4 text-left"
-    @click="emit('release')"
-  />
-  <span v-else>Freigeben</span>
+  <div class="mb-12 mt-12 space-y-5 border-2 border-gray-200 p-7">
+    <div class="text text-bold text-xl">{{ $t("a.Fremdeinschätzung freigeben") }}</div>
+    <div>
+      {{
+        $t(
+          "a.Überprüfe deine Eingaben unten und gib anschliessend deine Fremdeinschätzung für FEEDBACK_REQUESTER frei",
+          {
+            FEEDBACK_REQUESTER: feedback.feedback_requester_user.first_name,
+          }
+        )
+      }}
+    </div>
+    <ItButton
+      v-if="!feedback.feedback_submitted"
+      variant="primary"
+      size="large"
+      @click="emit('release')"
+    >
+      {{ $t("a.Fremdeinschätzung freigeben") }}
+    </ItButton>
+    <div v-else class="flex space-x-2 bg-green-200 p-4">
+      <it-icon-check class="it-icon h-6 w-6 text-green-700" />
+      <div>
+        {{ $t("a.Du hast deine Fremdeinschätzung freigegeben") }}
+      </div>
+    </div>
+  </div>
+  <FeedbackProvided :feedback="feedback" />
 </template>
 
 <style scoped></style>

client/src/components/selfEvaluationFeedback/FeedbackReceived.vue

@@ -1,14 +1,15 @@
 <script setup lang="ts">
 import { computed } from "vue";
-import type { FeedbackRequest } from "@/services/selfEvaluationFeedback";
-import { t } from "i18next";
+import {
+  type FeedbackRequest,
+  getSelfEvaluationCaption,
+  getSmiley,
+} from "@/services/selfEvaluationFeedback";
 
 const props = defineProps<{
   feedback: FeedbackRequest;
 }>();
 
-console.log(props.feedback);
-
 const feedbackProviderAvatar = computed(() => {
   return props.feedback.feedback_provider_user.avatar_url;
 });
@@ -16,28 +17,6 @@ const feedbackProviderAvatar = computed(() => {
 const feedbackProviderName = computed(() => {
   return `${props.feedback.feedback_provider_user.first_name} ${props.feedback.feedback_provider_user.last_name}`;
 });
-
-const getSmiley = (assessment: "FAIL" | "SUCCESS" | "UNKNOWN") => {
-  switch (assessment) {
-    case "SUCCESS":
-      return "it-icon-smiley-happy";
-    case "FAIL":
-      return "it-icon-smiley-thinking";
-    default:
-      return "it-icon-smiley-neutral";
-  }
-};
-
-const getCaption = (assessment: "FAIL" | "SUCCESS" | "UNKNOWN") => {
-  switch (assessment) {
-    case "SUCCESS":
-      return t("selfEvaluation.yes");
-    case "FAIL":
-      return t("selfEvaluation.no");
-    default:
-      return t("a.Nicht bewertet");
-  }
-};
 </script>
 
 <template>
@@ -54,7 +33,7 @@ const getCaption = (assessment: "FAIL" | "SUCCESS" | "UNKNOWN") => {
       </div>
       <div class="flex items-center justify-start space-x-2 bg-white">
         <component :is="getSmiley(criteria.self_assessment)" class="h-6 w-6" />
-        <span>{{ getCaption(criteria.self_assessment) }}</span>
+        <span>{{ getSelfEvaluationCaption(criteria.self_assessment) }}</span>
       </div>
 
       <!-- Feedback provider assessment -->
@@ -70,7 +49,7 @@ const getCaption = (assessment: "FAIL" | "SUCCESS" | "UNKNOWN") => {
       </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>{{ getCaption(criteria.feedback_assessment) }}</span>
+        <span>{{ getSelfEvaluationCaption(criteria.feedback_assessment) }}</span>
       </div>
     </div>
   </div>

client/src/pages/cockpit/cockpitPage/mentor/SelfEvaluationFeedback.vue

@@ -114,7 +114,7 @@ const handleFeedbackRelease = async () => {
       :show-next-button="showNextButton"
       :show-exit-button="!showNextButton"
       :show-start-button="false"
-      :show-previous-button="currentStep > 0"
+      :show-previous-button="currentStep > 0 && !feedback.feedback_submitted"
       :end-badge-text="$t('general.submission')"
       @exit="clickExit()"
       @previous="handleBack()"

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

@@ -125,7 +125,6 @@ const onRequestFeedback = async () => {
               variant="primary"
               size="large"
               :disabled="!currentSessionRequestedMentor"
-              data-cy="submit-assignment"
               @click="onRequestFeedback"
             >
               <p v-if="!currentSessionRequestedMentor">

client/src/services/selfEvaluationFeedback.ts

@@ -1,5 +1,6 @@
 import { useCSRFFetch } from "@/fetchHelpers";
 import type { User } from "@/types";
+import { t } from "i18next";
 import type { Ref } from "vue";
 import { computed, onMounted, ref } from "vue";
 
@@ -104,3 +105,45 @@ export function useSelfEvaluationFeedback(
     releaseFeedback,
   };
 }
+
+export const getSmiley = (assessment: "FAIL" | "SUCCESS" | "UNKNOWN") => {
+  switch (assessment) {
+    case "SUCCESS":
+      return "it-icon-smiley-happy";
+    case "FAIL":
+      return "it-icon-smiley-thinking";
+    default:
+      return "it-icon-smiley-neutral";
+  }
+};
+
+export const getSelfEvaluationCaption = (
+  assessment: "FAIL" | "SUCCESS" | "UNKNOWN"
+) => {
+  switch (assessment) {
+    case "SUCCESS":
+      return t("selfEvaluation.yes");
+    case "FAIL":
+      return t("selfEvaluation.no");
+    case "UNKNOWN":
+      return t("a.Nicht bewertet");
+  }
+};
+
+export const getFeedbackEvaluationCaption = (
+  assessment: "FAIL" | "SUCCESS" | "UNKNOWN",
+  requester: User
+) => {
+  switch (assessment) {
+    case "SUCCESS":
+      return t("a.Ja, NAME kann das.", {
+        NAME: requester.first_name,
+      });
+    case "FAIL":
+      return t("a.Nein, NAME muss das nochmals anschauen.", {
+        NAME: requester.first_name,
+      });
+    case "UNKNOWN":
+      return t("a.Nicht bewertet");
+  }
+};