48 lines
1.3 KiB
Vue
48 lines
1.3 KiB
Vue
<script setup lang="ts">
|
|
import type { AssignmentCompletionData, AssignmentTask, UserDataText } from "@/types";
|
|
import { Assignment } from "@/types";
|
|
|
|
const props = defineProps<{
|
|
assignment: Assignment;
|
|
assignmentCompletionData: AssignmentCompletionData;
|
|
allowEdit: boolean;
|
|
}>();
|
|
|
|
const emit = defineEmits<{
|
|
(e: "editTask", task: AssignmentTask): void;
|
|
}>();
|
|
</script>
|
|
<template>
|
|
<div
|
|
v-for="task in props.assignment.tasks ?? []"
|
|
:key="task.id"
|
|
class="mb-6 border-t border-gray-400"
|
|
>
|
|
<div class="flex flex-row justify-between pt-8">
|
|
<p class="text-sm text-gray-900">{{ task.value.title }}</p>
|
|
<button
|
|
v-if="props.allowEdit"
|
|
class="link pl-2text-sm whitespace-nowrap"
|
|
@click="emit('editTask', task)"
|
|
>
|
|
{{ $t("assignment.edit") }}
|
|
</button>
|
|
</div>
|
|
<div v-for="taskBlock in task.value.content" :key="taskBlock.id">
|
|
<p
|
|
class="default-wagtail-rich-text pt-6 text-base font-bold"
|
|
v-html="taskBlock.value.text"
|
|
></p>
|
|
<p
|
|
v-if="
|
|
props.assignmentCompletionData &&
|
|
taskBlock.id in props.assignmentCompletionData
|
|
"
|
|
class="font-normal"
|
|
>
|
|
{{ (assignmentCompletionData[taskBlock.id].user_data as UserDataText).text }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</template>
|