Fix
This commit is contained in:
sajjadtalkhabi
@@ -0,0 +1,218 @@
|
||||
<template>
|
||||
<div class="student-register">
|
||||
<div class="student-register__container">
|
||||
<aside class="student-register__sidebar">
|
||||
<SideBarSteps :tabs="tabs" :active-tab="activeTab" @update:active-tab="goToStep" />
|
||||
</aside>
|
||||
|
||||
<main class="student-register__main">
|
||||
<header class="student-register__heading">
|
||||
<h1 class="student-register__title">{{ stepLabel.title }}</h1>
|
||||
<p class="student-register__desc">{{ stepLabel.desc }}</p>
|
||||
</header>
|
||||
|
||||
<component :is="currentComponent" />
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<SuccessModal v-if="isModal('StudentRegisterSuccessModal')" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import useModal from '@/composables/useModal'
|
||||
import { computed, markRaw, watch } from 'vue'
|
||||
import { STUDENT_REGISTRATION } from '@/enums'
|
||||
import SideBarSteps from '@/features/auth/components/studentRegister/SideBarSteps.vue'
|
||||
import SuccessModal from '@/features/auth/components/studentRegister/SuccessModal.vue'
|
||||
import { useStudentRegistrationStore } from '@/features/auth/store/student-registration'
|
||||
import PersonalInformation from '@/features/auth/components/studentRegister/PersonalInformation.vue'
|
||||
import SkillAssessmentPart1 from '@/features/auth/components/studentRegister/SkillAssessmentPart1.vue'
|
||||
import SkillAssessmentPart2 from '@/features/auth/components/studentRegister/SkillAssessmentPart2.vue'
|
||||
import SkillAssessmentPart3 from '@/features/auth/components/studentRegister/SkillAssessmentPart3.vue'
|
||||
import SkillAssessmentPart4 from '@/features/auth/components/studentRegister/SkillAssessmentPart4.vue'
|
||||
import SkillAssessmentPart5 from '@/features/auth/components/studentRegister/SkillAssessmentPart5.vue'
|
||||
import SkillAssessmentPart6 from '@/features/auth/components/studentRegister/SkillAssessmentPart6.vue'
|
||||
import SkillAssessmentPart7 from '@/features/auth/components/studentRegister/SkillAssessmentPart7.vue'
|
||||
import EducationalInformation from '@/features/auth/components/studentRegister/EducationalInformation.vue'
|
||||
import ProfessionalInformation from '@/features/auth/components/studentRegister/ProfessionalInformation.vue'
|
||||
|
||||
const store = useStudentRegistrationStore()
|
||||
const { isModal, openModal } = useModal()
|
||||
|
||||
const STEP_TO_COMPONENT = {
|
||||
[STUDENT_REGISTRATION.PERSONAL_INFORMATION]: markRaw(PersonalInformation),
|
||||
[STUDENT_REGISTRATION.EDUCATIONAL_INFORMATION]: markRaw(EducationalInformation),
|
||||
[STUDENT_REGISTRATION.PROFESSIONAL_INFORMATION]: markRaw(ProfessionalInformation),
|
||||
[STUDENT_REGISTRATION.SKILL_ASSESSMENT_PART_1]: markRaw(SkillAssessmentPart1),
|
||||
[STUDENT_REGISTRATION.SKILL_ASSESSMENT_PART_2]: markRaw(SkillAssessmentPart2),
|
||||
[STUDENT_REGISTRATION.SKILL_ASSESSMENT_PART_3]: markRaw(SkillAssessmentPart3),
|
||||
[STUDENT_REGISTRATION.SKILL_ASSESSMENT_PART_4]: markRaw(SkillAssessmentPart4),
|
||||
[STUDENT_REGISTRATION.SKILL_ASSESSMENT_PART_5]: markRaw(SkillAssessmentPart5),
|
||||
[STUDENT_REGISTRATION.SKILL_ASSESSMENT_PART_6]: markRaw(SkillAssessmentPart6),
|
||||
[STUDENT_REGISTRATION.SKILL_ASSESSMENT_PART_7]: markRaw(SkillAssessmentPart7),
|
||||
}
|
||||
|
||||
const STEP_TO_TAB = {
|
||||
[STUDENT_REGISTRATION.PERSONAL_INFORMATION]: 'personal',
|
||||
[STUDENT_REGISTRATION.EDUCATIONAL_INFORMATION]: 'educational',
|
||||
[STUDENT_REGISTRATION.PROFESSIONAL_INFORMATION]: 'professional',
|
||||
[STUDENT_REGISTRATION.SKILL_ASSESSMENT_PART_1]: 'skill',
|
||||
[STUDENT_REGISTRATION.SKILL_ASSESSMENT_PART_2]: 'skill',
|
||||
[STUDENT_REGISTRATION.SKILL_ASSESSMENT_PART_3]: 'skill',
|
||||
[STUDENT_REGISTRATION.SKILL_ASSESSMENT_PART_4]: 'skill',
|
||||
[STUDENT_REGISTRATION.SKILL_ASSESSMENT_PART_5]: 'skill',
|
||||
[STUDENT_REGISTRATION.SKILL_ASSESSMENT_PART_6]: 'skill',
|
||||
[STUDENT_REGISTRATION.SKILL_ASSESSMENT_PART_7]: 'skill',
|
||||
}
|
||||
|
||||
const TAB_TO_STEP = {
|
||||
personal: STUDENT_REGISTRATION.PERSONAL_INFORMATION,
|
||||
educational: STUDENT_REGISTRATION.EDUCATIONAL_INFORMATION,
|
||||
professional: STUDENT_REGISTRATION.PROFESSIONAL_INFORMATION,
|
||||
skill: STUDENT_REGISTRATION.SKILL_ASSESSMENT_PART_1,
|
||||
}
|
||||
|
||||
const STEP_LABELS = {
|
||||
[STUDENT_REGISTRATION.PERSONAL_INFORMATION]: {
|
||||
title: 'اطلاعـــــات شخصـــــی',
|
||||
desc: 'لطفاً اطلاعات شخصی خود را بهصورت کامل و دقیق وارد کنید',
|
||||
},
|
||||
[STUDENT_REGISTRATION.EDUCATIONAL_INFORMATION]: {
|
||||
title: 'اطلاعـــــات تحصیلــــی و شغلی',
|
||||
desc: 'لطفاً اطلاعات تحصیلی و شغلی خود را بهصورت کامل و دقیق وارد کنید',
|
||||
},
|
||||
[STUDENT_REGISTRATION.PROFESSIONAL_INFORMATION]: {
|
||||
title: 'اطلاعات فعالیت تبلیغاتی و حرفهای',
|
||||
desc: 'لطفاً اطلاعات تبلیغاتی و حرفهای خود را بهصورت کامل و دقیق وارد کنید',
|
||||
},
|
||||
[STUDENT_REGISTRATION.SKILL_ASSESSMENT_PART_1]: {
|
||||
title: 'بخش مهارت (بخش اول)',
|
||||
desc: 'مهارتها و قابلیتهای خود را معرفی کنید.',
|
||||
},
|
||||
[STUDENT_REGISTRATION.SKILL_ASSESSMENT_PART_2]: {
|
||||
title: 'بخش مهارت (بخش دوم)',
|
||||
desc: 'مهارتها و قابلیتهای خود را معرفی کنید.',
|
||||
},
|
||||
[STUDENT_REGISTRATION.SKILL_ASSESSMENT_PART_3]: {
|
||||
title: 'بخش مهارت (بخش سوم)',
|
||||
desc: 'مهارتها و قابلیتهای خود را معرفی کنید.',
|
||||
},
|
||||
[STUDENT_REGISTRATION.SKILL_ASSESSMENT_PART_4]: {
|
||||
title: 'بخش مهارت (بخش چهارم)',
|
||||
desc: 'مهارتها و قابلیتهای خود را معرفی کنید.',
|
||||
},
|
||||
[STUDENT_REGISTRATION.SKILL_ASSESSMENT_PART_5]: {
|
||||
title: 'بخش مهارت (بخش پنجم)',
|
||||
desc: 'مهارتها و قابلیتهای خود را معرفی کنید.',
|
||||
},
|
||||
[STUDENT_REGISTRATION.SKILL_ASSESSMENT_PART_6]: {
|
||||
title: 'بخش مهارت (بخش ششم)',
|
||||
desc: 'مهارتها و قابلیتهای خود را معرفی کنید.',
|
||||
},
|
||||
[STUDENT_REGISTRATION.SKILL_ASSESSMENT_PART_7]: {
|
||||
title: 'بخش مهارت (بخش هفتم)',
|
||||
desc: 'مهارتها و قابلیتهای خود را معرفی کنید.',
|
||||
},
|
||||
}
|
||||
|
||||
const tabs = [
|
||||
{ key: 'personal', icon: 'user' },
|
||||
{ key: 'educational', icon: 'book' },
|
||||
{ key: 'professional', icon: 'file' },
|
||||
{ key: 'skill', icon: 'check-square' },
|
||||
]
|
||||
|
||||
const activeTab = computed(() => STEP_TO_TAB[store.currentStep] || 'personal')
|
||||
|
||||
const currentComponent = computed(
|
||||
() =>
|
||||
STEP_TO_COMPONENT[store.currentStep] ||
|
||||
STEP_TO_COMPONENT[STUDENT_REGISTRATION.PERSONAL_INFORMATION]
|
||||
)
|
||||
|
||||
const stepLabel = computed(
|
||||
() => STEP_LABELS[store.currentStep] || STEP_LABELS[STUDENT_REGISTRATION.PERSONAL_INFORMATION]
|
||||
)
|
||||
|
||||
const goToStep = (tabKey) => {
|
||||
const targetStep = TAB_TO_STEP[tabKey]
|
||||
if (!targetStep) return
|
||||
if (store.canGoToStep(targetStep)) {
|
||||
store.updateCurrentStep(targetStep)
|
||||
}
|
||||
}
|
||||
|
||||
watch(
|
||||
() => store.isProfileCompleted,
|
||||
(val) => {
|
||||
if (val) openModal('StudentRegisterSuccessModal')
|
||||
},
|
||||
{ immediate: true }
|
||||
)
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.student-register {
|
||||
min-height: 100dvh;
|
||||
width: 100%;
|
||||
|
||||
&__container {
|
||||
height: 100dvh;
|
||||
max-width: 95%;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
padding: 0.5rem;
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
flex-direction: row;
|
||||
align-items: stretch;
|
||||
padding: 1rem;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
&__sidebar {
|
||||
width: 100%;
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
width: 8.333%;
|
||||
min-width: 5rem;
|
||||
max-width: 6.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
&__main {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
overflow-y: auto;
|
||||
padding: 0.5rem;
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
padding: 1rem 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
&__heading {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-family: var(--font-family-fa);
|
||||
font-weight: 500;
|
||||
font-size: 1.125rem;
|
||||
color: #4c4c4c;
|
||||
margin: 0 0 0.25rem;
|
||||
}
|
||||
|
||||
&__desc {
|
||||
font-family: var(--font-family-fa);
|
||||
font-weight: 400;
|
||||
font-size: 0.75rem;
|
||||
color: #adadad;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user