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

2
<script setup lang="ts">
import AssignmentSubmissionProgress from "@/pages/cockpit/cockpitPage/AssignmentSubmissionProgress.vue";
import type {
  CourseSession,
  LearningContent,
  LearningContentAssignment,
  LearningContentEdoniqTest,
} 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";
import {
  useCourseDataWithCompletion,
  useCourseSessionDetailQuery,
} from "@/composables";
import { circleFlatLearningContents } from "@/services/circle";

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

const props = defineProps<{
  courseSession: CourseSession;
  selectedCircle: string;
}>();

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

const courseSessionDetailResult = useCourseSessionDetailQuery();

const { t } = useTranslation();

const lpQueryResult = useCourseDataWithCompletion();

const submittables = computed(() => {
  if (!lpQueryResult.circles.value?.length) {
    return [];
  }
  return lpQueryResult.circles.value
    .filter((circle) => props.selectedCircle == circle.id)
    .flatMap((circle) => {
      const learningContents = circleFlatLearningContents(circle).filter(
        (lc) =>
          lc.content_type === "learnpath.LearningContentAssignment" ||
          lc.content_type === "learnpath.LearningContentFeedback" ||
          lc.content_type === "learnpath.LearningContentEdoniqTest"
      );

      return learningContents.map((lc) => {
        return {
          id: lc.id,
          circleName: circle.title,
          circleId: circle.id,
          frontendUrl: lc.frontend_url,
          title: getLearningContentType(lc),
          showDetailsText: getShowDetailsText(lc),
          detailsLink: getDetailsLink(lc, circle.id),
          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 isEdoniqTest = (lc: LearningContent) => {
  return lc.content_type === "learnpath.LearningContentEdoniqTest";
};

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}`;
  } else if (isEdoniqTest(lc)) {
    return lc.title;
  } else if (isFeedback(lc)) {
    return t("Feedback: Feedback zum Lehrgang");
  }
  return "!!unknown!!";
};

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

const getDetailsLink = (lc: LearningContent, circleId: string) => {
  if (isFeedback(lc)) {
    return `cockpit/feedback/${circleId}`;
  } else if (isAssignment(lc) || isEdoniqTest(lc)) {
    return `cockpit/assignment/${lc.id}`;
  }
  return "";
};

const getIconName = (lc: LearningContent) => {
  if (isAssignment(lc)) {
    const assignmentType = (lc as LearningContentAssignment).assignment_type;
    if (
      assignmentType === "PREP_ASSIGNMENT" ||
      assignmentType === "CASEWORK" ||
      assignmentType === "PRAXIS_ASSIGNMENT" ||
      assignmentType === "CONDITION_ACCEPTANCE"
    ) {
      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="courseSessionDetailResult.filterMembers().length"
      class="divide-y divide-gray-500"
    >
      <div
        v-for="submittable in submittables"
        :key="submittable.id"
        class="flex flex-col justify-between gap-2 py-4 lg:flex-row lg:gap-4"
      >
        <div class="flex flex-row items-center gap-2 lg:w-1/3">
          <div class="min-h-9 min-w-9">
            <component
              :is="getIconName(submittable.content)"
              class="min-h-9 min-w-9"
            ></component>
          </div>
          <div class="flex flex-col">
            <h3 class="text-bold flex items-center gap-2">{{ submittable.title }}</h3>
            <p class="text-gray-800">
              {{ $t("a.Circle") }} «{{ submittable.circleName }}»
            </p>
          </div>
        </div>
        <AssignmentSubmissionProgress
          v-if="isAssignment(submittable.content) || isEdoniqTest(submittable.content)"
          :course-session="props.courseSession"
          :learning-content="submittable.content as (LearningContentAssignment | LearningContentEdoniqTest)"
          :show-title="false"
          class="grow pr-8"
        />
        <FeedbackSubmissionProgress
          v-if="isFeedback(submittable.content)"
          :course-session="props.courseSession"
          :circle-id="submittable.circleId"
          class="grow pr-8"
        ></FeedbackSubmissionProgress>
        <div class="flex items-center lg:w-1/4 lg:justify-end">
          <button v-if="submittable.detailsLink" class="btn-primary">
            <router-link
              :to="submittable.detailsLink"
              :data-cy="
                isFeedback(submittable.content)
                  ? `show-feedback-btn-${submittable.content.slug}`
                  : `show-details-btn-${submittable.content.slug}`
              "
            >
              {{ submittable.showDetailsText }}
            </router-link>
          </button>
        </div>
      </div>
    </div>
  </div>
</template>