From 195151ae3412d32cf2ea4143cfc68b302c24442d Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Tue, 9 Jul 2024 10:39:26 +0200
Subject: [PATCH] Refactor filter into component

---
 .../learningPathPage/LearningPathPage.vue     | 22 +++++-----------
 .../LearningPathProfileFilter.vue             | 26 +++++++++++++++++++
 2 files changed, 33 insertions(+), 15 deletions(-)
 create mode 100644 client/src/pages/learningPath/learningPathPage/LearningPathProfileFilter.vue

diff --git a/client/src/pages/learningPath/learningPathPage/LearningPathPage.vue b/client/src/pages/learningPath/learningPathPage/LearningPathPage.vue
index 90ae0476..6765f0f1 100644
--- a/client/src/pages/learningPath/learningPathPage/LearningPathPage.vue
+++ b/client/src/pages/learningPath/learningPathPage/LearningPathPage.vue
@@ -3,6 +3,7 @@ import LearningPathListView from "@/pages/learningPath/learningPathPage/Learning
 import LearningPathPathView from "@/pages/learningPath/learningPathPage/LearningPathPathView.vue";
 import CircleProgress from "@/pages/learningPath/learningPathPage/LearningPathProgress.vue";
 import LearningPathTopics from "@/pages/learningPath/learningPathPage/LearningPathTopics.vue";
+import LearningPathProfileFilter from "@/pages/learningPath/learningPathPage/LearningPathProfileFilter.vue";
 import type { ViewType } from "@/pages/learningPath/learningPathPage/LearningPathViewSwitch.vue";
 import LearningPathViewSwitch from "@/pages/learningPath/learningPathPage/LearningPathViewSwitch.vue";
 import { breakpointsTailwind, useBreakpoints } from "@vueuse/core";
@@ -73,22 +74,13 @@ const changeViewType = (viewType: ViewType) => {
         ></CourseSessionDueDatesList>
       </div>
       <!-- Right -->
-      <div v-if="!useMobileLayout" class="flex-grow">
-        <h5 class="mb-4">Zulassungsprofil:</h5>
-        <div class="mb-4 flex gap-4">
-          <button
-            v-for="profile in course?.profiles"
-            :key="profile"
-            :class="filter == profile || !filter ? 'tag-active' : 'tag-inactive'"
-            @click="filter = profile"
-          >
-            {{ profile }}
-          </button>
-        </div>
-        <a class="link" @click="filter = ''">Alle anzeigen (Allbranche)</a>
-      </div>
+      <LearningPathProfileFilter
+        v-if="!useMobileLayout"
+        :profiles="course?.profiles"
+        :selected="filter"
+        @select="updateCourseProfile"
+      />
     </div>
-
     <!-- Bottom -->
     <div class="bg-white">
       <div v-if="lpQueryResult.learningPath">
diff --git a/client/src/pages/learningPath/learningPathPage/LearningPathProfileFilter.vue b/client/src/pages/learningPath/learningPathPage/LearningPathProfileFilter.vue
new file mode 100644
index 00000000..82609bf9
--- /dev/null
+++ b/client/src/pages/learningPath/learningPathPage/LearningPathProfileFilter.vue
@@ -0,0 +1,26 @@
+<script lang="ts" setup>
+interface Props {
+  profiles?: string[];
+  selected?: string;
+}
+
+defineProps<Props>();
+defineEmits(["select"]);
+</script>
+
+<template>
+  <div class="flex-grow">
+    <h5 class="mb-4">Zulassungsprofil:</h5>
+    <div class="mb-4 flex gap-4">
+      <button
+        v-for="profile in profiles"
+        :key="profile"
+        :class="selected == profile || !selected ? 'tag-active' : 'tag-inactive'"
+        @click="$emit('select', profile)"
+      >
+        {{ profile }}
+      </button>
+    </div>
+    <a class="link" @click="$emit('select', '')">Alle anzeigen (Allbranche)</a>
+  </div>
+</template>