first commit
This commit is contained in:
sajjadtalkhabi
@@ -0,0 +1,289 @@
|
||||
<template>
|
||||
<BasicModal width="95%" max-width="80rem" 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>
|
||||
|
||||
<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>
|
||||
|
||||
<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">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
</div>
|
||||
</template>
|
||||
</BasicModal>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, ref } from 'vue'
|
||||
|
||||
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 { formatJalaaliDate } from '@/utils/date-utils'
|
||||
|
||||
defineOptions({ name: 'ExamParticipantDetailsModal' })
|
||||
|
||||
const { getModal } = useModal()
|
||||
|
||||
const modalData = computed(() => getModal('ExamParticipantDetailsModal')?.data ?? {})
|
||||
const examId = computed(() => modalData.value.examId ?? null)
|
||||
const participantId = computed(() => modalData.value.participantId ?? null)
|
||||
const participant = computed(() => modalData.value.participant ?? null)
|
||||
|
||||
const { data: detail, isLoading } = useAdminExamParticipantQuery(examId, participantId, {
|
||||
enabled: () => !!examId.value && !!participantId.value,
|
||||
})
|
||||
|
||||
const attempts = computed(() => detail.value?.attempts || detail.value?.data?.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 participantName = computed(() => {
|
||||
const p = participant.value
|
||||
if (!p) return ''
|
||||
return `${p.firstName || ''} ${p.lastName || ''}`.trim() || p.fullName || ''
|
||||
})
|
||||
|
||||
const attemptDate = (attempt) => attempt.faDate || formatJalaaliDate(attempt.date) || '—'
|
||||
|
||||
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'
|
||||
return ''
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.participant-details {
|
||||
width: 100%;
|
||||
text-align: start;
|
||||
|
||||
&__name {
|
||||
font-family: var(--font-family-fa);
|
||||
font-size: 0.95rem;
|
||||
color: #4b4b4b;
|
||||
margin: 0.5rem 0 1rem;
|
||||
}
|
||||
|
||||
&__list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
&__attempt {
|
||||
border: 1px solid #e7e2dd;
|
||||
border-radius: 1.5rem;
|
||||
overflow: hidden;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
&__attempt-head {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 0.75rem;
|
||||
width: 100%;
|
||||
text-align: start;
|
||||
padding: 1rem 1.25rem;
|
||||
border: none;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&__attempt-info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
&__attempt-title {
|
||||
font-family: var(--font-family-fa);
|
||||
font-weight: 500;
|
||||
font-size: 1rem;
|
||||
color: #494949;
|
||||
margin: 0 0 0.5rem;
|
||||
}
|
||||
|
||||
&__attempt-meta {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.625rem 1.25rem;
|
||||
font-family: var(--font-family-fa);
|
||||
font-size: 0.75rem;
|
||||
color: #8e8e8e;
|
||||
}
|
||||
|
||||
&__sep {
|
||||
color: #d6d6d6;
|
||||
}
|
||||
|
||||
&__score {
|
||||
padding: 0.25rem 0.875rem;
|
||||
border-radius: 0.55rem;
|
||||
font-family: var(--font-family-fa);
|
||||
font-size: 0.75rem;
|
||||
|
||||
&--good {
|
||||
background: rgba(0, 154, 18, 8%);
|
||||
color: #009a12;
|
||||
}
|
||||
|
||||
&--neutral {
|
||||
background: rgba(180, 180, 180, 8%);
|
||||
color: #8e8e8e;
|
||||
}
|
||||
|
||||
&--bad {
|
||||
background: rgba(204, 40, 49, 8%);
|
||||
color: var(--color-error);
|
||||
}
|
||||
}
|
||||
|
||||
&__body {
|
||||
padding: 1rem 1.25rem 1.5rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.25rem;
|
||||
}
|
||||
|
||||
&__question-title {
|
||||
font-family: var(--font-family-fa);
|
||||
font-size: 0.875rem;
|
||||
color: #bdbdbd;
|
||||
margin: 0 0 0.75rem;
|
||||
}
|
||||
|
||||
&__answers {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.625rem 1rem;
|
||||
}
|
||||
|
||||
&__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;
|
||||
gap: 0.375rem;
|
||||
|
||||
&--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;
|
||||
}
|
||||
|
||||
&--wrong {
|
||||
background: rgba(204, 40, 49, 8%);
|
||||
border-color: rgba(204, 40, 49, 40%);
|
||||
color: var(--color-error);
|
||||
}
|
||||
}
|
||||
|
||||
&__answer-index {
|
||||
font-family: var(--font-family-en);
|
||||
color: #b3b3b3;
|
||||
}
|
||||
|
||||
&__divider {
|
||||
border-block-end: 1px solid var(--color-thd-gray);
|
||||
margin-block: 1.25rem;
|
||||
}
|
||||
|
||||
&__footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
&__close-btn {
|
||||
min-width: 12rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user