Step through circle

This commit is contained in:
Daniel Egger 2022-06-23 18:17:54 +02:00
parent 3686924cfe
commit 500ed0f111
7 changed files with 80 additions and 17 deletions

View File

@ -41,7 +41,7 @@ const block = computed(() => {
<button <button
type="button" type="button"
class="btn-blue" class="btn-blue"
@click="circleStore.continueToNextLearningContent()" @click="circleStore.continueFromLearningContent()"
> >
Abschliessen und weiter Abschliessen und weiter
</button> </button>

View File

@ -46,7 +46,7 @@ const someFinished = computed(() => {
<div <div
v-for="learningUnit in learningSequence.learningUnits" v-for="learningUnit in learningSequence.learningUnits"
:key="learningUnit.id" :key="learningUnit.id"
class="py-3" class="pt-3"
> >
<div class="pb-3 flex gap-4" v-if="learningUnit.title"> <div class="pb-3 flex gap-4" v-if="learningUnit.title">
<div class="font-bold">{{ learningUnit.title }}</div> <div class="font-bold">{{ learningUnit.title }}</div>
@ -94,7 +94,7 @@ const someFinished = computed(() => {
</div> </div>
</div> </div>
<hr class="-mx-4 text-gray-500"> <hr v-if="!learningUnit.last" class="-mx-4 text-gray-500">
</div> </div>
</div> </div>

View File

@ -1,15 +1,29 @@
<script setup lang="ts"> <script setup lang="ts">
import * as log from 'loglevel'; import * as log from 'loglevel';
import {computed} from 'vue'; import {computed, reactive} from 'vue';
import {useCircleStore} from '@/stores/circle'; import {useCircleStore} from '@/stores/circle';
log.debug('LearningContent.vue setup'); log.debug('LearningContent.vue setup');
const circleStore = useCircleStore(); const circleStore = useCircleStore();
const questions = computed(() => circleStore.currentSelfEvaluation?.children); const state = reactive({
let questionIndex = 0; questionIndex: 0,
const currentQuestion = computed(() => questions.value[questionIndex]); });
const questions = computed(() => circleStore.currentSelfEvaluation!.children);
const currentQuestion = computed(() => questions.value[state.questionIndex]);
function handleContinue() {
log.debug('handleContinue');
if (state.questionIndex + 1 < questions.value.length) {
log.debug('increment questionIndex', state.questionIndex);
state.questionIndex += 1;
} else {
log.debug('continue to next learning content');
circleStore.continueFromSelfEvaluation();
}
}
</script> </script>
@ -37,7 +51,7 @@ const currentQuestion = computed(() => questions.value[questionIndex]);
<button <button
type="button" type="button"
class="btn-blue" class="btn-blue"
@click="circleStore.continueToNextLearningContent()" @click="handleContinue()"
> >
Weiter Weiter
</button> </button>
@ -46,7 +60,7 @@ const currentQuestion = computed(() => questions.value[questionIndex]);
<div class="mx-auto max-w-6xl px-8 py-4"> <div class="mx-auto max-w-6xl px-8 py-4">
<div class="mt-8 text-gray-700">Schritt {{ questionIndex + 1 }} von {{ questions.length }}</div> <div class="mt-8 text-gray-700">Schritt {{ state.questionIndex + 1 }} von {{ questions.length }}</div>
<p class="text-xl mt-4"> <p class="text-xl mt-4">
Überprüfe, ob du in der Lernheinheit <span class="font-bold">"{{ circleStore.currentSelfEvaluation.title }}"</span> alles verstanden hast.<br> Überprüfe, ob du in der Lernheinheit <span class="font-bold">"{{ circleStore.currentSelfEvaluation.title }}"</span> alles verstanden hast.<br>

View File

@ -12,6 +12,7 @@ function createEmptyLearningUnit(parentLearningSequence: LearningSequence): Lear
minutes: 0, minutes: 0,
parentLearningSequence: parentLearningSequence, parentLearningSequence: parentLearningSequence,
children: [], children: [],
last: true,
}; };
} }
@ -26,6 +27,7 @@ export function parseLearningSequences (children: CircleChild[]): LearningSequen
if (child.type === 'learnpath.LearningSequence') { if (child.type === 'learnpath.LearningSequence') {
if (learningSequence) { if (learningSequence) {
if (learningUnit) { if (learningUnit) {
learningUnit.last = true;
learningSequence.learningUnits.push(learningUnit); learningSequence.learningUnits.push(learningUnit);
} }
result.push(learningSequence); result.push(learningSequence);
@ -74,6 +76,7 @@ export function parseLearningSequences (children: CircleChild[]): LearningSequen
if (learningUnit && learningSequence) { if (learningUnit && learningSequence) {
// TypeScript does not get it here... // TypeScript does not get it here...
learningUnit.last = true;
(learningSequence as LearningSequence).learningUnits.push(learningUnit); (learningSequence as LearningSequence).learningUnits.push(learningUnit);
result.push(learningSequence); result.push(learningSequence);
} else { } else {

View File

@ -104,17 +104,42 @@ export const useCircleStore = defineStore({
} }
} }
return undefined; return undefined;
} },
, continueFromLearningContent() {
continueToNextLearningContent() {
if (this.currentLearningContent) { if (this.currentLearningContent) {
this.markCompletion(this.currentLearningContent, true); this.markCompletion(this.currentLearningContent, true);
if (this.currentLearningContent.nextLearningContent) {
const nextLearningContent = this.currentLearningContent.nextLearningContent;
const currentParent = this.currentLearningContent.parentLearningUnit;
const nextParent = nextLearningContent?.parentLearningUnit;
if (
currentParent && currentParent.id &&
currentParent.id !== nextParent?.id &&
currentParent.children.length > 0
) {
// go to self evaluation
this.openSelfEvaluation(currentParent);
} else if (this.currentLearningContent.nextLearningContent) {
this.openLearningContent(this.currentLearningContent.nextLearningContent); this.openLearningContent(this.currentLearningContent.nextLearningContent);
} else {
this.closeLearningContent();
} }
} else { } else {
log.error('currentLearningContent is undefined'); log.error('currentLearningContent is undefined');
} }
},
continueFromSelfEvaluation() {
if (this.currentSelfEvaluation) {
const nextContent = this.currentSelfEvaluation.learningContents[this.currentSelfEvaluation.learningContents.length - 1].nextLearningContent;
if (nextContent) {
this.openLearningContent(nextContent);
} else {
this.closeSelfEvaluation();
}
} else {
log.error('currentSelfEvaluation is undefined');
}
} }
} }
}) })

