From 59f717fa391ee1d4d640384bfa9ec90c3aca87e9 Mon Sep 17 00:00:00 2001 From: Daniel Egger Date: Wed, 21 Dec 2022 10:38:27 +0100 Subject: [PATCH] VBV-213: Filter criteria by selected circle --- .../learningPath/LearningPathDiagram.vue | 20 ++++++++++--------- client/src/pages/cockpit/CockpitIndexPage.vue | 14 ++++++------- client/src/stores/cockpit.ts | 14 ++++++------- client/src/stores/competence.ts | 11 +++++++++- client/src/types.ts | 2 ++ 5 files changed, 37 insertions(+), 24 deletions(-) diff --git a/client/src/components/learningPath/LearningPathDiagram.vue b/client/src/components/learningPath/LearningPathDiagram.vue index a2c3b946..7504fc7d 100644 --- a/client/src/components/learningPath/LearningPathDiagram.vue +++ b/client/src/components/learningPath/LearningPathDiagram.vue @@ -20,21 +20,21 @@ export interface Props { profileUserId?: string; learningPath: LearningPath; // set to undefined (default) to show all circles - showCircleIds?: number[]; + showCircleTranslationKeys: string[]; } const props = withDefaults(defineProps(), { diagramType: "horizontal", postfix: "", profileUserId: "", - showCircleIds: undefined, + showCircleTranslationKeys: undefined, }); log.debug( "LearningPathDiagram created", props.postfix, props.profileUserId, - props.showCircleIds + props.showCircleTranslationKeys ); const state = reactive({ width: 1640, height: 384 }); @@ -55,7 +55,7 @@ onMounted(async () => { }); watch( - () => props.showCircleIds, + () => props.showCircleTranslationKeys, (newCircleIds, oldCircleIds) => { log.debug("LearningPathDiagram showCircleIds changed", newCircleIds, oldCircleIds); render(); @@ -93,15 +93,16 @@ interface CirclePie extends d3.PieArcDatum { interface InternalCircle { id: number; + translation_key: string; title: string; frontend_url: string; slug: string; pieData: CirclePie[]; } -function isCircleVisible(circleId: number) { - if (props.showCircleIds) { - return props.showCircleIds.includes(circleId); +function isCircleVisible(circleTranslationKey: string) { + if (props.showCircleTranslationKeys) { + return props.showCircleTranslationKeys.includes(circleTranslationKey); } return true; @@ -127,12 +128,13 @@ const circles = computed(() => { pie.allFinished = allFinished(circle, thisLearningSequence); }); - if (isCircleVisible(circle.id)) { + if (isCircleVisible(circle.translation_key)) { internalCircles.push({ pieData: pieData.reverse() as CirclePie[], title: circle.title, frontend_url: circle.frontend_url, id: circle.id, + translation_key: circle.translation_key, slug: _.kebabCase(circle.title), }); } @@ -196,7 +198,7 @@ function render() { .append("g") .attr("class", (internalCircle) => { let result = "circle"; - if (!isCircleVisible(internalCircle.id)) { + if (!isCircleVisible(internalCircle.translation_key)) { result += " hidden"; } return result; diff --git a/client/src/pages/cockpit/CockpitIndexPage.vue b/client/src/pages/cockpit/CockpitIndexPage.vue index 892eaf3b..35202cb2 100644 --- a/client/src/pages/cockpit/CockpitIndexPage.vue +++ b/client/src/pages/cockpit/CockpitIndexPage.vue @@ -21,7 +21,7 @@ const learningPathStore = useLearningPathStore(); function userCountStatus(userId: number) { return competenceStore.calcStatusCount( - competenceStore.flatPerformanceCriteria(userId) + competenceStore.flatPerformanceCriteria(userId, cockpitStore.selectedCircles) ); } @@ -33,8 +33,8 @@ const data = { }, }; -function setActiveClasses(id: number) { - return cockpitStore.selectedCircles.indexOf(id) > -1 +function setActiveClasses(translationKey: string) { + return cockpitStore.selectedCircles.indexOf(translationKey) > -1 ? ["bg-blue-900", "text-white"] : ["text-bg-900"]; } @@ -48,13 +48,13 @@ function setActiveClasses(id: number) {
  • @@ -127,7 +127,7 @@ function setActiveClasses(id: number) { " :postfix="`cockpit-${csu.user_id}`" :profile-user-id="`${csu.user_id}`" - :show-circle-ids="cockpitStore.selectedCircles" + :show-circle-translation-keys="cockpitStore.selectedCircles" diagram-type="horizontalSmall" > diff --git a/client/src/stores/cockpit.ts b/client/src/stores/cockpit.ts index 00d5d849..6c9a9cc6 100644 --- a/client/src/stores/cockpit.ts +++ b/client/src/stores/cockpit.ts @@ -7,7 +7,7 @@ import { defineStore } from "pinia"; export type CockpitStoreState = { courseSessionUsers: CourseSessionUser[] | undefined; cockpitSessionUser: ExpertSessionUser | undefined; - selectedCircles: number[]; + selectedCircles: string[]; }; export const useCockpitStore = defineStore({ @@ -23,7 +23,7 @@ export const useCockpitStore = defineStore({ circles: (state) => state.cockpitSessionUser?.circles, selectedCirclesTitles: (state) => state.cockpitSessionUser?.circles - .filter((circle) => state.selectedCircles.indexOf(circle.id) > -1) + .filter((circle) => state.selectedCircles.indexOf(circle.translation_key) > -1) .map((circle) => circle.title), }, actions: { @@ -37,7 +37,7 @@ export const useCockpitStore = defineStore({ this.cockpitSessionUser = data.cockpit_user; if (this.cockpitSessionUser && this.cockpitSessionUser.circles?.length > 0) { - this.selectedCircles = [this.cockpitSessionUser.circles[0].id]; + this.selectedCircles = [this.cockpitSessionUser.circles[0].translation_key]; } if (!this.courseSessionUsers) { @@ -45,14 +45,14 @@ export const useCockpitStore = defineStore({ } return this.courseSessionUsers; }, - toggleCourseSelection(id: number) { - if (this.selectedCircles.indexOf(id) < 0) { - this.selectedCircles.push(id); + toggleCourseSelection(translationKey: string) { + if (this.selectedCircles.indexOf(translationKey) < 0) { + this.selectedCircles.push(translationKey); } else { if (this.selectedCircles.length === 1) { return; } - const index = this.selectedCircles.indexOf(id); + const index = this.selectedCircles.indexOf(translationKey); this.selectedCircles.splice(index, 1); } }, diff --git a/client/src/stores/competence.ts b/client/src/stores/competence.ts index 5e4acd30..6b495b11 100644 --- a/client/src/stores/competence.ts +++ b/client/src/stores/competence.ts @@ -61,7 +61,10 @@ export const useCompetenceStore = defineStore({ return this.competenceProfilePages.get(userId); }, - flatPerformanceCriteria(userId: number | undefined = undefined) { + flatPerformanceCriteria( + userId: number | undefined = undefined, + circleTranslationKeys: string[] | undefined = undefined + ) { if (!userId) { const userStore = useUserStore(); userId = userStore.id; @@ -84,6 +87,12 @@ export const useCompetenceStore = defineStore({ ); } + if (circleTranslationKeys) { + criteria = criteria.filter((c) => + circleTranslationKeys.includes(c.circle.translation_key) + ); + } + return criteria; } } diff --git a/client/src/types.ts b/client/src/types.ts index 4878e623..0626ea63 100644 --- a/client/src/types.ts +++ b/client/src/types.ts @@ -346,5 +346,7 @@ export interface ExpertSessionUser extends CourseSessionUser { circles: { id: number; title: string; + slug: string; + translation_key: string; }[]; }