115 lines
4.4 KiB
Vue
115 lines
4.4 KiB
Vue
<script setup lang="ts">
|
|
import SubmissionsOverview from "@/components/cockpit/SubmissionsOverview.vue";
|
|
import UserStatusCount from "@/components/cockpit/UserStatusCount.vue";
|
|
import CourseSessionDueDatesList from "@/components/dueDates/CourseSessionDueDatesList.vue";
|
|
import LearningPathDiagram from "@/components/learningPath/LearningPathDiagram.vue";
|
|
import ItDropdownSelect from "@/components/ui/ItDropdownSelect.vue";
|
|
import ItPersonRow from "@/components/ui/ItPersonRow.vue";
|
|
import { useCourseSessionDetailQuery, useCurrentCourseSession } from "@/composables";
|
|
import { useExpertCockpitStore } from "@/stores/expertCockpit";
|
|
import AttendanceOverview from "./AttendanceOverview.vue";
|
|
|
|
const expertCockpitStore = useExpertCockpitStore();
|
|
const courseSession = useCurrentCourseSession();
|
|
const courseSessionDetailResult = useCourseSessionDetailQuery();
|
|
|
|
const props = defineProps<{
|
|
courseSlug: string;
|
|
}>();
|
|
</script>
|
|
<template>
|
|
<div v-if="expertCockpitStore.circles?.length">
|
|
<div v-if="expertCockpitStore.currentCircle" class="container-large pt-10">
|
|
<div class="mb-9 flex flex-col lg:flex-row lg:items-center lg:justify-between">
|
|
<ItDropdownSelect
|
|
:as-heading="true"
|
|
:model-value="expertCockpitStore.currentCircle"
|
|
type-name="Circle:"
|
|
class="mt-4 w-full lg:mt-0 lg:w-auto"
|
|
:items="expertCockpitStore.circles"
|
|
@update:model-value="expertCockpitStore.setCurrentCourseCircleFromEvent"
|
|
></ItDropdownSelect>
|
|
</div>
|
|
<!-- Status -->
|
|
<div class="mb-4 gap-4">
|
|
<AttendanceOverview />
|
|
</div>
|
|
|
|
<div class="mb-4 bg-white p-6">
|
|
<CourseSessionDueDatesList
|
|
:course-session-id="courseSession.id"
|
|
:circle-id="expertCockpitStore.currentCircle.id"
|
|
:max-count="4"
|
|
></CourseSessionDueDatesList>
|
|
</div>
|
|
<SubmissionsOverview
|
|
:course-session="courseSession"
|
|
:selected-circle="expertCockpitStore.currentCircle.id"
|
|
></SubmissionsOverview>
|
|
<div class="pt-4">
|
|
<!-- progress -->
|
|
<div
|
|
v-if="courseSessionDetailResult.filterMembers().length > 0"
|
|
class="bg-white p-6"
|
|
>
|
|
<h1 class="heading-3 mb-5">{{ $t("cockpit.progress") }}</h1>
|
|
<ul>
|
|
<ItPersonRow
|
|
v-for="csu in courseSessionDetailResult.filterMembers()"
|
|
:key="csu.user_id"
|
|
:name="`${csu.first_name} ${csu.last_name}`"
|
|
:avatar-url="csu.avatar_url"
|
|
>
|
|
<template #center>
|
|
<div
|
|
class="mt-2 flex w-full flex-col items-center justify-start lg:mt-0 lg:flex-row"
|
|
>
|
|
<LearningPathDiagram
|
|
:course-session-id="courseSession.id"
|
|
:course-slug="props.courseSlug"
|
|
:user-id="csu.user_id"
|
|
:show-circle-slugs="[expertCockpitStore.currentCircle.slug]"
|
|
diagram-type="singleSmall"
|
|
class="mr-4"
|
|
></LearningPathDiagram>
|
|
<p class="lg:min-w-[150px]">
|
|
{{ expertCockpitStore.currentCircle.title }}
|
|
</p>
|
|
<UserStatusCount
|
|
:course-slug="props.courseSlug"
|
|
:user-id="csu.user_id"
|
|
></UserStatusCount>
|
|
</div>
|
|
</template>
|
|
<template #link>
|
|
<router-link
|
|
:to="{
|
|
name: 'profileLearningPath',
|
|
params: { userId: csu.user_id, courseSlug: props.courseSlug },
|
|
}"
|
|
class="link w-full lg:text-right"
|
|
>
|
|
{{ $t("general.profileLink") }}
|
|
</router-link>
|
|
</template>
|
|
</ItPersonRow>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div v-else class="container-large mt-4">
|
|
<!-- No circle selected -->
|
|
<span class="text-lg text-orange-600">
|
|
{{ $t("a.Kein Circle verfügbar oder ausgewählt.") }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div v-else class="container-large mt-4">
|
|
<span class="text-lg text-orange-600">
|
|
<!-- No circle at all (should never happen, mostly
|
|
for us to reduce confusion why the cockpit is just empty...) -->
|
|
{{ $t("a.Kein Circle verfügbar oder ausgewählt.") }}
|
|
</span>
|
|
</div>
|
|
</template>
|