From 3f9742550f1659001f2362d7d5b042b5ead21d14 Mon Sep 17 00:00:00 2001
From: Livio Bieri <livio@livio.li>
Date: Fri, 19 Jan 2024 13:20:44 +0100
Subject: [PATCH] wip: self evaluation mentor

---
 .../assignment/PraxisAssignmentSubmit.vue     | 34 +------
 .../mentor/LearningMentorSelector.vue         | 23 -----
 .../mentor/NoMentorInformationPanel.vue       | 29 ++++++
 client/src/composables.ts                     | 21 ++++-
 .../SelfEvaluationSubmit.vue                  | 93 +++++++++++++++++--
 5 files changed, 137 insertions(+), 63 deletions(-)
 delete mode 100644 client/src/components/mentor/LearningMentorSelector.vue
 create mode 100644 client/src/components/mentor/NoMentorInformationPanel.vue

diff --git a/client/src/components/learningPath/assignment/PraxisAssignmentSubmit.vue b/client/src/components/learningPath/assignment/PraxisAssignmentSubmit.vue
index b1c31c88..fe8bbd27 100644
--- a/client/src/components/learningPath/assignment/PraxisAssignmentSubmit.vue
+++ b/client/src/components/learningPath/assignment/PraxisAssignmentSubmit.vue
@@ -2,7 +2,7 @@
 import ItButton from "@/components/ui/ItButton.vue";
 import ItCheckbox from "@/components/ui/ItCheckbox.vue";
 import { ref } from "vue";
-import { bustItGetCache, useCSRFFetch } from "@/fetchHelpers";
+import { bustItGetCache } from "@/fetchHelpers";
 import { useUserStore } from "@/stores/user";
 import eventBus from "@/utils/eventBus";
 import log from "loglevel";
@@ -12,9 +12,8 @@ import { useMutation } from "@urql/vue";
 import { UPSERT_ASSIGNMENT_COMPLETION_MUTATION } from "@/graphql/mutations";
 import type { Assignment } from "@/types";
 import DateEmbedding from "@/components/dueDates/DateEmbedding.vue";
