Add filter to user profile page

client/src/pages/userProfile/LearningPathProfilePage.vue

@@ -8,6 +8,7 @@ import { computed, ref, watch } from "vue";
 import type { CircleType } from "@/types";
 import { COURSE_QUERY } from "@/graphql/queries";
 import { useQuery } from "@urql/vue";
+import UserProfileTopicList from "./UserProfileTopicList.vue";
 
 const props = defineProps<{
   userId: string;
@@ -36,7 +37,7 @@ const chosenProfile = computed(() => {
   if (courseSessionUsers.value && courseSessionUsers.value.length > 0) {
     return courseSessionUsers.value[0]?.chosen_profile;
   }
-  return null;
+  return undefined;
 });
 
 watch(lpQueryResult.learningPath, () => {
@@ -56,28 +57,14 @@ watch(lpQueryResult.learningPath, () => {
           {{ $t(`profile.${chosenProfile}`) }}
         </h3>
       </div>
-      <div
+      <UserProfileTopicList
         v-for="topic in lpQueryResult.learningPath?.value?.topics ?? []"
         :key="topic.id"
-        class="mb-4"
-      >
-        <h4 class="mb-1 font-semibold text-gray-800">
-          {{ topic.title }}
-        </h4>
-        <button
-          v-for="circle in topic.circles"
-          :key="circle.id"
-          class="flex w-full items-center space-x-2 p-2 pr-4 hover:bg-gray-200 lg:pr-8"
-          :class="{ 'bg-gray-200': selectedCircle === circle }"
-          @click="selectCircle(circle)"
-        >
-          <LearningPathCircle
-            :sectors="calculateCircleSectorData(circle)"
-            class="h-10 w-10 snap-center rounded-full bg-white p-0.5"
-          ></LearningPathCircle>
-          <span>{{ circle.title }}</span>
-        </button>
-      </div>
+        :topic="topic"
+        :filter="chosenProfile"
+        :selected-circle="selectedCircle"
+        @select-circle="selectCircle($event)"
+      />
     </template>
     <template #main>
       <ol v-if="selectedCircle" class="flex-auto bg-gray-200 px-6 py-4 lg:px-16">

client/src/pages/userProfile/UserProfileTopicList.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import type { CircleType, TopicType } from "@/types";
+import { calculateCircleSectorData } from "@/pages/learningPath/learningPathPage/utils";
+import LearningPathCircle from "../learningPath/learningPathPage/LearningPathCircle.vue";
+import { computed } from "vue";
+import { COURSE_PROFILE_ALL_FILTER } from "@/constants";
+
+interface Props {
+  topic: TopicType;
+  selectedCircle?: CircleType;
+  filter?: string;
+}
+
+const props = defineProps<Props>();
+defineEmits(["select-circle"]);
+
+const filteredCircles = computed(() => {
+  const circles = props.topic.circles;
+  const filter = props.filter;
+  if (filter === undefined || filter === "" || filter === COURSE_PROFILE_ALL_FILTER) {
+    return circles;
+  }
+  return circles.filter(
+    (circle) => circle.profiles.indexOf(filter as string) > -1 || circle.is_base_circle
+  );
+});
+</script>
+
+<template>
+  <div class="mb-4">
+    <h4 class="mb-1 font-semibold text-gray-800">{{ topic.title }} {{ filter }}</h4>
+    <button
+      v-for="circle in filteredCircles"
+      :key="circle.id"
+      class="flex w-full items-center space-x-2 p-2 pr-4 hover:bg-gray-200 lg:pr-8"
+      :class="{ 'bg-gray-200': selectedCircle === circle }"
+      @click="$emit('select-circle', circle)"
+    >
+      <pre>{{ circle.profiles }}</pre>
+      <LearningPathCircle
+        :sectors="calculateCircleSectorData(circle)"
+        class="h-10 w-10 snap-center rounded-full bg-white p-0.5"
+      ></LearningPathCircle>
+      <span>{{ circle.title }}</span>
+    </button>
+  </div>
+</template>