ramon
/
vbv
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix bug with scroll arrows

This commit is contained in:
Ramon Wenger 2024-07-17 15:04:25 +02:00 committed by Christian Cueni
parent 6da8907816
commit 770dbc94ea
1 changed files with 12 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
client/src/pages/learningPath/learningPathPage/LearningPathPathView.vue
View File

@ -2,7 +2,7 @@
import LearningPathCircleColumn from "@/pages/learningPath/learningPathPage/LearningPathCircleColumn.vue"; import LearningPathCircleColumn from "@/pages/learningPath/learningPathPage/LearningPathCircleColumn.vue";
import LearningPathScrollButton from "@/pages/learningPath/learningPathPage/LearningPathScrollButton.vue"; import LearningPathScrollButton from "@/pages/learningPath/learningPathPage/LearningPathScrollButton.vue";
import { useScroll } from "@vueuse/core"; import { useScroll } from "@vueuse/core";
import { ref } from "vue"; import { nextTick, ref, watch } from "vue";
import type { import type {
LearningContentWithCompletion, LearningContentWithCompletion,
LearningPathType, LearningPathType,
@ -40,7 +40,6 @@ const scrollLearnPathDiagram = (offset: number) => {
}; };
const filterCircles = (topic: TopicType) => { const filterCircles = (topic: TopicType) => {
// return [];
if (props.filter === undefined || props.filter === "") { if (props.filter === undefined || props.filter === "") {
return topic.circles; return topic.circles;
} }
@ -49,6 +48,17 @@ const filterCircles = (topic: TopicType) => {
circle.profiles.indexOf(props.filter as string) > -1 || circle.is_base_circle circle.profiles.indexOf(props.filter as string) > -1 || circle.is_base_circle
); );
}; };
watch(()=> props.filter, () => {
// we need to update the scroll state of the element, otherwise the arrows won't match the scroll state
// https://github.com/vueuse/vueuse/issues/2875
nextTick(()=> {
if(learnPathDiagram.value){
const scrollEvent = new Event('scroll');
learnPathDiagram.value.dispatchEvent(scrollEvent);
}
});
})
</script> </script>
<template> <template>