From 6d5823eb068ce0497c3dc9075d147b3604458e49 Mon Sep 17 00:00:00 2001
From: Christian Cueni <christian.cueni@iterativ.ch>
Date: Tue, 6 Sep 2022 10:44:39 +0200
Subject: [PATCH] Add Dropdown to Mediathek

---
 client/src/views/HandlungsfelderOverview.vue | 21 +++++++++++++++++++-
 client/src/views/MediaMainView.vue           | 21 +++++++++++++++++++-
 2 files changed, 40 insertions(+), 2 deletions(-)

diff --git a/client/src/views/HandlungsfelderOverview.vue b/client/src/views/HandlungsfelderOverview.vue
index 91f82c18..80ebeab7 100644
--- a/client/src/views/HandlungsfelderOverview.vue
+++ b/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">
diff --git a/client/src/views/MediaMainView.vue b/client/src/views/MediaMainView.vue
index 205423df..db5e3cec 100644
--- a/client/src/views/MediaMainView.vue
+++ b/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"