Add Dropdown to Mediathek

client/src/views/HandlungsfelderOverview.vue

@@ -1,5 +1,7 @@
 <script setup lang="ts">
 import * as log from 'loglevel';
+import ItDropdownSelect from "@/components/ui/ItDropdownSelect.vue";
+import {reactive, ref} from "vue";
 
 log.debug('HandlungsfelderOverview created');
 
@@ -54,13 +56,30 @@ const fields = [
   },
 ]
 
+const dropdownItems = reactive(
+  [
+    {
+      id: 1,
+      name: 'Alle Lehrgänge'
+    },
+    {
+      id: 2,
+      name: 'Versicherungsvermittler/in'
+    }
+  ]
+)
+
+const dropdownSelected = ref(dropdownItems[0])
+
 </script>
 
 <template>
   <div class="mx-auto max-w-5xl">
     <div class="flex items-center justify-between mb-10">
       <h1>Handlungsfelder</h1>
-      <div>Dropdown</div>
+      <ItDropdownSelect
+        v-model="dropdownSelected"
+        :items="dropdownItems"></ItDropdownSelect>
     </div>
     <div>
       <ul class="grid gap-5 grid-cols-4">

client/src/views/MediaMainView.vue

@@ -1,16 +1,35 @@
 <script setup lang="ts">
 import * as log from 'loglevel';
 import OverviewCard from '@/components/mediacenter/OverviewCard.vue';
+import ItDropdownSelect from "@/components/ui/ItDropdownSelect.vue";
+import {reactive, ref} from "vue";
 
 log.debug('MediaMainView created');
 
+const dropdownItems = reactive(
+  [
+    {
+      id: 1,
+      name: 'Alle Lehrgänge'
+    },
+    {
+      id: 2,
+      name: 'Versicherungsvermittler/in'
+    }
+  ]
+)
+
+const dropdownSelected = ref(dropdownItems[0])
+
 </script>
 
 <template>
   <div class="mx-auto max-w-5xl">
     <div class="flex items-center justify-between mb-10">
       <h1>Mediathek</h1>
-      <div>Dropdown</div>
+      <ItDropdownSelect
+        v-model="dropdownSelected"
+        :items="dropdownItems"></ItDropdownSelect>
     </div>
     <OverviewCard
       title="Handlungsfelder"