diff --git a/client/src/components/modules/ModuleFilter.vue b/client/src/components/modules/ModuleFilter.vue
index 70ada7b3..5444284e 100644
--- a/client/src/components/modules/ModuleFilter.vue
+++ b/client/src/components/modules/ModuleFilter.vue
@@ -3,14 +3,14 @@
selectedLevel = newItem"
+ :items="moduleLevels"
+ @update:selectedItem="updateLevel"
>
selectedCategory = newItem"
>
;
+ 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`
- query ModuleLevelsQuery {
+ const initialLevel = {
+ name: 'Alle Lehrjahre',
+ id: null,
+ filterAttributeType: 'ALL'
+ };
+
+ const {result: moduleFilterResult} = useQuery(gql`
+ query ModuleFilterQuery{
moduleLevels {
name
id
filterAttributeType
}
- }
- `);
-
- 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 {
+ moduleCategories {
name
id
filterAttributeType
}
+
}
`);
- const categoryOptions = computed(() => {
- if (moduleCategoryResult.value){
- const moduleCategories = moduleCategoryResult.value?.moduleCategories;
+ const selectedLevel = ref(initialLevel);
+ const selectedCategory = ref(initialCategory);
- // TODO: Fix this, computed must not have a sideeffect
- selectedCategory.value = moduleCategories.find((category) => category.filterAttributeType === 'ALL');
- return moduleCategories
- }
- return [...moduleCategoryResult.value?.moduleCategories || []];
- });
+ selectedLevel.value = loadDefaultLevel(props.me);
+ 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() {
- let filteredModules = props.modules;
+ filterExpression = filterByLevel(module, selectedLevel) &&
+ filterByCategory(module, selectedCategory) &&
+ filterByLanguage(module, selectedLanguage);
+ //updateLastModuleLevel(selectedLevel.value);
-
- 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;
+ return filterExpression;
}
- 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 {
diff --git a/client/src/graphql/gql/fragments/userParts.gql b/client/src/graphql/gql/fragments/userParts.gql
index 453aaf49..6289ebb2 100644
--- a/client/src/graphql/gql/fragments/userParts.gql
+++ b/client/src/graphql/gql/fragments/userParts.gql
@@ -13,6 +13,7 @@ fragment UserParts on PrivateUserNode {
lastModuleLevel {
id
name
+ filterAttributeType
}
lastModule {
id