feat: move detail page
This commit is contained in:
Reto Aebersold
parent
4f942eb925
commit
6769169817
|
|
@ -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>
|
||||
<template v-else>{{ taskLinkLabel }}</template>
|
||||
{{ linkLabel }}
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,30 +1,4 @@
|
|||
<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>
|
||||
<script setup lang="ts"></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="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>
|
||||
|
||||
<!-- <router-link :to=" {name:
|
||||
'cockpitUserProfile', params: {userId: participant.id}}" class="underline">-->
|
||||
<!-- {{ $t("a.Profil anzeigen") }}-->
|
||||
<!-- </router-link>-->
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white">
|
||||
<router-view></router-view>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -213,6 +213,7 @@ const router = createRouter({
|
|||
meta: {
|
||||
cockpitType: "mentor",
|
||||
},
|
||||
props: true,
|
||||
},
|
||||
],
|
||||
},
|
||||
|
|
|
|||
Loading…
Reference in New Issue