51 lines
1.5 KiB
Vue
51 lines
1.5 KiB
Vue
<script setup lang="ts">
|
|
import { useMediaLibraryStore } from "@/stores/mediaLibrary";
|
|
import * as log from "loglevel";
|
|
import { computed, ref, watch } from "vue";
|
|
|
|
log.debug("HandlungsfelderOverview created");
|
|
|
|
const mediaStore = useMediaLibraryStore();
|
|
const dropdownSelected = ref(mediaStore.selectedLearningPath);
|
|
|
|
const categories = computed(() => {
|
|
if (mediaStore.mediaLibraryPage) {
|
|
return mediaStore.mediaLibraryPage.children.filter(
|
|
(cat) => cat.course_category.general === false
|
|
);
|
|
}
|
|
return [];
|
|
});
|
|
|
|
watch(dropdownSelected, (newValue) =>
|
|
mediaStore.$patch({
|
|
selectedLearningPath: newValue,
|
|
})
|
|
);
|
|
</script>
|
|
|
|
<template>
|
|
<div class="container-large">
|
|
<div class="mb-10 mt-6 flex flex-col items-center justify-between lg:flex-row">
|
|
<h1>{{ $t("mediaLibrary.handlungsfelder.title", categories.length) }}</h1>
|
|
<!-- <ItDropdownSelect v-model="dropdownSelected" :items="mediaStore.availableLearningPaths"></ItDropdownSelect>-->
|
|
</div>
|
|
<div v-if="mediaStore.mediaLibraryPage">
|
|
<ul class="grid grid-cols-1 gap-5 md:grid-cols-4">
|
|
<li v-for="cat in categories" :key="cat.id" class="bg-white p-4">
|
|
<router-link :to="cat.frontend_url" :data-cy="`${cat.title}-link`">
|
|
<img
|
|
class="m-auto"
|
|
:src="`/static/icons/handlungsfelder/${cat.overview_icon}.svg`"
|
|
alt=""
|
|
/>
|
|
<h3 class="text-center text-base">{{ cat.title }}</h3>
|
|
</router-link>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped></style>
|