vbv/client/src/pages/cockpit/CockpitIndexPage.vue

<script setup lang="ts">
import LearningPathDiagram from "@/components/learningPath/LearningPathDiagram.vue";
import ItPersonRow from "@/components/ui/ItPersonRow.vue";
import ItProgress from "@/components/ui/ItProgress.vue";
import type { LearningPath } from "@/services/learningPath";

import { useCockpitStore } from "@/stores/cockpit";
import { useCompetenceStore } from "@/stores/competence";
import { useLearningPathStore } from "@/stores/learningPath";
import * as log from "loglevel";

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

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

const cockpitStore = useCockpitStore();
const competenceStore = useCompetenceStore();
const learningPathStore = useLearningPathStore();

function userCountStatus(userId: number) {
  return competenceStore.calcStatusCount(
    competenceStore.flatPerformanceCriteria(userId)
  );
}

const data = {
  transferProgress: {
    fail: 0,
    success: 3,
    unknown: 8,
  },
};

function setActiveClasses(id: number) {
  return cockpitStore.selectedCircles.indexOf(id) > -1
    ? ["bg-blue-900", "text-white"]
    : ["text-bg-900"];
}
</script>

<template>
  <div class="bg-gray-200">
    <div class="container-large">
      <div class="flex lg:flex-row items-center mb-9">
        <h1 class="heading-3">{{ $t("general.circles") }}:</h1>
        <ul class="flex flex-row leading-7 text-base font-bold ml-4">
          <li
            v-for="circle in cockpitStore.circles"
            :key="circle.id"
            class="mr-4 last:mr-0"
          >
            <button
              class="border-2 border-blue-900 rounded-full px-4 mr-4 last:mr-0"
              :class="setActiveClasses(circle.id)"
              @click="cockpitStore.toggleCourseSelection(circle.id)"
            >
              {{ circle.title }}
            </button>
          </li>
        </ul>
      </div>
      <!-- Status -->
      <div class="grid gap-4 grid-rows-3 lg:grid-rows-none lg:grid-cols-3 mb-4">
        <div class="px-6 py-5 bg-white">
          <h1
            class="bg-assignment bg-no-repeat pl-[68px] heading-3 bg-60 leading-[60px] mb-4"
          >
            {{ $t("general.transferTask", 2) }}
          </h1>
          <div class="mb-4">
            <ItProgress :status-count="data.transferProgress"></ItProgress>
          </div>
          <p>{{ $t("cockpit.tasksDone") }}</p>
        </div>
        <div class="px-6 py-5 bg-white">
          <h1
            class="bg-feedback bg-no-repeat pl-[68px] heading-3 bg-60 leading-[60px] mb-4"
          >
            {{ $t("general.feedback", 2) }}
          </h1>
          <div class="mb-4">
            <ItProgress :status-count="data.transferProgress"></ItProgress>
          </div>
          <p>{{ $t("cockpit.feedbacksDone") }}</p>
        </div>
        <div class="px-6 py-5 bg-white">
          <h1
            class="bg-test bg-no-repeat pl-[68px] heading-3 bg-60 leading-[60px] mb-4"
          >
            {{ $t("general.examResult", 2) }}
          </h1>
          <div class="mb-4">
            <ItProgress :status-count="data.transferProgress"></ItProgress>
          </div>
          <p>{{ $t("cockpit.examsDone") }}</p>
        </div>
      </div>
      <div>
        <!-- progress -->
        <div v-if="cockpitStore.courseSessionUsers?.length" class="bg-white p-6">
          <h1 class="heading-3 mb-5">{{ $t("cockpit.progress") }}</h1>
          <ul>
            <ItPersonRow
              v-for="csu in cockpitStore.courseSessionUsers"
              :key="csu.user_id + csu.session_title"
              :name="`${csu.first_name} ${csu.last_name}`"
              :avatar-url="csu.avatar_url"
            >
              <template #center>
                <div class="flex flex-row items-center justify-between">
                  <div class="flex flex-row items-center gap-4">
                    <div class="h-12">
                      <LearningPathDiagram
                        v-if="
                          learningPathStore.learningPathForUser(
                            props.courseSlug,
                            csu.user_id
                          )
                        "
                        :learning-path="
                          learningPathStore.learningPathForUser(
                            props.courseSlug,
                            csu.user_id
                          ) as LearningPath
                        "
                        :postfix="`cockpit-${csu.user_id}`"
                        :profile-user-id="`${csu.user_id}`"
                        diagram-type="horizontalSmall"
                      ></LearningPathDiagram>
                    </div>
                    <div>
                      <span
                        v-for="title in cockpitStore.selectedCirclesTitles"
                        :key="title"
                      >
                        {{ title }}
                      </span>
                    </div>
                  </div>
                  <div class="ml-4 flex flex-row items-center">
                    <div class="flex flex-row items-center mr-6">
                      <it-icon-smiley-thinking
                        class="w-8 h-8 mr-2 inline-block"
                      ></it-icon-smiley-thinking>
                      <p class="text-bold inline-block">
                        {{ userCountStatus(csu.user_id).fail }}
                      </p>
                    </div>
                    <li class="flex flex-row items-center mr-6">
                      <it-icon-smiley-happy
                        class="w-8 h-8 mr-2 inline-block"
                      ></it-icon-smiley-happy>
                      <p class="text-bold inline-block">
                        {{ userCountStatus(csu.user_id).success }}
                      </p>
                    </li>
                    <li class="flex flex-row items-center">
                      <it-icon-smiley-neutral
                        class="w-8 h-8 mr-2 inline-block"
                      ></it-icon-smiley-neutral>
                      <p class="text-bold inline-block">
                        {{ userCountStatus(csu.user_id).unknown }}
                      </p>
                    </li>
                  </div>
                </div>
              </template>
              <template #link>
                <router-link
                  :to="`/course/${props.courseSlug}/cockpit/profile/${csu.user_id}`"
                >
                  {{ $t("cockpit.profileLink") }}
                </router-link>
              </template>
            </ItPersonRow>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped></style>