banu-front/src/features/auth/pages/StudentRegisterPage.vue

<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 { useGetRegisterDataQuery } from '@/services/query/auth'
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 { data: registerData } = useGetRegisterDataQuery()
watch(
  registerData,
  (value) => {
    if (value && Object.keys(value).length > 0) store.hydrateFromRegisterData(value)
  },
  { immediate: true }
)

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>