Fix
This commit is contained in:
sajjadtalkhabi
@@ -76,11 +76,10 @@
|
||||
|
||||
<script setup>
|
||||
import { computed } from 'vue'
|
||||
|
||||
import BaseButton from '@/components/BaseButton.vue'
|
||||
import CircleButton from '@/components/CircleButton.vue'
|
||||
import SvgIcon from '@/components/icons/SvgIcon.vue'
|
||||
import { formatJalaaliDate } from '@/utils/date-utils'
|
||||
import CircleButton from '@/components/CircleButton.vue'
|
||||
|
||||
const props = defineProps({
|
||||
exam: { type: Object, required: true },
|
||||
|
||||
@@ -114,9 +114,8 @@
|
||||
|
||||
<script setup>
|
||||
import { computed } from 'vue'
|
||||
|
||||
import SelectField from '@/components/form/SelectField.vue'
|
||||
import SvgIcon from '@/components/icons/SvgIcon.vue'
|
||||
import SelectField from '@/components/form/SelectField.vue'
|
||||
|
||||
const props = defineProps({
|
||||
modelValue: { type: Array, default: () => [] },
|
||||
|
||||
@@ -49,14 +49,13 @@
|
||||
|
||||
<script setup>
|
||||
import { computed, ref, watch } from 'vue'
|
||||
|
||||
import useDebounce from '@/composables/useDebounce'
|
||||
import SvgIcon from '@/components/icons/SvgIcon.vue'
|
||||
import TextField from '@/components/form/TextField.vue'
|
||||
import CircleButton from '@/components/CircleButton.vue'
|
||||
import SelectField from '@/components/form/SelectField.vue'
|
||||
import DatePickerField from '@/components/form/DatePickerField.vue'
|
||||
import CircleButton from '@/components/CircleButton.vue'
|
||||
import SvgIcon from '@/components/icons/SvgIcon.vue'
|
||||
import { useAdminCourseTemplatesListQuery } from '@/services/query/admin-course-templates'
|
||||
import useDebounce from '@/composables/useDebounce'
|
||||
|
||||
const props = defineProps({
|
||||
modelValue: {
|
||||
|
||||
@@ -1,68 +1,54 @@
|
||||
<template>
|
||||
<BasicModal width="95%" max-width="60rem" min-width="auto" :show-close-button="true">
|
||||
<BasicModal width="95%" max-width="64rem" min-width="auto" :show-close-button="true">
|
||||
<template #default="{ close }">
|
||||
<div class="exam-details">
|
||||
<LineTitleBlock title="جزئیات آزمون" title-en="Exam Details" />
|
||||
<LineTitleBlock title="جزئیات آزمون" title-en="Details" />
|
||||
|
||||
<SkeletonLoaderBlock v-if="isLoading" :rows="3" :cols-per-row="1" />
|
||||
<template v-else-if="exam">
|
||||
<div class="exam-details__head">
|
||||
<p class="exam-details__title">{{ exam.title || '—' }}</p>
|
||||
<p class="exam-details__sub">
|
||||
<span>دوره: {{ exam.courseTemplate?.title || exam.courseTemplateTitle || '—' }}</span>
|
||||
<span class="exam-details__sep">|</span>
|
||||
<span>جلسه: {{ exam.session?.title || exam.sessionTitle || '—' }}</span>
|
||||
</p>
|
||||
<div class="exam-details__summary">
|
||||
<div class="exam-details__summary-grid">
|
||||
<div v-for="summary in summaryItems" :key="summary.title" class="exam-details__cell">
|
||||
<LineInfoBlock
|
||||
:title="summary.title"
|
||||
:desc="summary.numeric ? '' : summary.value"
|
||||
:numeric-desc="summary.numeric ? summary.value : ''"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="exam-details__description">
|
||||
<LineInfoBlock title="توضیحات آزمون" :desc="exam.description || '—'" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="exam-details__grid">
|
||||
<LineInfoBlock
|
||||
title="مدت آزمون"
|
||||
:numeric-desc="exam.durationMinutes != null ? `${exam.durationMinutes} دقیقه` : '—'"
|
||||
/>
|
||||
<LineInfoBlock title="حداقل نمره قبولی" :numeric-desc="exam.passingScore ?? '—'" />
|
||||
<LineInfoBlock
|
||||
title="تعداد سوالات"
|
||||
:numeric-desc="exam.questionsCount ?? questionsLength"
|
||||
/>
|
||||
<LineInfoBlock title="رندوم" :desc="exam.randomize ? 'بله' : 'خیر'" />
|
||||
<LineInfoBlock
|
||||
title="تاریخ اعتبار"
|
||||
:numeric-desc="formatJalaaliDate(exam.endDate) || '—'"
|
||||
/>
|
||||
<LineInfoBlock
|
||||
title="تاریخ ثبت"
|
||||
:numeric-desc="exam.faCreatedAt || formatJalaaliDate(exam.createdAt) || '—'"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div v-if="exam.description" class="exam-details__desc">
|
||||
<LineInfoBlock title="توضیحات" :desc="exam.description" />
|
||||
</div>
|
||||
|
||||
<div v-if="exam.questions?.length" class="exam-details__questions">
|
||||
<LineTitleBlock title="سوالات" title-en="Questions" />
|
||||
<div v-for="(q, index) in exam.questions" :key="q.id" class="exam-details__question">
|
||||
<p class="exam-details__question-title">
|
||||
<span class="exam-details__question-index">{{ index + 1 }}.</span>
|
||||
{{ q.title }}
|
||||
<span v-if="q.score" class="exam-details__question-score">
|
||||
({{ q.score }} نمره)
|
||||
<div class="exam-details__questions">
|
||||
<div
|
||||
v-for="question in displayQuestions"
|
||||
:key="question.id"
|
||||
class="exam-details__question"
|
||||
>
|
||||
<div class="exam-details__question-head">
|
||||
<p class="exam-details__question-title">
|
||||
<span class="exam-details__question-order">{{ question.order }} :</span>
|
||||
{{ question.title }}
|
||||
</p>
|
||||
<span v-if="question.score" class="exam-details__question-score">
|
||||
{{ question.score }} نمره
|
||||
</span>
|
||||
</p>
|
||||
<ul class="exam-details__answers">
|
||||
<li
|
||||
v-for="(a, ai) in q.answers || []"
|
||||
:key="a.id"
|
||||
</div>
|
||||
<div class="exam-details__answers">
|
||||
<div
|
||||
v-for="answer in question.answers"
|
||||
:key="answer.id"
|
||||
class="exam-details__answer"
|
||||
:class="{
|
||||
'exam-details__answer--correct': String(q.correctAnswerId) === String(a.id),
|
||||
}"
|
||||
>
|
||||
<span class="exam-details__answer-index">{{ optionLabel(ai) }}:</span>
|
||||
{{ a.title }}
|
||||
</li>
|
||||
</ul>
|
||||
<span
|
||||
class="exam-details__answer-dot"
|
||||
:class="{ 'exam-details__answer-dot--correct': answer.isCorrect }"
|
||||
/>
|
||||
<p class="exam-details__answer-text">{{ answer.title }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -71,7 +57,7 @@
|
||||
<div class="exam-details__divider" />
|
||||
|
||||
<div class="exam-details__footer">
|
||||
<BaseButton text="بستن" custom-class="exam-details__close-btn" @click="close">
|
||||
<BaseButton text="تایید" custom-class="exam-details__confirm-btn" @click="close">
|
||||
<template #appendIcon>
|
||||
<SvgIcon name="arrow-left" :size="18" color="#fff" />
|
||||
</template>
|
||||
@@ -84,17 +70,15 @@
|
||||
|
||||
<script setup>
|
||||
import { computed } from 'vue'
|
||||
|
||||
import useModal from '@/composables/useModal'
|
||||
import BasicModal from '@/components/BasicModal.vue'
|
||||
import BaseButton from '@/components/BaseButton.vue'
|
||||
import LineTitleBlock from '@/components/LineTitleBlock.vue'
|
||||
import LineInfoBlock from '@/components/blocks/LineInfoBlock.vue'
|
||||
import NoItems from '@/components/blocks/NoItems.vue'
|
||||
import SkeletonLoaderBlock from '@/components/blocks/SkeletonLoaderBlock.vue'
|
||||
import SvgIcon from '@/components/icons/SvgIcon.vue'
|
||||
import useModal from '@/composables/useModal'
|
||||
import NoItems from '@/components/blocks/NoItems.vue'
|
||||
import LineTitleBlock from '@/components/LineTitleBlock.vue'
|
||||
import { useAdminExamQuery } from '@/services/query/admin-exams'
|
||||
import { formatJalaaliDate } from '@/utils/date-utils'
|
||||
import LineInfoBlock from '@/components/blocks/LineInfoBlock.vue'
|
||||
import SkeletonLoaderBlock from '@/components/blocks/SkeletonLoaderBlock.vue'
|
||||
|
||||
defineOptions({ name: 'ExamDetailsModal' })
|
||||
|
||||
@@ -107,10 +91,65 @@ const { data: exam, isLoading } = useAdminExamQuery(examId, {
|
||||
enabled: () => !!examId.value,
|
||||
})
|
||||
|
||||
const questionsLength = computed(() => exam.value?.questions?.length ?? 0)
|
||||
const summaryItems = computed(() => {
|
||||
const e = exam.value || {}
|
||||
return [
|
||||
{ title: 'عنوان آزمون', value: e.title || '—', numeric: false },
|
||||
{
|
||||
title: 'جلسه مرتبط',
|
||||
value: e.session?.title || e.sessionTitle || '—',
|
||||
numeric: false,
|
||||
},
|
||||
{
|
||||
title: 'دوره مرتبط',
|
||||
value: e.courseTemplate?.title || e.courseTemplateTitle || '—',
|
||||
numeric: false,
|
||||
},
|
||||
{ title: 'وضعیت', value: e.statusLabel || e.faStatus || e.status || '—', numeric: false },
|
||||
{
|
||||
title: 'مدت زمان',
|
||||
value: e.durationMinutes == null ? '—' : `${e.durationMinutes} دقیقه`,
|
||||
numeric: true,
|
||||
},
|
||||
{
|
||||
title: 'تعداد سوالات',
|
||||
value:
|
||||
e.questionsCount == null
|
||||
? e.questions?.length
|
||||
? `${e.questions.length} سوال`
|
||||
: '—'
|
||||
: `${e.questionsCount} سوال`,
|
||||
numeric: true,
|
||||
},
|
||||
]
|
||||
})
|
||||
|
||||
const labels = ['گزینه اول', 'گزینه دوم', 'گزینه سوم', 'گزینه چهارم']
|
||||
const optionLabel = (index) => labels[index] || `گزینه ${index + 1}`
|
||||
const displayQuestions = computed(() => {
|
||||
const raw = exam.value?.questions || []
|
||||
return raw.map((question, index) => {
|
||||
const answersSource =
|
||||
(Array.isArray(question.answers) && question.answers) ||
|
||||
(Array.isArray(question.options) && question.options) ||
|
||||
[]
|
||||
const answers = answersSource.map((answer, ai) => {
|
||||
const id = answer?.id ?? `${question?.id || index + 1}-${ai + 1}`
|
||||
const title =
|
||||
(typeof answer === 'string' && answer) ||
|
||||
answer?.title ||
|
||||
answer?.text ||
|
||||
answer?.label ||
|
||||
'—'
|
||||
return { id, title, isCorrect: String(id) === String(question?.correctAnswerId) }
|
||||
})
|
||||
return {
|
||||
id: question?.id ?? `question-${index + 1}`,
|
||||
order: index + 1,
|
||||
title: question?.title || question?.question || '—',
|
||||
score: question?.score ?? '',
|
||||
answers,
|
||||
}
|
||||
})
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@@ -118,105 +157,122 @@ const optionLabel = (index) => labels[index] || `گزینه ${index + 1}`
|
||||
width: 100%;
|
||||
text-align: start;
|
||||
|
||||
&__head {
|
||||
margin: 1rem 0 0.5rem;
|
||||
&__summary {
|
||||
margin-block: 0.5rem 0.75rem;
|
||||
padding: 1rem 0.875rem;
|
||||
border-radius: 1.25rem;
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-family: var(--font-family-fa);
|
||||
font-size: 1.1rem;
|
||||
font-weight: 500;
|
||||
color: #4b4b4b;
|
||||
margin: 0 0 0.25rem;
|
||||
}
|
||||
|
||||
&__sub {
|
||||
font-family: var(--font-family-fa);
|
||||
font-size: 0.75rem;
|
||||
color: #535353;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
&__sep {
|
||||
color: #c4c4c4;
|
||||
}
|
||||
|
||||
&__grid {
|
||||
&__summary-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 0.25rem;
|
||||
gap: 0.5rem;
|
||||
|
||||
@media (min-width: 640px) {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
@media (min-width: 1280px) {
|
||||
grid-template-columns: repeat(6, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
&__cell :deep(.line-info__title),
|
||||
&__cell :deep(.line-info__value) {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
&__description {
|
||||
margin-top: 0.75rem;
|
||||
padding-top: 0.75rem;
|
||||
|
||||
:deep(.line-info__title),
|
||||
:deep(.line-info__desc) {
|
||||
white-space: normal;
|
||||
word-break: break-word;
|
||||
}
|
||||
}
|
||||
|
||||
&__desc,
|
||||
&__questions {
|
||||
margin-top: 1rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
margin-block: 1rem;
|
||||
border-block-start: 1px solid #eaeaea;
|
||||
padding-block-start: 1.25rem;
|
||||
}
|
||||
|
||||
&__question {
|
||||
padding: 0.625rem 0;
|
||||
border-block-end: 1px solid #f0f0f0;
|
||||
background: #fff;
|
||||
border-radius: 1.25rem;
|
||||
padding: 0.875rem 1rem;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border: none;
|
||||
}
|
||||
&__question-head {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 0.625rem;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
&__question-title {
|
||||
font-family: var(--font-family-fa);
|
||||
font-size: 0.9rem;
|
||||
color: #4b4b4b;
|
||||
margin: 0 0 0.375rem;
|
||||
font-weight: 500;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.6;
|
||||
color: #a7a7a7;
|
||||
margin: 0;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
&__question-index {
|
||||
color: #b3b3b3;
|
||||
&__question-order {
|
||||
margin-inline-end: 0.25rem;
|
||||
}
|
||||
|
||||
&__question-score {
|
||||
margin-inline-start: 0.25rem;
|
||||
color: #007074;
|
||||
flex-shrink: 0;
|
||||
font-family: var(--font-family-en);
|
||||
font-size: 0.75rem;
|
||||
color: #9c9c9c;
|
||||
}
|
||||
|
||||
&__answers {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.25rem;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.625rem 3rem;
|
||||
}
|
||||
|
||||
&__answer {
|
||||
font-family: var(--font-family-fa);
|
||||
font-size: 0.85rem;
|
||||
color: #4b4b4b;
|
||||
padding: 0.25rem 0.625rem;
|
||||
border-radius: 0.5rem;
|
||||
background: #fafafa;
|
||||
display: inline-flex;
|
||||
align-items: baseline;
|
||||
gap: 0.375rem;
|
||||
}
|
||||
|
||||
&__answer-dot {
|
||||
display: inline-block;
|
||||
width: 0.75rem;
|
||||
height: 0.75rem;
|
||||
border-radius: 0.25rem;
|
||||
border: 1px solid #b1b1b1;
|
||||
background: transparent;
|
||||
flex-shrink: 0;
|
||||
|
||||
&--correct {
|
||||
background: rgba(0, 154, 18, 8%);
|
||||
color: #009a12;
|
||||
font-weight: 500;
|
||||
border-color: #007074;
|
||||
background: #007074;
|
||||
}
|
||||
}
|
||||
|
||||
&__answer-index {
|
||||
color: #9c9c9c;
|
||||
margin-inline-end: 0.375rem;
|
||||
&__answer-text {
|
||||
font-family: var(--font-family-fa);
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.6;
|
||||
color: #4b4b4b;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&__divider {
|
||||
@@ -229,8 +285,9 @@ const optionLabel = (index) => labels[index] || `گزینه ${index + 1}`
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
&__close-btn {
|
||||
&__confirm-btn {
|
||||
min-width: 10rem;
|
||||
padding: 0 2rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,77 +1,95 @@
|
||||
<template>
|
||||
<BasicModal width="95%" max-width="80rem" min-width="auto" :show-close-button="true">
|
||||
<BasicModal width="95%" max-width="76rem" min-width="auto" :show-close-button="true">
|
||||
<template #default="{ close }">
|
||||
<div class="participant-details">
|
||||
<LineTitleBlock title="جزئیات شرکتکننده" title-en="Participant Details" />
|
||||
<p v-if="participant" class="participant-details__name">
|
||||
{{ participantName }}
|
||||
</p>
|
||||
<LineTitleBlock title="شرکت کنندگان" title-en="Participants" />
|
||||
|
||||
<SkeletonLoaderBlock v-if="isLoading" :rows="3" :cols-per-row="1" />
|
||||
<div v-else-if="attempts.length > 0" class="participant-details__list">
|
||||
<div v-for="attempt in attempts" :key="attempt.id" class="participant-details__attempt">
|
||||
<button
|
||||
type="button"
|
||||
class="participant-details__attempt-head"
|
||||
@click="toggle(attempt.id)"
|
||||
>
|
||||
<SvgIcon
|
||||
:name="isOpen(attempt.id) ? 'caret-down' : 'caret-left'"
|
||||
:size="18"
|
||||
color="#d8d8d8"
|
||||
/>
|
||||
<div class="participant-details__attempt-info">
|
||||
<p class="participant-details__attempt-title">{{ attempt.title || 'تلاش' }}</p>
|
||||
<div class="participant-details__attempt-meta">
|
||||
<span>دوره: {{ attempt.courseTitle || '—' }}</span>
|
||||
<span class="participant-details__sep">|</span>
|
||||
<span>جلسه: {{ attempt.sessionTitle || '—' }}</span>
|
||||
<span class="participant-details__sep">|</span>
|
||||
<span>تاریخ: {{ attemptDate(attempt) }}</span>
|
||||
<span
|
||||
class="participant-details__score"
|
||||
:class="`participant-details__score--${attempt.scoreTone || 'neutral'}`"
|
||||
>
|
||||
نمره: {{ attempt.score ?? '—' }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
<p v-if="participantName" class="participant-details__name">{{ participantName }}</p>
|
||||
|
||||
<div v-if="isOpen(attempt.id)" class="participant-details__body">
|
||||
<div
|
||||
v-for="(question, qIdx) in attempt.questions || []"
|
||||
:key="question.id"
|
||||
class="participant-details__question"
|
||||
<div class="participant-details__card">
|
||||
<SkeletonLoaderBlock v-if="isLoading" :rows="3" :cols-per-row="1" />
|
||||
<div v-else-if="attempts.length > 0" class="participant-details__list">
|
||||
<div v-for="attempt in attempts" :key="attempt.id" class="participant-details__attempt">
|
||||
<button
|
||||
type="button"
|
||||
class="participant-details__attempt-head"
|
||||
@click="toggle(attempt.id)"
|
||||
>
|
||||
<p class="participant-details__question-title">
|
||||
{{ qIdx + 1 }}- {{ question.title }}
|
||||
</p>
|
||||
<div class="participant-details__answers">
|
||||
<span
|
||||
v-for="(answer, aIdx) in question.answers || []"
|
||||
:key="answer.id"
|
||||
class="participant-details__answer"
|
||||
:class="answerClass(question, answer)"
|
||||
>
|
||||
<span class="participant-details__answer-index">{{ aIdx + 1 }}.</span>
|
||||
{{ answer.title }}
|
||||
</span>
|
||||
<div class="participant-details__caret">
|
||||
<SvgIcon
|
||||
:name="isOpen(attempt.id) ? 'caret-down' : 'caret-left'"
|
||||
:size="24"
|
||||
color="#d8d8d8"
|
||||
/>
|
||||
</div>
|
||||
<div class="participant-details__attempt-info">
|
||||
<p class="participant-details__attempt-title">{{ attempt.title }}</p>
|
||||
<div class="participant-details__attempt-meta">
|
||||
<div class="participant-details__meta-item">
|
||||
<span class="participant-details__meta-label">دوره :</span>
|
||||
<span class="participant-details__meta-value">{{ attempt.courseTitle }}</span>
|
||||
</div>
|
||||
<div class="participant-details__meta-item">
|
||||
<span class="participant-details__meta-label">جلسه :</span>
|
||||
<span class="participant-details__meta-value">
|
||||
{{ attempt.sessionTitle }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="participant-details__meta-item">
|
||||
<span class="participant-details__meta-label">تاریخ :</span>
|
||||
<span
|
||||
class="participant-details__meta-value participant-details__meta-value--en"
|
||||
>
|
||||
{{ attempt.faDate }}
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="participant-details__score"
|
||||
:class="`participant-details__score--${attempt.tone}`"
|
||||
>
|
||||
<span class="participant-details__meta-label">نمره :</span>
|
||||
<span class="participant-details__score-value">{{ attempt.score }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<div v-if="isOpen(attempt.id)" class="participant-details__body">
|
||||
<div
|
||||
v-for="(question, qIdx) in attempt.questions"
|
||||
:key="question.id"
|
||||
class="participant-details__question"
|
||||
>
|
||||
<p class="participant-details__question-title">
|
||||
{{ qIdx + 1 }}- {{ question.title }}
|
||||
</p>
|
||||
<div class="participant-details__answers">
|
||||
<div
|
||||
v-for="answer in question.answers"
|
||||
:key="answer.id"
|
||||
class="participant-details__answer"
|
||||
>
|
||||
<span
|
||||
class="participant-details__answer-dot"
|
||||
:class="answerStateClass(answer.id, question)"
|
||||
/>
|
||||
<p class="participant-details__answer-text">{{ answer.title }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<NoItems v-else title="موردی یافت نشد" desc="تلاشی برای این شرکتکننده ثبت نشده است." />
|
||||
<NoItems v-else title="موردی یافت نشد" desc="تلاشی برای این شرکتکننده ثبت نشده است." />
|
||||
|
||||
<div class="participant-details__divider" />
|
||||
|
||||
<div class="participant-details__footer">
|
||||
<BaseButton text="بستن" custom-class="participant-details__close-btn" @click="close">
|
||||
<template #appendIcon>
|
||||
<SvgIcon name="arrow-left" :size="18" color="#fff" />
|
||||
</template>
|
||||
</BaseButton>
|
||||
<div class="participant-details__divider" />
|
||||
<div class="participant-details__footer">
|
||||
<BaseButton text="تایید" custom-class="participant-details__confirm-btn" @click="close">
|
||||
<template #appendIcon>
|
||||
<SvgIcon name="arrow-left" :size="18" color="#fff" />
|
||||
</template>
|
||||
</BaseButton>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -79,20 +97,27 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, ref } from 'vue'
|
||||
|
||||
import { computed, ref, watch } from 'vue'
|
||||
import useModal from '@/composables/useModal'
|
||||
import BasicModal from '@/components/BasicModal.vue'
|
||||
import BaseButton from '@/components/BaseButton.vue'
|
||||
import LineTitleBlock from '@/components/LineTitleBlock.vue'
|
||||
import NoItems from '@/components/blocks/NoItems.vue'
|
||||
import SkeletonLoaderBlock from '@/components/blocks/SkeletonLoaderBlock.vue'
|
||||
import SvgIcon from '@/components/icons/SvgIcon.vue'
|
||||
import useModal from '@/composables/useModal'
|
||||
import { useAdminExamParticipantQuery } from '@/services/query/admin-exams'
|
||||
import NoItems from '@/components/blocks/NoItems.vue'
|
||||
import { formatJalaaliDate } from '@/utils/date-utils'
|
||||
import LineTitleBlock from '@/components/LineTitleBlock.vue'
|
||||
import { useAdminExamParticipantQuery } from '@/services/query/admin-exams'
|
||||
import SkeletonLoaderBlock from '@/components/blocks/SkeletonLoaderBlock.vue'
|
||||
|
||||
defineOptions({ name: 'ExamParticipantDetailsModal' })
|
||||
|
||||
const TONE_MAP = {
|
||||
good: 'success',
|
||||
success: 'success',
|
||||
bad: 'danger',
|
||||
danger: 'danger',
|
||||
neutral: 'neutral',
|
||||
}
|
||||
|
||||
const { getModal } = useModal()
|
||||
|
||||
const modalData = computed(() => getModal('ExamParticipantDetailsModal')?.data ?? {})
|
||||
@@ -104,16 +129,22 @@ const { data: detail, isLoading } = useAdminExamParticipantQuery(examId, partici
|
||||
enabled: () => !!examId.value && !!participantId.value,
|
||||
})
|
||||
|
||||
const attempts = computed(() => detail.value?.attempts || detail.value?.data?.attempts || [])
|
||||
const rawAttempts = computed(
|
||||
() => detail.value?.attempts || detail.value?.data?.attempts || participant.value?.attempts || []
|
||||
)
|
||||
|
||||
const opened = ref(new Set())
|
||||
const isOpen = (id) => opened.value.has(id)
|
||||
const toggle = (id) => {
|
||||
const next = new Set(opened.value)
|
||||
if (next.has(id)) next.delete(id)
|
||||
else next.add(id)
|
||||
opened.value = next
|
||||
}
|
||||
const attempts = computed(() =>
|
||||
rawAttempts.value.map((attempt, index) => ({
|
||||
id: attempt.id ?? index + 1,
|
||||
title: attempt.title || `آزمون مرتبه ${index + 1}`,
|
||||
courseTitle: attempt.courseTitle || '—',
|
||||
sessionTitle: attempt.sessionTitle || '—',
|
||||
faDate: attempt.faDate || formatJalaaliDate(attempt.date) || '—',
|
||||
score: attempt.score ?? '—',
|
||||
tone: TONE_MAP[attempt.scoreTone] || 'neutral',
|
||||
questions: attempt.questions || [],
|
||||
}))
|
||||
)
|
||||
|
||||
const participantName = computed(() => {
|
||||
const p = participant.value
|
||||
@@ -121,14 +152,26 @@ const participantName = computed(() => {
|
||||
return `${p.firstName || ''} ${p.lastName || ''}`.trim() || p.fullName || ''
|
||||
})
|
||||
|
||||
const attemptDate = (attempt) => attempt.faDate || formatJalaaliDate(attempt.date) || '—'
|
||||
const openId = ref(null)
|
||||
const isOpen = (id) => openId.value === id
|
||||
const toggle = (id) => {
|
||||
openId.value = openId.value === id ? null : id
|
||||
}
|
||||
|
||||
const answerClass = (question, answer) => {
|
||||
const isCorrect = String(question.correctAnswerId) === String(answer.id)
|
||||
const isUserChoice = String(question.userAnswerId) === String(answer.id)
|
||||
if (isUserChoice && isCorrect) return 'participant-details__answer--correct'
|
||||
if (isUserChoice && !isCorrect) return 'participant-details__answer--wrong'
|
||||
if (isCorrect) return 'participant-details__answer--correct-outline'
|
||||
watch(
|
||||
attempts,
|
||||
(list) => {
|
||||
if (openId.value == null && list.length > 0) openId.value = list[0].id
|
||||
},
|
||||
{ immediate: true }
|
||||
)
|
||||
|
||||
const answerStateClass = (answerId, question) => {
|
||||
const isSelected = String(question.userAnswerId ?? question.selectedAnswerId) === String(answerId)
|
||||
const isCorrect = String(question.correctAnswerId) === String(answerId)
|
||||
if (isSelected && isCorrect) return 'participant-details__answer-dot--selected-correct'
|
||||
if (isCorrect) return 'participant-details__answer-dot--correct'
|
||||
if (isSelected) return 'participant-details__answer-dot--wrong'
|
||||
return ''
|
||||
}
|
||||
</script>
|
||||
@@ -145,15 +188,26 @@ const answerClass = (question, answer) => {
|
||||
margin: 0.5rem 0 1rem;
|
||||
}
|
||||
|
||||
&__card {
|
||||
border: 1px solid #e7e2dd;
|
||||
border-radius: 1.75rem;
|
||||
background: #fff;
|
||||
padding: 1rem;
|
||||
|
||||
@media (min-width: 640px) {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
&__list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
gap: 1.25rem;
|
||||
}
|
||||
|
||||
&__attempt {
|
||||
border: 1px solid #e7e2dd;
|
||||
border-radius: 1.5rem;
|
||||
border-radius: 1.75rem;
|
||||
overflow: hidden;
|
||||
background: #fff;
|
||||
}
|
||||
@@ -161,129 +215,184 @@ const answerClass = (question, answer) => {
|
||||
&__attempt-head {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 0.75rem;
|
||||
gap: 1rem;
|
||||
width: 100%;
|
||||
text-align: start;
|
||||
padding: 1rem 1.25rem;
|
||||
border: none;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
text-align: start;
|
||||
|
||||
@media (min-width: 640px) {
|
||||
padding: 1.25rem 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
&__caret {
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
|
||||
&__attempt-info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
&__attempt-title {
|
||||
font-family: var(--font-family-fa);
|
||||
font-weight: 500;
|
||||
font-size: 1rem;
|
||||
font-size: 1.125rem;
|
||||
line-height: 1.7;
|
||||
color: #494949;
|
||||
margin: 0 0 0.5rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&__attempt-meta {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.625rem 1.25rem;
|
||||
font-family: var(--font-family-fa);
|
||||
font-size: 0.75rem;
|
||||
align-items: center;
|
||||
column-gap: 1.25rem;
|
||||
row-gap: 0.5rem;
|
||||
color: #8e8e8e;
|
||||
}
|
||||
|
||||
&__sep {
|
||||
color: #d6d6d6;
|
||||
&__meta-item {
|
||||
white-space: nowrap;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
&__meta-label {
|
||||
font-family: var(--font-family-fa);
|
||||
font-weight: 300;
|
||||
margin-inline-end: 0.25rem;
|
||||
}
|
||||
|
||||
&__meta-value {
|
||||
font-family: var(--font-family-fa);
|
||||
color: #7c7c7c;
|
||||
}
|
||||
|
||||
&__meta-value--en {
|
||||
font-family: var(--font-family-en);
|
||||
}
|
||||
|
||||
&__score {
|
||||
padding: 0.25rem 0.875rem;
|
||||
padding: 0.375rem 0.75rem;
|
||||
border-radius: 0.55rem;
|
||||
font-family: var(--font-family-fa);
|
||||
font-size: 0.75rem;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.3;
|
||||
|
||||
&--good {
|
||||
background: rgba(0, 154, 18, 8%);
|
||||
color: #009a12;
|
||||
&--success {
|
||||
background: #e8f8ee;
|
||||
color: #169c56;
|
||||
}
|
||||
|
||||
&--danger {
|
||||
background: #fdebeb;
|
||||
color: #cc2831;
|
||||
}
|
||||
|
||||
&--neutral {
|
||||
background: rgba(180, 180, 180, 8%);
|
||||
background: #f4f4f4;
|
||||
color: #8e8e8e;
|
||||
}
|
||||
|
||||
&--bad {
|
||||
background: rgba(204, 40, 49, 8%);
|
||||
color: var(--color-error);
|
||||
}
|
||||
}
|
||||
|
||||
&__score-value {
|
||||
font-family: var(--font-family-en);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
&__body {
|
||||
padding: 1rem 1.25rem 1.5rem;
|
||||
padding: 1.25rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.25rem;
|
||||
gap: 2rem;
|
||||
|
||||
@media (min-width: 640px) {
|
||||
padding: 1.25rem 1.5rem 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
&__question-title {
|
||||
font-family: var(--font-family-fa);
|
||||
font-weight: 300;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.75;
|
||||
color: #bdbdbd;
|
||||
margin: 0 0 0.75rem;
|
||||
margin: 0 0 1.25rem;
|
||||
}
|
||||
|
||||
&__answers {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.625rem 1rem;
|
||||
column-gap: 3rem;
|
||||
row-gap: 1.25rem;
|
||||
}
|
||||
|
||||
&__answer {
|
||||
border: 1px solid #e7e2dd;
|
||||
border-radius: 0.875rem;
|
||||
padding: 0.375rem 0.875rem;
|
||||
font-family: var(--font-family-fa);
|
||||
font-size: 0.85rem;
|
||||
color: #4b4b4b;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
align-items: baseline;
|
||||
gap: 0.375rem;
|
||||
}
|
||||
|
||||
&__answer-dot {
|
||||
display: inline-block;
|
||||
width: 0.75rem;
|
||||
height: 0.75rem;
|
||||
border-radius: 0.25rem;
|
||||
border: 1px solid #d4d4d4;
|
||||
background: transparent;
|
||||
flex-shrink: 0;
|
||||
|
||||
&--correct {
|
||||
background: rgba(0, 154, 18, 8%);
|
||||
border-color: rgba(0, 154, 18, 40%);
|
||||
color: #009a12;
|
||||
}
|
||||
|
||||
&--correct-outline {
|
||||
border-color: rgba(0, 154, 18, 40%);
|
||||
color: #009a12;
|
||||
border-color: #007074;
|
||||
background: #007074;
|
||||
}
|
||||
|
||||
&--wrong {
|
||||
background: rgba(204, 40, 49, 8%);
|
||||
border-color: rgba(204, 40, 49, 40%);
|
||||
color: var(--color-error);
|
||||
border-color: #cc2831;
|
||||
background: #cc2831;
|
||||
}
|
||||
|
||||
&--selected-correct {
|
||||
border-color: #9a9a9a;
|
||||
background: #9a9a9a;
|
||||
}
|
||||
}
|
||||
|
||||
&__answer-index {
|
||||
font-family: var(--font-family-en);
|
||||
color: #b3b3b3;
|
||||
&__answer-text {
|
||||
font-family: var(--font-family-fa);
|
||||
font-size: 1rem;
|
||||
line-height: 1.7;
|
||||
color: #5b5b5b;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&__divider {
|
||||
border-block-end: 1px solid var(--color-thd-gray);
|
||||
margin-block: 1.25rem;
|
||||
border-block-end: 1px solid #e7e2dd;
|
||||
margin-block: 1.5rem 1rem;
|
||||
}
|
||||
|
||||
&__footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-top: 0.75rem;
|
||||
}
|
||||
|
||||
&__close-btn {
|
||||
min-width: 12rem;
|
||||
&__confirm-btn {
|
||||
min-width: 11.5rem;
|
||||
padding: 0 2rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -63,18 +63,17 @@
|
||||
|
||||
<script setup>
|
||||
import { computed, ref } from 'vue'
|
||||
|
||||
import useModal from '@/composables/useModal'
|
||||
import BasicModal from '@/components/BasicModal.vue'
|
||||
import BaseButton from '@/components/BaseButton.vue'
|
||||
import LineTitleBlock from '@/components/LineTitleBlock.vue'
|
||||
import NoItems from '@/components/blocks/NoItems.vue'
|
||||
import SkeletonLoaderBlock from '@/components/blocks/SkeletonLoaderBlock.vue'
|
||||
import PaginationBlock from '@/components/blocks/PaginationBlock.vue'
|
||||
import SvgIcon from '@/components/icons/SvgIcon.vue'
|
||||
import useModal from '@/composables/useModal'
|
||||
import { usePagination } from '@/composables/usePagination'
|
||||
import { useAdminExamParticipantsQuery } from '@/services/query/admin-exams'
|
||||
import NoItems from '@/components/blocks/NoItems.vue'
|
||||
import { formatJalaaliDate } from '@/utils/date-utils'
|
||||
import { usePagination } from '@/composables/usePagination'
|
||||
import LineTitleBlock from '@/components/LineTitleBlock.vue'
|
||||
import PaginationBlock from '@/components/blocks/PaginationBlock.vue'
|
||||
import { useAdminExamParticipantsQuery } from '@/services/query/admin-exams'
|
||||
import SkeletonLoaderBlock from '@/components/blocks/SkeletonLoaderBlock.vue'
|
||||
|
||||
defineOptions({ name: 'ExamParticipantsModal' })
|
||||
|
||||
|
||||
@@ -104,28 +104,28 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import useYup from '@/composables/useYup'
|
||||
import { computed, ref, watch } from 'vue'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
import useDebounce from '@/composables/useDebounce'
|
||||
import { useQueryClient } from '@tanstack/vue-query'
|
||||
import BoxedIconTitleBlock from '@/components/blocks/BoxedIconTitleBlock.vue'
|
||||
import BaseButton from '@/components/BaseButton.vue'
|
||||
import TextField from '@/components/form/TextField.vue'
|
||||
import TextareaField from '@/components/form/TextareaField.vue'
|
||||
import SelectField from '@/components/form/SelectField.vue'
|
||||
import DatePickerField from '@/components/form/DatePickerField.vue'
|
||||
import ToggleSwitch from '@/components/form/ToggleSwitch.vue'
|
||||
import SvgIcon from '@/components/icons/SvgIcon.vue'
|
||||
import TextField from '@/components/form/TextField.vue'
|
||||
import { examSchema } from '@/features/admin/exams/schema'
|
||||
import SelectField from '@/components/form/SelectField.vue'
|
||||
import ToggleSwitch from '@/components/form/ToggleSwitch.vue'
|
||||
import TextareaField from '@/components/form/TextareaField.vue'
|
||||
import DatePickerField from '@/components/form/DatePickerField.vue'
|
||||
import { useAdminSessionsListQuery } from '@/services/query/admin-sessions'
|
||||
import BoxedIconTitleBlock from '@/components/blocks/BoxedIconTitleBlock.vue'
|
||||
import ExamQuestionBuilder from '@/features/admin/exams/components/ExamQuestionBuilder.vue'
|
||||
import useYup from '@/composables/useYup'
|
||||
import {
|
||||
adminExamsKeys,
|
||||
useAddAdminExamMutation,
|
||||
useAdminExamQuery,
|
||||
useUpdateAdminExamMutation,
|
||||
} from '@/services/query/admin-exams'
|
||||
import { useAdminSessionsListQuery } from '@/services/query/admin-sessions'
|
||||
import useDebounce from '@/composables/useDebounce'
|
||||
import { examSchema } from '@/features/admin/exams/schema'
|
||||
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
|
||||
@@ -50,27 +50,26 @@
|
||||
<script setup>
|
||||
import { computed, ref } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import useModal from '@/composables/useModal'
|
||||
import { useQueryClient } from '@tanstack/vue-query'
|
||||
|
||||
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 PaginationBlock from '@/components/blocks/PaginationBlock.vue'
|
||||
import BaseButton from '@/components/BaseButton.vue'
|
||||
import SvgIcon from '@/components/icons/SvgIcon.vue'
|
||||
import ExamsFilters from '@/features/admin/exams/components/ExamsFilters.vue'
|
||||
import NoItems from '@/components/blocks/NoItems.vue'
|
||||
import { usePagination } from '@/composables/usePagination'
|
||||
import PaginationBlock from '@/components/blocks/PaginationBlock.vue'
|
||||
import ExamItem from '@/features/admin/exams/components/ExamItem.vue'
|
||||
import BoxedIconTitleBlock from '@/components/blocks/BoxedIconTitleBlock.vue'
|
||||
import SkeletonLoaderBlock from '@/components/blocks/SkeletonLoaderBlock.vue'
|
||||
import ExamsFilters from '@/features/admin/exams/components/ExamsFilters.vue'
|
||||
import SimpleTitleIconBlock from '@/components/blocks/SimpleTitleIconBlock.vue'
|
||||
import ExamDetailsModal from '@/features/admin/exams/components/modals/ExamDetailsModal.vue'
|
||||
import ExamParticipantsModal from '@/features/admin/exams/components/modals/ExamParticipantsModal.vue'
|
||||
import ExamParticipantDetailsModal from '@/features/admin/exams/components/modals/ExamParticipantDetailsModal.vue'
|
||||
import ExamDetailsModal from '@/features/admin/exams/components/modals/ExamDetailsModal.vue'
|
||||
import {
|
||||
adminExamsKeys,
|
||||
useAdminExamsListQuery,
|
||||
useDeleteAdminExamMutation,
|
||||
} from '@/services/query/admin-exams'
|
||||
import { usePagination } from '@/composables/usePagination'
|
||||
import useModal from '@/composables/useModal'
|
||||
|
||||
const router = useRouter()
|
||||
const queryClient = useQueryClient()
|
||||
|
||||
Reference in New Issue
Block a user