feat: move detail page

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

@@ -1,7 +1,8 @@
 <script setup lang="ts">
 import type { RouteLocationRaw } from "vue-router";
+import { computed } from "vue";
 
-defineProps<{
+const props = defineProps<{
   taskTitle: string;
   circleTitle: string;
   pendingTasks: number;
@@ -10,13 +11,21 @@ defineProps<{
   taskLinkLabel: string;
   taskLinkPendingLabel: string;
 }>();
+
+const linkLabel = computed(() => {
+  if (!props.taskLinkPendingLabel) {
+    return props.taskLinkLabel;
+  }
+  return props.pendingTasks > 0 ? props.taskLinkPendingLabel : props.taskLinkLabel;
+});
+
+const hasPendingTasks = computed(() => props.pendingTasks > 0);
 </script>
 
 <template>
   <div
     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">{{ taskTitle }}</div>
@@ -24,9 +33,8 @@ defineProps<{
           {{ $t("a.Circle") }} «{{ circleTitle }}»
         </div>
       </div>
-      <!-- Center -->
       <div class="flex flex-grow flex-row items-center justify-start space-x-2 pl-20">
-        <template v-if="pendingTasks > 0">
+        <template v-if="hasPendingTasks">
           <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"
           >
@@ -35,13 +43,11 @@ defineProps<{
           <span>{{ pendingTasksLabel }}</span>
         </template>
       </div>
-      <!-- Right -->
       <router-link
-        :class="[pendingTasks > 0 ? 'btn-primary' : 'underline']"
+        :class="[hasPendingTasks ? 'btn-primary' : 'underline']"
         :to="taskLink"
       >
-        <template v-if="pendingTasks > 0">{{ taskLinkPendingLabel }}</template>
+        {{ linkLabel }}
-        <template v-else>{{ taskLinkLabel }}</template>
       </router-link>
     </div>
   </div>

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

@@ -1,30 +1,4 @@
-<script setup lang="ts">
+<script setup lang="ts"></script>
-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
@@ -35,83 +9,7 @@ const getParticipantById = (id: string): Participant | null => {
     {{ $t("a.Zurück") }}
   </router-link>
 
-  <div v-if="praxisAssignment" class="bg-white">
+  <div class="bg-white">
-    <div class="p-6">
+    <router-view></router-view>
-      <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">
-      <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/MentorPraxisAssignment.vue

@@ -1,3 +1,104 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import type { Participant, PraxisAssignment } from "@/services/mentorCockpit";
+import { useMentorCockpit } from "@/services/mentorCockpit";
+import { computed, type Ref } from "vue";
+import { useCurrentCourseSession } from "@/composables";
 
-<template>Praxis</template>
+const props = defineProps<{
+  praxisAssignmentId: string;
+}>();
+
+const courseSession = useCurrentCourseSession();
+const mentorCockpitStore = useMentorCockpit(courseSession.value.id);
+
+const praxisAssignment: Ref<PraxisAssignment | null> = computed(() =>
+  mentorCockpitStore.getPraxisAssignmentById(props.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>
+  <div v-if="praxisAssignment">
+    <div class="p-6">
+      <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">
+      <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>
+      </div>
+    </div>
+  </div>
+</template>

client/src/router/index.ts

@@ -213,6 +213,7 @@ const router = createRouter({
                   meta: {
                     cockpitType: "mentor",
                   },
+                  props: true,
                 },
               ],
             },