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

2
<script setup lang="ts">
import AssignmentSubmissionProgress from "@/pages/cockpit/cockpitPage/AssignmentSubmissionProgress.vue";
import { useCockpitStore } from "@/stores/cockpit";
import { useLearningPathStore } from "@/stores/learningPath";
import { useUserStore } from "@/stores/user";
import type {
  CourseSession,
  LearningContent,
  LearningContentAssignment,
} from "@/types";
import log from "loglevel";
import { computed } from "vue";
import { useTranslation } from "i18next-vue";
import FeedbackSubmissionProgress from "@/pages/cockpit/cockpitPage/FeedbackSubmissionProgress.vue";
import { learningContentTypeData } from "@/utils/typeMaps";

interface Submittable {
  id: number;
  circleName: string;
  frontendUrl: string;
  title: string;
  showDetailsText: string;
  detailsLink: string;
  content: LearningContent;
}

const props = defineProps<{
  courseSession: CourseSession;
  selectedCircles: string[];
}>();

log.debug("SubmissionsOverview created", props.courseSession.id);

const userStore = useUserStore();
const cockpitStore = useCockpitStore();
const learningPathStore = useLearningPathStore();
const { t } = useTranslation();

const submittables = computed(() => {
  const learningPath = learningPathStore.learningPathForUser(
    props.courseSession.course.slug,
    userStore.id
  );
  if (!learningPath) {
    return [];
  }
  return learningPath.circles
    .filter((circle) => props.selectedCircles.includes(circle.title))
    .flatMap((circle) => {
      const learningContents = circle.flatLearningContents.filter(
        (lc) =>
          lc.content_type === "learnpath.LearningContentAssignment" ||
          lc.content_type === "learnpath.LearningContentFeedback"
      );

      return learningContents.map((lc) => {
        return {
          id: lc.id,
          circleName: circle.title,
          frontendUrl: lc.frontend_url,
          title: getLearningContentType(lc),
          showDetailsText: getShowDetailsText(lc),
          detailsLink: getDetailsLink(lc),
          content: lc,
        };
      });
    }) as Submittable[];
});

const isFeedback = (lc: LearningContent) => {
  return lc.content_type === "learnpath.LearningContentFeedback";
};

const isAssignment = (lc: LearningContent) => {
  return lc.content_type === "learnpath.LearningContentAssignment";
};

const getLearningContentType = (lc: LearningContent) => {
  if (isAssignment(lc)) {
    const lcTypeData = learningContentTypeData(lc);
    if ((lc as LearningContentAssignment).assignment_type === "REFLECTION") {
      return lcTypeData.title;
    }
    return `${lcTypeData.title}: ${lc.title}`;
  }
  return t("Feedback: Feedback zum Lehrgang");
};

const getShowDetailsText = (lc: LearningContent) => {
  if (isAssignment(lc)) {
    const assignmentType = (lc as LearningContentAssignment).assignment_type;
    if (assignmentType === "CASEWORK" || assignmentType === "REFLECTION") {
      return t("Ergebnisse anschauen");
    } else if (assignmentType === "PREP_ASSIGNMENT") {
      return t("Status anschauen");
    }
  }
  return t("Feedback anschauen");
};

const getDetailsLink = (lc: LearningContent) => {
  if (isFeedback(lc)) {
    return `cockpit/feedback/${lc.parentCircle.id}`;
  }
  return `cockpit/assignment/${lc.id}`;
};

const getIconName = (lc: LearningContent) => {
  if (isAssignment(lc)) {
    const assignmentType = (lc as LearningContentAssignment).assignment_type;
    if (assignmentType === "PREP_ASSIGNMENT" || assignmentType === "CASEWORK") {
      return "it-icon-assignment-large";
    } else if (assignmentType === "REFLECTION") {
      return "it-icon-test-large";
    }
  }
  return "it-icon-feedback-large";
};
</script>

<template>
  <div class="bg-white px-6 py-2">
    <div v-if="cockpitStore.courseSessionUsers" class="divide-y divide-gray-500">
      <div
        v-for="submittable in submittables"
        :key="submittable.id"
        class="flex flex-row justify-between py-4"
      >
        <div class="flex w-1/3 flex-row items-center space-x-4 pr-2">
          <component :is="getIconName(submittable.content)" class="h-9 w-9"></component>
          <div class="flex flex-col">
            <h3 class="text-bold flex items-center gap-2">{{ submittable.title }}</h3>
            <p class="text-gray-800">Circle «{{ submittable.circleName }}»</p>
          </div>
        </div>
        <AssignmentSubmissionProgress
          v-if="isAssignment(submittable.content)"
          :course-session="props.courseSession"
          :learning-content-assignment="submittable.content as LearningContentAssignment"
          :show-title="false"
          class="grow pr-8"
        />
        <FeedbackSubmissionProgress
          v-if="isFeedback(submittable.content)"
          :course-session="props.courseSession"
          :circle-id="submittable.content.parentCircle.id"
          class="grow pr-8"
        ></FeedbackSubmissionProgress>
        <div class="flex w-1/4 items-center justify-end">
          <button class="btn-primary">
            <router-link
              :to="submittable.detailsLink"
              :data-cy="`show-details-btn-${submittable.content.slug}`"
            >
              {{ submittable.showDetailsText }}
            </router-link>
          </button>
        </div>
      </div>
    </div>
  </div>
</template>