Add dropdown component

client/src/components/modules/ModuleFilter.vue

@@ -1,26 +1,15 @@
 <template>
   <div>
     <div class="container">
-      <div class="radio-group">
+      <ModuleFilterDropdown :selected-item="selectedCategory"
-        <div class="radio-item" v-for="(category, index) in firstLevelCategories" :key="index">
+                            :items="firstLevelCategories"
-          <input
+                            @update:selectedItem="newItem => selectedCategory = newItem"
-            type="radio"
+      ></ModuleFilterDropdown>
-            :value="category"
-            :id="'category-' + index"
-            v-model="selectedCategory"
-            @change="filterModules"
-          />
-          <label :for="'category-' + index">{{ category.name }}</label>
-        </div>
-      </div>
 
-      <div class="dropdown-container">
+      <ModuleFilterDropdown :selected-item="selectedLernfeld"
-        <select id="lernfeld-select" v-model="selectedLernfeld" @change="filterModules">
+                            :items="lernfeldOptions"
-          <option :value="lernfeld" v-for="(lernfeld, index) in lernfeldOptions" :key="index">
+                            @update:selectedItem="newItem => selectedLernfeld = newItem"
-            {{ lernfeld.name }}
+      ></ModuleFilterDropdown>
-          </option>
-        </select>
-      </div>
     </div>
     <div class="topic__modules">
       <module-teaser
@@ -39,9 +28,11 @@
   import ModuleTeaser from "@/components/modules/ModuleTeaser.vue";
   import gql from "graphql-tag";
   import {useQuery, useMutation} from "@vue/apollo-composable";
+  import ModuleFilterDropdown from "@/components/modules/ModuleFilterDropdown.vue";
+
 
   const props = defineProps<{
-    modules: [];
+    modules: Object;
     me: any;
   }>();
 

client/src/components/modules/ModuleFilterDropdown.vue

@@ -0,0 +1,113 @@
+<template>
+  <div
+    class="class-selection"
+    v-if="selectedItem"
+  >
+    <div
+      data-cy="class-selection"
+      class="class-selection__selected-class selected-class"
+      @click.stop="toggle()"
+    >
+      <span class="selected-class__text"> {{ selectedItem.name }}</span>
+      <ChevronDown class="selected-class__dropdown-icon"/>
+    </div>
+    <WidgetPopover
+      :mobile="mobile"
+      class="class-selection__popover"
+      v-if="showPopover"
+      @hide-me="showPopover = false"
+    >
+      <li
+        :label="selectedItem.name"
+        :item="selectedItem"
+        data-cy="class-selection-entry"
+        class="popover-links__link popover-links__link--large"
+        v-for="item in items"
+        :key="item.id"
+        @click="updateSelectedItem(item)"
+      >
+        <i v-if="selectedItem === item">A</i><span>{{ item.name }}</span>
+      </li>
+
+
+    </WidgetPopover>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import WidgetPopover from '@/components/ui/WidgetPopover.vue';
+  import {computed, ref, defineAsyncComponent} from "vue";
+  import {defineComponent} from "vue";
+  import ChevronDown from "@/components/icons/ChevronDown.vue";
+
+  const props = defineProps<{
+    mobile: boolean,
+    selectedItem: Object,
+    items: Object[],
+  }>();
+
+  let showPopover = ref(false)
+
+  function toggle() {
+    showPopover.value = !showPopover.value;
+  }
+
+  function updateSelectedItem(item: Object) {
+    console.log('updateSelectedItem', item);
+    emit('update:selectedItem', item);
+    showPopover.value = false;
+  }
+  const emit = defineEmits(['update:selectedItem']);
+
+</script>
+
+<style scoped lang="scss">
+  @import 'styles/helpers';
+
+  .class-selection {
+    position: relative;
+    cursor: pointer;
+    margin-bottom: $medium-spacing;
+    border-radius: 4px;
+    width: 200px;
+
+    &__popover {
+      white-space: nowrap;
+      top: 100%;
+      left: 0;
+      transform: translateY($small-spacing);
+    }
+  }
+
+  .selected-class {
+    width: 100%;
+    box-sizing: border-box;
+    padding: $small-spacing 0;
+
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    border: solid silver 1px;
+
+    border-radius: 4px;
+    padding: 12px;
+
+
+    &__text {
+      @include small-text;
+      margin-right: $small-spacing;
+
+    }
+
+    &__dropdown-icon {
+      width: 20px;
+      height: 20px;
+      fill: #139EE0;
+    }
+  }
+
+  .widget-popover {
+    width: 100%;
+    border-radius: 12px;
+  }
+</style>

client/src/components/ui/Pill.vue

@@ -4,7 +4,7 @@
 
 <script setup lang="ts">
   const props = defineProps<{
-    text: [];
+    text: String;
   }>();
 </script>