vbv/client/src/pages/cockpit/assignmentsPage/AssignmentDetails.vue

<script setup lang="ts">
import ItPersonRow from "@/components/ui/ItPersonRow.vue";
import type { StatusCount } from "@/components/ui/ItProgress.vue";
import type { GradedUser } from "@/services/assignmentService";
import { loadAssignmentCompletionStatusData } from "@/services/assignmentService";
import type {
  CourseSession,
  CourseSessionUser,
  LearningContentAssignment,
} from "@/types";
import log from "loglevel";
import { computed, onMounted, reactive } from "vue";
import AssignmentSubmissionProgress from "@/pages/cockpit/cockpitPage/AssignmentSubmissionProgress.vue";
import { useCourseSessionDetailQuery } from "@/composables";
import { formatDueDate } from "../../../components/dueDates/dueDatesUtils";

const props = defineProps<{
  courseSession: CourseSession;
  learningContentAssignment: LearningContentAssignment;
}>();

log.debug(
  "AssignmentDetails created",
  props.learningContentAssignment.content_assignment_id
);

const courseSessionDetailResult = useCourseSessionDetailQuery();

const state = reactive({
  progressStatusCount: {} as StatusCount,
  gradedUsers: [] as GradedUser[],
  assignmentSubmittedUsers: [] as CourseSessionUser[],
});

const assignmentDetail = computed(() => {
  return courseSessionDetailResult.findAssignmentDetail(
    props.learningContentAssignment.content_assignment_id.toString()
  );
});

onMounted(async () => {
  const { gradedUsers, assignmentSubmittedUsers } =
    await loadAssignmentCompletionStatusData(
      props.learningContentAssignment.content_assignment_id,
      props.courseSession.id,
      props.learningContentAssignment.id
    );
  state.gradedUsers = gradedUsers;
  state.assignmentSubmittedUsers = assignmentSubmittedUsers;
});
</script>

<template>
  <div>
    <h2 class="heading-2 font-bold">
      {{ learningContentAssignment.title }}
    </h2>
    <div class="pt-1 underline">
      Circle «{{ learningContentAssignment.parentCircle.title }}»
    </div>
    <div v-if="assignmentDetail">
      <span>
        {{ $t("Abgabetermin Ergebnisse:") }}
        {{ formatDueDate(assignmentDetail.submission_deadline.start) }}
      </span>
      <template v-if="assignmentDetail.evaluation_deadline.start">
        <br />
        {{ $t("Freigabetermin Bewertungen:") }}
        {{ formatDueDate(assignmentDetail.evaluation_deadline.start) }}
      </template>
    </div>
    <div v-else>
      {{ $t("Keine Auftragsdetails verfügbar.") }}
    </div>

    <div class="mt-4">
      <!--  how to determine assignment-type? how to get AssignmentLearningContent? -->
      <AssignmentSubmissionProgress
        :course-session="courseSession"
        :learning-content-assignment="learningContentAssignment"
        :show-title="false"
      />
    </div>

    <div v-if="courseSessionDetailResult.filterMembers().length" class="mt-6">
      <ul>
        <ItPersonRow
          v-for="csu in courseSessionDetailResult.filterMembers()"
          :key="csu.user_id"
          :name="`${csu.first_name} ${csu.last_name}`"
          :avatar-url="csu.avatar_url"
          :data-cy="csu.last_name"
        >
          <template #center>
            <section class="flex w-full justify-between">
              <div
                v-if="
                  state.gradedUsers.map((gradedUser) => gradedUser.user).includes(csu)
                "
                class="flex items-center"
              >
                <div
                  class="relative flex h-7 w-7 items-center justify-center rounded-full border border-green-500 bg-green-500"
                >
                  <it-icon-check class="h-4/5 w-4/5"></it-icon-check>
                </div>
                <div class="ml-2">{{ $t("a.Bewertung freigegeben") }}</div>
              </div>
              <div
                v-else-if="state.assignmentSubmittedUsers.includes(csu)"
                class="flex items-center"
              >
                <div
                  class="relative flex h-7 w-7 items-center justify-center rounded-full border border-green-500"
                >
                  <it-icon-check class="h-6 w-6"></it-icon-check>
                </div>
                <div class="ml-2">{{ $t("a.Ergebnisse abgegeben") }}</div>
              </div>

              <div
                v-if="
                  state.gradedUsers.map((gradedUser) => gradedUser.user).includes(csu)
                "
              >
                {{
                  state.gradedUsers.find((u) => u.user.user_id === csu.user_id)?.points
                }}
                {{ $t("a.Punkte") }}
              </div>
            </section>
          </template>
          <template #link>
            <router-link
              v-if="state.assignmentSubmittedUsers.includes(csu)"
              :to="`/course/${props.courseSession.course.slug}/cockpit/assignment/${learningContentAssignment.content_assignment_id}/${csu.user_id}`"
              class="link lg:w-full lg:text-right"
              data-cy="show-results"
            >
              {{ $t("a.Ergebnisse anschauen") }}
            </router-link>
          </template>
        </ItPersonRow>
      </ul>
    </div>
  </div>
</template>

<style scoped></style>