vbv/client/src/pages/cockpit/cockpitPage/CockpitExpertPage.vue

<script setup lang="ts">
import LearningPathDiagram from "@/components/learningPath/LearningPathDiagram.vue";
import ItPersonRow from "@/components/ui/ItPersonRow.vue";

import SubmissionsOverview from "@/components/cockpit/SubmissionsOverview.vue";
import UserStatusCount from "@/components/cockpit/UserStatusCount.vue";
import CourseSessionDueDatesList from "@/components/dueDates/CourseSessionDueDatesList.vue";
import ItDropdownSelect from "@/components/ui/ItDropdownSelect.vue";
import { useCourseSessionDetailQuery, useCurrentCourseSession } from "@/composables";
import { useExpertCockpitPageData } from "@/pages/cockpit/cockpitPage/composables";
import { useExpertCockpitStore } from "@/stores/expertCockpit";
import log from "loglevel";

const props = defineProps<{
  courseSlug: string;
}>();

log.debug("CockpitIndexPage created", props.courseSlug);

const { loading } = useExpertCockpitPageData(props.courseSlug);

const expertCockpitStore = useExpertCockpitStore();
const courseSession = useCurrentCourseSession();
const courseSessionDetailResult = useCourseSessionDetailQuery();
</script>

<template>
  <div v-if="!loading" class="bg-gray-200">
    <div v-if="expertCockpitStore.circles?.length">
      <div v-if="expertCockpitStore.currentCircle" class="container-large">
        <div class="mb-9 flex flex-col lg:flex-row lg:items-center lg:justify-between">
          <h1>Cockpit</h1>
          <ItDropdownSelect
            :model-value="expertCockpitStore.currentCircle"
            class="mt-4 w-full lg:mt-0 lg:w-96"
            :items="expertCockpitStore.circles"
            @update:model-value="expertCockpitStore.setCurrentCourseCircleFromEvent"
          ></ItDropdownSelect>
        </div>
        <!-- Status -->
        <div class="mb-4 gap-4 lg:grid lg:grid-cols-3 lg:grid-rows-none">
          <div class="my-4 flex flex-col justify-between bg-white p-6 lg:my-0">
            <div>
              <h3 class="heading-3 mb-4 flex items-center gap-2">
                {{ $t("Trainerunterlagen") }}
              </h3>
              <div class="mb-4">
                {{ $t("cockpit.trainerFilesText") }}
              </div>
            </div>
            <div>
              <a
                href="https://vbvbern.sharepoint.com/sites/myVBV-AFA_K-CI"
                class="btn-secondary min-w-min"
                target="_blank"
              >
                {{ $t("MS Teams öffnen") }}
              </a>
            </div>
          </div>
          <div
            v-if="courseSession.course.configuration.enable_circle_documents"
            class="my-4 flex flex-col justify-between bg-white p-6 lg:my-0"
            data-cy="circle-documents"
          >
            <div>
              <h3 class="heading-3 mb-4 flex items-center gap-2">
                {{ $t("a.Unterlagen für Teilnehmenden") }}
              </h3>
              <div class="mb-4">
                {{ $t("a.Stelle deinen Lernenden zusätzliche Inhalte zur Verfügung.") }}
              </div>
            </div>
            <div>
              <router-link
                :to="`/course/${props.courseSlug}/cockpit/documents`"
                class="btn-secondary min-w-min"
              >
                {{ $t("a.Zum Unterlagen-Upload") }}
              </router-link>
            </div>
          </div>
          <div class="my-4 flex flex-col justify-between bg-white p-6 lg:my-0">
            <div>
              <h3 class="heading-3 mb-4 flex items-center gap-2">
                {{ $t("a.Anwesenheitskontrolle Präsenzkurse") }}
              </h3>
              <div class="mb-4">
                {{
                  $t(
                    "Hier überprüfst und bestätigst du die Anwesenheit deiner Teilnehmenden."
                  )
                }}
              </div>
            </div>
            <div>
              <router-link
                :to="`/course/${props.courseSlug}/cockpit/attendance`"
                class="btn-secondary min-w-min"
              >
                {{ $t("Anwesenheit prüfen") }}
              </router-link>
            </div>
          </div>
        </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>
  </div>
</template>

<style scoped></style>