Add first version of module filter component

client/src/components/modules/ModuleFilter.vue

@@ -0,0 +1,75 @@
+<template>
+  <div class="container">
+    <div class="radio-group">
+      <div v-for="(category, index) in firstLevelCategories" :key="index" class="radio-item">
+        <input
+          type="radio"
+          :value="category"
+          :id="'category-' + index"
+          v-model="selectedCategory"
+        />
+        <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">
+          {{ lernfeld }}
+        </option>
+      </select>
+    </div>
+
+
+
+  </div>
+</template>
+
+<script setup lang="ts">
+  import {computed, ref} from "vue";
+
+
+  const props = defineProps<{
+    modules: [];
+  }>();
+
+  const selectedCategory = ref(null);
+
+  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", ];
+  });
+</script>
+
+<style scoped lang="scss">
+  @import 'styles/helpers';
+.container {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+
+  .module-filter {
+    width: 100%;
+  }
+
+  .radio-group {
+    display: flex;
+    flex-wrap: wrap;
+  }
+
+  .radio-item {
+    display: flex;
+    align-items: center;
+    margin-right: 20px;
+
+  }
+
+  .dropdown-container {
+  margin-left: 40px;
+  display: flex;
+  align-items: center;
+}
+</style>

client/src/pages/topic-page.vue

@@ -14,6 +14,9 @@
       <p class="topic__teaser">
         {{ topic.teaser }}
       </p>
+      <div class="topic__modulefilter">
+        <module-filter></module-filter>
+      </div>
       <div class="topic__links">
         <div
           class="topic__video-link topic__link"
@@ -46,6 +49,7 @@
 
 <script>
 import ModuleTeaser from '@/components/modules/ModuleTeaser.vue';
+import ModuleFilter from '@/components/modules/ModuleFilter.vue';
 import { defineAsyncComponent } from 'vue';
 import TOPIC_QUERY from '@/graphql/gql/queries/topicQuery.gql';
 import me from '@/mixins/me';
@@ -64,6 +68,7 @@ export default {
     ModuleTeaser,
     PlayIcon,
     BulbIcon,
+    ModuleFilter,
   },
 
   apollo: {
@@ -170,6 +175,11 @@ export default {
     grid-template-columns: 300px 1fr;
   }
 
+  &__modulefilter {
+    width: 90%;
+    height: 40px;
+  }
+
   &__navigation {
     padding: 0 $medium-spacing;
     display: none;

server/books/categorize_modules.py

@@ -0,0 +1,20 @@
+from books.models import Module
+import json
+
+def categorize_modules():
+    all_nodes = []
+
+    for module in Module.objects.all():
+        print(f"{module.get_parent() }         {module.meta_title} :  {module.title}")
+
+        nodes = [i.strip() for i in [module.get_parent().title] + module.meta_title.split(' – ')]
+        all_nodes.append(nodes)
+
+    print("")
+
+    for i in range(3):
+        leafs = [node[i] for node in all_nodes if len(node) > i+1]
+        leafs.sort()
+        print(f"{i}.: {set(leafs)}")
+
+

server/books/management/commands/categorize_modules.py

@@ -0,0 +1,11 @@
+from django.core.management import BaseCommand
+from books.categorize_modules import categorize_modules
+
+
+class Command(BaseCommand):
+    def handle(self, *args, **options):
+        self.stdout.write("Migrating Wagtail documents to Custommyskillbox documents")
+        categorize_modules()
+        self.stdout.write("Finish migration")
+
+