VBV-67: Circle Ansicht Design Anpassungen
This commit is contained in:
Daniel Egger
parent
919edf1a24
commit
b6751adea5
|
|
@ -30,40 +30,51 @@ const allFinished = computed(() => {
|
|||
return false;
|
||||
})
|
||||
|
||||
const learningSequenceBorderClass = computed(() => {
|
||||
let result = [];
|
||||
if (props.learningSequence && circleStore.circle) {
|
||||
if (allFinished.value) {
|
||||
result = ['border-l-4', 'border-l-green-500']
|
||||
} else if (someFinished.value) {
|
||||
result = ['border-l-4', 'border-l-sky-500']
|
||||
} else {
|
||||
result = ['border-l-gray-500']
|
||||
}
|
||||
}
|
||||
|
||||
return result;
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="mb-8 learning-sequence" :id="learningSequence.translation_key">
|
||||
<div class="flex items-center gap-4 mb-2">
|
||||
<div class="flex items-center gap-4 mb-2 text-blue-900">
|
||||
<component :is="learningSequence.icon" />
|
||||
<h3 class="text-xl">
|
||||
<h3 class="text-xl font-semibold">
|
||||
{{ learningSequence.title }}
|
||||
</h3>
|
||||
<div>{{ learningSequence.minutes }} Minuten</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="bg-white px-4 border border-gray-500 border-l-4"
|
||||
:class="{
|
||||
'border-l-green-500': allFinished,
|
||||
'border-l-sky-500': someFinished,
|
||||
'border-l-gray-500': !someFinished,
|
||||
}"
|
||||
class="bg-white px-4 lg:px-6 border border-gray-500"
|
||||
:class="learningSequenceBorderClass"
|
||||
>
|
||||
<div
|
||||
v-for="learningUnit in learningSequence.learningUnits"
|
||||
:key="learningUnit.id"
|
||||
class="pt-3"
|
||||
class="pt-3 lg:pt-6"
|
||||
>
|
||||
<div class="pb-3 flex gap-4" v-if="learningUnit.title">
|
||||
<div class="font-bold">{{ learningUnit.title }}</div>
|
||||
<div class="pb-3 lg:pg-6 flex gap-4 text-blue-900" v-if="learningUnit.title">
|
||||
<div class="font-semibold">{{ learningUnit.title }}</div>
|
||||
<div>{{ learningUnit.minutes }} Minuten</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-for="learningContent in learningUnit.learningContents"
|
||||
:key="learningContent.id"
|
||||
class="flex items-center gap-4 pb-3"
|
||||
class="flex items-center gap-4 pb-3 lg:pb-6"
|
||||
>
|
||||
<ItCheckbox
|
||||
:modelValue="learningContent.completed"
|
||||
|
|
@ -81,24 +92,24 @@ const allFinished = computed(() => {
|
|||
>
|
||||
<div
|
||||
v-if="circleStore.calcSelfEvaluationStatus(learningUnit)"
|
||||
class="flex items-center gap-4 pb-3"
|
||||
class="flex items-center gap-4 pb-3 lg:pb-6"
|
||||
>
|
||||
<it-icon-smiley-happy/>
|
||||
<span>Selbsteinschätzung: Ich kann das.</span>
|
||||
<it-icon-smiley-happy class="w-8 h-8 flex-none"/>
|
||||
<div>Selbsteinschätzung: Ich kann das.</div>
|
||||
</div>
|
||||
<div
|
||||
v-else-if="circleStore.calcSelfEvaluationStatus(learningUnit) === false"
|
||||
class="flex items-center gap-4 pb-3"
|
||||
class="flex items-center gap-4 pb-3 lg:pb-6"
|
||||
>
|
||||
<it-icon-smiley-thinking/>
|
||||
<span>Selbsteinschätzung: Muss ich nochmals anschauen</span>
|
||||
<it-icon-smiley-thinking class="w-8 h-8 flex-none"/>
|
||||
<div>Selbsteinschätzung: Muss ich nochmals anschauen</div>
|
||||
</div>
|
||||
<div
|
||||
v-else
|
||||
class="flex items-center gap-4 pb-3"
|
||||
class="flex items-center gap-4 pb-3 lg:pb-6"
|
||||
>
|
||||
<it-icon-smiley-neutral/>
|
||||
<span>Selbsteinschätzung</span>
|
||||
<it-icon-smiley-neutral class="w-8 h-8 flex-none"/>
|
||||
<div>Selbsteinschätzung</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,18 +1,18 @@
|
|||
import * as log from 'loglevel';
|
||||
import * as log from 'loglevel'
|
||||
|
||||
import {defineStore} from 'pinia'
|
||||
import { defineStore } from 'pinia'
|
||||
|
||||
import type {LearningContent, LearningUnit, LearningUnitQuestion} from '@/types'
|
||||
import type {Circle} from '@/services/circle'
|
||||
import {itGet, itPost} from '@/fetchHelpers';
|
||||
import {useAppStore} from '@/stores/app';
|
||||
import {useLearningPathStore} from '@/stores/learningPath';
|
||||
import type { LearningContent, LearningUnit, LearningUnitQuestion } from '@/types'
|
||||
import type { Circle } from '@/services/circle'
|
||||
import { itGet, itPost } from '@/fetchHelpers'
|
||||
import { useAppStore } from '@/stores/app'
|
||||
import { useLearningPathStore } from '@/stores/learningPath'
|
||||
|
||||
export type CircleStoreState = {
|
||||
circle: Circle | undefined;
|
||||
currentLearningContent: LearningContent | undefined;
|
||||
currentSelfEvaluation: LearningUnit | undefined;
|
||||
page: 'INDEX' | 'OVERVIEW' | 'LEARNING_CONTENT' | 'SELF_EVALUATION';
|
||||
circle: Circle | undefined
|
||||
currentLearningContent: LearningContent | undefined
|
||||
currentSelfEvaluation: LearningUnit | undefined
|
||||
page: 'INDEX' | 'OVERVIEW' | 'LEARNING_CONTENT' | 'SELF_EVALUATION'
|
||||
}
|
||||
|
||||
export const useCircleStore = defineStore({
|
||||
|
|
@ -115,7 +115,14 @@ export const useCircleStore = defineStore({
|
|||
// go to self evaluation
|
||||
this.openSelfEvaluation(currentParent);
|
||||
} else if (this.currentLearningContent.nextLearningContent) {
|
||||
this.openLearningContent(this.currentLearningContent.nextLearningContent);
|
||||
if (
|
||||
this.currentLearningContent.parentLearningSequence &&
|
||||
this.currentLearningContent.parentLearningSequence.id === nextLearningContent?.parentLearningSequence?.id
|
||||
) {
|
||||
this.openLearningContent(this.currentLearningContent.nextLearningContent);
|
||||
} else {
|
||||
this.closeLearningContent();
|
||||
}
|
||||
} else {
|
||||
this.closeLearningContent();
|
||||
}
|
||||
|
|
@ -126,8 +133,13 @@ export const useCircleStore = defineStore({
|
|||
continueFromSelfEvaluation() {
|
||||
if (this.currentSelfEvaluation) {
|
||||
const nextContent = this.currentSelfEvaluation.learningContents[this.currentSelfEvaluation.learningContents.length - 1].nextLearningContent;
|
||||
|
||||
if (nextContent) {
|
||||
this.openLearningContent(nextContent);
|
||||
if (this.currentSelfEvaluation?.parentLearningSequence?.id === nextContent?.parentLearningSequence?.id) {
|
||||
this.openLearningContent(nextContent);
|
||||
} else {
|
||||
this.closeSelfEvaluation();
|
||||
}
|
||||
} else {
|
||||
this.closeSelfEvaluation();
|
||||
}
|
||||
|
|
|
|||
|
|
@ -33,87 +33,105 @@ onMounted(async () => {
|
|||
@closemodal="circleStore.page = 'INDEX'"
|
||||
/>
|
||||
</Teleport>
|
||||
<Transition mode="out-in">
|
||||
<div v-if="circleStore.page === 'LEARNING_CONTENT'">
|
||||
<LearningContent :key="circleStore.currentLearningContent.translation_key"/>
|
||||
</div>
|
||||
<div v-else-if="circleStore.page === 'SELF_EVALUATION'">
|
||||
<SelfEvaluation :key="circleStore.currentSelfEvaluation.translation_key"/>
|
||||
</div>
|
||||
<div v-else>
|
||||
<div class="circle">
|
||||
<div class="flex flex-col lg:flex-row">
|
||||
<div class="flex-initial lg:w-128 px-4 py-4 lg:px-8 lg:pt-4">
|
||||
<router-link
|
||||
to="/learningpath/versicherungsvermittlerin"
|
||||
class="btn-text inline-flex items-center px-3 py-4 font-normal"
|
||||
>
|
||||
<it-icon-arrow-left class="-ml-1 mr-1 h-5 w-5"></it-icon-arrow-left>
|
||||
<span class="inline">zurück zum Lernpfad</span>
|
||||
</router-link>
|
||||
<Transition mode="out-in">
|
||||
<div v-if="circleStore.page === 'LEARNING_CONTENT'">
|
||||
<LearningContent :key="circleStore.currentLearningContent.translation_key"/>
|
||||
</div>
|
||||
<div v-else-if="circleStore.page === 'SELF_EVALUATION'">
|
||||
<SelfEvaluation :key="circleStore.currentSelfEvaluation.translation_key"/>
|
||||
</div>
|
||||
<div v-else>
|
||||
<div class="circle-container">
|
||||
<div class="circle">
|
||||
<div class="flex flex-col lg:flex-row">
|
||||
<div class="flex-initial lg:w-128 px-4 py-4 lg:px-8 lg:pt-4 bg-white">
|
||||
<router-link
|
||||
to="/learningpath/versicherungsvermittlerin"
|
||||
class="btn-text inline-flex items-center px-3 py-4 font-normal"
|
||||
>
|
||||
<it-icon-arrow-left class="-ml-1 mr-1 h-5 w-5"></it-icon-arrow-left>
|
||||
<span class="inline">zurück zum Lernpfad</span>
|
||||
</router-link>
|
||||
|
||||
<h1 class="text-blue-dark text-7xl" data-cy="circle-title">
|
||||
{{ circleStore.circle?.title }}
|
||||
</h1>
|
||||
<h1 class="text-blue-dark text-7xl" data-cy="circle-title">
|
||||
{{ circleStore.circle?.title }}
|
||||
</h1>
|
||||
|
||||
<div class="w-full mt-8">
|
||||
<CircleDiagram></CircleDiagram>
|
||||
</div>
|
||||
|
||||
<div class="border-t-2 border-gray-500 mt-4 lg:hidden">
|
||||
<div
|
||||
class="mt-4 inline-flex items-center"
|
||||
@click="circleStore.page = 'OVERVIEW'"
|
||||
>
|
||||
<it-icon-info class="mr-2"/>
|
||||
Das lernst du in diesem Circle
|
||||
</div>
|
||||
<div class="inline-flex items-center">
|
||||
<it-icon-message class="mr-2"/>
|
||||
Fachexpertin kontaktieren
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hidden lg:block">
|
||||
<div class="block border border-gray-500 mt-8 p-6">
|
||||
<h3 class="text-blue-dark">Das lernst du in diesem Circle.</h3>
|
||||
<div class="prose mt-4">
|
||||
{{ circleStore.circle?.description }}
|
||||
<div class="w-full mt-8">
|
||||
<CircleDiagram></CircleDiagram>
|
||||
</div>
|
||||
|
||||
<button class="btn-primary mt-4" @click="circleStore.page = 'OVERVIEW'">Erfahre mehr dazu</button>
|
||||
<div class="border-t-2 border-gray-500 mt-4 lg:hidden">
|
||||
<div
|
||||
class="mt-4 inline-flex items-center"
|
||||
@click="circleStore.page = 'OVERVIEW'"
|
||||
>
|
||||
<it-icon-info class="mr-2"/>
|
||||
Das lernst du in diesem Circle
|
||||
</div>
|
||||
<div class="inline-flex items-center">
|
||||
<it-icon-message class="mr-2"/>
|
||||
Fachexpertin kontaktieren
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hidden lg:block">
|
||||
<div class="block border border-gray-500 mt-8 p-6">
|
||||
<h3 class="text-blue-dark">Das lernst du in diesem Circle.</h3>
|
||||
<div class="prose mt-4">
|
||||
{{ circleStore.circle?.description }}
|
||||
</div>
|
||||
|
||||
<button class="btn-primary mt-4 text-xl" @click="circleStore.page = 'OVERVIEW'">Erfahre mehr dazu
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="expert border border-gray-500 mt-8 p-6">
|
||||
<h3 class="text-blue-dark">Hast du Fragen?</h3>
|
||||
<div class="prose mt-4">Tausche dich mit der Fachexpertin aus für den Circle Analyse aus.</div>
|
||||
<button class="btn-secondary mt-4 text-xl">
|
||||
Fachexpertin kontaktieren
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="expert border border-gray-500 mt-8 p-6">
|
||||
<h3 class="text-blue-dark">Hast du Fragen?</h3>
|
||||
<div class="prose mt-4">Tausche dich mit der Fachexpertin aus für den Circle Analyse aus.</div>
|
||||
<button class="btn-secondary mt-4">
|
||||
Fachexpertin kontaktieren
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-auto bg-gray-200 px-4 py-8 lg:px-24">
|
||||
<div
|
||||
v-for="learningSequence in circleStore.circle?.learningSequences || []"
|
||||
:key="learningSequence.translation_key"
|
||||
>
|
||||
<LearningSequence
|
||||
:learning-sequence="learningSequence"
|
||||
></LearningSequence>
|
||||
</div>
|
||||
|
||||
<div class="flex-auto bg-gray-200 px-4 py-8 lg:px-24">
|
||||
<div
|
||||
v-for="learningSequence in circleStore.circle?.learningSequences || []"
|
||||
:key="learningSequence.translation_key"
|
||||
>
|
||||
<LearningSequence
|
||||
:learning-sequence="learningSequence"
|
||||
></LearningSequence>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</Transition>
|
||||
</Transition>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
<style lang="postcss" scoped>
|
||||
|
||||
.circle-container {
|
||||
background: linear-gradient(
|
||||
to right,
|
||||
white 0%,
|
||||
white 50%,
|
||||
#EDF2F6 50%,
|
||||
#EDF2F6 100%
|
||||
);
|
||||
}
|
||||
|
||||
.circle {
|
||||
max-width: 1440px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.v-enter-active,
|
||||
.v-leave-active {
|
||||
|
|
|
|||
|
|
@ -49,8 +49,11 @@ onMounted(async () => {
|
|||
Listen Ansicht anzeigen
|
||||
</button>
|
||||
</div>
|
||||
<LearningPathDiagram class="max-w-[1680px] w-full" identifier="mainVisualization"
|
||||
v-bind:vertical="false"></LearningPathDiagram>
|
||||
<LearningPathDiagram
|
||||
class="max-w-[1680px] w-full"
|
||||
identifier="mainVisualization"
|
||||
v-bind:vertical="false"
|
||||
></LearningPathDiagram>
|
||||
</div>
|
||||
|
||||
<h1 data-cy="learning-path-title" class="m-12">{{ learningPathStore.learningPath.title }}</h1>
|
||||
|
|
@ -64,7 +67,7 @@ onMounted(async () => {
|
|||
</p>
|
||||
</div>
|
||||
<div class="p-8 flex-1">
|
||||
Nächster Schirtt
|
||||
Nächster Schritt
|
||||
<h3>Analyse: Anwenden</h3>
|
||||
<router-link class="mt-4 btn-blue" to="/circle/analyse">
|
||||
Los geht's
|
||||
|
|
@ -73,11 +76,7 @@ onMounted(async () => {
|
|||
|
||||
</div>
|
||||
<div class="topic"></div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -63,28 +63,28 @@ svg {
|
|||
}
|
||||
|
||||
.btn-primary {
|
||||
@apply font-bold py-2 px-4 align-middle inline-block
|
||||
@apply font-semibold py-2 px-4 align-middle inline-block
|
||||
bg-blue-900 text-white border-2 border-blue-900
|
||||
hover:bg-blue-700 hover:border-blue-700
|
||||
disabled:opacity-50 disabled:cursor-not-allowed
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
@apply font-bold py-2 px-4 align-middle inline-block
|
||||
@apply font-semibold py-2 px-4 align-middle inline-block
|
||||
bg-white text-blue-900 border-2 border-blue-900
|
||||
hover:bg-gray-200
|
||||
disabled:opacity-50 disabled:cursor-not-allowed
|
||||
}
|
||||
|
||||
.btn-blue {
|
||||
@apply font-bold py-2 px-4 align-middle inline-block
|
||||
@apply font-semibold py-2 px-4 align-middle inline-block
|
||||
bg-sky-500 text-blue-900 border-2 border-sky-500
|
||||
hover:bg-sky-400 hover:border-sky-400
|
||||
disabled:opacity-50 disabled:cursor-not-allowed
|
||||
}
|
||||
|
||||
.btn-text {
|
||||
@apply font-bold py-2 px-4 align-middle inline-block
|
||||
@apply font-semibold py-2 px-4 align-middle inline-block
|
||||
hover:text-gray-700
|
||||
disabled:opacity-50 disabled:cursor-not-allowed
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue