Merge branch 'feature/course-permissions-frontend' into develop
This commit is contained in:
commit
ca195c0b4a
|
|
@ -6,7 +6,7 @@ import IconSettings from "@/components/icons/IconSettings.vue";
|
|||
import MobileMenu from "@/components/MobileMenu.vue";
|
||||
import ItDropdown from "@/components/ui/ItDropdown.vue";
|
||||
import { useAppStore } from "@/stores/app";
|
||||
import { useLearningPathStore } from "@/stores/learningPath";
|
||||
import { useCourseSessionsStore } from "@/stores/courseSessions";
|
||||
import { useUserStore } from "@/stores/user";
|
||||
import type { DropdownListItem } from "@/types";
|
||||
import type { Component } from "vue";
|
||||
|
|
@ -26,8 +26,9 @@ const route = useRoute();
|
|||
const router = useRouter();
|
||||
const userStore = useUserStore();
|
||||
const appStore = useAppStore();
|
||||
const courseSessionsStore = useCourseSessionsStore();
|
||||
|
||||
const { t } = useI18n();
|
||||
const learningPathStore = useLearningPathStore();
|
||||
const state = reactive({ showMenu: false });
|
||||
|
||||
function toggleNav() {
|
||||
|
|
@ -35,6 +36,7 @@ function toggleNav() {
|
|||
}
|
||||
|
||||
function isInRoutePath(checkPaths: string[]) {
|
||||
log.debug("isInRoutePath", checkPaths, route.path);
|
||||
return checkPaths.some((path) => route.path.startsWith(path));
|
||||
}
|
||||
|
||||
|
|
@ -42,20 +44,6 @@ function inCourse() {
|
|||
return isInRoutePath(["/learn", "/competence"]);
|
||||
}
|
||||
|
||||
function getLearningPathStringProp(prop: "title" | "slug"): string {
|
||||
return inCourse() && learningPathStore.learningPath
|
||||
? learningPathStore.learningPath[prop]
|
||||
: "";
|
||||
}
|
||||
|
||||
function learningPathName(): string {
|
||||
return getLearningPathStringProp("title");
|
||||
}
|
||||
|
||||
function learninPathSlug(): string {
|
||||
return getLearningPathStringProp("slug");
|
||||
}
|
||||
|
||||
function handleDropdownSelect(data: DropdownData) {
|
||||
switch (data.action) {
|
||||
case "settings":
|
||||
|
|
@ -75,6 +63,9 @@ function logout() {
|
|||
|
||||
onMounted(() => {
|
||||
log.debug("MainNavigationBar mounted");
|
||||
if (userStore.loggedIn) {
|
||||
courseSessionsStore.loadCourseSessionsData();
|
||||
}
|
||||
});
|
||||
|
||||
const profileDropdownData: DropdownListItem[] = [
|
||||
|
|
@ -100,8 +91,7 @@ const profileDropdownData: DropdownListItem[] = [
|
|||
<Teleport to="body">
|
||||
<MobileMenu
|
||||
:show="state.showMenu"
|
||||
:learning-path-slug="learninPathSlug()"
|
||||
:learning-path-name="learningPathName()"
|
||||
:course-session="courseSessionsStore.courseSessionForRoute"
|
||||
@closemodal="state.showMenu = false"
|
||||
/>
|
||||
</Teleport>
|
||||
|
|
@ -156,8 +146,8 @@ const profileDropdownData: DropdownListItem[] = [
|
|||
class="flex-auto mt-8 lg:flex lg:space-y-0 lg:flex-row lg:items-center lg:space-x-10 lg:mt-0"
|
||||
>
|
||||
<router-link
|
||||
v-if="inCourse()"
|
||||
to="/learn/versicherungsvermittlerin-lp"
|
||||
v-if="inCourse() && courseSessionsStore.courseSessionForRoute"
|
||||
:to="courseSessionsStore.courseSessionForRoute.learning_path_url"
|
||||
class="nav-item"
|
||||
:class="{ 'nav-item--active': isInRoutePath(['/learn']) }"
|
||||
>
|
||||
|
|
@ -165,8 +155,8 @@ const profileDropdownData: DropdownListItem[] = [
|
|||
</router-link>
|
||||
|
||||
<router-link
|
||||
v-if="inCourse()"
|
||||
to="/competence/versicherungsvermittlerin-competence"
|
||||
v-if="inCourse() && courseSessionsStore.courseSessionForRoute"
|
||||
:to="courseSessionsStore.courseSessionForRoute.competence_url"
|
||||
class="nav-item"
|
||||
:class="{ 'nav-item--active': isInRoutePath(['/competence']) }"
|
||||
>
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@ import IconLogout from "@/components/icons/IconLogout.vue";
|
|||
import IconSettings from "@/components/icons/IconSettings.vue";
|
||||
import ItFullScreenModal from "@/components/ui/ItFullScreenModal.vue";
|
||||
import { useUserStore } from "@/stores/user";
|
||||
import type { CourseSession } from "@/types";
|
||||
import { useRouter } from "vue-router";
|
||||
|
||||
const router = useRouter();
|
||||
|
|
@ -10,15 +11,16 @@ const userStore = useUserStore();
|
|||
|
||||
const props = defineProps<{
|
||||
show: boolean;
|
||||
learningPathName: string;
|
||||
learningPathSlug: string;
|
||||
courseSession: CourseSession | undefined;
|
||||
}>();
|
||||
|
||||
const emits = defineEmits(["closemodal"]);
|
||||
|
||||
const clickLink = (to: string) => {
|
||||
router.push(to);
|
||||
emits("closemodal");
|
||||
const clickLink = (to: string | undefined) => {
|
||||
if (to) {
|
||||
router.push(to);
|
||||
emits("closemodal");
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
|
|
@ -48,18 +50,16 @@ const clickLink = (to: string) => {
|
|||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div v-if="true" class="mt-6 pb-6 border-b">
|
||||
<h4 class="text-gray-900 text-sm">Kurs: Versicherungsvermittler/in</h4>
|
||||
<div v-if="courseSession" class="mt-6 pb-6 border-b">
|
||||
<h4 class="text-gray-900 text-sm">{{ courseSession.course.title }}</h4>
|
||||
<ul class="mt-6">
|
||||
<li>
|
||||
<button @click="clickLink(`/learn/versicherungsvermittlerin-lp`)">
|
||||
<button @click="clickLink(courseSession?.learning_path_url)">
|
||||
{{ $t("general.learningPath") }}
|
||||
</button>
|
||||
</li>
|
||||
<li class="mt-6">
|
||||
<button
|
||||
@click="clickLink(`/competence/versicherungsvermittlerin-competence`)"
|
||||
>
|
||||
<button @click="clickLink(courseSession?.competence_url)">
|
||||
KompetenzNavi
|
||||
</button>
|
||||
</li>
|
||||
|
|
|
|||
|
|
@ -1,24 +1,21 @@
|
|||
<script>
|
||||
import colors from "@/colors.json";
|
||||
import { useLearningPathStore } from "@/stores/learningPath";
|
||||
import * as d3 from "d3";
|
||||
import * as _ from "lodash";
|
||||
import * as log from "loglevel";
|
||||
|
||||
// type DiagramType = "horizontal" | "vertical" | "horizontalSmall";
|
||||
|
||||
export default {
|
||||
props: {
|
||||
vertical: {
|
||||
default: false,
|
||||
type: Boolean,
|
||||
},
|
||||
identifier: {
|
||||
required: true,
|
||||
diagramType: {
|
||||
type: String,
|
||||
default: "horizontal",
|
||||
},
|
||||
learningPath: {
|
||||
required: true,
|
||||
type: Object,
|
||||
},
|
||||
},
|
||||
setup() {
|
||||
const learningPathStore = useLearningPathStore();
|
||||
return { learningPathStore };
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
|
@ -27,6 +24,9 @@ export default {
|
|||
};
|
||||
},
|
||||
computed: {
|
||||
svgId() {
|
||||
return `learningpath-diagram-${this.learningPath.slug}-${this.diagramType}`;
|
||||
},
|
||||
viewBox() {
|
||||
return `0 0 ${this.width} ${this.height}`;
|
||||
},
|
||||
|
|
@ -47,9 +47,9 @@ export default {
|
|||
return false;
|
||||
}
|
||||
|
||||
if (this.learningPathStore.learningPath) {
|
||||
if (this.learningPath) {
|
||||
const internalCircles = [];
|
||||
this.learningPathStore.learningPath.circles.forEach((circle) => {
|
||||
this.learningPath.circles.forEach((circle) => {
|
||||
const pieWeights = new Array(
|
||||
Math.max(circle.learningSequences.length, 1)
|
||||
).fill(1);
|
||||
|
|
@ -78,21 +78,27 @@ export default {
|
|||
return [];
|
||||
},
|
||||
svg() {
|
||||
return d3.select("#" + this.identifier);
|
||||
},
|
||||
|
||||
learningPath() {
|
||||
return Object.assign({}, this.learningPathStore.learningPath);
|
||||
const result = d3.select("#" + this.svgId);
|
||||
result.selectAll("*").remove();
|
||||
return result;
|
||||
},
|
||||
},
|
||||
|
||||
mounted() {
|
||||
log.debug("LearningPathDiagram mounted");
|
||||
|
||||
const circleWidth = this.vertical ? 60 : 200;
|
||||
// clean old svg
|
||||
d3.select("#" + this.svgId)
|
||||
.selectAll("*")
|
||||
.remove();
|
||||
|
||||
let circleWidth = 200;
|
||||
if (this.diagramType === "vertical") {
|
||||
circleWidth = 60;
|
||||
}
|
||||
const radius = (circleWidth * 0.8) / 2;
|
||||
|
||||
if (this.vertical) {
|
||||
if (this.diagramType === "vertical") {
|
||||
this.width = Math.min(960, window.innerWidth - 32);
|
||||
this.height = 860;
|
||||
} else {
|
||||
|
|
@ -131,7 +137,7 @@ export default {
|
|||
.append("g")
|
||||
.attr("class", "circle")
|
||||
.attr("data-cy", (d) => {
|
||||
if (this.vertical) {
|
||||
if (this.diagramType === "vertical") {
|
||||
return `circle-${d.slug}-vertical`;
|
||||
} else {
|
||||
return `circle-${d.slug}`;
|
||||
|
|
@ -195,7 +201,7 @@ export default {
|
|||
.style("font-size", "18px")
|
||||
.style("overflow-wrap", "break-word")
|
||||
.text((d) => {
|
||||
if (!this.vertical) {
|
||||
if (this.diagramType === "horizontal") {
|
||||
return d.title.replace("Prüfungsvorbereitung", "Prüfungs- vorbereitung");
|
||||
}
|
||||
return d.title;
|
||||
|
|
@ -266,7 +272,7 @@ export default {
|
|||
|
||||
// Calculate positions of objects
|
||||
|
||||
if (this.vertical) {
|
||||
if (this.diagramType === "vertical") {
|
||||
const Circles_X = radius;
|
||||
const Topics_X = Circles_X - 20;
|
||||
|
||||
|
|
@ -312,22 +318,28 @@ export default {
|
|||
.attr("y", radius + 30)
|
||||
.style("text-anchor", "middle")
|
||||
.call(wrap, circleWidth - 20)
|
||||
.attr("class", "circlesText text-xl font-bold hidden lg:block");
|
||||
.attr("class", () => {
|
||||
let classes = "circlesText text-xl font-bold hidden";
|
||||
if (this.diagramType === "horizontal") {
|
||||
classes += " lg:block";
|
||||
}
|
||||
return classes;
|
||||
});
|
||||
|
||||
topicGroups
|
||||
.attr("transform", (d, i) => {
|
||||
return (
|
||||
"translate(" +
|
||||
getTopicHorizontalPosition(
|
||||
i,
|
||||
d,
|
||||
this.learningPathStore.learningPath.topics
|
||||
) +
|
||||
getTopicHorizontalPosition(i, d, this.learningPath.topics) +
|
||||
",0)"
|
||||
);
|
||||
})
|
||||
.attr("class", (d) => {
|
||||
return "topic ".concat(d.is_visible ? "hidden lg:block" : "hidden");
|
||||
let classes = "topic hidden";
|
||||
if (this.diagramType === "horizontal" && d.is_visible) {
|
||||
classes += " lg:block";
|
||||
}
|
||||
return classes;
|
||||
});
|
||||
|
||||
topicLines
|
||||
|
|
@ -343,7 +355,7 @@ export default {
|
|||
.attr("y", 20)
|
||||
.style("font-size", "18px")
|
||||
.call(wrap, circleWidth * 0.8)
|
||||
.attr("class", "topicTitles font-bold");
|
||||
.attr("class", "topic-title font-bold");
|
||||
}
|
||||
|
||||
function wrap(text, width) {
|
||||
|
|
@ -387,10 +399,11 @@ export default {
|
|||
<template>
|
||||
<div class="svg-container h-full content-start">
|
||||
<svg
|
||||
:id="identifier"
|
||||
:id="svgId"
|
||||
class="learning-path-visualization h-full mx-auto -mt-6 lg:mt-0"
|
||||
:class="{
|
||||
'max-h-[384px]': !vertical,
|
||||
'max-h-[90px]': ['horizontalSmall'].includes(diagramType),
|
||||
'max-h-[90px] lg:max-h-[380px]': ['horizontal'].includes(diagramType),
|
||||
}"
|
||||
:viewBox="viewBox"
|
||||
></svg>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,32 @@
|
|||
<script setup lang="ts">
|
||||
import { useLearningPathStore } from "@/stores/learningPath";
|
||||
import * as log from "loglevel";
|
||||
|
||||
import LearningPathDiagram from "@/components/learningPath/LearningPathDiagram.vue";
|
||||
import type { LearningPath } from "@/services/learningPath";
|
||||
import { ref } from "vue";
|
||||
|
||||
log.debug("LearningPathDiagramSmall created");
|
||||
|
||||
const props = defineProps<{
|
||||
learningPathUrl: string;
|
||||
}>();
|
||||
|
||||
const learningPathData = ref<LearningPath | undefined>(undefined);
|
||||
|
||||
const learningPathStore = useLearningPathStore();
|
||||
|
||||
learningPathStore
|
||||
.loadLearningPath(props.learningPathUrl.replace("/learn/", ""), false, false)
|
||||
.then((data) => {
|
||||
learningPathData.value = data;
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<LearningPathDiagram
|
||||
v-if="learningPathData"
|
||||
:learning-path="learningPathData"
|
||||
diagram-type="horizontalSmall"
|
||||
></LearningPathDiagram>
|
||||
</template>
|
||||
<style scoped></style>
|
||||
|
|
@ -1,6 +1,5 @@
|
|||
<script setup lang="ts">
|
||||
import { useLearningPathStore } from "@/stores/learningPath";
|
||||
import { useUserStore } from "@/stores/user";
|
||||
import * as log from "loglevel";
|
||||
|
||||
import LearningPathDiagram from "@/components/learningPath/LearningPathDiagram.vue";
|
||||
|
|
@ -14,7 +13,6 @@ const props = defineProps<{
|
|||
}>();
|
||||
|
||||
const learningPathStore = useLearningPathStore();
|
||||
const userStore = useUserStore();
|
||||
|
||||
const emits = defineEmits(["closemodal"]);
|
||||
</script>
|
||||
|
|
@ -25,9 +23,10 @@ const emits = defineEmits(["closemodal"]);
|
|||
<div class="learningpath flex flex-col">
|
||||
<div class="flex flex-col h-max">
|
||||
<LearningPathDiagram
|
||||
v-if="learningPathStore.learningPath"
|
||||
class="w-full"
|
||||
identifier="verticalVisualization"
|
||||
:vertical="true"
|
||||
:learning-path="learningPathStore.learningPath"
|
||||
diagram-type="vertical"
|
||||
></LearningPathDiagram>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -6,6 +6,8 @@ import { computed } from "vue";
|
|||
import { RouterLink } from "vue-router";
|
||||
|
||||
const props = defineProps({
|
||||
// Vue-TypeScript make special things with `defineProps` so it's hard
|
||||
// to make this without @ts-ignore...
|
||||
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
||||
// @ts-ignore
|
||||
...RouterLink.props,
|
||||
|
|
|
|||
|
|
@ -56,3 +56,26 @@ export const itPost = (url: RequestInfo, data: unknown, options: RequestInit = {
|
|||
export const itGet = (url: RequestInfo) => {
|
||||
return itPost(url, {}, { method: "GET" });
|
||||
};
|
||||
|
||||
const itGetPromiseCache = new Map<string, Promise<any>>();
|
||||
|
||||
export function bustItGetCache(key?: string) {
|
||||
if (key) {
|
||||
itGetPromiseCache.delete(key);
|
||||
} else {
|
||||
itGetPromiseCache.clear();
|
||||
}
|
||||
}
|
||||
|
||||
export const itGetCached = (
|
||||
url: RequestInfo,
|
||||
options = {
|
||||
reload: false,
|
||||
}
|
||||
): Promise<any> => {
|
||||
if (!itGetPromiseCache.has(url.toString()) || options.reload) {
|
||||
itGetPromiseCache.set(url.toString(), itGet(url));
|
||||
}
|
||||
|
||||
return itGetPromiseCache.get(url.toString()) as Promise<any>;
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,16 +1,25 @@
|
|||
<script setup lang="ts">
|
||||
import LearningPathDiagramSmall from "@/components/learningPath/LearningPathDiagramSmall.vue";
|
||||
import { useCourseSessionsStore } from "@/stores/courseSessions";
|
||||
import { useUserStore } from "@/stores/user";
|
||||
import * as log from "loglevel";
|
||||
import log from "loglevel";
|
||||
import { onMounted } from "vue";
|
||||
|
||||
log.debug("CockpitView created");
|
||||
|
||||
const userStore = useUserStore();
|
||||
const courseSessionsStore = useCourseSessionsStore();
|
||||
|
||||
function employer() {
|
||||
return userStore.email === "bianca.muster@eiger-versicherungen.ch"
|
||||
? "Eiger Versicherungen"
|
||||
: "VBV";
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
log.debug("CockpitView mounted");
|
||||
await courseSessionsStore.loadCourseSessionsData();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
@ -22,22 +31,26 @@ function employer() {
|
|||
</h1>
|
||||
<div class="mb-14">
|
||||
<h2 class="mt-12 mb-3">Kurse</h2>
|
||||
<div class="flex flex-col md:flex-row justify-between">
|
||||
<div class="bg-white p-6 md:w-[48%] mb-4 md:mb-0">
|
||||
<h3 class="mb-4">Versicherungsvermittler/in</h3>
|
||||
<img class="mb-8 block" :src="'/static/icons/demo/vm-lernpfad.svg'" />
|
||||
<router-link class="btn-blue" to="/learn/versicherungsvermittlerin-lp">
|
||||
{{ $t("general.nextStep") }}
|
||||
</router-link>
|
||||
</div>
|
||||
<div class="bg-white p-6 md:w-[48%]">
|
||||
<h3 class="mb-4">Überbetriebliche Kurse</h3>
|
||||
<img class="mb-8 block" :src="'/static/icons/demo/uk-lernpfad.svg'" />
|
||||
<button
|
||||
class="bg-green-500 font-semibold py-2 px-4 align-middle inline-block text-blue-900 border-2 border-green-500"
|
||||
>
|
||||
Abgeschlossen
|
||||
</button>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 auto-rows-fr">
|
||||
<div
|
||||
v-for="courseSession in courseSessionsStore.courseSessions"
|
||||
:key="courseSession.id"
|
||||
>
|
||||
<div class="bg-white p-6 md:h-full">
|
||||
<h3 class="mb-4">{{ courseSession.title }}</h3>
|
||||
<div>
|
||||
<LearningPathDiagramSmall
|
||||
class="mb-4"
|
||||
:learning-path-url="courseSession.learning_path_url"
|
||||
></LearningPathDiagramSmall>
|
||||
</div>
|
||||
<div>
|
||||
<router-link class="btn-blue" :to="courseSession.learning_path_url">
|
||||
{{ $t("general.nextStep") }}
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -68,9 +68,9 @@ const createContinueUrl = (learningPath: LearningPath): [string, boolean] => {
|
|||
</button>
|
||||
</div>
|
||||
<LearningPathDiagram
|
||||
class="mx-auto max-w-[1920px] max-h-[380px] w-full px-4"
|
||||
identifier="mainVisualization"
|
||||
:vertical="false"
|
||||
class="mx-auto max-w-[1920px] max-h-[90px] lg:max-h-[380px] w-full px-4"
|
||||
diagram-type="horizontal"
|
||||
:learning-path="learningPathStore.learningPath"
|
||||
></LearningPathDiagram>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import { itGet } from "@/fetchHelpers";
|
||||
import { itGetCached } from "@/fetchHelpers";
|
||||
import { useCompletionStore } from "@/stores/completion";
|
||||
import type {
|
||||
BaseCourseWagtailPage,
|
||||
CircleLight,
|
||||
CompetencePage,
|
||||
CompetenceProfilePage,
|
||||
PerformanceCriteria,
|
||||
|
|
@ -91,23 +91,17 @@ export const useCompetenceStore = defineStore({
|
|||
};
|
||||
},
|
||||
async loadCompetenceProfilePage(slug: string, reload = false) {
|
||||
if (this.competenceProfilePage && !reload) {
|
||||
await this.parseCompletionData();
|
||||
return this.competenceProfilePage;
|
||||
}
|
||||
const competenceProfilePageData = await itGet(`/api/course/page/${slug}/`);
|
||||
this.competenceProfilePage = await itGetCached(`/api/course/page/${slug}/`, {
|
||||
reload: reload,
|
||||
});
|
||||
|
||||
if (!competenceProfilePageData) {
|
||||
if (!this.competenceProfilePage) {
|
||||
throw `No competenceProfilePageData found with: ${slug}`;
|
||||
}
|
||||
|
||||
this.competenceProfilePage = competenceProfilePageData;
|
||||
|
||||
const circles = competenceProfilePageData.circles.map(
|
||||
(c: BaseCourseWagtailPage) => {
|
||||
return { id: c.translation_key, name: `Circle: ${c.title}` };
|
||||
}
|
||||
);
|
||||
const circles = this.competenceProfilePage.circles.map((c: CircleLight) => {
|
||||
return { id: c.translation_key, name: `Circle: ${c.title}` };
|
||||
});
|
||||
this.availableCircles = [{ id: "all", name: "Circle: Alle" }, ...circles];
|
||||
|
||||
await this.parseCompletionData();
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import { itGet, itPost } from "@/fetchHelpers";
|
||||
import { bustItGetCache, itGetCached, itPost } from "@/fetchHelpers";
|
||||
import type { BaseCourseWagtailPage, CourseCompletion } from "@/types";
|
||||
import { defineStore } from "pinia";
|
||||
|
||||
|
|
@ -16,16 +16,14 @@ export const useCompletionStore = defineStore({
|
|||
getters: {},
|
||||
actions: {
|
||||
async loadCompletionData(courseId: number, reload = false) {
|
||||
if (this.completionData && !reload) {
|
||||
return this.completionData;
|
||||
}
|
||||
const completionData = await itGet(`/api/course/completion/${courseId}/`);
|
||||
this.completionData = await itGetCached(`/api/course/completion/${courseId}/`, {
|
||||
reload: reload,
|
||||
});
|
||||
|
||||
if (!completionData) {
|
||||
if (!this.completionData) {
|
||||
throw `No completionData found with: ${courseId}`;
|
||||
}
|
||||
|
||||
this.completionData = completionData;
|
||||
return this.completionData || [];
|
||||
},
|
||||
async markPage(page: BaseCourseWagtailPage) {
|
||||
|
|
@ -34,8 +32,9 @@ export const useCompletionStore = defineStore({
|
|||
completion_status: page.completion_status,
|
||||
});
|
||||
|
||||
if (completionData) {
|
||||
if (completionData && completionData.length > 0) {
|
||||
this.completionData = completionData;
|
||||
bustItGetCache(`/api/course/completion/${completionData[0].course}/`);
|
||||
}
|
||||
|
||||
return this.completionData || [];
|
||||
|
|
|
|||
|
|
@ -0,0 +1,41 @@
|
|||
import { itGetCached } from "@/fetchHelpers";
|
||||
import type { CourseSession } from "@/types";
|
||||
import log from "loglevel";
|
||||
import { defineStore } from "pinia";
|
||||
import { useRoute } from "vue-router";
|
||||
|
||||
export type CourseSessionsStoreState = {
|
||||
courseSessions: CourseSession[] | undefined;
|
||||
};
|
||||
|
||||
export const useCourseSessionsStore = defineStore({
|
||||
id: "courseSessions",
|
||||
state: () => {
|
||||
return {
|
||||
courseSessions: undefined,
|
||||
} as CourseSessionsStoreState;
|
||||
},
|
||||
getters: {
|
||||
courseSessionForRoute: (state) => {
|
||||
const route = useRoute();
|
||||
return state.courseSessions?.find((cs) => {
|
||||
return (
|
||||
route.path.startsWith(cs.learning_path_url) ||
|
||||
route.path.startsWith(cs.competence_url)
|
||||
);
|
||||
});
|
||||
},
|
||||
},
|
||||
actions: {
|
||||
async loadCourseSessionsData(reload = false) {
|
||||
log.debug("loadCourseSessionsData called");
|
||||
this.courseSessions = await itGetCached(`/api/course/sessions/`, {
|
||||
reload: reload,
|
||||
});
|
||||
if (!this.courseSessions) {
|
||||
throw `No courseSessionData found for user`;
|
||||
}
|
||||
return this.courseSessions;
|
||||
},
|
||||
},
|
||||
});
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
import { itGet } from "@/fetchHelpers";
|
||||
import { itGetCached } from "@/fetchHelpers";
|
||||
import { LearningPath } from "@/services/learningPath";
|
||||
import { useCompletionStore } from "@/stores/completion";
|
||||
import { defineStore } from "pinia";
|
||||
|
|
@ -6,34 +6,45 @@ import { defineStore } from "pinia";
|
|||
export type LearningPathStoreState = {
|
||||
learningPath: LearningPath | undefined;
|
||||
page: "INDEX" | "OVERVIEW";
|
||||
loading: boolean;
|
||||
};
|
||||
|
||||
let lastSlug = "";
|
||||
|
||||
export const useLearningPathStore = defineStore({
|
||||
id: "learningPath",
|
||||
state: () => {
|
||||
return {
|
||||
learningPath: undefined,
|
||||
page: "INDEX",
|
||||
loading: false,
|
||||
} as LearningPathStoreState;
|
||||
},
|
||||
getters: {},
|
||||
actions: {
|
||||
async loadLearningPath(slug: string, reload = false) {
|
||||
async loadLearningPath(slug: string, reload = false, fail = true) {
|
||||
this.loading = true;
|
||||
const completionStore = useCompletionStore();
|
||||
if (this.learningPath && !reload) {
|
||||
if (this.learningPath && !reload && slug === lastSlug) {
|
||||
return this.learningPath;
|
||||
}
|
||||
const learningPathData = await itGet(`/api/course/page/${slug}/`);
|
||||
const completionData = await completionStore.loadCompletionData(
|
||||
learningPathData.course.id
|
||||
);
|
||||
this.learningPath = undefined;
|
||||
const learningPathData = await itGetCached(`/api/course/page/${slug}/`);
|
||||
|
||||
if (!learningPathData) {
|
||||
if (!learningPathData && fail) {
|
||||
throw `No learning path found with: ${slug}`;
|
||||
}
|
||||
|
||||
this.learningPath = LearningPath.fromJson(learningPathData, completionData);
|
||||
return this.learningPath;
|
||||
if (learningPathData) {
|
||||
lastSlug = slug;
|
||||
const completionData = await completionStore.loadCompletionData(
|
||||
learningPathData.course.id
|
||||
);
|
||||
|
||||
this.learningPath = LearningPath.fromJson(learningPathData, completionData);
|
||||
this.loading = false;
|
||||
return this.learningPath;
|
||||
}
|
||||
},
|
||||
},
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,7 +1,8 @@
|
|||
import * as log from "loglevel";
|
||||
|
||||
import { itGet, itPost } from "@/fetchHelpers";
|
||||
import { bustItGetCache, itGetCached, itPost } from "@/fetchHelpers";
|
||||
import { useAppStore } from "@/stores/app";
|
||||
import { useCourseSessionsStore } from "@/stores/courseSessions";
|
||||
import { defineStore } from "pinia";
|
||||
|
||||
const logoutRedirectUrl = import.meta.env.VITE_LOGOUT_REDIRECT;
|
||||
|
|
@ -43,6 +44,8 @@ export const useUserStore = defineStore({
|
|||
.then((data) => {
|
||||
this.$state = data;
|
||||
this.loggedIn = true;
|
||||
log.debug("bust cache");
|
||||
bustItGetCache();
|
||||
log.debug(`redirect to ${next}`);
|
||||
window.location.href = next;
|
||||
})
|
||||
|
|
@ -68,11 +71,13 @@ export const useUserStore = defineStore({
|
|||
},
|
||||
fetchUser() {
|
||||
const appStore = useAppStore();
|
||||
itGet("/api/core/me/")
|
||||
itGetCached("/api/core/me/")
|
||||
.then((data) => {
|
||||
this.$state = data;
|
||||
this.loggedIn = true;
|
||||
appStore.userLoaded = true;
|
||||
const courseSessionsStore = useCourseSessionsStore();
|
||||
courseSessionsStore.loadCourseSessionsData();
|
||||
})
|
||||
.catch(() => {
|
||||
this.loggedIn = false;
|
||||
|
|
|
|||
|
|
@ -301,3 +301,28 @@ export interface DropdownListItem {
|
|||
icon: Component;
|
||||
data: object;
|
||||
}
|
||||
|
||||
export interface CircleExpert {
|
||||
user_id: number;
|
||||
user_email: string;
|
||||
user_first_name: string;
|
||||
user_last_name: string;
|
||||
circle_id: number;
|
||||
circle_slug: string;
|
||||
circle_translation_key: string;
|
||||
}
|
||||
|
||||
export interface CourseSession {
|
||||
id: number;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
course: Course;
|
||||
title: string;
|
||||
start_date: string;
|
||||
end_date: string;
|
||||
learning_path_url: string;
|
||||
competence_url: string;
|
||||
media_library_url: string;
|
||||
additional_json_data: unknown;
|
||||
experts: CircleExpert[];
|
||||
}
|
||||
|
|
|
|||
|
|
@ -107,26 +107,36 @@ def create_default_users(user_model=User, group_model=Group, default_password=No
|
|||
_create_student_user(**user_data)
|
||||
|
||||
_create_student_user(
|
||||
email="expertvv.analyse@vbv-afa.ch",
|
||||
email="expert-vv.analyse@eiger-versicherungen.ch",
|
||||
first_name="Expert",
|
||||
last_name="Analyse",
|
||||
)
|
||||
_create_student_user(
|
||||
email="expertvv.einstieg@vbv-afa.ch",
|
||||
email="expert-vv.einstieg@eiger-versicherungen.ch",
|
||||
first_name="Expert",
|
||||
last_name="Einstieg",
|
||||
)
|
||||
_create_student_user(
|
||||
email="student-vv@eiger-versicherungen.ch",
|
||||
first_name="Student",
|
||||
last_name="VV",
|
||||
)
|
||||
|
||||
_create_student_user(
|
||||
email="trainer-uk1.analyse@vbv-afa.ch",
|
||||
email="trainer-uk1-bern.analyse@eiger-versicherungen.ch",
|
||||
first_name="Trainer",
|
||||
last_name="Analyse",
|
||||
)
|
||||
_create_student_user(
|
||||
email="trainer-uk1.einstieg@vbv-afa.ch",
|
||||
email="trainer-uk1-bern.einstieg@eiger-versicherungen.ch",
|
||||
first_name="Trainer",
|
||||
last_name="Einstieg",
|
||||
)
|
||||
_create_student_user(
|
||||
email="student-uk1-bern@eiger-versicherungen.ch",
|
||||
first_name="Student",
|
||||
last_name="UK1-Bern",
|
||||
)
|
||||
|
||||
|
||||
def _get_or_create_user(user_model, *args, **kwargs):
|
||||
|
|
|
|||
|
|
@ -70,15 +70,18 @@ def command():
|
|||
)
|
||||
csu = CourseSessionUser.objects.create(
|
||||
course_session=cs,
|
||||
user=User.objects.get(username="expertvv.einstieg@vbv-afa.ch"),
|
||||
user=User.objects.get(username="student-vv@eiger-versicherungen.ch"),
|
||||
)
|
||||
csu = CourseSessionUser.objects.create(
|
||||
course_session=cs,
|
||||
user=User.objects.get(username="expert-vv.einstieg@eiger-versicherungen.ch"),
|
||||
)
|
||||
csu.expert.add(
|
||||
Circle.objects.get(slug="versicherungsvermittlerin-lp-circle-einstieg")
|
||||
)
|
||||
|
||||
csu = CourseSessionUser.objects.create(
|
||||
course_session=cs,
|
||||
user=User.objects.get(username="expertvv.analyse@vbv-afa.ch"),
|
||||
user=User.objects.get(username="expert-vv.analyse@eiger-versicherungen.ch"),
|
||||
)
|
||||
csu.expert.add(
|
||||
Circle.objects.get(slug="versicherungsvermittlerin-lp-circle-analyse")
|
||||
|
|
@ -94,15 +97,21 @@ def command():
|
|||
course_session=cs,
|
||||
user=User.objects.get(username=user_data["email"]),
|
||||
)
|
||||
|
||||
csu = CourseSessionUser.objects.create(
|
||||
course_session=cs,
|
||||
user=User.objects.get(username="trainer-uk1.einstieg@vbv-afa.ch"),
|
||||
user=User.objects.get(
|
||||
username="trainer-uk1-bern.einstieg@eiger-versicherungen.ch"
|
||||
),
|
||||
)
|
||||
csu.expert.add(Circle.objects.get(slug="überbetriebliche-kurse-lp-circle-einstieg"))
|
||||
|
||||
csu = CourseSessionUser.objects.create(
|
||||
course_session=cs,
|
||||
user=User.objects.get(username="trainer-uk1.analyse@vbv-afa.ch"),
|
||||
user=User.objects.get(
|
||||
username="trainer-uk1-bern.analyse@eiger-versicherungen.ch"
|
||||
),
|
||||
)
|
||||
csu.expert.add(Circle.objects.get(slug="überbetriebliche-kurse-lp-circle-analyse"))
|
||||
csu = CourseSessionUser.objects.create(
|
||||
course_session=cs,
|
||||
user=User.objects.get(username="student-uk1-bern@eiger-versicherungen.ch"),
|
||||
)
|
||||
|
|
|
|||
Loading…
Reference in New Issue