115 refactor dynamic page component

This commit is contained in:
survellow
2023-12-26 17:47:15 +01:00
parent 0d3aff5a7e
commit 0b695e6a78
4 changed files with 90 additions and 59 deletions

View File

@ -4,6 +4,7 @@ import {
fetchCourse,
fetchModulesByCourseAndSemester,
} from "../api/fetchCourse";
import DynamicPage from "./DynamicPage.vue";
import ModuleSelection from "../components/ModuleSelection.vue";
import { Module } from "../model/module.ts";
import { useI18n } from "vue-i18n";
@ -52,27 +53,13 @@ async function getModules() {
</script>
<template>
<div
class="flex flex-column align-items-center transition-all transition-duration-500 transition-ease-in-out mt-0"
:class="{'md:mt-8': selectedCourse.name === ''}"
<DynamicPage
:hideContent="selectedCourse.name === ''"
:headline="$t('courseSelection.headline')"
:subTitle="$t('courseSelection.subTitle')"
icon="pi pi-calendar"
>
<div class="flex align-items-center justify-content-center gap-2 mx-2">
<h3 class="text-4xl">
{{ $t("courseSelection.headline") }}
</h3>
<i
class="pi pi-calendar"
style="font-size: 2rem"
></i>
</div>
<div
class="flex justify-content-center"
>
<h5 class="text-2xl m-2">{{ $t("courseSelection.subTitle") }}</h5>
</div>
<div
class="flex flex-wrap mx-0 gap-2 my-4 w-full lg:w-8"
>
<template #selection>
<Dropdown
v-model="selectedCourse"
:options="countries"
@ -92,11 +79,12 @@ async function getModules() {
:placeholder="$t('courseSelection.semesterDropDown')"
@change="getModules()"
></Dropdown>
</div>
<ModuleSelection
:modules="modules"
:selected-course="selectedCourse.name"
class="lg:w-8"
/>
</div>
</template>
<template #content>
<ModuleSelection
:modules="modules"
:selected-course="selectedCourse.name"
/>
</template>
</DynamicPage>
</template>