Merge branch '43-overzicht-vragen-bij-opdracht-leerpad' into feat/leerpad-vragen
This commit is contained in:
Timo De Meyst
commit
1edbe219a6
179 changed files with 5197 additions and 3023 deletions
|
|
@ -3,8 +3,8 @@
|
|||
import type { LearningPath } from "@/data-objects/learning-paths/learning-path.ts";
|
||||
import { computed, type ComputedRef, ref } from "vue";
|
||||
import type { LearningObject } from "@/data-objects/learning-objects/learning-object.ts";
|
||||
import { useRoute } from "vue-router";
|
||||
import LearningObjectView from "@/views/learning-paths/LearningObjectView.vue";
|
||||
import { useRoute, useRouter } from "vue-router";
|
||||
import LearningObjectView from "@/views/learning-paths/learning-object/LearningObjectView.vue";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import LearningPathSearchField from "@/components/LearningPathSearchField.vue";
|
||||
import { useGetLearningPathQuery } from "@/queries/learning-paths.ts";
|
||||
|
|
@ -12,33 +12,47 @@
|
|||
import UsingQueryResult from "@/components/UsingQueryResult.vue";
|
||||
import authService from "@/services/auth/auth-service.ts";
|
||||
import { LearningPathNode } from "@/data-objects/learning-paths/learning-path-node.ts";
|
||||
import { useStudentAssignmentsQuery } from "@/queries/students";
|
||||
import type { AssignmentDTO } from "@dwengo-1/common/interfaces/assignment";
|
||||
import { watch } from "vue";
|
||||
import LearningPathGroupSelector from "@/views/learning-paths/LearningPathGroupSelector.vue";
|
||||
import { useQuestionsQuery } from "@/queries/questions";
|
||||
import type { QuestionsResponse } from "@/controllers/questions";
|
||||
import type { LearningObjectIdentifierDTO } from "@dwengo-1/common/interfaces/learning-content";
|
||||
import QandA from "@/components/QandA.vue";
|
||||
import type { QuestionDTO } from "@dwengo-1/common/interfaces/question";
|
||||
|
||||
import { useStudentAssignmentsQuery } from "@/queries/students";
|
||||
import type { AssignmentDTO } from "@dwengo-1/common/interfaces/assignment";
|
||||
import { watch } from "vue";
|
||||
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
const { t } = useI18n();
|
||||
|
||||
const props = defineProps<{ hruid: string; language: Language; learningObjectHruid?: string }>();
|
||||
const props = defineProps<{
|
||||
hruid: string;
|
||||
language: Language;
|
||||
learningObjectHruid?: string;
|
||||
}>();
|
||||
|
||||
interface Personalization {
|
||||
forStudent?: string;
|
||||
interface LearningPathPageQuery {
|
||||
forGroup?: string;
|
||||
assignmentNo?: string;
|
||||
classId?: string;
|
||||
}
|
||||
|
||||
const personalization = computed(() => {
|
||||
if (route.query.forStudent || route.query.forGroup) {
|
||||
const query = computed(() => route.query as LearningPathPageQuery);
|
||||
|
||||
const forGroup = computed(() => {
|
||||
if (query.value.forGroup && query.value.assignmentNo && query.value.classId) {
|
||||
return {
|
||||
forStudent: route.query.forStudent,
|
||||
forGroup: route.query.forGroup,
|
||||
} as Personalization;
|
||||
forGroup: parseInt(query.value.forGroup),
|
||||
assignmentNo: parseInt(query.value.assignmentNo),
|
||||
classId: query.value.classId,
|
||||
};
|
||||
}
|
||||
return {
|
||||
forStudent: authService.authState.user?.profile?.preferred_username,
|
||||
} as Personalization;
|
||||
return undefined;
|
||||
});
|
||||
|
||||
const learningPathQueryResult = useGetLearningPathQuery(props.hruid, props.language, personalization);
|
||||
const learningPathQueryResult = useGetLearningPathQuery(props.hruid, props.language, forGroup);
|
||||
|
||||
const learningObjectListQueryResult = useLearningObjectListForPathQuery(learningPathQueryResult.data);
|
||||
|
||||
|
|
@ -63,6 +77,17 @@ import { watch } from "vue";
|
|||
return currentIndex < nodesList.value?.length ? nodesList.value?.[currentIndex - 1] : undefined;
|
||||
});
|
||||
|
||||
const getQuestionsQuery = useQuestionsQuery(
|
||||
computed(
|
||||
() =>
|
||||
({
|
||||
language: currentNode.value?.language,
|
||||
hruid: currentNode.value?.learningobjectHruid,
|
||||
version: currentNode.value?.version,
|
||||
}) as LearningObjectIdentifierDTO,
|
||||
),
|
||||
);
|
||||
|
||||
const navigationDrawerShown = ref(true);
|
||||
|
||||
function isLearningObjectCompleted(learningObject: LearningObject): boolean {
|
||||
|
|
@ -102,6 +127,25 @@ import { watch } from "vue";
|
|||
return "notCompleted";
|
||||
}
|
||||
|
||||
const forGroupQueryParam = computed<number | undefined>({
|
||||
get: () => route.query.forGroup,
|
||||
set: async (value: number | undefined) => {
|
||||
const query = structuredClone(route.query);
|
||||
query.forGroup = value;
|
||||
await router.push({ query });
|
||||
},
|
||||
});
|
||||
|
||||
async function assign(): Promise<void> {
|
||||
await router.push({
|
||||
path: "/assignment/create",
|
||||
query: {
|
||||
hruid: props.hruid,
|
||||
language: props.language,
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
//TODO: berekenen of het een assignment is voor de student werkt nog niet zoals het hoort...
|
||||
|
||||
const studentAssignmentsQuery = useStudentAssignmentsQuery(authService.authState.user?.profile?.preferred_username);
|
||||
|
|
@ -154,64 +198,87 @@ import { watch } from "vue";
|
|||
v-model="navigationDrawerShown"
|
||||
:width="350"
|
||||
>
|
||||
<v-list-item>
|
||||
<template v-slot:title>
|
||||
<div class="learning-path-title">{{ learningPath.data.title }}</div>
|
||||
</template>
|
||||
<template v-slot:subtitle>
|
||||
<div>{{ learningPath.data.description }}</div>
|
||||
</template>
|
||||
</v-list-item>
|
||||
<v-list-item>
|
||||
<template v-slot:subtitle>
|
||||
<p>
|
||||
<v-icon
|
||||
:color="COLORS.notCompleted"
|
||||
:icon="ICONS.notCompleted"
|
||||
></v-icon>
|
||||
{{ t("legendNotCompletedYet") }}
|
||||
</p>
|
||||
<p>
|
||||
<v-icon
|
||||
:color="COLORS.completed"
|
||||
:icon="ICONS.completed"
|
||||
></v-icon>
|
||||
{{ t("legendCompleted") }}
|
||||
</p>
|
||||
<p>
|
||||
<v-icon
|
||||
:color="COLORS.teacherExclusive"
|
||||
:icon="ICONS.teacherExclusive"
|
||||
></v-icon>
|
||||
{{ t("legendTeacherExclusive") }}
|
||||
</p>
|
||||
</template>
|
||||
</v-list-item>
|
||||
<v-divider></v-divider>
|
||||
<div v-if="props.learningObjectHruid">
|
||||
<using-query-result
|
||||
:query-result="learningObjectListQueryResult"
|
||||
v-slot="learningObjects: { data: LearningObject[] }"
|
||||
>
|
||||
<template v-for="node in learningObjects.data">
|
||||
<v-list-item
|
||||
link
|
||||
:to="{ path: node.key, query: route.query }"
|
||||
:title="node.title"
|
||||
:active="node.key === props.learningObjectHruid"
|
||||
:key="node.key"
|
||||
v-if="!node.teacherExclusive || authService.authState.activeRole === 'teacher'"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<v-icon
|
||||
:color="COLORS[getNavItemState(node)]"
|
||||
:icon="ICONS[getNavItemState(node)]"
|
||||
></v-icon>
|
||||
</template>
|
||||
<template v-slot:append> {{ node.estimatedTime }}' </template>
|
||||
</v-list-item>
|
||||
<div class="d-flex flex-column h-100">
|
||||
<v-list-item>
|
||||
<template v-slot:title>
|
||||
<div class="learning-path-title">{{ learningPath.data.title }}</div>
|
||||
</template>
|
||||
</using-query-result>
|
||||
<template v-slot:subtitle>
|
||||
<div>{{ learningPath.data.description }}</div>
|
||||
</template>
|
||||
</v-list-item>
|
||||
<v-list-item>
|
||||
<template v-slot:subtitle>
|
||||
<p>
|
||||
<v-icon
|
||||
:color="COLORS.notCompleted"
|
||||
:icon="ICONS.notCompleted"
|
||||
></v-icon>
|
||||
{{ t("legendNotCompletedYet") }}
|
||||
</p>
|
||||
<p>
|
||||
<v-icon
|
||||
:color="COLORS.completed"
|
||||
:icon="ICONS.completed"
|
||||
></v-icon>
|
||||
{{ t("legendCompleted") }}
|
||||
</p>
|
||||
<p>
|
||||
<v-icon
|
||||
:color="COLORS.teacherExclusive"
|
||||
:icon="ICONS.teacherExclusive"
|
||||
></v-icon>
|
||||
{{ t("legendTeacherExclusive") }}
|
||||
</p>
|
||||
</template>
|
||||
</v-list-item>
|
||||
<v-list-item
|
||||
v-if="query.classId && query.assignmentNo && authService.authState.activeRole === 'teacher'"
|
||||
>
|
||||
<template v-slot:default>
|
||||
<learning-path-group-selector
|
||||
:class-id="query.classId"
|
||||
:assignment-number="parseInt(query.assignmentNo)"
|
||||
v-model="forGroupQueryParam"
|
||||
/>
|
||||
</template>
|
||||
</v-list-item>
|
||||
<v-divider></v-divider>
|
||||
<div v-if="props.learningObjectHruid">
|
||||
<using-query-result
|
||||
:query-result="learningObjectListQueryResult"
|
||||
v-slot="learningObjects: { data: LearningObject[] }"
|
||||
>
|
||||
<template v-for="node in learningObjects.data">
|
||||
<v-list-item
|
||||
link
|
||||
:to="{ path: node.key, query: route.query }"
|
||||
:title="node.title"
|
||||
:active="node.key === props.learningObjectHruid"
|
||||
:key="node.key"
|
||||
v-if="!node.teacherExclusive || authService.authState.activeRole === 'teacher'"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<v-icon
|
||||
:color="COLORS[getNavItemState(node)]"
|
||||
:icon="ICONS[getNavItemState(node)]"
|
||||
></v-icon>
|
||||
</template>
|
||||
<template v-slot:append> {{ node.estimatedTime }}' </template>
|
||||
</v-list-item>
|
||||
</template>
|
||||
</using-query-result>
|
||||
</div>
|
||||
<v-spacer></v-spacer>
|
||||
<v-list-item v-if="authService.authState.activeRole === 'teacher'">
|
||||
<template v-slot:default>
|
||||
<v-btn
|
||||
class="button-in-nav"
|
||||
@click="assign()"
|
||||
>{{ t("assignLearningPath") }}</v-btn
|
||||
>
|
||||
</template>
|
||||
</v-list-item>
|
||||
</div>
|
||||
<v-divider></v-divider>
|
||||
<div v-if="true" class="assignment-indicator">
|
||||
|
|
@ -229,12 +296,15 @@ import { watch } from "vue";
|
|||
<learning-path-search-field></learning-path-search-field>
|
||||
</div>
|
||||
</div>
|
||||
<learning-object-view
|
||||
:hruid="currentNode.learningobjectHruid"
|
||||
:language="currentNode.language"
|
||||
:version="currentNode.version"
|
||||
v-if="currentNode"
|
||||
></learning-object-view>
|
||||
<div class="learning-object-view-container">
|
||||
<learning-object-view
|
||||
:hruid="currentNode.learningobjectHruid"
|
||||
:language="currentNode.language"
|
||||
:version="currentNode.version"
|
||||
:group="forGroup"
|
||||
v-if="currentNode"
|
||||
></learning-object-view>
|
||||
</div>
|
||||
<div class="question-box">
|
||||
<div class="input-wrapper">
|
||||
<input
|
||||
|
|
@ -267,6 +337,12 @@ import { watch } from "vue";
|
|||
{{ t("next") }}
|
||||
</v-btn>
|
||||
</div>
|
||||
<using-query-result
|
||||
:query-result="getQuestionsQuery"
|
||||
v-slot="questionsResponse: { data: QuestionsResponse }"
|
||||
>
|
||||
<QandA :questions="questionsResponse.data.questions as QuestionDTO[] ?? []" />
|
||||
</using-query-result>
|
||||
</using-query-result>
|
||||
</template>
|
||||
|
||||
|
|
@ -284,6 +360,11 @@ import { watch } from "vue";
|
|||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.learning-object-view-container {
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
.navigation-buttons-container {
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue