first commit
This commit is contained in:
sajjadtalkhabi
@@ -0,0 +1,261 @@
|
||||
<template>
|
||||
<div class="student-course-item">
|
||||
<div class="student-course-item__main">
|
||||
<div v-if="course.image" class="student-course-item__image">
|
||||
<img :src="course.image" :alt="course.title" />
|
||||
</div>
|
||||
<div v-else class="student-course-item__image student-course-item__image--placeholder">
|
||||
<SvgIcon name="book" :size="22" color="#bcbcbc" />
|
||||
</div>
|
||||
<div class="student-course-item__title-block">
|
||||
<p class="student-course-item__title">
|
||||
<span>دوره</span>
|
||||
<strong>{{ course.title }}</strong>
|
||||
</p>
|
||||
<div class="student-course-item__teacher">
|
||||
<SvgIcon name="user" :size="11" color="#bcbcbc" />
|
||||
<span class="student-course-item__teacher-label">استاد:</span>
|
||||
<span class="student-course-item__teacher-name">{{ teacherName }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="student-course-item__meta">
|
||||
<div v-if="course.term?.title" class="student-course-item__pill">
|
||||
<span class="student-course-item__pill-label">ترم:</span>
|
||||
<span class="student-course-item__pill-value">{{ course.term.title }}</span>
|
||||
</div>
|
||||
<div class="student-course-item__pill">
|
||||
<span class="student-course-item__pill-label">تاریخ شروع:</span>
|
||||
<span class="student-course-item__pill-value">{{ startDate }}</span>
|
||||
</div>
|
||||
<div class="student-course-item__pill">
|
||||
<span class="student-course-item__pill-label">تاریخ پایان:</span>
|
||||
<span class="student-course-item__pill-value">{{ endDate }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="statusLabel" class="student-course-item__status">
|
||||
<span
|
||||
class="student-course-item__status-badge"
|
||||
:class="`student-course-item__status-badge--${course.status || 'neutral'}`"
|
||||
>
|
||||
{{ statusLabel }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="student-course-item__actions">
|
||||
<BaseButton
|
||||
text="مشاهده دوره"
|
||||
custom-class="student-course-item__details-btn"
|
||||
@click="emit('show-details', course)"
|
||||
>
|
||||
<template #appendIcon>
|
||||
<SvgIcon name="caret-left" :size="16" color="#fff" />
|
||||
</template>
|
||||
</BaseButton>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed } from 'vue'
|
||||
|
||||
import BaseButton from '@/components/BaseButton.vue'
|
||||
import SvgIcon from '@/components/icons/SvgIcon.vue'
|
||||
import { STUDENT_COURSE_STATUS } from '@/enums'
|
||||
import { formatJalaaliDate } from '@/utils/date-utils'
|
||||
|
||||
const props = defineProps({
|
||||
course: { type: Object, required: true },
|
||||
})
|
||||
|
||||
const emit = defineEmits(['show-details'])
|
||||
|
||||
const teacherName = computed(() => {
|
||||
const t = props.course.teacher
|
||||
if (!t) return '—'
|
||||
return `${t.firstName || ''} ${t.lastName || ''}`.trim() || t.fullName || '—'
|
||||
})
|
||||
|
||||
const startDate = computed(
|
||||
() => props.course.faStartDate || formatJalaaliDate(props.course.startDate) || '—'
|
||||
)
|
||||
|
||||
const endDate = computed(
|
||||
() => props.course.faEndDate || formatJalaaliDate(props.course.endDate) || '—'
|
||||
)
|
||||
|
||||
const statusLabel = computed(
|
||||
() => STUDENT_COURSE_STATUS[props.course.status] || props.course.statusLabel || ''
|
||||
)
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.student-course-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.625rem;
|
||||
padding: 0.75rem;
|
||||
background: rgba(255, 255, 255, 50%);
|
||||
box-shadow: 0 4px 10px -6px rgba(241, 241, 241, 70%);
|
||||
border-radius: 0.875rem;
|
||||
margin-bottom: 0.625rem;
|
||||
|
||||
@media (min-width: 1280px) {
|
||||
flex-flow: row wrap;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&__main {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.625rem;
|
||||
flex: 1 1 33%;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
&__image {
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
min-width: 3rem;
|
||||
border-radius: 0.375rem;
|
||||
border: 1px solid #eee;
|
||||
overflow: hidden;
|
||||
flex-shrink: 0;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
&--placeholder {
|
||||
background: #f5f5f5;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
&__title-block {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-family: var(--font-family-fa);
|
||||
font-size: 0.95rem;
|
||||
color: #4b4b4b;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
gap: 0.25rem;
|
||||
|
||||
strong {
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
|
||||
&__teacher {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
|
||||
&__teacher-label {
|
||||
font-family: var(--font-family-fa);
|
||||
font-size: 0.65rem;
|
||||
color: #838383;
|
||||
}
|
||||
|
||||
&__teacher-name {
|
||||
font-family: var(--font-family-fa);
|
||||
font-size: 0.75rem;
|
||||
color: #4b4b4b;
|
||||
}
|
||||
|
||||
&__meta {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.375rem;
|
||||
flex: 1 1 33%;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
&__pill {
|
||||
background: rgba(107, 107, 107, 5%);
|
||||
padding: 0.25rem 1rem;
|
||||
border-radius: 0.875rem;
|
||||
line-height: 1.5;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
&__pill-label {
|
||||
font-family: var(--font-family-fa);
|
||||
font-weight: 300;
|
||||
font-size: 0.75rem;
|
||||
color: #848484;
|
||||
margin-inline-end: 0.25rem;
|
||||
}
|
||||
|
||||
&__pill-value {
|
||||
font-family: var(--font-family-en);
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
&__status {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
&__status-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 0.25rem 1rem;
|
||||
border-radius: 0.875rem;
|
||||
font-family: var(--font-family-fa);
|
||||
font-size: 0.7rem;
|
||||
|
||||
&--watching {
|
||||
background: rgba(0, 112, 116, 8%);
|
||||
color: #007074;
|
||||
}
|
||||
|
||||
&--waitForExam {
|
||||
background: rgba(204, 154, 40, 8%);
|
||||
color: #cc6f00;
|
||||
}
|
||||
|
||||
&--completed {
|
||||
background: rgba(0, 154, 18, 8%);
|
||||
color: #009a12;
|
||||
}
|
||||
|
||||
&--failed {
|
||||
background: rgba(204, 40, 49, 8%);
|
||||
color: var(--color-error);
|
||||
}
|
||||
|
||||
&--neutral {
|
||||
background: rgba(180, 180, 180, 8%);
|
||||
color: #686868;
|
||||
}
|
||||
}
|
||||
|
||||
&__actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
flex: 1 1 100%;
|
||||
|
||||
@media (min-width: 1280px) {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
}
|
||||
|
||||
&__details-btn {
|
||||
min-width: 9rem;
|
||||
padding: 0 1rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,451 @@
|
||||
<template>
|
||||
<div class="edit-profile">
|
||||
<BoxedIconTitleBlock
|
||||
class="edit-profile__heading"
|
||||
title="ویرایش پروفایل"
|
||||
desc="در این قسمت میتوانید پروفایل خود را بهروز کنید."
|
||||
>
|
||||
<template #icon>
|
||||
<SvgIcon name="user" :size="24" color="var(--color-primary)" />
|
||||
</template>
|
||||
</BoxedIconTitleBlock>
|
||||
|
||||
<form class="edit-profile__form" @submit.prevent="onSubmit">
|
||||
<div class="edit-profile__grid">
|
||||
<div class="edit-profile__avatar-col">
|
||||
<ImageCropper
|
||||
v-model="avatar"
|
||||
name="avatar"
|
||||
bg-color="#eeeeee"
|
||||
@crop="onAvatarCropped"
|
||||
@error="onAvatarError"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="edit-profile__main-col">
|
||||
<LineTitleBlock title="مشخصات فردی" title-en="Personal Details" />
|
||||
<div class="edit-profile__row">
|
||||
<div class="edit-profile__cell edit-profile__cell--third">
|
||||
<TextField
|
||||
v-model="form.firstName"
|
||||
name="firstName"
|
||||
label="نام"
|
||||
:error="errors.firstName"
|
||||
@blur="validateAt('firstName', form.firstName)"
|
||||
>
|
||||
<template #appendIcon>
|
||||
<SvgIcon name="user" :size="20" color="var(--color-thd-gray)" />
|
||||
</template>
|
||||
</TextField>
|
||||
</div>
|
||||
<div class="edit-profile__cell edit-profile__cell--third">
|
||||
<TextField
|
||||
v-model="form.lastName"
|
||||
name="lastName"
|
||||
label="نام خانوادگی"
|
||||
:error="errors.lastName"
|
||||
@blur="validateAt('lastName', form.lastName)"
|
||||
>
|
||||
<template #appendIcon>
|
||||
<SvgIcon name="user" :size="20" color="var(--color-thd-gray)" />
|
||||
</template>
|
||||
</TextField>
|
||||
</div>
|
||||
<div class="edit-profile__cell edit-profile__cell--third">
|
||||
<DatePickerField
|
||||
v-model="form.birthDate"
|
||||
name="birthDate"
|
||||
label="تاریخ تولد"
|
||||
:max="todayIso"
|
||||
:error="errors.birthDate"
|
||||
/>
|
||||
</div>
|
||||
<div class="edit-profile__cell edit-profile__cell--third">
|
||||
<TextField
|
||||
v-model="form.nationalCode"
|
||||
name="nationalCode"
|
||||
label="کد ملی"
|
||||
inputmode="numeric"
|
||||
:convert-digits="true"
|
||||
:disabled="!!initialNationalCode"
|
||||
:error="errors.nationalCode"
|
||||
@blur="validateAt('nationalCode', form.nationalCode)"
|
||||
>
|
||||
<template #appendIcon>
|
||||
<SvgIcon name="user" :size="20" color="var(--color-thd-gray)" />
|
||||
</template>
|
||||
</TextField>
|
||||
</div>
|
||||
<div class="edit-profile__cell edit-profile__cell--third">
|
||||
<SelectField
|
||||
v-model="form.maritalStatus"
|
||||
name="maritalStatus"
|
||||
label="وضعیت تاهل"
|
||||
:options="maritalStatusOptions"
|
||||
option-label="label"
|
||||
option-value="value"
|
||||
/>
|
||||
</div>
|
||||
<div class="edit-profile__cell edit-profile__cell--third">
|
||||
<SelectField
|
||||
v-model="form.gender"
|
||||
name="gender"
|
||||
label="جنسیت"
|
||||
:options="genderOptions"
|
||||
option-label="label"
|
||||
option-value="value"
|
||||
/>
|
||||
</div>
|
||||
<div class="edit-profile__cell edit-profile__cell--full">
|
||||
<TextareaField v-model="form.bio" name="bio" label="زندگی نامه" :row="3" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<LineTitleBlock title="اطلاعات تماس" title-en="Contact Details" />
|
||||
<div class="edit-profile__row">
|
||||
<div class="edit-profile__cell edit-profile__cell--third">
|
||||
<TextField
|
||||
v-model="form.phoneNumber"
|
||||
name="phoneNumber"
|
||||
label="شماره تلفن همراه"
|
||||
inputmode="numeric"
|
||||
:convert-digits="true"
|
||||
:disabled="!!initialPhoneNumber"
|
||||
:error="errors.phoneNumber"
|
||||
@blur="validateAt('phoneNumber', form.phoneNumber)"
|
||||
>
|
||||
<template #appendIcon>
|
||||
<SvgIcon name="phone" :size="20" color="var(--color-thd-gray)" />
|
||||
</template>
|
||||
</TextField>
|
||||
</div>
|
||||
<div class="edit-profile__cell edit-profile__cell--third">
|
||||
<SelectField
|
||||
v-model="form.provinceId"
|
||||
name="provinceId"
|
||||
label="استان"
|
||||
:options="provinces"
|
||||
option-label="name"
|
||||
option-value="id"
|
||||
@change="onProvinceChange"
|
||||
/>
|
||||
</div>
|
||||
<div class="edit-profile__cell edit-profile__cell--third">
|
||||
<SelectField
|
||||
v-model="form.cityId"
|
||||
name="cityId"
|
||||
label="شهر"
|
||||
:options="cities"
|
||||
option-label="name"
|
||||
option-value="id"
|
||||
:disabled="!form.provinceId"
|
||||
/>
|
||||
</div>
|
||||
<div class="edit-profile__cell edit-profile__cell--full">
|
||||
<TextareaField
|
||||
v-model="form.address"
|
||||
name="address"
|
||||
label="آدرس محل سکونت"
|
||||
:row="isMobile ? 5 : 2"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<LineTitleBlock title="رمز عبور" title-en="Password" />
|
||||
<div class="edit-profile__row">
|
||||
<div class="edit-profile__cell edit-profile__cell--half">
|
||||
<PasswordField
|
||||
v-model="form.password"
|
||||
name="password"
|
||||
label="رمز عبور"
|
||||
:error="errors.password"
|
||||
@blur="validateAt('password', form.password)"
|
||||
/>
|
||||
</div>
|
||||
<div class="edit-profile__cell edit-profile__cell--half">
|
||||
<PasswordField
|
||||
v-model="form.passwordConfirmation"
|
||||
name="passwordConfirmation"
|
||||
label="تکرار رمز عبور"
|
||||
:error="errors.passwordConfirmation"
|
||||
@blur="validateAt('passwordConfirmation', form.passwordConfirmation)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="edit-profile__actions">
|
||||
<BaseButton
|
||||
variant="transparent"
|
||||
text="منصرف شدم"
|
||||
custom-class="edit-profile__btn-cancel"
|
||||
@click="onCancel"
|
||||
>
|
||||
<template #prependIcon>
|
||||
<SvgIcon name="caret-right" :size="14" color="var(--color-sec-gray)" />
|
||||
</template>
|
||||
</BaseButton>
|
||||
<BaseButton
|
||||
type="submit"
|
||||
text="تایید اطلاعات"
|
||||
:loading="updateMutation.isPending.value"
|
||||
custom-class="edit-profile__btn-submit"
|
||||
>
|
||||
<template #appendIcon>
|
||||
<SvgIcon name="arrow-left" :size="20" color="#fff" />
|
||||
</template>
|
||||
</BaseButton>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { toast } from 'vue3-toastify'
|
||||
import { useQueryClient } from '@tanstack/vue-query'
|
||||
import BoxedIconTitleBlock from '@/components/blocks/BoxedIconTitleBlock.vue'
|
||||
import LineTitleBlock from '@/components/LineTitleBlock.vue'
|
||||
import BaseButton from '@/components/BaseButton.vue'
|
||||
import TextField from '@/components/form/TextField.vue'
|
||||
import SelectField from '@/components/form/SelectField.vue'
|
||||
import TextareaField from '@/components/form/TextareaField.vue'
|
||||
import DatePickerField from '@/components/form/DatePickerField.vue'
|
||||
import PasswordField from '@/components/form/PasswordField.vue'
|
||||
import ImageCropper from '@/components/form/ImageCropper.vue'
|
||||
import SvgIcon from '@/components/icons/SvgIcon.vue'
|
||||
import useYup from '@/composables/useYup'
|
||||
import {
|
||||
authKeys,
|
||||
useGetProfileQuery,
|
||||
useUpdateProfileMutation,
|
||||
useUploadTemporaryMutation,
|
||||
} from '@/services/query/auth'
|
||||
import { useGetCitiesOfProvinceQuery, useGetProvincesQuery } from '@/services/query/common'
|
||||
import { GENDER, MARITAL_STATUS } from '@/enums'
|
||||
import { studentProfileSchema } from '@/features/student/schema'
|
||||
import { objectToFormData } from '@/utils/object-to-formdata'
|
||||
|
||||
const router = useRouter()
|
||||
const queryClient = useQueryClient()
|
||||
|
||||
const isMobile = ref(window.innerWidth < 1024)
|
||||
const onResize = () => {
|
||||
isMobile.value = window.innerWidth < 1024
|
||||
}
|
||||
onMounted(() => window.addEventListener('resize', onResize))
|
||||
onBeforeUnmount(() => window.removeEventListener('resize', onResize))
|
||||
|
||||
const todayIso = new Date().toISOString()
|
||||
|
||||
const maritalStatusOptions = Object.entries(MARITAL_STATUS).map(([value, label]) => ({
|
||||
value,
|
||||
label,
|
||||
}))
|
||||
const genderOptions = Object.entries(GENDER).map(([value, label]) => ({ value, label }))
|
||||
|
||||
const { data: provinces = ref([]) } = useGetProvincesQuery()
|
||||
|
||||
const provinceIdRef = ref(null)
|
||||
const { data: cities = ref([]) } = useGetCitiesOfProvinceQuery(provinceIdRef, {
|
||||
enabled: () => !!provinceIdRef.value,
|
||||
})
|
||||
|
||||
const initialNationalCode = ref('')
|
||||
const initialPhoneNumber = ref('')
|
||||
|
||||
const form = ref({
|
||||
firstName: '',
|
||||
lastName: '',
|
||||
birthDate: '',
|
||||
nationalCode: '',
|
||||
maritalStatus: '',
|
||||
gender: '',
|
||||
bio: '',
|
||||
phoneNumber: '',
|
||||
provinceId: '',
|
||||
cityId: '',
|
||||
address: '',
|
||||
avatarId: null,
|
||||
password: '',
|
||||
passwordConfirmation: '',
|
||||
})
|
||||
|
||||
const avatar = ref(null)
|
||||
|
||||
const schema = studentProfileSchema
|
||||
|
||||
const { validate, validateAt, errors } = useYup(schema)
|
||||
|
||||
const onProvinceChange = () => {
|
||||
provinceIdRef.value = form.value.provinceId
|
||||
form.value.cityId = ''
|
||||
}
|
||||
|
||||
watch(
|
||||
() => form.value.provinceId,
|
||||
(val) => {
|
||||
provinceIdRef.value = val
|
||||
}
|
||||
)
|
||||
|
||||
const { data: profile } = useGetProfileQuery()
|
||||
|
||||
watch(profile, (user) => {
|
||||
if (!user) return
|
||||
form.value = {
|
||||
...form.value,
|
||||
firstName: user.firstName || '',
|
||||
lastName: user.lastName || '',
|
||||
birthDate: user.profile?.birthDate || '',
|
||||
nationalCode: user.nationalCode || '',
|
||||
maritalStatus: user.profile?.maritalStatus || '',
|
||||
gender: user.profile?.gender || '',
|
||||
bio: user.profile?.bio || '',
|
||||
phoneNumber: user.phoneNumber || '',
|
||||
provinceId: user.address?.province?.id || '',
|
||||
cityId: user.address?.city?.id || '',
|
||||
address: user.address?.address || '',
|
||||
avatarId: user.profile?.avatarId || null,
|
||||
}
|
||||
initialNationalCode.value = user.nationalCode || ''
|
||||
initialPhoneNumber.value = user.phoneNumber || ''
|
||||
if (user.avatarUrl) avatar.value = { url: user.avatarUrl }
|
||||
})
|
||||
|
||||
const uploadMutation = useUploadTemporaryMutation()
|
||||
|
||||
const onAvatarCropped = async (file) => {
|
||||
try {
|
||||
const formData = objectToFormData({ file, subType: 'avatar', context: 'user' })
|
||||
const response = await uploadMutation.mutateAsync(formData)
|
||||
const payload = response?.data ?? response
|
||||
avatar.value = { url: payload?.url, uploadId: payload?.uploadId, ...payload }
|
||||
form.value.avatarId = payload?.uploadId || payload?.id
|
||||
} catch {
|
||||
/* handled globally */
|
||||
}
|
||||
}
|
||||
|
||||
const onAvatarError = (msg) => toast.error(msg)
|
||||
|
||||
const updateMutation = useUpdateProfileMutation()
|
||||
|
||||
const onSubmit = async () => {
|
||||
const { isValid, payload } = await validate(form.value)
|
||||
if (!isValid) return
|
||||
if (!payload.password) {
|
||||
delete payload.password
|
||||
delete payload.passwordConfirmation
|
||||
}
|
||||
await updateMutation.mutateAsync(payload)
|
||||
await queryClient.invalidateQueries({ queryKey: authKeys.profile() })
|
||||
toast.success('پروفایل با موفقیت بهروز شد')
|
||||
router.push({ name: 'student-dashboard' })
|
||||
}
|
||||
|
||||
const onCancel = () => router.push({ name: 'student-dashboard' })
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.edit-profile {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
|
||||
&__heading {
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
&__form {
|
||||
background: rgba(255, 255, 255, 60%);
|
||||
padding: 1rem;
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
&__grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 1rem;
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
grid-template-columns: 4fr 8fr;
|
||||
}
|
||||
|
||||
@media (min-width: 1280px) {
|
||||
grid-template-columns: 3fr 9fr;
|
||||
}
|
||||
}
|
||||
|
||||
&__avatar-col {
|
||||
order: 2;
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
order: 1;
|
||||
padding: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
&__main-col {
|
||||
order: 1;
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
order: 2;
|
||||
padding-inline-start: 1.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
&__row {
|
||||
display: flex;
|
||||
flex-flow: column wrap;
|
||||
gap: 0.5rem;
|
||||
align-items: stretch;
|
||||
margin-bottom: 0.5rem;
|
||||
|
||||
@media (min-width: 768px) {
|
||||
flex-direction: row;
|
||||
}
|
||||
}
|
||||
|
||||
&__cell {
|
||||
width: 100%;
|
||||
|
||||
&--third {
|
||||
@media (min-width: 768px) {
|
||||
width: 49%;
|
||||
}
|
||||
|
||||
@media (min-width: 1280px) {
|
||||
width: 32.3%;
|
||||
}
|
||||
}
|
||||
|
||||
&--half {
|
||||
@media (min-width: 768px) {
|
||||
width: 49%;
|
||||
}
|
||||
}
|
||||
|
||||
&--full {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
&__actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 0.625rem;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
&__btn-cancel {
|
||||
min-width: 9rem;
|
||||
}
|
||||
|
||||
&__btn-submit {
|
||||
min-width: 12rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,316 @@
|
||||
<template>
|
||||
<div class="course-details">
|
||||
<BoxedIconTitleBlock
|
||||
class="course-details__heading"
|
||||
title="جزئیات دوره"
|
||||
desc="اطلاعات کامل این دوره را مشاهده کنید"
|
||||
>
|
||||
<template #icon>
|
||||
<SvgIcon name="book" :size="24" color="var(--color-primary)" />
|
||||
</template>
|
||||
</BoxedIconTitleBlock>
|
||||
|
||||
<SkeletonLoaderBlock v-if="isLoading" :rows="3" :cols-per-row="1" />
|
||||
<template v-else-if="course">
|
||||
<div class="course-details__hero">
|
||||
<div class="course-details__image">
|
||||
<img v-if="course.image" :src="course.image" :alt="course.title" />
|
||||
<SvgIcon v-else name="book" :size="48" color="#bcbcbc" />
|
||||
</div>
|
||||
<div class="course-details__hero-info">
|
||||
<div v-if="course.averageScore != null" class="course-details__average">
|
||||
<span class="course-details__average-label">معدل دوره:</span>
|
||||
<span class="course-details__average-value">{{ course.averageScore }}</span>
|
||||
</div>
|
||||
<div class="course-details__title">
|
||||
<span>دوره</span>
|
||||
<strong>{{ course.title }}</strong>
|
||||
</div>
|
||||
<div class="course-details__teacher">
|
||||
<SvgIcon name="user" :size="11" color="#bcbcbc" />
|
||||
<span class="course-details__teacher-label">استاد:</span>
|
||||
<span class="course-details__teacher-name">{{ teacherName }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="course-details__dates">
|
||||
<div class="course-details__pill">
|
||||
<span class="course-details__pill-label">تاریخ شروع:</span>
|
||||
<span class="course-details__pill-value">{{ startDate }}</span>
|
||||
</div>
|
||||
<div class="course-details__pill">
|
||||
<span class="course-details__pill-label">تاریخ پایان:</span>
|
||||
<span class="course-details__pill-value">{{ endDate }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<SimpleTitleIconBlock title="لیست همه درسها" class="course-details__list-title">
|
||||
<template #header-icon>
|
||||
<SvgIcon name="list-bullets" :size="16" color="#bcbcbc" />
|
||||
</template>
|
||||
</SimpleTitleIconBlock>
|
||||
|
||||
<div v-if="sessions.length > 0" class="course-details__sessions">
|
||||
<div v-for="session in sessions" :key="session.id" class="course-details__session">
|
||||
<div class="course-details__session-main">
|
||||
<p class="course-details__session-title">{{ session.title }}</p>
|
||||
<p class="course-details__session-meta">
|
||||
<span v-if="session.sessionTypeFa">{{ session.sessionTypeFa }}</span>
|
||||
<span v-if="session.durationMinutes" class="course-details__session-sep">
|
||||
· {{ session.durationMinutes }} دقیقه
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
<span
|
||||
class="course-details__session-status"
|
||||
:class="`course-details__session-status--${session.status || 'pending'}`"
|
||||
>
|
||||
{{ session.statusLabel || sessionStatusLabel(session.status) }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<NoItems
|
||||
v-else
|
||||
title="هنوز درسی منتشر نشده"
|
||||
desc="درسهای این دوره بهزودی نمایش داده میشود."
|
||||
/>
|
||||
</template>
|
||||
<NoItems v-else title="یافت نشد" desc="اطلاعاتی برای این دوره در دسترس نیست." />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed } from 'vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
|
||||
import BoxedIconTitleBlock from '@/components/blocks/BoxedIconTitleBlock.vue'
|
||||
import SimpleTitleIconBlock from '@/components/blocks/SimpleTitleIconBlock.vue'
|
||||
import NoItems from '@/components/blocks/NoItems.vue'
|
||||
import SkeletonLoaderBlock from '@/components/blocks/SkeletonLoaderBlock.vue'
|
||||
import SvgIcon from '@/components/icons/SvgIcon.vue'
|
||||
import { useStudentCourseQuery } from '@/services/query/student-courses'
|
||||
import { formatJalaaliDate } from '@/utils/date-utils'
|
||||
|
||||
const route = useRoute()
|
||||
|
||||
const courseId = computed(() => (route.params.id ? Number(route.params.id) : null))
|
||||
|
||||
const { data: course, isLoading } = useStudentCourseQuery(courseId, {
|
||||
enabled: () => !!courseId.value,
|
||||
})
|
||||
|
||||
const teacherName = computed(() => {
|
||||
const t = course.value?.teacher
|
||||
if (!t) return '—'
|
||||
return `${t.firstName || ''} ${t.lastName || ''}`.trim() || t.fullName || '—'
|
||||
})
|
||||
|
||||
const startDate = computed(
|
||||
() => course.value?.faStartDate || formatJalaaliDate(course.value?.startDate) || '—'
|
||||
)
|
||||
|
||||
const endDate = computed(
|
||||
() => course.value?.faEndDate || formatJalaaliDate(course.value?.endDate) || '—'
|
||||
)
|
||||
|
||||
const sessions = computed(() => course.value?.sessions ?? [])
|
||||
|
||||
const sessionStatusLabel = (status) => {
|
||||
if (status === 'completed') return 'تکمیل شده'
|
||||
if (status === 'in_progress') return 'در حال بررسی'
|
||||
if (status === 'locked') return 'قفل'
|
||||
return 'در دسترس'
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.course-details {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
|
||||
&__heading {
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
&__hero {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 0.875rem;
|
||||
background: #fff;
|
||||
border-radius: 0.75rem;
|
||||
padding: 0.75rem;
|
||||
margin-bottom: 0.75rem;
|
||||
align-items: center;
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
grid-template-columns: 3fr 6fr 3fr;
|
||||
}
|
||||
}
|
||||
|
||||
&__image {
|
||||
background: #f5f5f5;
|
||||
border-radius: 0.5rem;
|
||||
min-height: 7rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
|
||||
&__hero-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.375rem;
|
||||
}
|
||||
|
||||
&__average {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
background: rgba(0, 154, 18, 6%);
|
||||
color: var(--color-secondary, #009a12);
|
||||
border-radius: 9999px;
|
||||
padding: 0.125rem 0.75rem;
|
||||
align-self: flex-start;
|
||||
font-family: var(--font-family-fa);
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
&__average-value {
|
||||
font-family: var(--font-family-en);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
&__title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
font-family: var(--font-family-fa);
|
||||
font-size: 1.25rem;
|
||||
color: #4b4b4b;
|
||||
|
||||
strong {
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
&__teacher {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.375rem;
|
||||
color: #838383;
|
||||
font-family: var(--font-family-fa);
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
&__teacher-name {
|
||||
color: #4b4b4b;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
&__dates {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.375rem;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
&__pill {
|
||||
background: rgba(107, 107, 107, 5%);
|
||||
padding: 0.25rem 1rem;
|
||||
border-radius: 0.875rem;
|
||||
line-height: 1.5;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
&__pill-label {
|
||||
font-family: var(--font-family-fa);
|
||||
font-weight: 300;
|
||||
font-size: 0.75rem;
|
||||
color: #848484;
|
||||
margin-inline-end: 0.25rem;
|
||||
}
|
||||
|
||||
&__pill-value {
|
||||
font-family: var(--font-family-en);
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
&__list-title {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
&__sessions {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
&__session {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.625rem;
|
||||
padding: 0.75rem 1rem;
|
||||
background: rgba(255, 255, 255, 50%);
|
||||
border-radius: 0.875rem;
|
||||
box-shadow: 0 4px 10px -6px rgba(241, 241, 241, 70%);
|
||||
}
|
||||
|
||||
&__session-main {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
&__session-title {
|
||||
font-family: var(--font-family-fa);
|
||||
font-size: 0.95rem;
|
||||
color: #4b4b4b;
|
||||
margin: 0 0 0.25rem;
|
||||
}
|
||||
|
||||
&__session-meta {
|
||||
font-family: var(--font-family-fa);
|
||||
font-size: 0.75rem;
|
||||
color: #848484;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&__session-sep {
|
||||
margin-inline-start: 0.25rem;
|
||||
}
|
||||
|
||||
&__session-status {
|
||||
padding: 0.25rem 0.875rem;
|
||||
border-radius: 0.875rem;
|
||||
font-family: var(--font-family-fa);
|
||||
font-size: 0.7rem;
|
||||
|
||||
&--completed {
|
||||
background: rgba(0, 154, 18, 8%);
|
||||
color: #009a12;
|
||||
}
|
||||
|
||||
&--in_progress {
|
||||
background: rgba(0, 112, 116, 8%);
|
||||
color: #007074;
|
||||
}
|
||||
|
||||
&--locked {
|
||||
background: rgba(180, 180, 180, 8%);
|
||||
color: #8e8e8e;
|
||||
}
|
||||
|
||||
&--pending {
|
||||
background: rgba(204, 154, 40, 8%);
|
||||
color: #cc6f00;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,128 @@
|
||||
<template>
|
||||
<div class="student-courses">
|
||||
<BoxedIconTitleBlock
|
||||
class="student-courses__heading"
|
||||
title="دورههای آموزشی"
|
||||
desc="دورهها و آموزشهای گذراندهشده خود را مشاهده کنید"
|
||||
>
|
||||
<template #icon>
|
||||
<SvgIcon name="book" :size="24" color="var(--color-primary)" />
|
||||
</template>
|
||||
</BoxedIconTitleBlock>
|
||||
|
||||
<TabsBlock :tabs="tabs" v-model="activeTab">
|
||||
<template #current>
|
||||
<SkeletonLoaderBlock v-if="currentPending" :rows="6" :cols-per-row="1" />
|
||||
<div v-else-if="currentCourses.length > 0">
|
||||
<StudentCourseItem
|
||||
v-for="course in currentCourses"
|
||||
:key="course.id"
|
||||
:course="course"
|
||||
@show-details="onShowDetails"
|
||||
/>
|
||||
</div>
|
||||
<NoItems v-else title="دورهای نیست" desc="در حال حاضر دورهای در حال گذراندن ندارید." />
|
||||
<PaginationBlock :pagination="currentMeta" @update:page="setCurrentPage" />
|
||||
</template>
|
||||
|
||||
<template #ended>
|
||||
<SkeletonLoaderBlock v-if="endedPending" :rows="6" :cols-per-row="1" />
|
||||
<div v-else-if="endedCourses.length > 0">
|
||||
<StudentCourseItem
|
||||
v-for="course in endedCourses"
|
||||
:key="course.id"
|
||||
:course="course"
|
||||
@show-details="onShowDetails"
|
||||
/>
|
||||
</div>
|
||||
<NoItems v-else title="موردی نیست" desc="هنوز دورهای را تمام نکردهاید." />
|
||||
<PaginationBlock :pagination="endedMeta" @update:page="setEndedPage" />
|
||||
</template>
|
||||
</TabsBlock>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, ref } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
|
||||
import BoxedIconTitleBlock from '@/components/blocks/BoxedIconTitleBlock.vue'
|
||||
import NoItems from '@/components/blocks/NoItems.vue'
|
||||
import SkeletonLoaderBlock from '@/components/blocks/SkeletonLoaderBlock.vue'
|
||||
import PaginationBlock from '@/components/blocks/PaginationBlock.vue'
|
||||
import TabsBlock from '@/components/blocks/TabsBlock.vue'
|
||||
import SvgIcon from '@/components/icons/SvgIcon.vue'
|
||||
import StudentCourseItem from '@/features/student/components/StudentCourseItem.vue'
|
||||
import { useStudentCoursesListQuery } from '@/services/query/student-courses'
|
||||
import { usePagination } from '@/composables/usePagination'
|
||||
|
||||
const router = useRouter()
|
||||
|
||||
const tabs = [
|
||||
{ name: 'current', label: 'در حال گذراندن', icon: 'list-bullets' },
|
||||
{ name: 'ended', label: 'تکمیل شده', icon: 'list-bullets' },
|
||||
]
|
||||
const activeTab = ref('current')
|
||||
|
||||
const currentFilters = ref({ status: 'current' })
|
||||
const endedFilters = ref({ status: 'ended' })
|
||||
|
||||
const { pagination: currentPagination, setPage: setCurrentPage } = usePagination({
|
||||
page: 1,
|
||||
perPage: 10,
|
||||
})
|
||||
|
||||
const { pagination: endedPagination, setPage: setEndedPage } = usePagination({
|
||||
page: 1,
|
||||
perPage: 10,
|
||||
})
|
||||
|
||||
const { data: currentData, isLoading: currentPending } = useStudentCoursesListQuery(
|
||||
currentFilters,
|
||||
currentPagination,
|
||||
{
|
||||
enabled: () => activeTab.value === 'current',
|
||||
keepPreviousData: true,
|
||||
}
|
||||
)
|
||||
|
||||
const { data: endedData, isLoading: endedPending } = useStudentCoursesListQuery(
|
||||
endedFilters,
|
||||
endedPagination,
|
||||
{
|
||||
enabled: () => activeTab.value === 'ended',
|
||||
keepPreviousData: true,
|
||||
}
|
||||
)
|
||||
|
||||
const currentCourses = computed(() => currentData.value?.data ?? [])
|
||||
const endedCourses = computed(() => endedData.value?.data ?? [])
|
||||
|
||||
const currentMeta = computed(() => ({
|
||||
page: currentPagination.value.page,
|
||||
perPage: currentPagination.value.perPage,
|
||||
...currentData.value?.meta,
|
||||
}))
|
||||
|
||||
const endedMeta = computed(() => ({
|
||||
page: endedPagination.value.page,
|
||||
perPage: endedPagination.value.perPage,
|
||||
...endedData.value?.meta,
|
||||
}))
|
||||
|
||||
const onShowDetails = (course) => {
|
||||
router.push({ name: 'student-course-details', params: { id: course.id } }).catch(() => {})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.student-courses {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
|
||||
&__heading {
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,69 @@
|
||||
<template>
|
||||
<div class="student-dashboard">
|
||||
<div class="student-dashboard__welcome">
|
||||
<img :src="flower" alt="flower" class="student-dashboard__flower" />
|
||||
<div>
|
||||
<p class="student-dashboard__hi">سلام بر شما</p>
|
||||
<p class="student-dashboard__greeting">به سامانه موسسه بانو خوش آمدید.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="student-dashboard__placeholder">این بخش در مراحل بعدی توسعه مییابد.</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { gallery } from '@/utils/gallery'
|
||||
|
||||
const flower = gallery.registrationCompleteFlower
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.student-dashboard {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.5rem;
|
||||
|
||||
&__welcome {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-start;
|
||||
gap: 0.625rem;
|
||||
}
|
||||
|
||||
&__flower {
|
||||
object-fit: contain;
|
||||
max-height: 2.75rem;
|
||||
}
|
||||
|
||||
&__hi {
|
||||
font-family: var(--font-family-fa);
|
||||
font-weight: 400;
|
||||
font-size: 1rem;
|
||||
color: var(--color-prim-gray);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&__greeting {
|
||||
font-family: var(--font-family-fa);
|
||||
font-weight: 500;
|
||||
font-size: 1rem;
|
||||
margin: 0;
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
&__placeholder {
|
||||
font-family: var(--font-family-fa);
|
||||
font-size: 0.875rem;
|
||||
color: var(--color-prim-gray);
|
||||
text-align: center;
|
||||
padding: 3rem 0;
|
||||
background: #fff;
|
||||
border-radius: 1rem;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,26 @@
|
||||
export default [
|
||||
{
|
||||
path: '/dashboard',
|
||||
name: 'student-dashboard',
|
||||
component: () => import('@/features/student/pages/StudentDashboardPage.vue'),
|
||||
meta: { layout: 'student', role: 'student', title: 'پیشخوان' },
|
||||
},
|
||||
{
|
||||
path: '/profile',
|
||||
name: 'student-profile',
|
||||
component: () => import('@/features/student/pages/EditProfilePage.vue'),
|
||||
meta: { layout: 'student', role: 'student', title: 'ویرایش پروفایل' },
|
||||
},
|
||||
{
|
||||
path: '/my-courses',
|
||||
name: 'student-courses',
|
||||
component: () => import('@/features/student/pages/StudentCoursesPage.vue'),
|
||||
meta: { layout: 'student', role: 'student', title: 'دورههای من' },
|
||||
},
|
||||
{
|
||||
path: '/my-courses/:id',
|
||||
name: 'student-course-details',
|
||||
component: () => import('@/features/student/pages/StudentCourseDetailsPage.vue'),
|
||||
meta: { layout: 'student', role: 'student', title: 'جزئیات دوره' },
|
||||
},
|
||||
]
|
||||
@@ -0,0 +1,22 @@
|
||||
import { object, string } from 'yup'
|
||||
|
||||
import { phoneNumberRule } from '@/constants/rules/phoneNumberRule'
|
||||
import { nationalCodeRule } from '@/constants/rules/nationalCodeRule'
|
||||
import { optionalPasswordRule } from '@/constants/rules/passwordRule'
|
||||
import { optionalPasswordConfirmationRule } from '@/constants/rules/passwordConfirmationRule'
|
||||
|
||||
export const studentProfileSchema = object().shape({
|
||||
firstName: string().required().min(2),
|
||||
lastName: string().required().min(2),
|
||||
phoneNumber: phoneNumberRule,
|
||||
nationalCode: nationalCodeRule,
|
||||
birthDate: string().nullable().notRequired(),
|
||||
maritalStatus: string().nullable().notRequired(),
|
||||
gender: string().nullable().notRequired(),
|
||||
bio: string().nullable().notRequired(),
|
||||
provinceId: string().nullable().notRequired(),
|
||||
cityId: string().nullable().notRequired(),
|
||||
address: string().nullable().notRequired(),
|
||||
password: optionalPasswordRule,
|
||||
passwordConfirmation: optionalPasswordConfirmationRule,
|
||||
})
|
||||
Reference in New Issue
Block a user