Refactoring

client/src/components/modules/ModuleFilter.vue

@@ -3,14 +3,14 @@
     <div class="module-filter__filterselection">
       <Dropdown class="module-filter__dropdown"
                 :selected-item="selectedLevel"
-                :items="levelOptions"
+                :items="moduleLevels"
-                @update:selectedItem="newItem => selectedLevel = newItem"
+                @update:selectedItem="updateLevel"
       ></Dropdown>
 
       <Dropdown
         class="module-filter__dropdown"
         :selected-item="selectedCategory"
-        :items="categoryOptions"
+        :items="moduleCategories"
         @update:selectedItem="newItem => selectedCategory = newItem"
       ></Dropdown>
       <pill-radio-buttons :selectableItems="languageOptions"
@@ -42,9 +42,8 @@
   // TODO: Fix console warnings... onBeforeUnmount is called when there is no active component instance to be associated with.
   // TODO: Improve Typing
 
-
   const props = defineProps<{
-    modules: Array<Object>;
+    modules: Object[];
     me: any;
   }>();
 
@@ -54,104 +53,79 @@
     {id: 3, label: 'En'}
   ])
   const initialLanguage = languageOptions.value[0]
-
   const selectedLanguage = ref(initialLanguage)
 
+  const initialCategory = {
+    name: 'Alle Lernfelder',
+    id: null,
+    filterAttributeType: 'ALL'
+  };
 
-  const {result: moduleLevelsResult} = useQuery(gql`
+  const initialLevel = {
-    query ModuleLevelsQuery {
+    name: 'Alle Lehrjahre',
+    id: null,
+    filterAttributeType: 'ALL'
+  };
+
+  const {result: moduleFilterResult} = useQuery(gql`
+    query ModuleFilterQuery{
       moduleLevels {
         name
         id
         filterAttributeType
       }
-    }
+        moduleCategories {
-  `);
-
-  const nullLevel = {
-    name: '---',
-    id: null,
-    filterAttributeType: 'ALL'
-  };
-
-  const nullCategory = {
-    name: '---',
-    id: null,
-    filterAttributeType: 'ALL'
-  };
-
-  let defaultLevel = loadDefaultLevel(props.me);
-
-  let selectedLevel = ref(defaultLevel);
-
-  const levelOptions = computed(() => {
-    return [...moduleLevelsResult.value?.moduleLevels || []];
-  });
-
-
-  const selectedCategory = ref(nullCategory);
-
-  const {result: moduleCategoryResult} = useQuery(gql`
-    query ModuleCategoriesQuery {
-      moduleCategories {
         name
         id
         filterAttributeType
       }
+
     }
   `);
 
-  const categoryOptions = computed(() => {
+  const selectedLevel = ref(initialLevel);
-    if (moduleCategoryResult.value){
+  const selectedCategory = ref(initialCategory);
-      const moduleCategories = moduleCategoryResult.value?.moduleCategories;
 
-    // TODO: Fix this, computed must not have a sideeffect
+  selectedLevel.value = loadDefaultLevel(props.me);
-      selectedCategory.value = moduleCategories.find((category) => category.filterAttributeType === 'ALL');
-      return moduleCategories
-    }
-    return [...moduleCategoryResult.value?.moduleCategories || []];
-  });
 
+  const moduleLevels = computed(() => moduleFilterResult.value?.moduleLevels || []);
+  const moduleCategories = computed(() => moduleFilterResult.value?.moduleCategories || []);
+  const filteredModules = computed(() => props.modules?.filter(module => filterModule(module,
+    selectedLevel.value, selectedCategory.value, selectedLanguage.value)) || []);
 
-  let filteredModules = computed(() => {
-    return filterModules();
-  });
 
   function loadDefaultLevel(me) {
-    return me?.lastModuleLevel || nullCategory;
+    console.log("me", me);
+    return me?.lastModuleLevel || initialLevel;
   }
 
+  function filterModule(module: Object, selectedLevel, selectedCategory, selectedLanguage) {
+    let filterExpression = true;
 
-  function filterModules() {
+    filterExpression = filterByLevel(module, selectedLevel) &&
-    let filteredModules = props.modules;
+      filterByCategory(module, selectedCategory) &&
+      filterByLanguage(module, selectedLanguage);
+    //updateLastModuleLevel(selectedLevel.value);
 
-
+    return filterExpression;
-    if (selectedLevel.value === null) {
-      return props.modules;
-    }
-
-    // filter by Lehrjahr (moduleLevel)
-    if (selectedLevel.value.filterAttributeType !== 'ALL') {
-      filteredModules = filteredModules.filter((module) => {
-        return module.level?.id == selectedLevel.value.id;
-      });
-    }
-
-    //filter by Lernfeld (Category)
-    if (selectedCategory.value.filterAttributeType !== 'ALL') {
-      filteredModules = filteredModules.filter((module) => {
-        return module.category?.id == selectedCategory.value.id;
-      });
-    }
-    updateLastModuleLevel(selectedLevel.value);
-    filteredModules = filterByLanguage(selectedLanguage.value, filteredModules);
-
-    return filteredModules;
   }
 
-  function filterByLanguage(language: Object, modules: Object) {
+  const updateLevel = (level) => {
+    selectedLevel.value = level;
+    updateLastModuleLevel(level);
+  }
+
+  const filterByLevel = (module, level) => {
+    return level.filterAttributeType === 'ALL' || module.level?.id === level.id
+  }
+
+  const filterByCategory = (module, category) => {
+    return category.filterAttributeType === 'ALL' || module.category?.id === category.id
+  }
+
+  const filterByLanguage = (module: Object, language: Object) => {
     console.log("selectedLanguage", selectedLanguage.value);
-    return modules
+    return true
   }
 
 
@@ -183,6 +157,7 @@
 
   .module-filter {
     // TODO: how do I correcty set the with of the whole thig including the grid for the modules?
+    // TODO: Farbe des Arrows für Dropdowns muss platfrom habhängig sein
     width: 75%;
 
     &__filterselection {

client/src/graphql/gql/fragments/userParts.gql

@@ -13,6 +13,7 @@ fragment UserParts on PrivateUserNode {
   lastModuleLevel {
     id
     name
+    filterAttributeType
   }
   lastModule {
     id