feat: mentor pages

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

@@ -1,4 +1,30 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { useRoute } from "vue-router";
+import type { Participant, PraxisAssignment } from "@/services/mentorCockpit";
+import { useMentorCockpit } from "@/services/mentorCockpit";
+import { computed, type Ref } from "vue";
+import { useCurrentCourseSession } from "@/composables";
+
+const route = useRoute();
+const praxisAssignmentId = route.params.praxisAssignmentId as string;
+
+const courseSession = useCurrentCourseSession();
+const mentorCockpitStore = useMentorCockpit(courseSession.value.id);
+
+const praxisAssignment: Ref<PraxisAssignment | null> = computed(() =>
+  mentorCockpitStore.getPraxisAssignmentById(praxisAssignmentId)
+);
+
+const getParticipantById = (id: string): Participant | null => {
+  if (mentorCockpitStore.summary.value?.participants) {
+    const found = mentorCockpitStore.summary.value.participants.find(
+      (item) => item.id === id
+    );
+    return found || null;
+  }
+  return null;
+};
+</script>
 
 <template>
   <router-link
@@ -9,13 +35,83 @@
     {{ $t("a.Zurück") }}
   </router-link>
 
-  <div class="bg-white">
+  <div v-if="praxisAssignment" class="bg-white">
     <div class="p-6">
-      <h2 class="mb-2">Praxisauftrag: Überprüfen einer Hausratsversicherung</h2>
-      <span class="text-gray-800">Circle «Haushalt»</span>
+      <h2 class="mb-2">Praxisauftrag: {{ praxisAssignment.title }}</h2>
+      <span class="text-gray-800">
+        Circle «{{ mentorCockpitStore.getCircleTitleById(praxisAssignment.circle_id) }}»
+      </span>
+      <template v-if="praxisAssignment.pending_evaluations > 0">
+        <div class="flex flex-row items-center space-x-2 pt-4">
+          <div
+            class="flex h-7 w-7 items-center justify-center rounded-full border-2 border-green-500 px-3 text-sm font-bold"
+          >
+            <span>{{ praxisAssignment.pending_evaluations }}</span>
+          </div>
+          <span>Ergebnisse abgegeben</span>
+        </div>
+      </template>
     </div>
-    <div class="border-t p-6">
-      <div>Some user</div>
+    <div class="border-t">
+      <div
+        v-for="item in praxisAssignment.completions"
+        :key="item.user_id"
+        class="flex flex-col items-start justify-between gap-4 border-b py-2 pl-5 pr-5 last:border-b-0 md:flex-row md:items-center md:justify-between md:gap-16"
+      >
+        <!-- Left -->
+        <div class="flex flex-grow flex-row items-center justify-start">
+          <div class="w-80">
+            <div class="flex items-center space-x-2">
+              <img
+                :alt="item.last_name"
+                class="h-11 w-11 rounded-full"
+                :src="
+                  getParticipantById(item.user_id)?.avatar_url ||
+                  '/static/avatars/myvbv-default-avatar.png'
+                "
+              />
+              <div>
+                <div class="text-bold">
+                  {{ getParticipantById(item.user_id)?.first_name }}
+                  {{ getParticipantById(item.user_id)?.last_name }}
+                </div>
+              </div>
+            </div>
+          </div>
+          <!-- Center -->
+          <div
+            class="flex flex-grow flex-row items-center justify-start space-x-2 pl-20"
+          >
+            <template v-if="item.status == 'SUBMITTED'">
+              <div
+                class="flex h-7 w-7 items-center justify-center rounded-full border-2 border-green-500 px-3 py-1 text-sm font-bold"
+              >
+                <span class="flex items-center">
+                  <it-icon-check class="h-5 w-5"></it-icon-check>
+                </span>
+              </div>
+              <span>Ergebnisse abgegeben</span>
+            </template>
+            <template v-if="item.status == 'EVALUATED'">
+              <div
+                class="flex h-7 w-7 items-center justify-center rounded-full border-2 border-green-500 bg-green-500 px-3 py-1 text-sm font-bold"
+              >
+                <span class="flex items-center">
+                  <it-icon-check class="h-5 w-5"></it-icon-check>
+                </span>
+              </div>
+              <span>Bewertung freigeben</span>
+            </template>
+          </div>
+          <!-- Right -->
+          <div></div>
+        </div>
+
+        <!--      <router-link :to=" {name:
+              'cockpitUserProfile', params: {userId: participant.id}}" class="underline">-->
+        <!--        {{ $t("a.Profil anzeigen") }}-->
+        <!--      </router-link>-->
+      </div>
     </div>
   </div>
 </template>

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

