411 lines
15 KiB
Vue
411 lines
15 KiB
Vue
<script setup lang="ts">
|
|
import { Language } from "@/data-objects/language.ts";
|
|
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, 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";
|
|
import { useLearningObjectListForPathQuery } from "@/queries/learning-objects.ts";
|
|
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 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 QuestionNotification from "@/components/QuestionNotification.vue";
|
|
import QuestionBox from "@/components/QuestionBox.vue";
|
|
import { AccountType } from "@dwengo-1/common/util/account-types";
|
|
|
|
const router = useRouter();
|
|
const route = useRoute();
|
|
const { t } = useI18n();
|
|
|
|
const props = defineProps<{
|
|
hruid: string;
|
|
language: Language;
|
|
learningObjectHruid?: string;
|
|
}>();
|
|
|
|
interface LearningPathPageQuery {
|
|
forGroup?: string;
|
|
assignmentNo?: string;
|
|
classId?: string;
|
|
}
|
|
|
|
const query = computed(() => route.query as LearningPathPageQuery);
|
|
|
|
const forGroup = computed(() => {
|
|
if (query.value.forGroup && query.value.assignmentNo && query.value.classId) {
|
|
return {
|
|
forGroup: parseInt(query.value.forGroup),
|
|
assignmentNo: parseInt(query.value.assignmentNo),
|
|
classId: query.value.classId,
|
|
};
|
|
}
|
|
return undefined;
|
|
});
|
|
|
|
const learningPathQueryResult = useGetLearningPathQuery(props.hruid, props.language, forGroup);
|
|
|
|
const learningObjectListQueryResult = useLearningObjectListForPathQuery(learningPathQueryResult.data);
|
|
|
|
const nodesList: ComputedRef<LearningPathNode[] | null> = computed(
|
|
() => learningPathQueryResult.data.value?.nodesAsList ?? null,
|
|
);
|
|
|
|
const currentNode = computed(() => {
|
|
const currentHruid = props.learningObjectHruid;
|
|
return nodesList.value?.find((it) => it.learningobjectHruid === currentHruid);
|
|
});
|
|
|
|
const nextNode = computed(() => {
|
|
if (!currentNode.value || !nodesList.value) return undefined;
|
|
const currentIndex = nodesList.value?.indexOf(currentNode.value);
|
|
return currentIndex < nodesList.value?.length ? nodesList.value?.[currentIndex + 1] : undefined;
|
|
});
|
|
|
|
const previousNode = computed(() => {
|
|
if (!currentNode.value || !nodesList.value) return undefined;
|
|
const currentIndex = nodesList.value?.indexOf(currentNode.value);
|
|
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 {
|
|
if (learningObjectListQueryResult.isSuccess) {
|
|
return (
|
|
learningPathQueryResult.data.value?.nodesAsList?.find(
|
|
(it) =>
|
|
it.learningobjectHruid === learningObject.key &&
|
|
it.version === learningObject.version &&
|
|
it.language === learningObject.language,
|
|
)?.done ?? false
|
|
);
|
|
}
|
|
return false;
|
|
}
|
|
|
|
type NavItemState = "teacherExclusive" | "completed" | "notCompleted";
|
|
|
|
const ICONS: Record<NavItemState, string> = {
|
|
teacherExclusive: "mdi-information",
|
|
completed: "mdi-checkbox-marked-circle-outline",
|
|
notCompleted: "mdi-checkbox-blank-circle-outline",
|
|
};
|
|
|
|
const COLORS: Record<NavItemState, string | undefined> = {
|
|
teacherExclusive: "info",
|
|
completed: "success",
|
|
notCompleted: undefined,
|
|
};
|
|
|
|
function getNavItemState(learningObject: LearningObject): NavItemState {
|
|
if (learningObject.teacherExclusive) {
|
|
return "teacherExclusive";
|
|
} else if (isLearningObjectCompleted(learningObject)) {
|
|
return "completed";
|
|
}
|
|
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,
|
|
},
|
|
});
|
|
}
|
|
|
|
const discussionLink = computed(
|
|
() =>
|
|
"/discussion" +
|
|
"/" +
|
|
props.hruid +
|
|
"/" +
|
|
currentNode.value?.language +
|
|
"/" +
|
|
currentNode.value?.learningobjectHruid,
|
|
);
|
|
</script>
|
|
|
|
<template>
|
|
<using-query-result
|
|
:query-result="learningPathQueryResult"
|
|
v-slot="learningPath: { data: LearningPath }"
|
|
>
|
|
<v-navigation-drawer
|
|
v-model="navigationDrawerShown"
|
|
:width="350"
|
|
>
|
|
<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>
|
|
<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 === AccountType.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 class="nav-scroll-area">
|
|
<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 === AccountType.Teacher
|
|
"
|
|
>
|
|
<template v-slot:prepend>
|
|
<v-icon
|
|
:color="COLORS[getNavItemState(node)]"
|
|
:icon="ICONS[getNavItemState(node)]"
|
|
></v-icon>
|
|
</template>
|
|
<template v-slot:append>
|
|
<QuestionNotification :node="node"></QuestionNotification>
|
|
<div>
|
|
{{
|
|
node.estimatedTime!.toLocaleString("en-US", {
|
|
minimumIntegerDigits: 2,
|
|
useGrouping: false,
|
|
})
|
|
}}'
|
|
</div>
|
|
</template>
|
|
</v-list-item>
|
|
</template>
|
|
</using-query-result>
|
|
</div>
|
|
<v-spacer></v-spacer>
|
|
<v-list-item v-if="authService.authState.activeRole === AccountType.Teacher">
|
|
<template v-slot:default>
|
|
<v-btn
|
|
class="button-in-nav"
|
|
width="100%"
|
|
:color="COLORS.teacherExclusive"
|
|
@click="assign()"
|
|
>{{ t("assignLearningPath") }}</v-btn
|
|
>
|
|
</template>
|
|
</v-list-item>
|
|
<v-list-item>
|
|
<div
|
|
v-if="authService.authState.activeRole === AccountType.Student && pathIsAssignment"
|
|
class="assignment-indicator"
|
|
>
|
|
{{ t("assignmentIndicator") }}
|
|
</div>
|
|
</v-list-item>
|
|
</div>
|
|
</v-navigation-drawer>
|
|
<div class="control-bar-above-content">
|
|
<v-btn
|
|
:icon="navigationDrawerShown ? 'mdi-menu-open' : 'mdi-menu'"
|
|
class="navigation-drawer-toggle-button"
|
|
variant="plain"
|
|
@click="navigationDrawerShown = !navigationDrawerShown"
|
|
></v-btn>
|
|
<div class="search-field-container">
|
|
<learning-path-search-field></learning-path-search-field>
|
|
</div>
|
|
</div>
|
|
<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="navigation-buttons-container">
|
|
<v-btn
|
|
prepend-icon="mdi-chevron-left"
|
|
variant="text"
|
|
:disabled="!previousNode"
|
|
:to="previousNode ? { path: previousNode.learningobjectHruid, query: route.query } : undefined"
|
|
>
|
|
{{ t("previous") }}
|
|
</v-btn>
|
|
<v-btn
|
|
append-icon="mdi-chevron-right"
|
|
variant="text"
|
|
:disabled="!nextNode"
|
|
:to="nextNode ? { path: nextNode.learningobjectHruid, query: route.query } : undefined"
|
|
>
|
|
{{ t("next") }}
|
|
</v-btn>
|
|
</div>
|
|
<using-query-result
|
|
v-if="forGroup"
|
|
:query-result="getQuestionsQuery"
|
|
v-slot="questionsResponse: { data: QuestionsResponse }"
|
|
>
|
|
<v-divider :thickness="6"></v-divider>
|
|
<div class="question-header">
|
|
<span class="question-title">{{ t("questions") }}</span>
|
|
<span class="discussion-link-text">
|
|
{{ t("view-questions") }}
|
|
<router-link :to="discussionLink">
|
|
{{ t("discussions") }}
|
|
</router-link>
|
|
</span>
|
|
</div>
|
|
<QuestionBox
|
|
:hruid="props.hruid"
|
|
:language="props.language"
|
|
:learningObjectHruid="props.learningObjectHruid"
|
|
:forGroup="forGroup"
|
|
/>
|
|
<QandA :questions="(questionsResponse.data.questions as QuestionDTO[]) ?? []" />
|
|
</using-query-result>
|
|
</using-query-result>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.question-title {
|
|
color: #0e6942;
|
|
text-transform: uppercase;
|
|
font-weight: bolder;
|
|
font-size: 24px;
|
|
}
|
|
.question-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 10px;
|
|
}
|
|
.learning-path-title {
|
|
white-space: normal;
|
|
}
|
|
.search-field-container {
|
|
min-width: 250px;
|
|
}
|
|
.control-bar-above-content {
|
|
margin-left: 5px;
|
|
margin-right: 5px;
|
|
margin-bottom: -30px;
|
|
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;
|
|
justify-content: space-between;
|
|
}
|
|
.assignment-indicator {
|
|
position: absolute;
|
|
bottom: 10px;
|
|
left: 10px;
|
|
padding: 4px 12px;
|
|
border: 2px solid #f8bcbc;
|
|
border-radius: 20px;
|
|
color: #f36c6c;
|
|
background-color: rgba(248, 188, 188, 0.1);
|
|
font-weight: bold;
|
|
font-family: Arial, sans-serif;
|
|
font-size: 14px;
|
|
text-transform: uppercase;
|
|
z-index: 2; /* Less than modals/popups */
|
|
}
|
|
|
|
.discussion-link {
|
|
margin-top: 8px;
|
|
font-size: 13px;
|
|
color: #444;
|
|
}
|
|
|
|
.discussion-link a {
|
|
color: #3b82f6; /* blue */
|
|
text-decoration: none;
|
|
}
|
|
|
|
.discussion-link a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.nav-scroll-area {
|
|
overflow-y: auto;
|
|
flex-grow: 1;
|
|
min-height: 0;
|
|
}
|
|
</style>
|