feat: mentor cockpit summary pages wrap up

client/src/components/cockpit/mentor/SelfAssignmentFeedbackAssignmentItem.vue

@@ -16,7 +16,7 @@ defineProps<{
     :circle-title="circleTitle"
     :pending-tasks="pendingTasks"
     :task-link="taskLink"
-    :pending-tasks-label="$t('a.Selbsteinschätzung geteilt')"
+    :pending-tasks-label="$t('a.Selbsteinschätzungen geteilt')"
     :task-link-pending-label="$t('a.Fremdeinschätzung vornehmen')"
     :task-link-label="$t('a.Selbsteinschätzung anzeigen')"
   />

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { PraxisAssignment } from "@/services/mentorCockpit";
+import type { Assignment } from "@/services/mentorCockpit";
 import { useMentorCockpit } from "@/services/mentorCockpit";
 import { useCurrentCourseSession } from "@/composables";
 import ItDropdownSelect from "@/components/ui/ItDropdownSelect.vue";
@@ -35,7 +35,7 @@ const circleFilter = computed(() => {
   ];
 });
 
-const filteredAssignments: Ref<PraxisAssignment[]> = computed(() => {
+const filteredAssignments: Ref<Assignment[]> = computed(() => {
   if (!summary.value) return [];
 
   let filtered = summary.value.assignments;
@@ -86,8 +86,8 @@ const filteredAssignments: Ref<PraxisAssignment[]> = computed(() => {
         :circle-title="mentorCockpitStore.getCircleTitleById(item.circle_id)"
         :pending-tasks="item.pending_evaluations"
         :task-link="{
-          name: 'mentorCockpitPraxisAssignments',
-          params: { praxisAssignmentId: item.id },
+          name: 'mentorCockpitSelfEvaluationFeedbackAssignments',
+          params: { selfEvaluationFeedbackId: item.id },
         }"
         :task-title="item.title"
       />

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { Participant, PraxisAssignment } from "@/services/mentorCockpit";
+import type { Assignment, Participant } from "@/services/mentorCockpit";
 import { useMentorCockpit } from "@/services/mentorCockpit";
 import { computed, type Ref } from "vue";
 import { useCurrentCourseSession } from "@/composables";
@@ -11,8 +11,8 @@ const props = defineProps<{
 const courseSession = useCurrentCourseSession();
 const mentorCockpitStore = useMentorCockpit(courseSession.value.id);
 
-const praxisAssignment: Ref<PraxisAssignment | null> = computed(() =>
-  mentorCockpitStore.getPraxisAssignmentById(props.praxisAssignmentId)
+const praxisAssignment: Ref<Assignment | null> = computed(() =>
+  mentorCockpitStore.getAssignmentById(props.praxisAssignmentId)
 );
 
 const getParticipantById = (id: string): Participant | null => {

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

@@ -0,0 +1,121 @@
+<script setup lang="ts">
+import type { Assignment, Participant } from "@/services/mentorCockpit";
+import { useMentorCockpit } from "@/services/mentorCockpit";
+import { computed, type Ref } from "vue";
+import { useCurrentCourseSession } from "@/composables";
+
+const props = defineProps<{
+  selfEvaluationFeedbackId: string;
+}>();
+
+const courseSession = useCurrentCourseSession();
+const mentorCockpitStore = useMentorCockpit(courseSession.value.id);
+
+const selfEvaluationFeedback: Ref<Assignment | null> = computed(() =>
+  mentorCockpitStore.getAssignmentById(props.selfEvaluationFeedbackId)
+);
+
+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>
+  <div v-if="selfEvaluationFeedback">
+    <div class="p-6">
+      <h2 class="mb-2">
+        {{ $t("a.Selbsteinschätzung") }}: {{ selfEvaluationFeedback.title }}
+      </h2>
+      <span class="text-gray-800">
+        Circle «{{
+          mentorCockpitStore.getCircleTitleById(selfEvaluationFeedback.circle_id)
+        }}»
+      </span>
+      <template v-if="selfEvaluationFeedback.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>{{ selfEvaluationFeedback.pending_evaluations }}</span>
+          </div>
+          <span>{{ $t("a.Selbsteinschätzungen geteilt") }}</span>
+        </div>
+      </template>
+    </div>
+    <div class="border-t">
+      <div
+        v-for="item in selfEvaluationFeedback.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>{{ $t("a.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>{{ $t("a.Bewertung freigeben") }}</span>
+            </template>
+          </div>
+          <!-- Right -->
+          <div>
+            <router-link
+              v-if="item.status == 'SUBMITTED'"
+              class="btn-primary"
+              :to="{
+                name: 'mentorSelfEvaluationFeedback',
+                params: {
+                  selfEvaluationFeedbackId: selfEvaluationFeedback.id,
+                },
+              }"
+            >
+              {{ $t("a.Fremdeinschätzung vornehmen") }}
+            </router-link>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,7 @@
+<script setup lang="ts"></script>
+
+<template>
+  <b>TODO Continue Here</b>
+</template>
+
+<style scoped></style>

client/src/router/index.ts

@@ -195,6 +195,16 @@ const router = createRouter({
                 cockpitType: "mentor",
               },
             },
+            {
+              path: "self-evaluation-feedback/:selfEvaluationFeedbackId",
+              component: () =>
+                import("@/pages/cockpit/cockpitPage/mentor/SelfEvaluationFeedback.vue"),
+              name: "mentorSelfEvaluationFeedback",
+              meta: {
+                cockpitType: "mentor",
+              },
+              props: true,
+            },
             {
               path: "details",
               component: () =>
@@ -215,6 +225,18 @@ const router = createRouter({
                   },
                   props: true,
                 },
+                {
+                  path: "self-evaluation-feedback-assignments/:selfEvaluationFeedbackId",
+                  component: () =>
+                    import(
+                      "@/pages/cockpit/cockpitPage/mentor/MentorSelfEvaluationFeedbackAssignment.vue"
+                    ),
+                  name: "mentorCockpitSelfEvaluationFeedbackAssignments",
+                  meta: {
+                    cockpitType: "mentor",
+                  },
+                  props: true,
+                },
               ],
             },
           ],

client/src/services/mentorCockpit.ts

@@ -29,7 +29,7 @@ interface Completion {
   last_name: string;
 }
 
-export interface PraxisAssignment {
+export interface Assignment {
   id: string;
   title: string;
   circle_id: string;
@@ -41,7 +41,7 @@ export interface PraxisAssignment {
 interface Summary {
   participants: Participant[];
   circles: Circle[];
-  assignments: PraxisAssignment[];
+  assignments: Assignment[];
 }
 
 export const useMentorCockpit = (
@@ -59,7 +59,7 @@ export const useMentorCockpit = (
     return "";
   };
 
-  const getPraxisAssignmentById = (id: string): PraxisAssignment | null => {
+  const getAssignmentById = (id: string): Assignment | null => {
     if (summary.value?.assignments) {
       const found = summary.value.assignments.find(
         (assignment) => assignment.id === id
@@ -92,6 +92,6 @@ export const useMentorCockpit = (
     summary,
     error,
     getCircleTitleById,
-    getPraxisAssignmentById,
+    getAssignmentById,
   };
 };