@@ -4,11 +4,20 @@ import { useMentorCockpit } from "@/services/mentorCockpit";
 import { useCurrentCourseSession } from "@/composables";
 import ItDropdownSelect from "@/components/ui/ItDropdownSelect.vue";
 import { computed, type Ref, ref } from "vue";
+import { useRouter } from "vue-router";
 
 const courseSession = useCurrentCourseSession();
 
 const mentorCockpitStore = useMentorCockpit(courseSession.value.id);
 const summary = mentorCockpitStore.summary;
+const router = useRouter();
+
+const goToPraxisAssignment = (praxisAssignmentId: string) => {
+  router.push({
+    name: "mentorCockpitPraxisAssignments",
+    params: { praxisAssignmentId },
+  });
+};
 
 const statusFilterValue = ref({ name: "Alle", id: "_all" });
 
@@ -101,10 +110,20 @@ const filteredPraxisAssignments: Ref<PraxisAssignment[]> = computed(() => {
         <!-- Right -->
         <div>
           <template v-if="item.pending_evaluations > 0">
-            <button class="btn-primary text-sm">Ergebnisse beurteilen</button>
+            <button class="btn-primary text-sm" @click="goToPraxisAssignment(item.id)">
+              Ergebnisse bewerten
+            </button>
           </template>
           <template v-else>
-            <a href="" class="underline">Praxisaufträge anschauen</a>
+            <router-link
+              class="underline"
+              :to="{
+                name: 'mentorCockpitPraxisAssignments',
+                params: { praxisAssignmentId: item.id },
+              }"
+            >
+              Praxisaufträge anschauen
+            </router-link>
           </template>
         </div>
       </div>

client/src/router/index.ts

@@ -181,7 +181,7 @@ const router = createRouter({
               },
               children: [
                 {
-                  path: "praxis-assignments",
+                  path: "praxis-assignments/:praxisAssignmentId",
                   component: () =>
                     import(
                       "@/pages/cockpit/cockpitPage/mentor/MentorPraxisAssignment.vue"

client/src/services/mentorCockpit.ts

@@ -2,7 +2,7 @@ import { itGetCached } from "@/fetchHelpers";
 import type { Ref } from "vue";
 import { ref, watchEffect } from "vue";
 
-interface Participant {
+export interface Participant {
   id: string;
   first_name: string;
   last_name: string;
@@ -17,8 +17,14 @@ interface Circle {
   title: string;
 }
 
+enum CompletionStatus {
+  UNKNOWN = "UNKNOWN",
+  SUBMITTED = "SUBMITTED",
+  EVALUATED = "EVALUATED",
+}
+
 interface Completion {
-  status: string;
+  status: CompletionStatus;
   user_id: string;
   last_name: string;
 }
@@ -52,6 +58,14 @@ export const useMentorCockpit = (
     return "";
   };
 
+  const getPraxisAssignmentById = (id: string): PraxisAssignment | null => {
+    if (summary.value?.praxis_assignments) {
+      const found = summary.value.praxis_assignments.find((pa) => pa.id === id);
+      return found ? found : null;
+    }
+    return null;
+  };
+
   const fetchData = () => {
     summary.value = null;
     error.value = null;
@@ -75,5 +89,6 @@ export const useMentorCockpit = (
     summary,
     error,
     getCircleTitleById,
+    getPraxisAssignmentById,
   };
 };