wip: mentor overview

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

@@ -1,11 +1,14 @@
 <script setup lang="ts">
+import type { PraxisAssignment } from "@/services/mentorCockpit";
 import { useMentorCockpit } from "@/services/mentorCockpit";
 import { useCurrentCourseSession } from "@/composables";
 import ItDropdownSelect from "@/components/ui/ItDropdownSelect.vue";
-import { computed, ref } from "vue";
+import { computed, type Ref, ref } from "vue";
 
 const courseSession = useCurrentCourseSession();
-const { summary } = useMentorCockpit(courseSession.value.id);
+
+const mentorCockpitStore = useMentorCockpit(courseSession.value.id);
+const summary = mentorCockpitStore.summary;
 
 const statusFilterValue = ref({ name: "Alle", id: "_all" });
 
@@ -27,6 +30,24 @@ const circleFilter = computed(() => {
     })),
   ];
 });
+
+const filteredPraxisAssignments: Ref<PraxisAssignment[]> = computed(() => {
+  if (!summary.value) return [];
+
+  let filtered = summary.value.praxis_assignments;
+
+  if (statusFilterValue.value.id !== "_all") {
+    filtered = filtered.filter((item) => item.pending_evaluations > 0);
+  }
+
+  if (circleFilterValue.value.id !== "_all") {
+    filtered = filtered.filter(
+      (item) => item.circle_id === String(circleFilterValue.value.id)
+    );
+  }
+
+  return filtered;
+});
 </script>
 
 <template>
@@ -51,5 +72,47 @@ const circleFilter = computed(() => {
       <!--        borderless-->
       <!--      ></ItDropdownSelect>-->
     </div>
+    <div
+      v-for="item in filteredPraxisAssignments"
+      :key="item.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="font-bold">Praxisauftrag: {{ item.title }}</div>
+          <div class="text-small text-gray-900">
+            {{ $t("a.Circle") }} «{{
+              mentorCockpitStore.getCircleTitleById(item.circle_id)
+            }}»
+          </div>
+        </div>
+        <!-- Center -->
+        <div class="flex flex-grow flex-row items-center justify-start space-x-2 pl-20">
+          <template v-if="item.pending_evaluations > 0">
+            <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>{{ item.pending_evaluations }}</span>
+            </div>
+            <span>Ergebnisse abgegeben</span>
+          </template>
+        </div>
+        <!-- Right -->
+        <div>
+          <template v-if="item.pending_evaluations > 0">
+            <button class="btn-primary text-sm">Ergebnisse beurteilen</button>
+          </template>
+          <template v-else>
+            <a href="" class="underline">Praxisaufträge anschauen</a>
+          </template>
+        </div>
+      </div>
+
+      <!--      <router-link :to=" {name:
+            'cockpitUserProfile', params: {userId: participant.id}}" class="underline">-->
+      <!--        {{ $t("a.Profil anzeigen") }}-->
+      <!--      </router-link>-->
+    </div>
   </div>
 </template>

client/src/services/mentorCockpit.ts

@@ -23,7 +23,7 @@ interface Completion {
   last_name: string;
 }
 
-interface PraxisAssignment {
+export interface PraxisAssignment {
   id: string;
   title: string;
   circle_id: string;