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

Refactor filter into component

This commit is contained in:
Ramon Wenger 2024-07-09 10:39:26 +02:00 committed by Christian Cueni
parent 28c247653a
commit 195151ae34
2 changed files with 33 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
client/src/pages/learningPath/learningPathPage/LearningPathPage.vue
View File

@ -3,6 +3,7 @@ import LearningPathListView from "@/pages/learningPath/learningPathPage/Learning
import LearningPathPathView from "@/pages/learningPath/learningPathPage/LearningPathPathView.vue"; import LearningPathPathView from "@/pages/learningPath/learningPathPage/LearningPathPathView.vue";
import CircleProgress from "@/pages/learningPath/learningPathPage/LearningPathProgress.vue"; import CircleProgress from "@/pages/learningPath/learningPathPage/LearningPathProgress.vue";
import LearningPathTopics from "@/pages/learningPath/learningPathPage/LearningPathTopics.vue"; import LearningPathTopics from "@/pages/learningPath/learningPathPage/LearningPathTopics.vue";
import LearningPathProfileFilter from "@/pages/learningPath/learningPathPage/LearningPathProfileFilter.vue";
import type { ViewType } from "@/pages/learningPath/learningPathPage/LearningPathViewSwitch.vue"; import type { ViewType } from "@/pages/learningPath/learningPathPage/LearningPathViewSwitch.vue";
import LearningPathViewSwitch from "@/pages/learningPath/learningPathPage/LearningPathViewSwitch.vue"; import LearningPathViewSwitch from "@/pages/learningPath/learningPathPage/LearningPathViewSwitch.vue";
import { breakpointsTailwind, useBreakpoints } from "@vueuse/core"; import { breakpointsTailwind, useBreakpoints } from "@vueuse/core";
@ -73,22 +74,13 @@ const changeViewType = (viewType: ViewType) => {
></CourseSessionDueDatesList> ></CourseSessionDueDatesList>
</div> </div>
<!-- Right --> <!-- Right -->
<div v-if="!useMobileLayout" class="flex-grow"> <LearningPathProfileFilter
<h5 class="mb-4">Zulassungsprofil:</h5> v-if="!useMobileLayout"
<div class="mb-4 flex gap-4"> :profiles="course?.profiles"
<button :selected="filter"
v-for="profile in course?.profiles" @select="updateCourseProfile"
:key="profile" />
:class="filter == profile || !filter ? 'tag-active' : 'tag-inactive'"
@click="filter = profile"
>
{{ profile }}
</button>
</div> </div>
<a class="link" @click="filter = ''">Alle anzeigen (Allbranche)</a>
</div>
</div>
<!-- Bottom --> <!-- Bottom -->
<div class="bg-white"> <div class="bg-white">
<div v-if="lpQueryResult.learningPath"> <div v-if="lpQueryResult.learningPath">

26
client/src/pages/learningPath/learningPathPage/LearningPathProfileFilter.vue Normal file
View File

@ -0,0 +1,26 @@
<script lang="ts" setup>
interface Props {
profiles?: string[];
selected?: string;
}
defineProps<Props>();
defineEmits(["select"]);
</script>
<template>
<div class="flex-grow">
<h5 class="mb-4">Zulassungsprofil:</h5>
<div class="mb-4 flex gap-4">
<button
v-for="profile in profiles"
:key="profile"
:class="selected == profile || !selected ? 'tag-active' : 'tag-inactive'"
@click="$emit('select', profile)"
>
{{ profile }}
</button>
</div>
<a class="link" @click="$emit('select', '')">Alle anzeigen (Allbranche)</a>
</div>
</template>