-import { useCurrentCourseSession } from "@/composables";
-
-const currentCourseSession = useCurrentCourseSession();
+import { useLearningMentors } from "@/composables";
+import NoMentorInformationPanel from "@/components/mentor/NoMentorInformationPanel.vue";
 
 const props = defineProps<{
   submissionDeadlineStart?: string | null;
@@ -29,10 +28,7 @@ const upsertAssignmentCompletionMutation = useMutation(
   UPSERT_ASSIGNMENT_COMPLETION_MUTATION
 );
 
-const { data: learningMentors } = useCSRFFetch(
-  `/api/mentor/${props.courseSessionId}/mentors`
-).json();
-
+const learningMentors = useLearningMentors().learningMentors;
 const selectedLearningMentor = ref();
 
 const onSubmit = async () => {
@@ -85,27 +81,7 @@ const onSubmit = async () => {
       </div>
     </div>
     <div v-else class="my-6">
-      <div class="flex space-x-2 bg-sky-200 p-4">
-        <it-icon-info class="it-icon h-6 w-6 text-sky-700" />
-        <div>
-          <div class="mb-4">
-            {{
-              $t(
-                "a.Aktuell hast du noch keine Person als Lernbegleitung eingeladen. Lade jetzt jemanden ein."
-              )
-            }}
-          </div>
-          <router-link
-            :to="{
-              name: 'learningMentorManagement',
-              params: { courseSlug: currentCourseSession.course.slug },
-            }"
-            class="btn-blue px-4 py-2 font-bold"
-          >
-            {{ $t("a.Lernbegleitung einladen") }}
-          </router-link>
-        </div>
-      </div>
+      <NoMentorInformationPanel />
     </div>
   </div>
   <p v-if="props.submissionDeadlineStart" class="pt-6">
diff --git a/client/src/components/mentor/LearningMentorSelector.vue b/client/src/components/mentor/LearningMentorSelector.vue
deleted file mode 100644
index c4fdc832..00000000
--- a/client/src/components/mentor/LearningMentorSelector.vue
+++ /dev/null
@@ -1,23 +0,0 @@
-<script setup lang="ts">
-import { onMounted, ref } from "vue";
-
-const mentors = ref([]);
-
-onMounted(async () => {
-  const response = await fetch("/api/mentor/mentors");
-  if (response.ok) {
-    mentors.value = await response.json();
-  }
-});
-</script>
-
-<template>
-  <div>
-    <code>{{ mentors }} Hello</code>
-    <select>
-      <option v-for="mentor in mentors" :key="mentor.id" :value="mentor.id">
-        {{ mentor.first_name }} {{ mentor.last_name }}
-      </option>
-    </select>
-  </div>
-</template>
diff --git a/client/src/components/mentor/NoMentorInformationPanel.vue b/client/src/components/mentor/NoMentorInformationPanel.vue
new file mode 100644
index 00000000..d6170bc3
--- /dev/null
+++ b/client/src/components/mentor/NoMentorInformationPanel.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { useCurrentCourseSession } from "@/composables";
+
+const currentCourseSession = useCurrentCourseSession();
+</script>
+
+<template>
+  <div class="flex space-x-2 bg-sky-200 p-4">
+    <it-icon-info class="it-icon h-6 w-6 text-sky-700" />
+    <div>
+      <div class="mb-4">
+        {{
+          $t(
+            "a.Aktuell hast du noch keine Person als Lernbegleitung eingeladen. Lade jetzt jemanden ein."
+          )
+        }}
+      </div>
+      <router-link
+        :to="{
+          name: 'learningMentorManagement',
+          params: { courseSlug: currentCourseSession.course.slug },
+        }"
+        class="btn-blue px-4 py-2 font-bold"
+      >
+        {{ $t("a.Lernbegleitung einladen") }}
+      </router-link>
+    </div>
+  </div>
+</template>
diff --git a/client/src/composables.ts b/client/src/composables.ts
index af4fda5b..3b8730e2 100644
--- a/client/src/composables.ts
+++ b/client/src/composables.ts
@@ -1,3 +1,4 @@
+import { useCSRFFetch } from "@/fetchHelpers";
 import type { CourseStatisticsType } from "@/gql/graphql";
 import { graphqlClient } from "@/graphql/client";
 import { COURSE_QUERY, COURSE_SESSION_DETAIL_QUERY } from "@/graphql/queries";
@@ -27,7 +28,7 @@ import { useQuery } from "@urql/vue";
 import orderBy from "lodash/orderBy";
 import log from "loglevel";
 import type { ComputedRef } from "vue";
-import { computed, ref, watchEffect } from "vue";
+import { computed, onMounted, ref, watchEffect } from "vue";
 
 export function useCurrentCourseSession() {
   /**
@@ -463,3 +464,21 @@ export function useFileUpload() {
 
   return { upload, error, loading, fileInfo };
 }
+
+export function useLearningMentors() {
+  const learningMentors = ref([]);
+  const currentCourseSessionId = useCurrentCourseSession().value.id;
+
+  const fetchMentors = async () => {
+    const { data } = await useCSRFFetch(
+      `/api/mentor/${currentCourseSessionId}/mentors`
+    ).json();
+    learningMentors.value = data.value;
+  };
+
+  onMounted(fetchMentors);
+
+  return {
+    learningMentors,
+  };
+}
diff --git a/client/src/pages/learningPath/selfEvaluationPage/SelfEvaluationSubmit.vue b/client/src/pages/learningPath/selfEvaluationPage/SelfEvaluationSubmit.vue
index 46118b95..2faea23c 100644
--- a/client/src/pages/learningPath/selfEvaluationPage/SelfEvaluationSubmit.vue
+++ b/client/src/pages/learningPath/selfEvaluationPage/SelfEvaluationSubmit.vue
@@ -1,24 +1,97 @@
 <script setup lang="ts">
 import type { LearningUnit, LearningUnitPerformanceCriteria } from "@/types";
+import { useLearningMentors } from "@/composables";
+import { ref } from "vue";
+import ItButton from "@/components/ui/ItButton.vue";
+import NoMentorInformationPanel from "@/components/mentor/NoMentorInformationPanel.vue";
 
 defineProps<{
   learningUnit: LearningUnit;
   criteria: LearningUnitPerformanceCriteria[];
 }>();
+
+const selectedLearningMentor = ref();
+const learningMentors = useLearningMentors().learningMentors;
+const onSubmitForMentorFeedback = async () => {
+  try {
+    console.log("submit for mentor feedback");
+  } catch (error) {
+    console.log("Could not submit assignment", error);
+  }
+};
 </script>
 
 <template>
-  <div>
-    <code>ABGABE SCREEN</code>
-    <code>LUID: {{ learningUnit.id }}</code>
+  <div class="w-full pt-8">
+    <div class="w-full border border-gray-400">
+      <div class="m-6 space-y-6">
+        <h3 class="heading-3">
+          {{ $t("a.Selbsteinschätzung teilen") }}
+        </h3>
+        <div v-if="!learningMentors?.length">
+          <p>
+            {{
+              $t(
+                "a.Du kannst deine Selbsteinschätzung mit deiner Lernbegleitung teilen, damit sie eine Fremdeinschätzung vornimmt."
+              )
+            }}
+          </p>
+          <select v-model="selectedLearningMentor" data-cy="select-learning-mentor">
+            <option
+              v-for="learningMentor in learningMentors"
+              :key="learningMentor.id"
+              :value="learningMentor.mentor"
+            >
+              {{ learningMentor.mentor.first_name }}
+              {{ learningMentor.mentor.last_name }}
+            </option>
+          </select>
+          <ItButton
+            class="mt-6"
+            variant="primary"
+            size="large"
+            :disabled="!selectedLearningMentor"
+            data-cy="submit-assignment"
+            @click="onSubmitForMentorFeedback"
+          >
+            <p v-if="!selectedLearningMentor">
+              {{ $t("a.Selbsteinschätzung teilen") }}
+            </p>
+            <p v-else-if="learningMentors?.length == 0">
+              {{
+                $t("a.Selbsteinschätzung mit MENTOR_NAME teilen", {
+                  MENTOR_NAME: selectedLearningMentor.first_name,
+                })
+              }}
+            </p>
+          </ItButton>
+        </div>
+        <div v-else>
+          <NoMentorInformationPanel />
+        </div>
+      </div>
+    </div>
   </div>
-  <div v-for="(pc, index) in criteria" :key="pc.id">
-    <code>
-      {{ pc.title }} =>
-      <b>{{ pc.completion_status }}</b>
-      <br />
-      <a :href="`${learningUnit.evaluate_url}?step=${index}`">[[EDIT]]</a>
-    </code>
+
+  <div
+    v-for="(pc, index) in criteria"
+    :key="pc.id"
+    class="flex flex-col space-y-4 border-t border-gray-400"
+  >
+    <div class="flex justify-between">
+      <b>{{ pc.title }}</b>
+      <router-link :to="`${learningUnit.evaluate_url}?step=${index}`" class="underline">
+        {{ $t("a.Bearbeiten") }}
+      </router-link>
+    </div>
+    <div v-if="pc.completion_status == 'SUCCESS'">
+      <it-icon-smiley-happy class="h-6 w-6" />
+      {{ $t("selfEvaluation.yes") }}
+    </div>
+    <div v-else>
+      <it-icon-smiley-thinking class="h-6 w-6" />
+      {{ $t("selfEvaluation.no") }}
+    </div>
   </div>
 </template>