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

Make reactive

This commit is contained in:
Daniel Egger 2022-07-04 14:14:01 +02:00
parent ad9c495c9c
commit e0c43b7247
5 changed files with 54 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
client/src/components/circle/LearningPathDiagram.vue
View File

@ -62,7 +62,7 @@ export default {
},
circles() {
if (this.learningPathStore.learningPath) {
let internalCircles = this.learningPathStore.learningPath.topics.flatMap(topic => topic.circles);
let internalCircles = this.learningPathStore.learningPath.circles;
// console.log(internalCircles);
internalCircles.forEach((circle) => {
let pieWeights = new Array(Math.max(circle.learningSequences.length, 1)).fill(1)

20
client/src/stores/circle.ts
View File

@ -3,9 +3,10 @@ import * as log from 'loglevel';
import {defineStore} from 'pinia'
import type {LearningContent, LearningUnit, LearningUnitQuestion} from '@/types'
import {Circle} from '@/services/circle'
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;
@ -26,16 +27,21 @@ export const useCircleStore = defineStore({
} as CircleStoreState;
},
getters: {
flatChildren: (state) => {
},
},
actions: {
async loadCircle(slug: string) {
try {
const circleData = await itGet(`/learnpath/api/circle/${slug}/`);
this.circle = Circle.fromJson(circleData);
const completionData = await itGet(`/api/completion/circle/${this.circle.translation_key}/`);
this.circle.parseCompletionData(completionData);
// const circleData = await itGet(`/learnpath/api/circle/${slug}/`);
// this.circle = Circle.fromJson(circleData);
// this.circle.parseCompletionData(completionData);
const learningPathStore = useLearningPathStore();
await learningPathStore.loadLearningPath('versicherungsvermittlerin');
this.circle = learningPathStore.learningPath.circles.find(circle => circle.slug === slug);
if (this.circle) {
const completionData = await itGet(`/api/completion/circle/${this.circle.translation_key}/`);
this.circle.parseCompletionData(completionData);
}
return Promise.resolve(this.circle)
} catch (error) {
log.error(error);
return error

64
client/src/stores/learningPath.ts
View File

@ -7,7 +7,7 @@ import {itGet} from '@/fetchHelpers';
import {Circle} from '@/services/circle';
export type LearningPathStoreState = {
learningPath: LearningPath;
learningPath: LearningPath | undefined;
}
export const useLearningPathStore = defineStore({
@ -20,39 +20,47 @@ export const useLearningPathStore = defineStore({
getters: {
},
actions: {
async loadLearningPath(slug: string) {
async loadLearningPath(slug: string, reload = false) {
if (this.learningPath && !reload) {
return this.learningPath;
}
try {
const learningPathData = await itGet(`/learnpath/api/learningpath/${slug}/`);
const completionData = await itGet(`/api/completion/learning_path/${learningPathData.translation_key}/`);
this.learningPath = learningPathData;
this.learningPath.topics = [];
const emptyTopic: Topic = {
id: 0,
title: '',
slug: '',
type: 'learnpath.Topic',
translation_key: '',
is_visible: false,
circles: []
}
let topic = Object.assign({}, emptyTopic);
this.learningPath.children.forEach((page) => {
if (page.type === 'learnpath.Topic') {
if (topic.id !== 0) {
this.learningPath.topics.push(topic);
}
topic = Object.assign({}, emptyTopic, page);
}
if (page.type === 'learnpath.Circle') {
const circle = Circle.fromJson(page);
circle.parseCompletionData(completionData);
topic.circles.push(circle);
}
this.learningPath.topics.push(topic);
})
console.log(this.learningPath);
if (this.learningPath) {
this.learningPath.topics = [];
this.learningPath.circles = [];
const emptyTopic: Topic = {
id: 0,
title: '',
slug: '',
type: 'learnpath.Topic',
translation_key: '',
is_visible: false,
circles: []
}
let topic = Object.assign({}, emptyTopic);
this.learningPath.children.forEach((page) => {
if (page.type === 'learnpath.Topic') {
if (topic.id !== 0) {
this.learningPath.topics.push(topic);
}
topic = Object.assign({}, emptyTopic, page);
}
if (page.type === 'learnpath.Circle') {
const circle = Circle.fromJson(page);
circle.parseCompletionData(completionData);
topic.circles.push(circle);
this.learningPath.circles.push(circle);
}
this.learningPath.topics.push(topic);
})
console.log(this.learningPath);
}
return this.learningPath;
} catch (error) {
log.error(error);

1
client/src/types.ts
View File

@ -107,6 +107,7 @@ export interface LearningPath extends LearningWagtailPage {
type: 'learnpath.LearningPath';
children: LearningPathChild[];
topics: Topic[];
circles: Circle[];
}
export interface CircleCompletion {

6
client/src/views/CircleView.vue
View File

@ -27,7 +27,7 @@ onMounted(async () => {
<template>
<Transition>
<div v-if="circleStore.page === 'OVERVIEW'">
<CircleOverview :circle-data="circleStore.circleData" @close="circleStore.page = 'INDEX'"/>
<CircleOverview :circle="circleStore.circle" @close="circleStore.page = 'INDEX'"/>
</div>
<div v-else-if="circleStore.page === 'LEARNING_CONTENT'">
<LearningContent :key="circleStore.currentLearningContent.translation_key"/>
@ -43,8 +43,8 @@ onMounted(async () => {
{{ circleStore.circle.title }}
</h1>
<div v-if="circleStore.circle.learningSequences && circleStore.circle.flatChildren" class="w-full mt-8">
<CircleDiagram :circle-store="circleStore"></CircleDiagram>
<div v-if="circleStore.circle" class="w-full mt-8">
<CircleDiagram></CircleDiagram>
</div>
<div class="border-t-2 border-gray-500 mt-4 lg:hidden">