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

<script setup lang="ts">
import ItPersonRow from "@/components/ui/ItPersonRow.vue";
import type { StatusCount, StatusCountKey } from "@/components/ui/ItProgress.vue";
import AssignmentSubmissionProgress from "@/pages/cockpit/assignmentsPage/AssignmentSubmissionProgress.vue";
import type { AssignmentLearningContent } from "@/services/assignmentService";
import {
  findAssignmentDetail,
  loadAssignmentCompletionStatusData,
} from "@/services/assignmentService";
import { useCockpitStore } from "@/stores/cockpit";
import type { AssignmentCompletionStatus, CourseSession } from "@/types";
import dayjs from "dayjs";
import log from "loglevel";
import { computed, onMounted, reactive } from "vue";

const props = defineProps<{
  courseSession: CourseSession;
  assignment: AssignmentLearningContent;
}>();

log.debug("AssignmentDetails created", props.assignment.assignmentId);

const cockpitStore = useCockpitStore();

const state = reactive({
  statusByUser: [] as {
    userStatus: AssignmentCompletionStatus;
    progressStatus: StatusCountKey;
    userId: number;
    grade: number | null;
  }[],
  progressStatusCount: {} as StatusCount,
});

onMounted(async () => {
  state.statusByUser = await loadAssignmentCompletionStatusData(
    props.assignment.assignmentId,
    props.courseSession.id
  );
});

function submissionStatusForUser(userId: number) {
  return state.statusByUser.find((s) => s.userId === userId);
}

const assignmentDetail = computed(() =>
  findAssignmentDetail(props.assignment.assignmentId)
);
</script>

<template>
  <div v-if="state.statusByUser.length">
    <div class="text-large font-bold">
      {{ assignment.title }}
    </div>
    <div v-if="assignmentDetail">
      <span>
        Abgabetermin:
        {{ dayjs(assignmentDetail.submission_deadline_start).format("DD.MM.YYYY") }}
      </span>
      -
      <span>
        Freigabetermin:
        {{ dayjs(assignmentDetail.evaluation_deadline_start).format("DD.MM.YYYY") }}
      </span>
    </div>

    <div>
      <a :href="props.assignment.frontend_url" class="link" target="_blank">
        Im Circle anzeigen
      </a>
    </div>

    <div class="mt-4">
      <AssignmentSubmissionProgress
        :course-session="courseSession"
        :assignment="assignment"
        :show-title="false"
      />
    </div>

    <div v-if="cockpitStore.courseSessionUsers?.length" class="mt-6">
      <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"
          :data-cy="csu.last_name"
        >
          <template #center>
            <section class="flex w-full justify-between px-8">
              <div
                v-if="
                  ['EVALUATION_SUBMITTED'].includes(
                    submissionStatusForUser(csu.user_id)?.userStatus ?? ''
                  )
                "
                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">Bewertung freigegeben</div>
              </div>
              <div
                v-else-if="
                  ['EVALUATION_IN_PROGRESS', 'SUBMITTED'].includes(
                    submissionStatusForUser(csu.user_id)?.userStatus ?? ''
                  )
                "
                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">Ergebnisse abgegeben</div>
              </div>
              <div v-else></div>

              <div v-if="submissionStatusForUser(csu.user_id)?.grade">
                Note: {{ submissionStatusForUser(csu.user_id)?.grade }}
              </div>
            </section>
          </template>
          <template #link>
            <router-link
              v-if="submissionStatusForUser(csu.user_id)?.progressStatus === 'SUCCESS'"
              :to="`/course/${props.courseSession.course.slug}/cockpit/assignment/${assignment.assignmentId}/${csu.user_id}`"
              class="w-full text-right underline"
              data-cy="show-results"
            >
              Ergebnisse anzeigen
            </router-link>
          </template>
        </ItPersonRow>
      </ul>
    </div>
  </div>
</template>

<style scoped></style>