View File

@ -75,6 +75,7 @@ export interface LearningUnit extends LearningWagtailPage {
minutes: number; minutes: number;
parentLearningSequence?: LearningSequence; parentLearningSequence?: LearningSequence;
children: LearningUnitQuestion[]; children: LearningUnitQuestion[];
last?: boolean;
} }
export interface LearningSequence extends LearningWagtailPage { export interface LearningSequence extends LearningWagtailPage {

View File

@ -114,6 +114,10 @@ Fachspezialisten bei.
title="Ich bin in der Lage, mit geeigneten Fragestellungen die Deckung von Versicherungen zu erfassen.", title="Ich bin in der Lage, mit geeigneten Fragestellungen die Deckung von Versicherungen zu erfassen.",
parent=lu parent=lu
) )
LearningUnitQuestionFactory(
title="Zweite passende Frage zu 'Absicherung der Familie'",
parent=lu
)
LearningContentFactory( LearningContentFactory(
title='Ermittlung des Kundenbedarfs', title='Ermittlung des Kundenbedarfs',
parent=circe_analyse, parent=circe_analyse,
@ -137,7 +141,11 @@ Fachspezialisten bei.
) )
LearningSequenceFactory(title='Anwenden', parent=circe_analyse, icon='it-icon-ls-apply') LearningSequenceFactory(title='Anwenden', parent=circe_analyse, icon='it-icon-ls-apply')
LearningUnitFactory(title='Prämien einsparen', parent=circe_analyse) lu = LearningUnitFactory(title='Prämien einsparen', parent=circe_analyse)
LearningUnitQuestionFactory(
title="Passende Frage zu Anwenden",
parent=lu
)
LearningContentFactory( LearningContentFactory(
title='Versicherungsbedarf für Familien', title='Versicherungsbedarf für Familien',
parent=circe_analyse, parent=circe_analyse,
@ -151,7 +159,11 @@ Fachspezialisten bei.
contents=[('exercise', ExerciseBlockFactory())] contents=[('exercise', ExerciseBlockFactory())]
) )
LearningUnitFactory(title='Sich selbständig machen', parent=circe_analyse) lu = LearningUnitFactory(title='Sich selbständig machen', parent=circe_analyse)
LearningUnitQuestionFactory(
title="Passende Frage zu 'Sich selbständig machen'",
parent=lu
)
LearningContentFactory( LearningContentFactory(
title='GmbH oder AG', title='GmbH oder AG',
parent=circe_analyse, parent=circe_analyse,
@ -165,7 +177,11 @@ Fachspezialisten bei.
contents=[('exercise', ExerciseBlockFactory())] contents=[('exercise', ExerciseBlockFactory())]
) )
LearningUnitFactory(title='Auto verkaufen', parent=circe_analyse) lu = LearningUnitFactory(title='Auto verkaufen', parent=circe_analyse)
LearningUnitQuestionFactory(
title='Passende Frage zu "Auto verkaufen"',
parent=lu
)
LearningContentFactory( LearningContentFactory(
title='Motorfahrzeugversicherung', title='Motorfahrzeugversicherung',
parent=circe_analyse, parent=circe_analyse,
@ -192,7 +208,11 @@ Fachspezialisten bei.
) )
LearningSequenceFactory(title='Üben', parent=circe_analyse, icon='it-icon-ls-practice') LearningSequenceFactory(title='Üben', parent=circe_analyse, icon='it-icon-ls-practice')
LearningUnitFactory(title='Kind zieht von zu Hause aus', parent=circe_analyse) lu = LearningUnitFactory(title='Kind zieht von zu Hause aus', parent=circe_analyse)
LearningUnitQuestionFactory(
title='Passende Frage zu "Kind zieht von zu Hause aus"',
parent=lu
)
LearningContentFactory( LearningContentFactory(
title='Hausrat', title='Hausrat',
parent=circe_analyse, parent=circe_analyse,