ramon
/
vbv
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add query url and clickable navigation to SelfEvaluation

This commit is contained in:
Daniel Egger 2023-05-09 18:17:31 +02:00
parent 04b179aa52
commit eb3db902b9
1 changed files with 14 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
client/src/pages/learningPath/selfEvaluationPage/SelfEvaluation.vue
View File

@ -8,37 +8,36 @@ import LearningContentContainer from "@/pages/learningPath/learningContentPage/L
import LearningContentMultiLayout from "@/pages/learningPath/learningContentPage/layouts/LearningContentMultiLayout.vue";
import { useCourseSessionsStore } from "@/stores/courseSessions";
import eventBus from "@/utils/eventBus";
import { computed, onUnmounted, reactive } from "vue";
import { useRouteQuery } from "@vueuse/router";
import { computed, onUnmounted } from "vue";
log.debug("LearningContent.vue setup");
const circleStore = useCircleStore();
const courseSession = useCourseSessionsStore();
const state = reactive({
questionIndex: 0,
});
const questionIndex = useRouteQuery("step", "0", { transform: Number, mode: "push" });
const props = defineProps<{
learningUnit: LearningUnit;
}>();
const questions = computed(() => props.learningUnit?.children);
const currentQuestion = computed(() => questions.value[state.questionIndex]);
const showPreviousButton = computed(() => state.questionIndex != 0);
const currentQuestion = computed(() => questions.value[questionIndex.value]);
const showPreviousButton = computed(() => questionIndex.value != 0);
const showNextButton = computed(
() => state.questionIndex + 1 < questions.value?.length && questions.value?.length > 1
() => questionIndex.value + 1 < questions.value?.length && questions.value?.length > 1
);
const showExitButton = computed(
() =>
questions.value?.length === 1 || questions.value?.length === state.questionIndex + 1
questions.value?.length === 1 || questions.value?.length === questionIndex.value + 1
);
function handleContinue() {
log.debug("handleContinue");
if (state.questionIndex + 1 < questions.value.length) {
log.debug("increment questionIndex", state.questionIndex);
state.questionIndex += 1;
if (questionIndex.value + 1 < questions.value.length) {
log.debug("increment questionIndex", questionIndex.value);
questionIndex.value += 1;
} else {
log.debug("continue to next learning content");
circleStore.continueFromSelfEvaluation(props.learningUnit);
@ -47,8 +46,8 @@ function handleContinue() {
function handleBack() {
log.debug("handleBack");
if (state.questionIndex > 0 && state.questionIndex < questions.value.length) {
state.questionIndex -= 1;
if (questionIndex.value > 0 && questionIndex.value < questions.value.length) {
questionIndex.value -= 1;
}
}
@ -69,7 +68,7 @@ onUnmounted(() => {
@exit="circleStore.closeSelfEvaluation(props.learningUnit)"
>
<LearningContentMultiLayout
:current-step="state.questionIndex"
:current-step="questionIndex"
:subtitle="$t('selfEvaluation.title')"
:title="$t('selfEvaluation.title', { title: learningUnit.title })"
learning-content-type="learningmodule"
@ -78,6 +77,7 @@ onUnmounted(() => {
:show-exit-button="showExitButton"
:show-start-button="false"
:show-previous-button="showPreviousButton"
:base-url="props.learningUnit.evaluate_url"
@previous="handleBack()"
@next="handleContinue()"
>