From 6ea37447f4d7013722c66f65f610313432573f8c Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Wed, 17 Jul 2024 19:21:03 +0200
Subject: [PATCH] Make "all" filter more explicit

---
 client/src/constants.ts                                    | 2 ++
 .../learningPathPage/LearningPathListTopic.vue             | 7 ++++++-
 .../learningPathPage/LearningPathPathTopic.vue             | 7 ++++++-
 .../learningPathPage/LearningPathProfileFilter.vue         | 7 ++++++-
 4 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/client/src/constants.ts b/client/src/constants.ts
index 84aaefc3..57c51683 100644
--- a/client/src/constants.ts
+++ b/client/src/constants.ts
@@ -3,3 +3,5 @@ export const itCheckboxDefaultIconCheckedTailwindClass =
 
 export const itCheckboxDefaultIconUncheckedTailwindClass =
   "bg-[url(/static/icons/icon-checkbox-unchecked.svg)] hover:bg-[url(/static/icons/icon-checkbox-unchecked-hover.svg)]";
+
+export const COURSE_PROFILE_ALL_FILTER = "all";
diff --git a/client/src/pages/learningPath/learningPathPage/LearningPathListTopic.vue b/client/src/pages/learningPath/learningPathPage/LearningPathListTopic.vue
index 5c625306..4cf545ea 100644
--- a/client/src/pages/learningPath/learningPathPage/LearningPathListTopic.vue
+++ b/client/src/pages/learningPath/learningPathPage/LearningPathListTopic.vue
@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import { COURSE_PROFILE_ALL_FILTER } from "@/constants";
 import LearningPathCircleListTile from "@/pages/learningPath/learningPathPage/LearningPathCircleListTile.vue";
 import type { LearningContentWithCompletion, TopicType } from "@/types";
 import { computed } from "vue";
@@ -11,7 +12,11 @@ interface Props {
 const props = defineProps<Props>();
 
 const filteredCircles = computed(() => {
-  if (props.filter === undefined || props.filter === "") {
+  if (
+    props.filter === undefined ||
+    props.filter === "" ||
+    props.filter === COURSE_PROFILE_ALL_FILTER
+  ) {
     return props.topic.circles;
   }
   return props.topic.circles.filter(
diff --git a/client/src/pages/learningPath/learningPathPage/LearningPathPathTopic.vue b/client/src/pages/learningPath/learningPathPage/LearningPathPathTopic.vue
index 7f34edce..3c739185 100644
--- a/client/src/pages/learningPath/learningPathPage/LearningPathPathTopic.vue
+++ b/client/src/pages/learningPath/learningPathPage/LearningPathPathTopic.vue
@@ -2,6 +2,7 @@
 import { computed } from "vue";
 import type { LearningContentWithCompletion, TopicType } from "@/types";
 import LearningPathCircleColumn from "./LearningPathCircleColumn.vue";
+import { COURSE_PROFILE_ALL_FILTER } from "@/constants";
 
 interface Props {
   topic: TopicType;
@@ -21,7 +22,11 @@ const isLastCircle = (circleIndex: number, numCircles: number) =>
   props.isLastTopic && circleIndex === numCircles - 1;
 
 const filteredCircles = computed(() => {
-  if (props.filter === undefined || props.filter === "") {
+  if (
+    props.filter === undefined ||
+    props.filter === "" ||
+    props.filter === COURSE_PROFILE_ALL_FILTER
+  ) {
     return props.topic.circles;
   }
   return props.topic.circles.filter(
diff --git a/client/src/pages/learningPath/learningPathPage/LearningPathProfileFilter.vue b/client/src/pages/learningPath/learningPathPage/LearningPathProfileFilter.vue
index 7cb0001a..bdb66efa 100644
--- a/client/src/pages/learningPath/learningPathPage/LearningPathProfileFilter.vue
+++ b/client/src/pages/learningPath/learningPathPage/LearningPathProfileFilter.vue
@@ -1,8 +1,11 @@
 <script lang="ts" setup>
+import { COURSE_PROFILE_ALL_FILTER } from "@/constants";
+
 interface Props {
   profiles?: string[];
   selected?: string;
 }
+const allProfile = COURSE_PROFILE_ALL_FILTER;
 
 defineProps<Props>();
 defineEmits(["select"]);
@@ -21,6 +24,8 @@ defineEmits(["select"]);
         {{ $t(`profile.${profile}`) }}
       </button>
     </div>
-    <a class="link" @click="$emit('select', '')">Alle anzeigen (Allbranche)</a>
+    <a class="link" @click="$emit('select', allProfile)">
+      Alle anzeigen ({{ $t(`profile.${allProfile}`) }})
+    </a>
   </div>
 </template>