VBV-213: Filter criteria by selected circle

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<Props>(), {
   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<number> {
 
 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;

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) {
         <ul class="flex flex-row leading-7 text-base font-bold ml-4">
           <li
             v-for="circle in cockpitStore.circles"
-            :key="circle.id"
+            :key="circle.translation_key"
             class="mr-4 last:mr-0"
           >
             <button
               class="border-2 border-blue-900 rounded-full px-4 mr-4 last:mr-0"
-              :class="setActiveClasses(circle.id)"
-              @click="cockpitStore.toggleCourseSelection(circle.id)"
+              :class="setActiveClasses(circle.translation_key)"
+              @click="cockpitStore.toggleCourseSelection(circle.translation_key)"
             >
               {{ circle.title }}
             </button>
@@ -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"
                       ></LearningPathDiagram>
                     </div>

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);
       }
     },

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;
         }
       }

client/src/types.ts

@@ -346,5 +346,7 @@ export interface ExpertSessionUser extends CourseSessionUser {
   circles: {
     id: number;
     title: string;
+    slug: string;
+    translation_key: string;
   }[];
 }