113 lines
3.2 KiB
Vue
113 lines
3.2 KiB
Vue
<script setup lang="ts">
|
|
import DateEmbedding from "@/components/dueDates/DateEmbedding.vue";
|
|
import type { Assignment } from "@/types";
|
|
import { useRouteQuery } from "@vueuse/router";
|
|
import log from "loglevel";
|
|
import dayjs from "dayjs";
|
|
|
|
interface Props {
|
|
assignment: Assignment;
|
|
submissionDeadlineStart?: string | null;
|
|
}
|
|
|
|
const props = withDefaults(defineProps<Props>(), {
|
|
submissionDeadlineStart: "",
|
|
});
|
|
|
|
log.debug("AssignmentIntroductionView created", props.assignment);
|
|
|
|
const step = useRouteQuery("step");
|
|
</script>
|
|
|
|
<template>
|
|
<!-- eslint-disable vue/no-v-html -->
|
|
<p
|
|
v-if="props.assignment.intro_text"
|
|
class="default-wagtail-rich-text text-large"
|
|
v-html="props.assignment.intro_text"
|
|
></p>
|
|
|
|
<h3 class="mb-4 mt-8">{{ $t("assignment.taskDefinitionTitle") }}</h3>
|
|
<p class="text-large">
|
|
{{ $t("assignment.taskDefinition") }}
|
|
</p>
|
|
<ul>
|
|
<li v-for="(task, index) in props.assignment.tasks" :key="task.id" class="py-1">
|
|
<button class="text-large link" @click="step = (index + 1).toString()">
|
|
- {{ task.value.title }}
|
|
</button>
|
|
</li>
|
|
</ul>
|
|
|
|
<h3 class="mb-4 mt-8">{{ $t("assignment.dueDateSubmission") }}</h3>
|
|
|
|
<p v-if="submissionDeadlineStart" class="text-large">
|
|
{{ $t("assignment.dueDateIntroduction") }}
|
|
<DateEmbedding :single-date="dayjs(submissionDeadlineStart)"></DateEmbedding>
|
|
</p>
|
|
<p v-else class="text-large">
|
|
{{ $t("assignment.dueDateNotSet") }}
|
|
</p>
|
|
|
|
<div v-if="props.assignment.effort_required">
|
|
<h3 class="mb-4 mt-8">{{ $t("assignment.effortTitle") }}</h3>
|
|
<p class="text-large">{{ props.assignment.effort_required }}</p>
|
|
</div>
|
|
|
|
<div v-if="props.assignment.performance_objectives.length">
|
|
<h3 class="mt-8 border-b border-gray-500 pb-4">
|
|
{{ $t("assignment.performanceObjectivesTitle") }}
|
|
</h3>
|
|
<p
|
|
v-for="performance_objective in props.assignment.performance_objectives"
|
|
:key="performance_objective.id"
|
|
class="text-large border-b border-gray-500 py-4"
|
|
>
|
|
{{ performance_objective.value.text }}
|
|
</p>
|
|
</div>
|
|
|
|
<div
|
|
v-if="
|
|
props.assignment.evaluation_description ||
|
|
props.assignment.evaluation_document_url
|
|
"
|
|
>
|
|
<h3 class="mb-4 mt-8">{{ $t("a.Bewertung") }}</h3>
|
|
<p
|
|
v-if="props.assignment.evaluation_description"
|
|
class="default-wagtail-rich-text text-large"
|
|
v-html="props.assignment.evaluation_description"
|
|
></p>
|
|
<p v-if="props.assignment.evaluation_document_url">
|
|
<a
|
|
:href="props.assignment.evaluation_document_url"
|
|
target="_blank"
|
|
class="text-large link"
|
|
>
|
|
{{ $t("assignment.showAssessmentDocument") }}
|
|
</a>
|
|
</p>
|
|
</div>
|
|
|
|
<div>
|
|
<h3 class="mb-4 mt-8">{{ $t("a.Kompetenznachweis") }}</h3>
|
|
<p class="text-large">
|
|
{{
|
|
$t("circlePage.Dieser Inhalt gehört zu x", {
|
|
x: assignment?.competence_certificate?.title,
|
|
})
|
|
}}
|
|
<br />
|
|
<router-link
|
|
v-if="assignment.competence_certificate?.frontend_url"
|
|
:to="assignment.competence_certificate?.frontend_url ?? ''"
|
|
class="link"
|
|
data-cy="open-competence-certificate"
|
|
>
|
|
{{ $t("circlePage.Im KompetenzNavi anschauen") }}
|
|
</router-link>
|
|
</p>
|
|
</div>
|
|
</template>
|