Store LastModuleCategory with the user
This commit is contained in:
parent
23bf51db52
commit
475afd03ed
|
|
@ -2,7 +2,7 @@
|
||||||
<div>
|
<div>
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="radio-group">
|
<div class="radio-group">
|
||||||
<div class="radio-item" v-for="(category, index) in firstLevelCategories" :key="index" >
|
<div class="radio-item" v-for="(category, index) in firstLevelCategories" :key="index">
|
||||||
<input
|
<input
|
||||||
type="radio"
|
type="radio"
|
||||||
:value="category"
|
:value="category"
|
||||||
|
|
@ -38,11 +38,11 @@
|
||||||
import {computed, ref} from "vue";
|
import {computed, ref} from "vue";
|
||||||
import ModuleTeaser from "@/components/modules/ModuleTeaser.vue";
|
import ModuleTeaser from "@/components/modules/ModuleTeaser.vue";
|
||||||
import gql from "graphql-tag";
|
import gql from "graphql-tag";
|
||||||
import {useQuery} from "@vue/apollo-composable";
|
import {useQuery, useMutation} from "@vue/apollo-composable";
|
||||||
|
|
||||||
|
|
||||||
const props = defineProps<{
|
const props = defineProps<{
|
||||||
modules: [];
|
modules: [];
|
||||||
|
me: any;
|
||||||
}>();
|
}>();
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -59,21 +59,13 @@
|
||||||
name: '---',
|
name: '---',
|
||||||
id: null,
|
id: null,
|
||||||
};
|
};
|
||||||
|
let defaultCategory = loadDefaultCategory(props.me);
|
||||||
|
|
||||||
const selectedCategory = ref(nullCategory);
|
let selectedCategory = ref(defaultCategory);
|
||||||
|
|
||||||
|
|
||||||
const firstLevelCategories = computed(() => {
|
const firstLevelCategories = computed(() => {
|
||||||
return [nullCategory, ...moduleCategoriesResult.value?.moduleCategories || []];
|
return [nullCategory, ...moduleCategoriesResult.value?.moduleCategories || []];
|
||||||
});
|
});
|
||||||
const {result: moduleCategoryTypesResult} = useQuery(gql`
|
|
||||||
query ModuleCategoryTypesQuery {
|
|
||||||
moduleCategoryTypes {
|
|
||||||
name
|
|
||||||
id
|
|
||||||
}
|
|
||||||
}
|
|
||||||
`);
|
|
||||||
|
|
||||||
const nullLernfeld = {
|
const nullLernfeld = {
|
||||||
name: '---',
|
name: '---',
|
||||||
|
|
@ -82,6 +74,14 @@
|
||||||
|
|
||||||
const selectedLernfeld = ref(nullLernfeld);
|
const selectedLernfeld = ref(nullLernfeld);
|
||||||
|
|
||||||
|
const {result: moduleCategoryTypesResult} = useQuery(gql`
|
||||||
|
query ModuleCategoryTypesQuery {
|
||||||
|
moduleCategoryTypes {
|
||||||
|
name
|
||||||
|
id
|
||||||
|
}
|
||||||
|
}
|
||||||
|
`);
|
||||||
|
|
||||||
const lernfeldOptions = computed(() => {
|
const lernfeldOptions = computed(() => {
|
||||||
return [nullLernfeld, ...moduleCategoryTypesResult.value?.moduleCategoryTypes || []];
|
return [nullLernfeld, ...moduleCategoryTypesResult.value?.moduleCategoryTypes || []];
|
||||||
|
|
@ -94,6 +94,10 @@
|
||||||
|
|
||||||
// "$flavor.textInstrumentFilterShowAll"
|
// "$flavor.textInstrumentFilterShowAll"
|
||||||
|
|
||||||
|
function loadDefaultCategory(me) {
|
||||||
|
return me?.lastModuleCategory || nullCategory;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
function filterModules() {
|
function filterModules() {
|
||||||
let filteredModules = props.modules;
|
let filteredModules = props.modules;
|
||||||
|
|
@ -114,12 +118,36 @@
|
||||||
return module.categoryType.id == selectedLernfeld.value.id;
|
return module.categoryType.id == selectedLernfeld.value.id;
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
updateLastModuleCategory(selectedCategory.value);
|
||||||
|
|
||||||
return filteredModules;
|
return filteredModules;
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
function updateLastModuleCategory(moduleCategory) {
|
||||||
|
console.log(moduleCategory);
|
||||||
|
|
||||||
|
const {mutate: updateLastModuleCategory} = useMutation(gql`
|
||||||
|
mutation ($input: UpdateLastModuleCategoryInput!){updateLastModuleCategory(input: $input) {
|
||||||
|
clientMutationId
|
||||||
|
user {
|
||||||
|
username
|
||||||
|
lastModuleCategory {
|
||||||
|
name
|
||||||
|
id
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}}`);
|
||||||
|
|
||||||
|
updateLastModuleCategory({
|
||||||
|
input: {
|
||||||
|
id: moduleCategory.id,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
|
|
|
||||||
|
|
@ -10,6 +10,10 @@ fragment UserParts on PrivateUserNode {
|
||||||
avatarUrl
|
avatarUrl
|
||||||
expiryDate
|
expiryDate
|
||||||
readOnly
|
readOnly
|
||||||
|
lastModuleCategory {
|
||||||
|
id
|
||||||
|
name
|
||||||
|
}
|
||||||
lastModule {
|
lastModule {
|
||||||
id
|
id
|
||||||
slug
|
slug
|
||||||
|
|
|
||||||
|
|
@ -15,7 +15,7 @@
|
||||||
{{ topic.teaser }}
|
{{ topic.teaser }}
|
||||||
</p>
|
</p>
|
||||||
<div class="topic__modulefilter">
|
<div class="topic__modulefilter">
|
||||||
<module-filter :modules="modules"></module-filter>
|
<module-filter :modules="modules" :me="me"></module-filter>
|
||||||
</div>
|
</div>
|
||||||
<div class="topic__links">
|
<div class="topic__links">
|
||||||
<div
|
<div
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue