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

Update wizard to show the correct step number

This commit is contained in:
Ramon Wenger 2024-07-22 21:47:06 +02:00 committed by Christian Cueni
parent ca4ba26005
commit cf5aa64a24
2 changed files with 23 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
client/src/components/onboarding/WizardPage.vue
View File

@ -1,15 +1,27 @@
<script setup lang="ts"> <script setup lang="ts">
import ItNavigationProgress from "@/components/ui/ItNavigationProgress.vue"; import ItNavigationProgress from "@/components/ui/ItNavigationProgress.vue";
import { computed } from "vue";
import { useRoute } from "vue-router";
import { isString, startsWith } from "lodash";
const route = useRoute();
const props = defineProps<{ const props = defineProps<{
step: number; step: number;
}>(); }>();
const steps = computed(() => {
const courseType = route.params.courseType;
if (isString(courseType) && startsWith(courseType, "vv-")) {
return 4;
}
return 3;
});
</script> </script>
<template> <template>
<div class="flex h-screen flex-col"> <div class="flex h-screen flex-col">
<div class="flex-grow scroll-smooth p-16 lg:overflow-auto"> <div class="flex-grow scroll-smooth p-16 lg:overflow-auto">
<ItNavigationProgress :steps="3" :current-step="props.step" /> <ItNavigationProgress :steps="steps" :current-step="props.step" />
<slot name="content"></slot> <slot name="content"></slot>
</div> </div>

34
client/src/pages/onboarding/vv/AccountCourseProfile.vue
View File

@ -1,17 +1,15 @@
<script setup lang="ts"> <script setup lang="ts">
import WizardPage from "@/components/onboarding/WizardPage.vue"; import WizardPage from "@/components/onboarding/WizardPage.vue";
import ItDropdownSelect from "@/components/ui/ItDropdownSelect.vue"; import ItDropdownSelect from "@/components/ui/ItDropdownSelect.vue";
import { useEntities, type CourseProfile } from "@/services/entities"; import { useEntities } from "@/services/entities";
import { profileNextRoute } from "@/services/onboarding";
import { useUserStore } from "@/stores/user"; import { useUserStore } from "@/stores/user";
import type { DropdownSelectable } from "@/types";
import { useTranslation } from "i18next-vue"; import { useTranslation } from "i18next-vue";
import { computed, ref, watch } from "vue"; import { computed, ref, watch } from "vue";
import { useRoute } from "vue-router";
const { t } = useTranslation(); const { t } = useTranslation();
const user = useUserStore(); const user = useUserStore();
const route = useRoute();
const { courseProfiles } = useEntities(); const { courseProfiles } = useEntities();
@ -20,29 +18,17 @@ const selectedCourseProfile = ref({
name: t("a.Auswählen"), name: t("a.Auswählen"),
}); });
// watch(
// organisations,
// (newOrganisations) => {
// if (newOrganisations) {
// const userOrganisation = newOrganisations.find((c) => c.id === user.organisation);
// if (userOrganisation) {
// selectedOrganisation.value = userOrganisation;
// }
// }
// },
// { immediate: true }
// );
//
const validCourseProfile = computed(() => { const validCourseProfile = computed(() => {
return selectedCourseProfile.value.id !== 0; return selectedCourseProfile.value.id !== 0;
}); });
watch(selectedCourseProfile, async (courseProfile: CourseProfile) => { watch(selectedCourseProfile, async (courseProfile: DropdownSelectable) => {
user.updateChosenCourseProfile(courseProfile); const courseProfileWithCode = courseProfiles.value.find(
}); (cp) => cp.id === courseProfile.id
);
const nextRoute = computed(() => { if (courseProfileWithCode) {
return profileNextRoute(route.params.courseType); user.updateChosenCourseProfile(courseProfileWithCode);
}
}); });
const courseProfilesToDropdown = computed(() => { const courseProfilesToDropdown = computed(() => {
@ -77,7 +63,7 @@ const courseProfilesToDropdown = computed(() => {
</template> </template>
<template #footer> <template #footer>
<router-link v-slot="{ navigate }" :to="{ name: nextRoute }" custom> <router-link v-slot="{ navigate }" :to="{ name: 'checkoutAddress' }" custom>
<button <button
:disabled="!validCourseProfile" :disabled="!validCourseProfile"
class="btn-blue flex items-center" class="btn-blue flex items-center"