add modules to list

client/src/components/modules/ModuleFilter.vue

@@ -1,5 +1,6 @@
 <template>
-  <div class="container">
+  <div>
+    <div class="container">
     <div class="radio-group">
       <div v-for="(category, index) in firstLevelCategories" :key="index" class="radio-item">
         <input
@@ -7,13 +8,15 @@
           :value="category"
           :id="'category-' + index"
           v-model="selectedCategory"
+          @change="filterModules"
         />
         <label :for="'category-' + index">{{ category }}</label>
       </div>
     </div>
     <div class="dropdown-container">
-      <select id="lernfeld-select" v-model="selectedLernfeld">
-        <option v-for="(lernfeld, index) in lernfeldOptions" :key="index" :value="lernfeld">
+      <select id="lernfeld-select" v-model="selectedLernfeld" @change="filterModules">
+        <option v-for="(lernfeld, index) in lernfeldOptions" :key="index" :value="lernfeld"
+>
           {{ lernfeld }}
         </option>
       </select>
@@ -21,11 +24,27 @@
 
 
 
+        <div class="topic__modules">
+        <module-teaser
+          v-for="module in filteredModules"
+          v-bind="module"
+          :key="module.slug"
+        />
+      </div>
+
+
+  </div>
+
+
+
+
+
   </div>
 </template>
 
 <script setup lang="ts">
   import {computed, ref} from "vue";
+  import ModuleTeaser from "@/components/modules/ModuleTeaser.vue";
 
 
   const props = defineProps<{
@@ -33,6 +52,7 @@
   }>();
 
   const selectedCategory = ref(null);
+  console.log(props.modules)
 
   const lernfeldOptions = ['Alle Lernfelder', 'Lernfeld 1', 'Lernfeld 2', 'Lernfeld 3', 'Lernfeld 4', 'Lernfeld 5'];
   const selectedLernfeld = ref('Alle Lernfelder');
@@ -41,6 +61,37 @@
   const firstLevelCategories = computed(() => {
     return ["1. Lehrjahr", "2. Lehrjahr", "3. Lehrjahr", ];
   });
+
+  let filteredModules = computed(() => {
+    return filterModules();
+  });
+
+
+  function filterModules() {
+
+    let filteredModules = props.modules;
+    if (selectedCategory.value === null) {
+      return props.modules;
+    }
+
+    // filter by Lehrjahr
+    filteredModules = props.modules.filter((module) => {
+      return module.metaTitle.includes(selectedCategory.value);
+    });
+
+    //filter by Lernfeld
+    if (selectedLernfeld.value !== 'Alle Lernfelder') {
+      filteredModules = filteredModules.filter((module) => {
+        return module.metaTitle.includes(selectedLernfeld.value);
+      });
+    }
+
+
+    return filteredModules;
+
+
+
+  }
 </script>
 
 <style scoped lang="scss">
@@ -72,4 +123,19 @@
   display: flex;
   align-items: center;
 }
+
+  topic__modules {
+    margin-top: 40px;
+    display: flex;
+    flex-wrap: wrap;
+    @supports (display: grid) {
+      display: grid;
+    }
+    grid-column-gap: $large-spacing;
+    grid-row-gap: $large-spacing;
+
+    @include desktop {
+      grid-template-columns: repeat(3, minmax(auto, 380px));
+    }
+  }
 </style>