79 lines
2.1 KiB
Vue
79 lines
2.1 KiB
Vue
<script setup lang="ts">
|
|
import WizardPage from "@/components/onboarding/WizardPage.vue";
|
|
import ItDropdownSelect from "@/components/ui/ItDropdownSelect.vue";
|
|
import { useEntities } from "@/services/entities";
|
|
import { useUserStore } from "@/stores/user";
|
|
import type { DropdownSelectable } from "@/types";
|
|
import { useTranslation } from "i18next-vue";
|
|
import { computed, ref, watch } from "vue";
|
|
|
|
const { t } = useTranslation();
|
|
|
|
const user = useUserStore();
|
|
|
|
const { courseProfiles } = useEntities();
|
|
|
|
const selectedCourseProfile = ref({
|
|
id: 0,
|
|
name: t("a.Auswählen"),
|
|
});
|
|
|
|
const validCourseProfile = computed(() => {
|
|
return selectedCourseProfile.value.id !== 0;
|
|
});
|
|
|
|
watch(selectedCourseProfile, async (courseProfile: DropdownSelectable) => {
|
|
const courseProfileWithCode = courseProfiles.value.find(
|
|
(cp) => cp.id === courseProfile.id
|
|
);
|
|
if (courseProfileWithCode) {
|
|
user.updateChosenCourseProfile(courseProfileWithCode);
|
|
}
|
|
});
|
|
|
|
const courseProfilesToDropdown = computed(() => {
|
|
return courseProfiles.value.map((profile) => ({
|
|
...profile,
|
|
name: t(`profile.${profile.code}`),
|
|
}));
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<WizardPage :step="2">
|
|
<template #content>
|
|
<h2 class="my-10" data-cy="account-course-profile-title">
|
|
{{ $t("a.Zulassungsprofil auswählen") }}
|
|
</h2>
|
|
|
|
<p class="mb-6 max-w-md hyphens-none">
|
|
{{
|
|
$t(
|
|
"a.Wähle ein Zulassungsprofil, damit du deinen Lehrgang an der richtigen Stelle beginnen kannst. Du kannst ihn später jederzeit ändern."
|
|
)
|
|
}}
|
|
</p>
|
|
|
|
<ItDropdownSelect
|
|
v-model="selectedCourseProfile"
|
|
:items="courseProfilesToDropdown"
|
|
/>
|
|
</template>
|
|
|
|
<template #footer>
|
|
<router-link v-slot="{ navigate }" :to="{ name: 'checkoutAddress' }" custom>
|
|
<button
|
|
:disabled="!validCourseProfile"
|
|
class="btn-blue flex items-center"
|
|
role="link"
|
|
data-cy="continue-button"
|
|
@click="navigate"
|
|
>
|
|
{{ $t("general.next") }}
|
|
<it-icon-arrow-right class="it-icon ml-2 h-6 w-6" />
|
|
</button>
|
|
</router-link>
|
|
</template>
|
|
</WizardPage>
|
|
</template>
|