Fix

2026-05-13 03:06:59 +03:30
parent d2a577f254
commit b8ced45375
142 changed files with 3706 additions and 905 deletions
@@ -0,0 +1,151 @@
+<template>
+  <form class="skill-six" @submit.prevent="onSubmit">
+    <div class="skill-six__grid">
+      <div class="skill-six__media-col">
+        <MediaRecorder
+          v-model="audio"
+          kind="audio"
+          sub-type="audio"
+          context="verification"
+          :max-seconds="180"
+          :error="errors.faithProductionAudio"
+          @uploaded="onUploaded"
+        />
+      </div>
+      <div class="skill-six__content-col">
+        <LineTitleBlock title="مهارت‌ها و تخصص‌ها" title-en="Skills & Expertise" />
+        <p class="skill-six__intro">
+          لطفا ویدئو را مشاهده نمایید و در قالب صوت نظرات و تحلیل خود را بیان کرده و بفرمایید چگونه
+          می‌توان از سرمایه ایمان الهی، عمل صالح تولید نمود؟
+        </p>
+        <div v-if="videoUrl" class="skill-six__video-wrap">
+          <video :src="videoUrl" controls playsinline class="skill-six__video" />
+        </div>
+        <div v-else class="skill-six__video-placeholder">
+          <p>ویدیویی در دسترس نیست</p>
+        </div>
+      </div>
+    </div>
+
+    <div class="skill-six__divider" />
+    <StepActions @back="store.goToPrevStep()" />
+  </form>
+</template>
+
+<script setup>
+import useYup from '@/composables/useYup'
+import { computed, ref, watch } from 'vue'
+import { STUDENT_REGISTRATION } from '@/enums'
+import LineTitleBlock from '@/components/LineTitleBlock.vue'
+import { useGetRegistrationVideoQuery } from '@/services/query/auth'
+import StepActions from '@/features/auth/components/studentRegister/StepActions.vue'
+import { skillAssessmentPart6Schema } from '@/features/auth/schema/student-register'
+import MediaRecorder from '@/features/auth/components/studentRegister/MediaRecorder.vue'
+import { useStudentRegistrationStore } from '@/features/auth/store/student-registration'
+
+const store = useStudentRegistrationStore()
+
+const audio = ref(store.skill6.faithProductionAudio || null)
+
+const form = ref({
+  faithProductionAudio: store.skill6.faithProductionAudio || null,
+  faithProductionId: store.skill6.faithProductionId || '',
+})
+
+const { validate, errors } = useYup(skillAssessmentPart6Schema)
+
+const onUploaded = (value) => {
+  form.value.faithProductionAudio = value
+  form.value.faithProductionId = value?.uploadId || ''
+}
+
+const { data: media } = useGetRegistrationVideoQuery()
+
+const videoUrl = computed(
+  () =>
+    media.value?.faithProductionVideoUrl || store.registrationMedia.faithProductionVideoUrl || ''
+)
+
+watch(media, (val) => {
+  if (val) store.registrationMedia = { ...store.registrationMedia, ...val }
+})
+
+const onSubmit = async () => {
+  const { isValid, payload } = await validate(form.value)
+  if (!isValid) return
+  store.skill6 = { ...store.skill6, ...payload }
+  store.markStepAsCompleted(STUDENT_REGISTRATION.SKILL_ASSESSMENT_PART_6)
+  store.goToNextStep()
+}
+
+store.updateCurrentStep(STUDENT_REGISTRATION.SKILL_ASSESSMENT_PART_6)
+</script>
+
+<style lang="scss" scoped>
+.skill-six {
+  &__grid {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 1rem;
+
+    @media (min-width: 1024px) {
+      grid-template-columns: 3fr 9fr;
+    }
+  }
+
+  &__media-col {
+    order: 2;
+
+    @media (min-width: 1024px) {
+      order: 1;
+      padding: 0.5rem;
+    }
+  }
+
+  &__content-col {
+    order: 1;
+
+    @media (min-width: 1024px) {
+      order: 2;
+      padding-inline-start: 1.25rem;
+    }
+  }
+
+  &__intro {
+    font-family: var(--font-family-fa);
+    font-weight: 300;
+    font-size: 0.875rem;
+    line-height: 1.7;
+    margin: 0 0 0.75rem;
+    text-align: justify;
+  }
+
+  &__video-wrap {
+    width: 100%;
+    border-radius: 1rem;
+    overflow: hidden;
+    background: #000;
+  }
+
+  &__video {
+    width: 100%;
+    height: auto;
+    display: block;
+  }
+
+  &__video-placeholder {
+    border-radius: 1rem;
+    background: #f3f4f6;
+    color: var(--color-thd-gray);
+    padding: 2rem;
+    text-align: center;
+    font-family: var(--font-family-fa);
+    font-size: 0.875rem;
+  }
+
+  &__divider {
+    border-block-end: 1px solid var(--color-thd-gray);
+    margin: 1rem 0 1.5rem;
+  }
+}
+</style>