Replace the course profile filter pills with a dropdown

client/src/components/ui/ItDropdownSelect.vue

@@ -5,17 +5,14 @@ import { computed } from "vue"; // https://stackoverflow.com/questions/64775876/
 
 // https://stackoverflow.com/questions/64775876/vue-3-pass-reactive-object-to-component-with-two-way-binding
 interface Props {
-  modelValue?: {
-    id: string | number;
-    name: string;
-  };
+  modelValue?: DropdownSelectable;
   items?: DropdownSelectable[];
   borderless?: boolean;
   placeholderText?: string | null;
 }
 
 const emit = defineEmits<{
-  (e: "update:modelValue", data: object): void;
+  (e: "update:modelValue", data: DropdownSelectable): void;
 }>();
 
 const props = withDefaults(defineProps<Props>(), {

client/src/pages/learningPath/learningPathPage/LearningPathProfileFilter.vue

@@ -1,35 +1,44 @@
 <script lang="ts" setup>
-import { COURSE_PROFILE_ALL_FILTER } from "@/constants";
+import ItDropdownSelect from "@/components/ui/ItDropdownSelect.vue";
+import type { DropdownSelectable } from "@/types";
+import { useTranslation } from "i18next-vue";
+import { computed } from "vue";
 
 interface Props {
   profiles?: string[];
   selected?: string;
 }
-const allProfile = COURSE_PROFILE_ALL_FILTER;
 
-defineProps<Props>();
-defineEmits(["select"]);
+const props = defineProps<Props>();
+const emit = defineEmits(["select"]);
+
+const { t } = useTranslation();
+const items = computed(() => {
+  return props.profiles?.map((p) => ({ id: p, name: t(`profile.${p}`) })) || [];
+});
+
+const selectedItem = computed(() => {
+  if (props.selected) {
+    return { id: props.selected || "", name: t(`profile.${props.selected}`) };
+  }
+  return { id: "", name: "" };
+});
+
+const updateFilter = (e: DropdownSelectable) => {
+  emit("select", e.id);
+};
 </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 || selected === allProfile
-            ? 'tag-active'
-            : 'tag-inactive'
-        "
-        @click="$emit('select', profile)"
-      >
-        {{ $t(`profile.${profile}`) }}
-      </button>
+      <ItDropdownSelect
+        :items="items"
+        class="min-w-[18rem]"
+        :model-value="selectedItem"
+        @update:model-value="updateFilter"
+      />
     </div>
-    <a class="link" @click="$emit('select', allProfile)">
-      Alle anzeigen ({{ $t(`profile.${allProfile}`) }})
-    </a>
   </div>
 </template>

server/vbv_lernwelt/course/graphql/types.py

@@ -136,9 +136,7 @@ class CourseObjectType(DjangoObjectType):
     @staticmethod
     def resolve_profiles(root: Course, info, **kwargs):
         if root.configuration.is_vv:
-            return CourseProfile.objects.exclude(id=COURSE_PROFILE_ALL_ID).values_list(
-                "code", flat=True
-            )
+            return CourseProfile.objects.values_list("code", flat=True)
         return []
 
     @staticmethod