vbv/client/src/components/dashboard/CoursePanel.vue

<script setup lang="ts">
import AgentConnectionCount from "@/components/dashboard/AgentConnectionCount.vue";
import AssignmentSummary from "@/components/dashboard/AssignmentSummary.vue";
import BerufsbildnerStatistics from "@/components/dashboard/BerufsbildnerStatistics.vue";
import CompetenceSummary from "@/components/dashboard/CompetenceSummary.vue";
import MentorCompetenceSummary from "@/components/dashboard/MentorCompetenceSummary.vue";
import MentorOpenTasksCount from "@/components/dashboard/MentorOpenTasksCount.vue";
import UkStatistics from "@/components/dashboard/UkStatistics.vue";
import LearningPathDiagram from "@/components/learningPath/LearningPathDiagram.vue";
import type { DashboardCourseConfigType, WidgetType } from "@/services/dashboard";
import { getCockpitUrl, getLearningMentorUrl, getLearningPathUrl } from "@/utils/utils";
import { computed } from "vue";
import TrainingResponsibleStatistics from "./TrainingResponsibleStatistics.vue";

const mentorWidgets = [
  "MentorTasksWidget",
  "MentorPersonWidget",
  "MentorCompetenceWidget",
];
const progressWidgets = ["CompetenceWidget", "CompetenceCertificateWidget"];

const props = defineProps<{
  courseConfig: DashboardCourseConfigType | undefined;
}>();

const courseSlug = computed(() => props.courseConfig?.course_slug ?? "");
const courseName = computed(() => props.courseConfig?.course_title ?? "");
const numberOfMentorWidgets = computed(() => {
  return (
    props.courseConfig?.widgets?.filter((widget) => mentorWidgets.includes(widget))
      .length ?? 0
  );
});
const numberOfProgressWidgets = computed(() => {
  return (
    props.courseConfig?.widgets?.filter((widget) => progressWidgets.includes(widget))
      .length ?? 0
  );
});

function hasWidget(widget: WidgetType) {
  return props.courseConfig?.widgets?.includes(widget) ?? false;
}

const actionButtonProps = computed<{ href: string; text: string; cyKey: string }>(
  () => {
    if (props.courseConfig?.role_key === "Supervisor") {
      return {
        href: getCockpitUrl(props.courseConfig?.course_slug),
        text: "Cockpit anschauen",
        cyKey: "cockpit-dashboard-link",
      };
    }
    if (props.courseConfig?.role_key === "Trainer") {
      return {
        href: getCockpitUrl(props.courseConfig?.course_slug),
        text: "Cockpit anschauen",
        cyKey: "cockpit-dashboard-link",
      };
    }
    if (props.courseConfig?.role_key === "MentorVV") {
      return {
        href: getLearningMentorUrl(props.courseConfig?.course_slug),
        text: "a.Übersicht anschauen",
        cyKey: "lm-dashboard-link",
      };
    }
    return {
      href: getLearningPathUrl(props.courseConfig?.course_slug),
      text: "Weiter lernen",
      cyKey: "progress-dashboard-continue-course-link",
    };
  }
);

function hasActionButton(): boolean {
  return (
    props.courseConfig?.role_key !== "MentorUK" &&
    props.courseConfig?.role_key !== "Ausbildungsverantwortlicher" &&
    props.courseConfig?.role_key !== "Berufsbildner"
  );
}
</script>

<template>
  <div
    v-if="courseConfig"
    class="mb-14 space-y-8"
    :data-cy="`panel-${courseConfig.course_slug}`"
  >
    <div class="flex flex-col space-y-8 bg-white p-6">
      <div class="border-b border-gray-300 pb-8">
        <div class="flex flex-row flex-wrap items-start justify-between pb-3 sm:pb-0">
          <h3 class="mb-4 text-2xl sm:text-3xl" data-cy="db-course-title">
            {{ courseName }}
          </h3>
          <a
            v-if="hasActionButton()"
            :href="actionButtonProps.href"
            class="btn-blue"
            :data-cy="actionButtonProps.cyKey"
          >
            {{ $t(actionButtonProps.text) }}
          </a>
        </div>
        <p>
          <span class="rounded bg-gray-300 px-2 py-1" data-cy="panel-role-key">
            {{ $t(courseConfig.role_key) }}
          </span>
          <router-link
            v-if="courseConfig.has_preview"
            :to="getLearningPathUrl(courseConfig.course_slug)"
            class="inline-block pt-3 sm:pl-6 sm:pt-0"
            target="_blank"
          >
            <div class="flex items-center">
              <span>{{ $t("a.Vorschau Teilnehmer") }}</span>
              <it-icon-external-link class="ml-1 !h-4 !w-4" />
            </div>
          </router-link>
        </p>
      </div>

      <div
        v-if="
          hasWidget('ProgressWidget') &&
          courseConfig.session_to_continue_id &&
          courseSlug
        "
        class="border-b border-gray-300 pb-8 last:border-0"
      >
        <LearningPathDiagram
          :key="courseSlug"
          :course-slug="courseSlug"
          :course-session-id="courseConfig.session_to_continue_id"
          diagram-type="horizontal"
        ></LearningPathDiagram>
      </div>

      <div
        v-if="numberOfProgressWidgets"
        class="flex flex-col flex-wrap gap-x-[60px] border-b border-gray-300 pb-8 last:border-0 md:flex-row"
      >
        <AssignmentSummary
          v-if="hasWidget('CompetenceCertificateWidget')"
          :course-slug="courseSlug"
          :session-to-continue-id="courseConfig.session_to_continue_id"
          :course-id="courseConfig.course_id"
        />
        <CompetenceSummary
          v-if="hasWidget('CompetenceWidget')"
          :course-slug="courseSlug"
          :session-to-continue-id="courseConfig.session_to_continue_id"
          :course-id="courseConfig.course_id"
        ></CompetenceSummary>
      </div>

      <div
        v-if="hasWidget('UKStatisticsWidget')"
        class="flex flex-col flex-wrap gap-x-[60px] border-b border-gray-300 pb-8 last:border-0 md:flex-row"
      >
        <UkStatistics :course-slug="courseSlug" :course-id="courseConfig.course_id" />
      </div>

      <div
        v-if="hasWidget('UKBerufsbildnerStatisticsWidget')"
        class="flex flex-col flex-wrap gap-x-[60px] border-b border-gray-300 pb-8 last:border-0 md:flex-row"
      >
        <BerufsbildnerStatistics
          :course-slug="courseSlug"
          :course-id="courseConfig.course_id"
          :agent-role="courseConfig.role_key"
        />
      </div>

      <div
        v-if="numberOfMentorWidgets > 0"
        class="flex flex-col flex-wrap items-stretch md:flex-row"
      >
        <AgentConnectionCount
          v-if="hasWidget('MentorPersonWidget')"
          :course-id="courseConfig.course_id"
          :course-slug="courseConfig?.course_slug"
        />
        <MentorOpenTasksCount
          v-if="hasWidget('MentorTasksWidget')"
          :course-id="courseConfig.course_id"
          :course-slug="courseSlug"
        />
        <MentorCompetenceSummary
          v-if="hasWidget('MentorCompetenceWidget')"
          :course-id="courseConfig.course_id"
          :agent-role="courseConfig.role_key"
        />
      </div>

      <TrainingResponsibleStatistics
        v-if="hasWidget('TrainingResponsibleStatisticsWidget')"
        :course-id="courseConfig.course_id"
        :course-session-id="courseConfig.session_to_continue_id"
      ></TrainingResponsibleStatistics>
    </div>
  </div>
</template>