Add Category and CategoryType to module

client/src/components/modules/ModuleFilter.vue

@@ -15,20 +15,19 @@
       </div>
       <div class="dropdown-container">
         <select id="lernfeld-select" v-model="selectedLernfeld" @change="filterModules">
-          <option v-for="(lernfeld, index) in lernfeldOptions" :key="index" :value="lernfeld"
-          >
+          <option v-for="(lernfeld, index) in lernfeldOptions" :value="lernfeld" :key="index">
             {{ lernfeld }}
           </option>
         </select>
       </div>
     </div>
-     <div class="topic__modules">
-        <module-teaser
-          v-for="module in filteredModules"
-          v-bind="module"
-          :key="module.slug"
-        />
-      </div>
+    <div class="topic__modules">
+      <module-teaser
+        v-for="module in filteredModules"
+        v-bind="module"
+        :key="module.slug"
+      />
+    </div>
 
 
   </div>
@@ -44,14 +43,15 @@
   }>();
 
   const selectedCategory = ref(null);
-  console.log(props.modules)
+  console.log("modules", props.modules)
+
 
   const lernfeldOptions = ['Alle Lernfelder', 'Lernfeld 1', 'Lernfeld 2', 'Lernfeld 3', 'Lernfeld 4', 'Lernfeld 5'];
   const selectedLernfeld = ref('Alle Lernfelder');
 
 
   const firstLevelCategories = computed(() => {
-    return ["1. Lehrjahr", "2. Lehrjahr", "3. Lehrjahr",];
+    return ["Alle Lehrjahre", "1. Lehrjahr", "2. Lehrjahr", "3. Lehrjahr",];
   });
 
   let filteredModules = computed(() => {
@@ -60,21 +60,22 @@
 
 
   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);
-    });
+    if (selectedCategory.value !== 'Alle Lehrjahre') {
+      filteredModules = filteredModules.filter((module) => {
+        return module.categoryName.includes(selectedCategory.value);
+      });
+    }
 
     //filter by Lernfeld
     if (selectedLernfeld.value !== 'Alle Lernfelder') {
       filteredModules = filteredModules.filter((module) => {
-        return module.metaTitle.includes(selectedLernfeld.value);
+        return module.categoryTypeName.includes(selectedLernfeld.value);
       });
     }
 
@@ -115,6 +116,7 @@
     display: flex;
     align-items: center;
   }
+
   .topic {
     display: grid;
     padding: $large-spacing $small-spacing;

client/src/components/modules/ModuleTeaser.vue

@@ -17,13 +17,16 @@
       <p class="module-teaser__description">
         {{ teaser }}
       </p>
+      <span  :value="attribute" v-for="attribute in [categoryName, categoryTypeName]">
+        <div class="module-teaser__module-category" v-if="attribute">{{attribute}}</div>
+</span>
     </div>
   </router-link>
 </template>
 
 <script>
 export default {
-  props: ['metaTitle', 'title', 'teaser', 'id', 'slug', 'heroImage'],
+  props: ['metaTitle', 'title', 'teaser', 'id', 'slug', 'heroImage', 'categoryName', 'categoryTypeName'],
 
   computed: {
     moduleLink() {
@@ -48,7 +51,7 @@ export default {
 .module-teaser {
   box-shadow: 0 3px 9px 0 rgba(0, 0, 0, 0.12);
   border: 1px solid #e2e2e2;
-  height: 330px;
+  height: 390px;
   max-width: 380px;
   width: 100%;
   border-radius: 12px;
@@ -88,5 +91,15 @@ export default {
     line-height: $default-line-height;
     font-size: 1.2rem;
   }
+
+   &__module-category {
+      background-color: rgba(129, 129, 129, 0.99); /* Replace with your desired background color */
+      color: #fff; /* Replace with your desired text color */
+      padding: 10px 20px;
+      border-radius: 40px; /* A high value to make it look like a pill */
+      display: inline-block; /* Ensures the pill takes only the necessary width */
+      margin-right: 10px;
+     margin-top: 20px;
+    }
 }
 </style>

client/src/graphql/gql/fragments/moduleParts.gql

@@ -9,6 +9,8 @@ fragment ModuleParts on ModuleNode {
   heroSource
   solutionsEnabled
   inEditMode @client
+  categoryName
+  categoryTypeName
   topic {
     slug
     title

server/books/models/module.py

@@ -168,6 +168,13 @@ class Module(StrictHierarchyPage):
     def get_admin_display_title(self):
         return f"{self.meta_title} - {self.title}"
 
+    @property
+    def category_name(self) -> str:
+        return self.category.name if self.category else ""
+    @property
+    def category_type_name(self) -> str:
+        return self.category_type.name if self.category_type else ""
+
 
 class RecentModule(models.Model):
     module = models.ForeignKey(