fix
This commit is contained in:
sajjadtalkhabi
@@ -0,0 +1,162 @@
|
||||
<template>
|
||||
<div class="student-session-item">
|
||||
<div>
|
||||
<p class="student-session-item__title">{{ session.title || '—' }}</p>
|
||||
<div class="student-session-item__hours">
|
||||
<SvgIcon name="calendar" :size="9" color="#007074" />
|
||||
<span class="student-session-item__hours-label">زمان جلسه :</span>
|
||||
<span class="student-session-item__hours-value">{{ durationText }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="student-session-item__badges">
|
||||
<span
|
||||
v-if="session.isSeen"
|
||||
class="student-session-item__badge student-session-item__badge--seen"
|
||||
>
|
||||
دیده شده
|
||||
</span>
|
||||
<span v-if="session.needsAssignment" class="student-session-item__badge">
|
||||
<SvgIcon name="paper-plane" :size="11" color="#5d5d5d" />
|
||||
ارسال تکلیف
|
||||
</span>
|
||||
<span v-if="session.hasQuiz" class="student-session-item__badge">
|
||||
<SvgIcon name="file" :size="11" color="#5d5d5d" />
|
||||
دارای آزمون
|
||||
</span>
|
||||
<span v-if="session.isOnline" class="student-session-item__badge">
|
||||
<SvgIcon name="users-three" :size="11" color="#5d5d5d" />
|
||||
جلسه آنلاین
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="student-session-item__actions">
|
||||
<BaseButton
|
||||
text="شروع یادگیری"
|
||||
custom-class="student-session-item__btn"
|
||||
@click="emit('start', session)"
|
||||
>
|
||||
<template #appendIcon>
|
||||
<SvgIcon name="arrow-left" :size="14" 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'
|
||||
|
||||
const props = defineProps({
|
||||
session: { type: Object, required: true },
|
||||
})
|
||||
|
||||
const emit = defineEmits(['start'])
|
||||
|
||||
const durationText = computed(() =>
|
||||
props.session.durationHours == null ? '—' : `${props.session.durationHours} ساعت`
|
||||
)
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.student-session-item {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
gap: 0.625rem;
|
||||
padding: 0.875rem 1rem;
|
||||
background: rgba(255, 255, 255, 58%);
|
||||
box-shadow: 0 6.75px 19.425px rgba(0, 0, 0, 4%);
|
||||
border-radius: 0.75rem;
|
||||
margin-bottom: 0.625rem;
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
&__title {
|
||||
flex: 1 1 22%;
|
||||
font-family: var(--font-family-fa);
|
||||
font-weight: 400;
|
||||
font-size: 0.95rem;
|
||||
color: #4b4b4b;
|
||||
margin: 0;
|
||||
text-align: end;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
order: 4;
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
order: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&__badges {
|
||||
flex: 1 1 38%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
&__badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.375rem;
|
||||
padding: 0.375rem 0.875rem;
|
||||
border-radius: 0.75rem;
|
||||
background: rgba(107, 107, 107, 4%);
|
||||
font-family: var(--font-family-fa);
|
||||
font-weight: 400;
|
||||
font-size: 0.7rem;
|
||||
color: #5d5d5d;
|
||||
white-space: nowrap;
|
||||
|
||||
&--seen {
|
||||
background: rgba(0, 255, 68, 4%);
|
||||
color: #009a12;
|
||||
}
|
||||
}
|
||||
|
||||
&__hours {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.375rem;
|
||||
padding: 0.375rem 0.875rem;
|
||||
border-radius: 0.75rem;
|
||||
background: rgba(0, 112, 116, 4%);
|
||||
font-family: var(--font-family-fa);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
&__hours-label {
|
||||
font-weight: 300;
|
||||
font-size: 0.65rem;
|
||||
color: #007074;
|
||||
}
|
||||
|
||||
&__hours-value {
|
||||
font-weight: 500;
|
||||
font-size: 0.75rem;
|
||||
color: #007074;
|
||||
}
|
||||
|
||||
&__actions {
|
||||
flex: 0 0 auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
&__btn {
|
||||
min-width: 6rem;
|
||||
padding: 0 1rem;
|
||||
height: 2rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,306 @@
|
||||
<template>
|
||||
<div class="ssd">
|
||||
<BoxedIconTitleBlock
|
||||
class="ssd__heading"
|
||||
:title="session?.title || 'جزئیات جلسه'"
|
||||
:desc="session?.desc || 'اطلاعات کامل این جلسه را مشاهده کنید.'"
|
||||
>
|
||||
<template #icon>
|
||||
<SvgIcon name="book" :size="24" color="var(--color-primary)" />
|
||||
</template>
|
||||
</BoxedIconTitleBlock>
|
||||
|
||||
<TabsBlock :tabs="tabs" v-model="activeTab" @change-tab="onTabChange">
|
||||
<template #homework>
|
||||
<SkeletonLoaderBlock v-if="isLoading && !session" :rows="3" :cols-per-row="1" />
|
||||
<div v-else class="ssd__panel">
|
||||
<div class="ssd__prompt">
|
||||
<SvgIcon name="warning" :size="22" color="#b8b8b8" class="ssd__prompt-icon" />
|
||||
<p class="ssd__prompt-text">
|
||||
{{ session?.homeworkPrompt || 'متنی برای این جلسه ثبت نشده است.' }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="ssd__media">
|
||||
<div class="ssd__content">
|
||||
<div v-if="contentKind === 'video'" class="ssd__video">
|
||||
<VideoPlayerBlock
|
||||
:src="session?.videoUrl || ''"
|
||||
:poster="session?.poster || ''"
|
||||
:video-id="sessionId"
|
||||
/>
|
||||
</div>
|
||||
<div v-else-if="contentKind === 'audio'" class="ssd__audio">
|
||||
<SvgIcon name="paper-plane-right" :size="40" color="rgba(0, 112, 116, 0.31)" />
|
||||
<audio :src="session.audioUrl" controls class="ssd__audio-player" />
|
||||
</div>
|
||||
<div v-else-if="contentKind === 'text'" class="ssd__text">
|
||||
<SvgIcon name="warning" :size="22" color="#b8b8b8" class="ssd__text-icon" />
|
||||
<p class="ssd__text-body">{{ session.text }}</p>
|
||||
</div>
|
||||
<div v-else-if="contentKind === 'link'" class="ssd__link">
|
||||
<div class="ssd__link__box">
|
||||
<span>https://link</span>
|
||||
<SvgIcon name="link" :size="22" class="ssd__link-icon" />
|
||||
</div>
|
||||
<BaseButton text="ورود به جلسه " custom-class="ssd__link-btn">
|
||||
<template #appendIcon>
|
||||
<SvgIcon name="arrow-left" :size="18" color="#fff" />
|
||||
</template>
|
||||
</BaseButton>
|
||||
</div>
|
||||
<div v-else class="ssd__empty">
|
||||
<SvgIcon name="warning" :size="32" color="#bcbcbc" />
|
||||
<p>محتوایی برای این جلسه ثبت نشده است.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ssd__uploads" v-if="contentKind !== 'link'">
|
||||
<VoiceRecorder
|
||||
class="ssd__uploads-recorder"
|
||||
v-model="homeworkAudio"
|
||||
:error="errors.audio"
|
||||
/>
|
||||
<ImageUploader
|
||||
class="ssd__uploads-uploader"
|
||||
v-model="homeworkImage"
|
||||
:error="errors.image"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ssd__hint">
|
||||
<SvgIcon name="warning" :size="22" color="#b8b8b8" />
|
||||
<p class="ssd__hint-text">
|
||||
{{ session?.homeworkHint || '' }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="ssd__footer">
|
||||
<BaseButton
|
||||
text="ارسال تکلیف"
|
||||
:loading="submitMutation.isPending.value"
|
||||
:disabled="!canSubmit"
|
||||
custom-class="ssd__submit-btn"
|
||||
@click="onSubmit"
|
||||
>
|
||||
<template #appendIcon>
|
||||
<SvgIcon name="arrow-left" :size="18" color="#fff" />
|
||||
</template>
|
||||
</BaseButton>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template #exam>
|
||||
<NoItems title="در حال انتقال" desc="در حال انتقال به صفحه آزمون..." />
|
||||
</template>
|
||||
</TabsBlock>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { toast } from 'vue3-toastify'
|
||||
import { computed, reactive, ref } from 'vue'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
import SvgIcon from '@/components/icons/SvgIcon.vue'
|
||||
import BaseButton from '@/components/BaseButton.vue'
|
||||
import NoItems from '@/components/blocks/NoItems.vue'
|
||||
import TabsBlock from '@/components/blocks/TabsBlock.vue'
|
||||
import { objectToFormData } from '@/utils/object-to-formdata'
|
||||
import VoiceRecorder from '@/components/form/VoiceRecorder.vue'
|
||||
import ImageUploader from '@/components/form/ImageUploader.vue'
|
||||
import VideoPlayerBlock from '@/components/blocks/VideoPlayerBlock.vue'
|
||||
import BoxedIconTitleBlock from '@/components/blocks/BoxedIconTitleBlock.vue'
|
||||
import SkeletonLoaderBlock from '@/components/blocks/SkeletonLoaderBlock.vue'
|
||||
import {
|
||||
useStudentSessionQuery,
|
||||
useSubmitStudentSessionHomeworkMutation,
|
||||
} from '@/services/query/student-sessions'
|
||||
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
|
||||
const sessionId = computed(() => route.params.id)
|
||||
|
||||
const { data: session, isLoading } = useStudentSessionQuery(sessionId, {
|
||||
enabled: () => !!sessionId.value,
|
||||
})
|
||||
|
||||
const contentKind = computed(() => {
|
||||
const s = session.value
|
||||
if (!s) return ''
|
||||
if (s.videoUrl) return 'link'
|
||||
if (s.audioUrl) return 'audio'
|
||||
if (s.text) return 'text'
|
||||
if (s.link) return 'link'
|
||||
return ''
|
||||
})
|
||||
|
||||
const tabs = [
|
||||
{ name: 'homework', label: 'ارسال تکلیف', icon: 'list-bullets' },
|
||||
{ name: 'exam', label: 'آزمـــــون', icon: 'file' },
|
||||
]
|
||||
const activeTab = ref('homework')
|
||||
|
||||
const homeworkAudio = ref(null)
|
||||
const homeworkImage = ref(null)
|
||||
const errors = reactive({ audio: '', image: '' })
|
||||
|
||||
const canSubmit = computed(() => !!(homeworkAudio.value || homeworkImage.value))
|
||||
|
||||
const submitMutation = useSubmitStudentSessionHomeworkMutation()
|
||||
|
||||
const onSubmit = async () => {
|
||||
if (!canSubmit.value) {
|
||||
errors.audio = 'حداقل یک فایل صوتی یا تصویر ارسال کنید.'
|
||||
return
|
||||
}
|
||||
errors.audio = ''
|
||||
errors.image = ''
|
||||
try {
|
||||
const payload = { subType: 'homework' }
|
||||
if (homeworkAudio.value) payload.audio = homeworkAudio.value
|
||||
if (homeworkImage.value) payload.image = homeworkImage.value
|
||||
const fd = objectToFormData(payload)
|
||||
await submitMutation.mutateAsync({ id: sessionId.value, payload: fd })
|
||||
toast.success('تکلیف با موفقیت ارسال شد.')
|
||||
homeworkAudio.value = null
|
||||
homeworkImage.value = null
|
||||
} catch {
|
||||
toast.error('ارسال تکلیف با خطا مواجه شد.')
|
||||
}
|
||||
}
|
||||
|
||||
const onTabChange = (name) => {
|
||||
if (name !== 'exam') return
|
||||
const examId = session.value?.examId
|
||||
if (examId) {
|
||||
router.push({ name: 'student-exam', params: { id: examId } }).catch(() => {})
|
||||
} else {
|
||||
toast.info('آزمونی برای این جلسه ثبت نشده است.')
|
||||
activeTab.value = 'homework'
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.ssd {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
|
||||
&__heading {
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
&__media {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
&__panel {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.875rem;
|
||||
}
|
||||
|
||||
&__prompt {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 0.625rem;
|
||||
padding: 0.75rem 1rem;
|
||||
background: rgba(255, 255, 255, 58%);
|
||||
box-shadow: 0 6.75px 19.425px rgba(0, 0, 0, 4%);
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
&__prompt-icon {
|
||||
flex-shrink: 0;
|
||||
margin-top: 0.125rem;
|
||||
}
|
||||
|
||||
&__prompt-text {
|
||||
font-family: var(--font-family-fa);
|
||||
font-weight: 400;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.7;
|
||||
color: #5d5d5d;
|
||||
margin: 0;
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
&__content {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&__uploads {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 0.875rem;
|
||||
height: -webkit-fill-available;
|
||||
|
||||
&-uploader {
|
||||
height: stretch;
|
||||
}
|
||||
|
||||
:global(.voice-recorder) {
|
||||
height: stretch;
|
||||
background-color: #eee !important;
|
||||
}
|
||||
}
|
||||
|
||||
&__link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
|
||||
&__box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 0.625rem;
|
||||
padding: 0.625rem 1rem;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 50px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&__icon {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&__hint {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.625rem;
|
||||
padding: 0.625rem 1rem;
|
||||
background: #eee;
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
&__hint-text {
|
||||
font-family: var(--font-family-fa);
|
||||
font-weight: 400;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.7;
|
||||
color: #5d5d5d;
|
||||
margin: 0;
|
||||
text-align: justify;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
&__footer {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
&__submit-btn {
|
||||
min-width: 18rem;
|
||||
padding: 0 2rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user