first commit
This commit is contained in:
sajjadtalkhabi
@@ -0,0 +1,204 @@
|
||||
<template>
|
||||
<div class="exam-item">
|
||||
<div class="exam-item__main">
|
||||
<p class="exam-item__title">{{ exam.title || '—' }}</p>
|
||||
<div class="exam-item__sub">
|
||||
<span class="exam-item__sub-label">دوره:</span>
|
||||
<span class="exam-item__sub-value">
|
||||
{{ exam.courseTemplate?.title || exam.courseTemplateTitle || '—' }}
|
||||
</span>
|
||||
<span class="exam-item__dot">|</span>
|
||||
<span class="exam-item__sub-label">جلسه:</span>
|
||||
<span class="exam-item__sub-value">
|
||||
{{ exam.session?.title || exam.sessionTitle || '—' }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="exam-item__meta">
|
||||
<div class="exam-item__pill">
|
||||
<span class="exam-item__pill-label">مدت آزمون:</span>
|
||||
<span class="exam-item__pill-value">{{ duration }}</span>
|
||||
</div>
|
||||
<div class="exam-item__pill">
|
||||
<span class="exam-item__pill-label">تعداد سوالات:</span>
|
||||
<span class="exam-item__pill-value">{{ questions }}</span>
|
||||
</div>
|
||||
<div class="exam-item__pill">
|
||||
<span class="exam-item__pill-label">تاریخ ثبت:</span>
|
||||
<span class="exam-item__pill-value">{{ createdAt }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="exam-item__actions">
|
||||
<CircleButton
|
||||
tooltip="شرکتکنندگان"
|
||||
bg-color="rgba(0, 112, 116, 0.08)"
|
||||
size="2.5rem"
|
||||
@click="emit('show-participants', exam)"
|
||||
>
|
||||
<template #icon>
|
||||
<SvgIcon name="users-three" :size="18" color="#007074" />
|
||||
</template>
|
||||
</CircleButton>
|
||||
<CircleButton
|
||||
tooltip="حذف"
|
||||
bg-color="rgba(104, 104, 104, 0.05)"
|
||||
size="2.5rem"
|
||||
@click="emit('delete', exam)"
|
||||
>
|
||||
<template #icon>
|
||||
<SvgIcon name="trash" :size="18" color="var(--color-error)" />
|
||||
</template>
|
||||
</CircleButton>
|
||||
<CircleButton
|
||||
tooltip="ویرایش"
|
||||
bg-color="rgba(104, 104, 104, 0.05)"
|
||||
size="2.5rem"
|
||||
@click="emit('edit', exam)"
|
||||
>
|
||||
<template #icon>
|
||||
<SvgIcon name="pencil" :size="18" color="var(--color-sec-gray)" />
|
||||
</template>
|
||||
</CircleButton>
|
||||
<BaseButton
|
||||
text="جزئیات آزمون"
|
||||
custom-class="exam-item__details-btn"
|
||||
@click="emit('show-details', exam)"
|
||||
>
|
||||
<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 CircleButton from '@/components/CircleButton.vue'
|
||||
import SvgIcon from '@/components/icons/SvgIcon.vue'
|
||||
import { formatJalaaliDate } from '@/utils/date-utils'
|
||||
|
||||
const props = defineProps({
|
||||
exam: { type: Object, required: true },
|
||||
})
|
||||
|
||||
const emit = defineEmits(['edit', 'delete', 'show-details', 'show-participants'])
|
||||
|
||||
const duration = computed(() =>
|
||||
props.exam.durationMinutes == null ? '—' : `${props.exam.durationMinutes} دقیقه`
|
||||
)
|
||||
|
||||
const questions = computed(() =>
|
||||
props.exam.questionsCount == null ? '—' : `${props.exam.questionsCount} سوال`
|
||||
)
|
||||
|
||||
const createdAt = computed(
|
||||
() => props.exam.faCreatedAt || formatJalaaliDate(props.exam.createdAt) || '—'
|
||||
)
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.exam-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: 1024px) {
|
||||
flex-flow: row wrap;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&__main {
|
||||
flex: 1 1 25%;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-family: var(--font-family-fa);
|
||||
font-size: 1rem;
|
||||
color: #4b4b4b;
|
||||
margin: 0 0 0.25rem;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
&__sub {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
font-family: var(--font-family-fa);
|
||||
font-size: 0.7rem;
|
||||
color: #535353;
|
||||
}
|
||||
|
||||
&__sub-label {
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
&__sub-value {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
&__dot {
|
||||
color: #c4c4c4;
|
||||
}
|
||||
|
||||
&__meta {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.375rem;
|
||||
flex: 1 1 41%;
|
||||
}
|
||||
|
||||
&__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.7rem;
|
||||
color: #535353;
|
||||
margin-inline-end: 0.25rem;
|
||||
}
|
||||
|
||||
&__pill-value {
|
||||
font-family: var(--font-family-en);
|
||||
font-size: 0.7rem;
|
||||
font-weight: 500;
|
||||
color: #535353;
|
||||
}
|
||||
|
||||
&__actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
gap: 0.375rem;
|
||||
flex: 1 1 100%;
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
}
|
||||
|
||||
&__details-btn {
|
||||
min-width: 8rem;
|
||||
padding: 0 0.875rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,406 @@
|
||||
<template>
|
||||
<div class="exam-question-builder">
|
||||
<div
|
||||
v-for="(question, questionIndex) in questions"
|
||||
:key="question.id"
|
||||
class="exam-question-builder__card"
|
||||
>
|
||||
<div class="exam-question-builder__head">
|
||||
<p class="exam-question-builder__title">سوال شماره {{ questionIndex + 1 }}</p>
|
||||
<button
|
||||
type="button"
|
||||
:disabled="disabled"
|
||||
class="exam-question-builder__remove"
|
||||
aria-label="حذف سوال"
|
||||
@click="removeQuestion(question.id)"
|
||||
>
|
||||
<SvgIcon name="close" :size="20" color="#b1b1b1" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="exam-question-builder__row">
|
||||
<div class="exam-question-builder__col exam-question-builder__col--main">
|
||||
<label class="exam-question-builder__label">متن سوال</label>
|
||||
<textarea
|
||||
:value="question.title"
|
||||
:disabled="disabled"
|
||||
rows="1"
|
||||
placeholder="لطفا سوال خود را وارد کنید"
|
||||
class="exam-question-builder__textarea"
|
||||
@input="updateQuestion(question.id, { title: $event.target.value })"
|
||||
/>
|
||||
</div>
|
||||
<div class="exam-question-builder__col exam-question-builder__col--score">
|
||||
<label class="exam-question-builder__label">بارم نمره</label>
|
||||
<input
|
||||
:value="question.score"
|
||||
:disabled="disabled"
|
||||
type="text"
|
||||
inputmode="numeric"
|
||||
placeholder="15"
|
||||
class="exam-question-builder__input"
|
||||
@input="updateQuestion(question.id, { score: $event.target.value })"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="exam-question-builder__answers-row">
|
||||
<div class="exam-question-builder__answers">
|
||||
<p class="exam-question-builder__label">گزینهها</p>
|
||||
<div class="exam-question-builder__answers-list">
|
||||
<div
|
||||
v-for="answer in question.answers"
|
||||
:key="answer.id"
|
||||
class="exam-question-builder__answer"
|
||||
>
|
||||
<input
|
||||
:value="answer.title"
|
||||
:disabled="disabled"
|
||||
type="text"
|
||||
placeholder="متن گزینه"
|
||||
class="exam-question-builder__answer-input"
|
||||
@input="updateOption(question.id, answer.id, $event.target.value)"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
:disabled="disabled"
|
||||
class="exam-question-builder__answer-remove"
|
||||
aria-label="حذف گزینه"
|
||||
@click="removeOption(question.id, answer.id)"
|
||||
>
|
||||
<SvgIcon name="close" :size="14" color="#b1b1b1" />
|
||||
</button>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
:disabled="disabled"
|
||||
class="exam-question-builder__answer-add"
|
||||
aria-label="افزودن گزینه"
|
||||
@click="addOption(question.id)"
|
||||
>
|
||||
<SvgIcon name="plus" :size="16" color="#b1b1b1" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="exam-question-builder__correct">
|
||||
<SelectField
|
||||
:model-value="question.correctAnswerId"
|
||||
:name="`correctAnswer-${question.id}`"
|
||||
:options="correctAnswerOptions(question)"
|
||||
option-label="label"
|
||||
option-value="value"
|
||||
label="گزینه صحیح"
|
||||
:disabled="disabled || question.answers.length === 0"
|
||||
@update:model-value="
|
||||
(value) => updateQuestion(question.id, { correctAnswerId: value || null })
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
:disabled="disabled"
|
||||
class="exam-question-builder__add"
|
||||
aria-label="افزودن سوال"
|
||||
@click="addQuestion"
|
||||
>
|
||||
<SvgIcon name="plus" :size="20" color="#b1b1b1" />
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed } from 'vue'
|
||||
|
||||
import SelectField from '@/components/form/SelectField.vue'
|
||||
import SvgIcon from '@/components/icons/SvgIcon.vue'
|
||||
|
||||
const props = defineProps({
|
||||
modelValue: { type: Array, default: () => [] },
|
||||
disabled: { type: Boolean, default: false },
|
||||
})
|
||||
|
||||
const emit = defineEmits(['update:modelValue'])
|
||||
|
||||
const defaultLabels = ['گزینه اول', 'گزینه دوم', 'گزینه سوم', 'گزینه چهارم']
|
||||
|
||||
const questions = computed(() => (Array.isArray(props.modelValue) ? props.modelValue : []))
|
||||
|
||||
const cloneQuestions = () =>
|
||||
questions.value.map((q) => ({
|
||||
...q,
|
||||
answers: Array.isArray(q.answers) ? q.answers.map((a) => ({ ...a })) : [],
|
||||
}))
|
||||
|
||||
const createId = (prefix) => `${prefix}-${Date.now()}-${Math.random().toString(16).slice(2)}`
|
||||
|
||||
const createOption = () => ({ id: createId('answer'), title: '' })
|
||||
|
||||
const createQuestion = () => ({
|
||||
id: createId('question'),
|
||||
title: '',
|
||||
score: '',
|
||||
correctAnswerId: null,
|
||||
answers: [createOption(), createOption()],
|
||||
})
|
||||
|
||||
const emitQuestions = (next) => emit('update:modelValue', next)
|
||||
|
||||
const addQuestion = () => emitQuestions([...cloneQuestions(), createQuestion()])
|
||||
|
||||
const removeQuestion = (questionId) => {
|
||||
const next = cloneQuestions().filter((q) => q.id !== questionId)
|
||||
emitQuestions(next.length > 0 ? next : [createQuestion()])
|
||||
}
|
||||
|
||||
const updateQuestion = (questionId, patch) => {
|
||||
const next = cloneQuestions().map((q) => (q.id === questionId ? { ...q, ...patch } : q))
|
||||
emitQuestions(next)
|
||||
}
|
||||
|
||||
const addOption = (questionId) => {
|
||||
const next = cloneQuestions().map((q) => {
|
||||
if (q.id !== questionId) return q
|
||||
return { ...q, answers: [...q.answers, createOption()] }
|
||||
})
|
||||
emitQuestions(next)
|
||||
}
|
||||
|
||||
const removeOption = (questionId, answerId) => {
|
||||
const next = cloneQuestions().map((q) => {
|
||||
if (q.id !== questionId) return q
|
||||
const answers = q.answers.filter((a) => a.id !== answerId)
|
||||
return {
|
||||
...q,
|
||||
answers,
|
||||
correctAnswerId: String(q.correctAnswerId) === String(answerId) ? null : q.correctAnswerId,
|
||||
}
|
||||
})
|
||||
emitQuestions(next)
|
||||
}
|
||||
|
||||
const updateOption = (questionId, answerId, title) => {
|
||||
const next = cloneQuestions().map((q) => {
|
||||
if (q.id !== questionId) return q
|
||||
return {
|
||||
...q,
|
||||
answers: q.answers.map((a) => (a.id === answerId ? { ...a, title } : a)),
|
||||
}
|
||||
})
|
||||
emitQuestions(next)
|
||||
}
|
||||
|
||||
const optionLabel = (index) => defaultLabels[index] || `گزینه ${index + 1}`
|
||||
|
||||
const correctAnswerOptions = (question) =>
|
||||
question.answers.map((a, idx) => ({ value: a.id, label: optionLabel(idx) }))
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.exam-question-builder {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
|
||||
&__card {
|
||||
border: 1px solid #e7e2dd;
|
||||
border-radius: 1.5rem;
|
||||
padding: 0.875rem;
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 2.5%);
|
||||
}
|
||||
|
||||
&__head {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-family: var(--font-family-fa);
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
color: #4b4b4b;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&__remove {
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
border-radius: 9999px;
|
||||
border: none;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
&:hover {
|
||||
background: #f8f8f8;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
&__row {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 0.75rem;
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
grid-template-columns: 5fr 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
&__col--main {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
&__label {
|
||||
display: block;
|
||||
font-family: var(--font-family-fa);
|
||||
font-size: 0.875rem;
|
||||
font-weight: 300;
|
||||
color: var(--color-prim-gray);
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
&__textarea,
|
||||
&__input {
|
||||
width: 100%;
|
||||
border: 1px solid var(--color-thd-gray);
|
||||
border-radius: 1.5rem;
|
||||
padding: 0.5rem 1.25rem;
|
||||
font-family: var(--font-family-fa);
|
||||
font-size: 0.9rem;
|
||||
color: #4b4b4b;
|
||||
outline: none;
|
||||
|
||||
&:focus {
|
||||
box-shadow: 0 0 0 1px var(--color-validate, var(--color-primary));
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
&__textarea {
|
||||
resize: none;
|
||||
min-height: 2.35rem;
|
||||
}
|
||||
|
||||
&__input {
|
||||
height: 2.35rem;
|
||||
font-family: var(--font-family-en);
|
||||
}
|
||||
|
||||
&__answers-row {
|
||||
margin-top: 0.75rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
|
||||
@media (min-width: 1280px) {
|
||||
flex-direction: row;
|
||||
align-items: flex-end;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
|
||||
&__answers {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
&__answers-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&__answer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
border: 1px solid var(--color-thd-gray);
|
||||
border-radius: 1.5rem;
|
||||
padding: 0.375rem 0.875rem;
|
||||
min-width: 10rem;
|
||||
}
|
||||
|
||||
&__answer-input {
|
||||
border: none;
|
||||
outline: none;
|
||||
background: transparent;
|
||||
font-family: var(--font-family-fa);
|
||||
font-size: 0.875rem;
|
||||
color: #4b4b4b;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&__answer-remove,
|
||||
&__answer-add {
|
||||
border: none;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
border-radius: 9999px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
&:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
&__answer-add {
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
background: rgba(104, 104, 104, 5%);
|
||||
}
|
||||
|
||||
&__correct {
|
||||
width: 100%;
|
||||
|
||||
@media (min-width: 1280px) {
|
||||
width: 14rem;
|
||||
}
|
||||
}
|
||||
|
||||
&__add {
|
||||
height: 3rem;
|
||||
width: 100%;
|
||||
border-radius: 1rem;
|
||||
border: 1px dashed #e7e2dd;
|
||||
background: #f7f7f7;
|
||||
color: #b1b1b1;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
&:hover {
|
||||
border-color: var(--color-primary);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,136 @@
|
||||
<template>
|
||||
<form class="exams-filters" @submit.prevent="onSubmit">
|
||||
<div class="exams-filters__grid">
|
||||
<TextField v-model="form.title" name="title" label="عنوان آزمون">
|
||||
<template #appendIcon>
|
||||
<SvgIcon name="book" :size="20" color="var(--color-thd-gray)" />
|
||||
</template>
|
||||
</TextField>
|
||||
<SelectField
|
||||
v-model="form.courseTemplateId"
|
||||
name="courseTemplateId"
|
||||
label="دوره الگو"
|
||||
:options="templateOptions"
|
||||
option-label="title"
|
||||
option-value="id"
|
||||
:searchable="true"
|
||||
:on-search="searchTemplates"
|
||||
/>
|
||||
<DatePickerField v-model="form.fromDate" name="fromDate" label="از تاریخ" :max="todayIso" />
|
||||
<DatePickerField v-model="form.toDate" name="toDate" label="تا تاریخ" :max="todayIso" />
|
||||
</div>
|
||||
|
||||
<div class="exams-filters__actions">
|
||||
<CircleButton
|
||||
v-if="hasFilters"
|
||||
tooltip="حذف فیلتر"
|
||||
bg-color="transparent"
|
||||
size="2.5rem"
|
||||
type="button"
|
||||
@click="onReset"
|
||||
>
|
||||
<template #icon>
|
||||
<SvgIcon name="close" :size="20" />
|
||||
</template>
|
||||
</CircleButton>
|
||||
<CircleButton
|
||||
tooltip="اعمال فیلتر"
|
||||
bg-color="rgba(104, 104, 104, 0.05)"
|
||||
size="2.5rem"
|
||||
type="submit"
|
||||
>
|
||||
<template #icon>
|
||||
<SvgIcon name="funnel" :size="20" color="var(--color-error)" />
|
||||
</template>
|
||||
</CircleButton>
|
||||
</div>
|
||||
</form>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, ref, watch } from 'vue'
|
||||
|
||||
import TextField from '@/components/form/TextField.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: {
|
||||
type: Object,
|
||||
default: () => ({ title: '', courseTemplateId: '', fromDate: '', toDate: '' }),
|
||||
},
|
||||
})
|
||||
|
||||
const emit = defineEmits(['update:modelValue', 'apply', 'reset'])
|
||||
|
||||
const emptyForm = () => ({ title: '', courseTemplateId: '', fromDate: '', toDate: '' })
|
||||
const form = ref({ ...emptyForm(), ...props.modelValue })
|
||||
|
||||
watch(
|
||||
() => props.modelValue,
|
||||
(next) => {
|
||||
form.value = { ...emptyForm(), ...next }
|
||||
},
|
||||
{ deep: true }
|
||||
)
|
||||
|
||||
const todayIso = new Date().toISOString()
|
||||
|
||||
const templateSearch = ref('')
|
||||
const templateFilters = computed(() => ({ title: templateSearch.value }))
|
||||
const templatePagination = ref({ page: 1, perPage: 30 })
|
||||
const { data: templatesResponse } = useAdminCourseTemplatesListQuery(
|
||||
templateFilters,
|
||||
templatePagination
|
||||
)
|
||||
const templateOptions = computed(() => templatesResponse.value?.data ?? [])
|
||||
|
||||
const searchTemplates = useDebounce((q) => {
|
||||
templateSearch.value = q || ''
|
||||
}, 400)
|
||||
|
||||
const hasFilters = computed(() =>
|
||||
Object.values(form.value).some((v) => v !== '' && v !== null && v !== undefined)
|
||||
)
|
||||
|
||||
const onSubmit = () => {
|
||||
emit('update:modelValue', { ...form.value })
|
||||
emit('apply', { ...form.value })
|
||||
}
|
||||
|
||||
const onReset = () => {
|
||||
form.value = emptyForm()
|
||||
emit('update:modelValue', { ...form.value })
|
||||
emit('reset')
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.exams-filters {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 0.625rem;
|
||||
|
||||
&__grid {
|
||||
flex: 1;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 0.5rem;
|
||||
|
||||
@media (min-width: 768px) {
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
&__actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
padding-top: 1.75rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,236 @@
|
||||
<template>
|
||||
<BasicModal width="95%" max-width="60rem" min-width="auto" :show-close-button="true">
|
||||
<template #default="{ close }">
|
||||
<div class="exam-details">
|
||||
<LineTitleBlock title="جزئیات آزمون" title-en="Exam 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>
|
||||
|
||||
<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 }} نمره)
|
||||
</span>
|
||||
</p>
|
||||
<ul class="exam-details__answers">
|
||||
<li
|
||||
v-for="(a, ai) in q.answers || []"
|
||||
:key="a.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>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<NoItems v-else title="یافت نشد" desc="اطلاعات این آزمون در دسترس نیست." />
|
||||
|
||||
<div class="exam-details__divider" />
|
||||
|
||||
<div class="exam-details__footer">
|
||||
<BaseButton text="بستن" custom-class="exam-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 } from 'vue'
|
||||
|
||||
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 { useAdminExamQuery } from '@/services/query/admin-exams'
|
||||
import { formatJalaaliDate } from '@/utils/date-utils'
|
||||
|
||||
defineOptions({ name: 'ExamDetailsModal' })
|
||||
|
||||
const { getModal } = useModal()
|
||||
|
||||
const modalData = computed(() => getModal('ExamDetailsModal')?.data ?? {})
|
||||
const examId = computed(() => modalData.value.id ?? null)
|
||||
|
||||
const { data: exam, isLoading } = useAdminExamQuery(examId, {
|
||||
enabled: () => !!examId.value,
|
||||
})
|
||||
|
||||
const questionsLength = computed(() => exam.value?.questions?.length ?? 0)
|
||||
|
||||
const labels = ['گزینه اول', 'گزینه دوم', 'گزینه سوم', 'گزینه چهارم']
|
||||
const optionLabel = (index) => labels[index] || `گزینه ${index + 1}`
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.exam-details {
|
||||
width: 100%;
|
||||
text-align: start;
|
||||
|
||||
&__head {
|
||||
margin: 1rem 0 0.5rem;
|
||||
}
|
||||
|
||||
&__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 {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 0.25rem;
|
||||
|
||||
@media (min-width: 640px) {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
&__desc,
|
||||
&__questions {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
&__question {
|
||||
padding: 0.625rem 0;
|
||||
border-block-end: 1px solid #f0f0f0;
|
||||
|
||||
&:last-child {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
&__question-title {
|
||||
font-family: var(--font-family-fa);
|
||||
font-size: 0.9rem;
|
||||
color: #4b4b4b;
|
||||
margin: 0 0 0.375rem;
|
||||
}
|
||||
|
||||
&__question-index {
|
||||
color: #b3b3b3;
|
||||
margin-inline-end: 0.25rem;
|
||||
}
|
||||
|
||||
&__question-score {
|
||||
margin-inline-start: 0.25rem;
|
||||
color: #007074;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
&__answers {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
&__answer {
|
||||
font-family: var(--font-family-fa);
|
||||
font-size: 0.85rem;
|
||||
color: #4b4b4b;
|
||||
padding: 0.25rem 0.625rem;
|
||||
border-radius: 0.5rem;
|
||||
background: #fafafa;
|
||||
|
||||
&--correct {
|
||||
background: rgba(0, 154, 18, 8%);
|
||||
color: #009a12;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
&__answer-index {
|
||||
color: #9c9c9c;
|
||||
margin-inline-end: 0.375rem;
|
||||
}
|
||||
|
||||
&__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: 10rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -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>
|
||||
@@ -0,0 +1,233 @@
|
||||
<template>
|
||||
<BasicModal width="95%" max-width="60rem" min-width="auto" :show-close-button="true">
|
||||
<template #default="{ data, close }">
|
||||
<div class="exam-participants">
|
||||
<LineTitleBlock title="شرکتکنندگان" title-en="Participants" />
|
||||
<p v-if="data?.title" class="exam-participants__exam">{{ data.title }}</p>
|
||||
|
||||
<SkeletonLoaderBlock v-if="isLoading" :rows="4" :cols-per-row="1" />
|
||||
<div v-else-if="participants.length > 0" class="exam-participants__list">
|
||||
<div
|
||||
v-for="participant in participants"
|
||||
:key="participant.id"
|
||||
class="exam-participants__row"
|
||||
>
|
||||
<div class="exam-participants__user">
|
||||
<div v-if="participant.avatarUrl" class="exam-participants__avatar">
|
||||
<img :src="participant.avatarUrl" :alt="userName(participant)" />
|
||||
</div>
|
||||
<div v-else class="exam-participants__avatar exam-participants__avatar--placeholder">
|
||||
<SvgIcon name="user" :size="20" color="#bcbcbc" />
|
||||
</div>
|
||||
<div>
|
||||
<p class="exam-participants__name">{{ userName(participant) }}</p>
|
||||
<p class="exam-participants__location">
|
||||
{{ participant.location || locationFromAddress(participant) || '—' }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="exam-participants__pill">
|
||||
<span class="exam-participants__pill-label">تاریخ شرکت:</span>
|
||||
<span class="exam-participants__pill-value">{{ registeredAt(participant) }}</span>
|
||||
</div>
|
||||
|
||||
<BaseButton
|
||||
text="جزئیات"
|
||||
custom-class="exam-participants__details-btn"
|
||||
@click="onShowDetails(participant)"
|
||||
>
|
||||
<template #appendIcon>
|
||||
<SvgIcon name="caret-left" :size="14" color="#fff" />
|
||||
</template>
|
||||
</BaseButton>
|
||||
</div>
|
||||
</div>
|
||||
<NoItems v-else title="موردی یافت نشد" desc="شرکتکنندهای ثبت نشده است." />
|
||||
|
||||
<PaginationBlock :pagination="paginationMeta" @update:page="setPage" />
|
||||
|
||||
<div class="exam-participants__divider" />
|
||||
|
||||
<div class="exam-participants__footer">
|
||||
<BaseButton text="بستن" custom-class="exam-participants__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 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 { formatJalaaliDate } from '@/utils/date-utils'
|
||||
|
||||
defineOptions({ name: 'ExamParticipantsModal' })
|
||||
|
||||
const { getModal, openModal } = useModal()
|
||||
|
||||
const modalData = computed(() => getModal('ExamParticipantsModal')?.data ?? {})
|
||||
const examId = computed(() => modalData.value.id ?? null)
|
||||
|
||||
const filters = ref({})
|
||||
const { pagination, setPage } = usePagination({ page: 1, perPage: 10 })
|
||||
|
||||
const { data, isLoading } = useAdminExamParticipantsQuery(examId, filters, pagination, {
|
||||
enabled: () => !!examId.value,
|
||||
keepPreviousData: true,
|
||||
})
|
||||
|
||||
const participants = computed(() => data.value?.data ?? [])
|
||||
const paginationMeta = computed(() => ({
|
||||
page: pagination.value.page,
|
||||
perPage: pagination.value.perPage,
|
||||
...data.value?.meta,
|
||||
}))
|
||||
|
||||
const userName = (p) => `${p.firstName || ''} ${p.lastName || ''}`.trim() || p.fullName || '—'
|
||||
|
||||
const locationFromAddress = (p) => {
|
||||
const province = p.address?.province?.name || ''
|
||||
const city = p.address?.city?.name || ''
|
||||
return [province, city].filter(Boolean).join('، ')
|
||||
}
|
||||
|
||||
const registeredAt = (p) => p.faRegisteredAt || formatJalaaliDate(p.registeredAt) || '—'
|
||||
|
||||
const onShowDetails = (participant) => {
|
||||
openModal('ExamParticipantDetailsModal', {
|
||||
examId: examId.value,
|
||||
participantId: participant.id,
|
||||
participant,
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.exam-participants {
|
||||
width: 100%;
|
||||
text-align: start;
|
||||
|
||||
&__exam {
|
||||
font-family: var(--font-family-fa);
|
||||
font-size: 0.85rem;
|
||||
color: var(--color-prim-gray);
|
||||
margin: 0 0 0.75rem;
|
||||
}
|
||||
|
||||
&__list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
&__row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.625rem;
|
||||
padding: 0.625rem 0.875rem;
|
||||
background: rgba(255, 255, 255, 60%);
|
||||
border-radius: 0.875rem;
|
||||
box-shadow: 0 4px 10px -6px rgba(241, 241, 241, 70%);
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
&__user {
|
||||
flex: 1 1 40%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.625rem;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
&__avatar {
|
||||
width: 2.75rem;
|
||||
height: 2.75rem;
|
||||
border-radius: 9999px;
|
||||
overflow: hidden;
|
||||
background: #f5f5f5;
|
||||
flex-shrink: 0;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
&--placeholder {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
&__name {
|
||||
font-family: var(--font-family-fa);
|
||||
font-size: 0.95rem;
|
||||
color: #4b4b4b;
|
||||
margin: 0 0 0.25rem;
|
||||
}
|
||||
|
||||
&__location {
|
||||
font-family: var(--font-family-fa);
|
||||
font-size: 0.7rem;
|
||||
color: #989898;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&__pill {
|
||||
background: rgba(107, 107, 107, 5%);
|
||||
border-radius: 0.875rem;
|
||||
padding: 0.375rem 1rem;
|
||||
text-align: center;
|
||||
min-width: 9rem;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
&__pill-label {
|
||||
font-family: var(--font-family-fa);
|
||||
font-size: 0.7rem;
|
||||
color: #535353;
|
||||
margin-inline-end: 0.25rem;
|
||||
}
|
||||
|
||||
&__pill-value {
|
||||
font-family: var(--font-family-en);
|
||||
font-size: 0.7rem;
|
||||
color: #535353;
|
||||
}
|
||||
|
||||
&__details-btn {
|
||||
min-width: 5rem;
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
&__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>
|
||||
@@ -0,0 +1,347 @@
|
||||
<template>
|
||||
<div class="exam-form">
|
||||
<BoxedIconTitleBlock
|
||||
class="exam-form__heading"
|
||||
:title="isEditMode ? 'ویرایش آزمون' : 'طراحی سوال'"
|
||||
desc="در این قسمت شما میتوانید سوالات خود را ایجاد، حذف، ویرایش کنید"
|
||||
>
|
||||
<template #icon>
|
||||
<SvgIcon name="pencil" :size="24" color="var(--color-primary)" />
|
||||
</template>
|
||||
</BoxedIconTitleBlock>
|
||||
|
||||
<form class="exam-form__form" @submit.prevent="onSubmit">
|
||||
<div class="exam-form__card">
|
||||
<div class="exam-form__grid">
|
||||
<SelectField
|
||||
v-model="form.sessionId"
|
||||
name="sessionId"
|
||||
label="جلسه"
|
||||
:options="sessionOptions"
|
||||
option-label="title"
|
||||
option-value="id"
|
||||
:searchable="true"
|
||||
:on-search="searchSessions"
|
||||
:error="errors.sessionId"
|
||||
/>
|
||||
<TextField
|
||||
v-model="form.title"
|
||||
name="title"
|
||||
label="عنوان آزمون"
|
||||
:error="errors.title"
|
||||
@blur="validateAt('title', form.title)"
|
||||
/>
|
||||
<TextField
|
||||
v-model="form.durationMinutes"
|
||||
name="durationMinutes"
|
||||
label="مدت آزمون"
|
||||
inputmode="numeric"
|
||||
:convert-digits="true"
|
||||
:error="errors.durationMinutes"
|
||||
@blur="validateAt('durationMinutes', form.durationMinutes)"
|
||||
/>
|
||||
<TextField
|
||||
v-model="form.passingScore"
|
||||
name="passingScore"
|
||||
label="حداقل نمره قبولی"
|
||||
inputmode="numeric"
|
||||
:convert-digits="true"
|
||||
:error="errors.passingScore"
|
||||
@blur="validateAt('passingScore', form.passingScore)"
|
||||
/>
|
||||
<DatePickerField
|
||||
v-model="form.endDate"
|
||||
name="endDate"
|
||||
label="تاریخ اعتبار"
|
||||
:error="errors.endDate"
|
||||
/>
|
||||
<div class="exam-form__toggle-cell">
|
||||
<ToggleSwitch v-model="form.randomize" label="به صورت رندوم باشد" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="exam-form__card">
|
||||
<TextareaField
|
||||
v-model="form.description"
|
||||
name="description"
|
||||
label="توضیحات آزمون"
|
||||
:row="4"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<ExamQuestionBuilder v-model="questions" :disabled="submitting" />
|
||||
<p v-if="questionError" class="exam-form__error">{{ questionError }}</p>
|
||||
</div>
|
||||
|
||||
<div class="exam-form__divider" />
|
||||
|
||||
<div class="exam-form__actions">
|
||||
<BaseButton
|
||||
variant="transparent"
|
||||
text="منصرف شدم"
|
||||
custom-class="exam-form__btn-cancel"
|
||||
@click="onCancel"
|
||||
>
|
||||
<template #prependIcon>
|
||||
<SvgIcon name="caret-right" :size="14" color="var(--color-sec-gray)" />
|
||||
</template>
|
||||
</BaseButton>
|
||||
<BaseButton
|
||||
type="submit"
|
||||
:text="isEditMode ? 'ذخیره تغییرات' : 'تایید اطلاعات'"
|
||||
:loading="submitting"
|
||||
custom-class="exam-form__btn-submit"
|
||||
>
|
||||
<template #appendIcon>
|
||||
<SvgIcon name="arrow-left" :size="20" color="#fff" />
|
||||
</template>
|
||||
</BaseButton>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, ref, watch } from 'vue'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
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 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()
|
||||
const queryClient = useQueryClient()
|
||||
|
||||
const examId = computed(() => (route.params.id ? Number(route.params.id) : null))
|
||||
const isEditMode = computed(() => !!examId.value)
|
||||
|
||||
const form = ref({
|
||||
title: '',
|
||||
sessionId: '',
|
||||
endDate: '',
|
||||
durationMinutes: '',
|
||||
passingScore: '',
|
||||
randomize: true,
|
||||
description: '',
|
||||
})
|
||||
|
||||
const createId = (prefix) => `${prefix}-${Date.now()}-${Math.random().toString(16).slice(2)}`
|
||||
|
||||
const blankQuestion = () => ({
|
||||
id: createId('question'),
|
||||
title: '',
|
||||
score: '',
|
||||
correctAnswerId: null,
|
||||
answers: [
|
||||
{ id: createId('answer'), title: '' },
|
||||
{ id: createId('answer'), title: '' },
|
||||
],
|
||||
})
|
||||
|
||||
const questions = ref([blankQuestion()])
|
||||
const questionError = ref('')
|
||||
|
||||
const schema = examSchema
|
||||
|
||||
const { validate, validateAt, errors } = useYup(schema)
|
||||
|
||||
const sessionSearch = ref('')
|
||||
const sessionFilters = computed(() => ({ title: sessionSearch.value }))
|
||||
const sessionPagination = ref({ page: 1, perPage: 30 })
|
||||
const { data: sessionsResponse } = useAdminSessionsListQuery(sessionFilters, sessionPagination)
|
||||
const selectedSession = ref(null)
|
||||
const sessionOptions = computed(() => {
|
||||
const base = sessionsResponse.value?.data ?? []
|
||||
if (selectedSession.value && !base.some((s) => s.id === selectedSession.value.id)) {
|
||||
return [...base, selectedSession.value]
|
||||
}
|
||||
return base
|
||||
})
|
||||
|
||||
const searchSessions = useDebounce((q) => {
|
||||
sessionSearch.value = q || ''
|
||||
}, 400)
|
||||
|
||||
const { data: existingExam } = useAdminExamQuery(examId, {
|
||||
enabled: () => !!examId.value,
|
||||
})
|
||||
|
||||
const normalizeQuestions = (raw = []) => {
|
||||
if (!Array.isArray(raw) || raw.length === 0) return [blankQuestion()]
|
||||
return raw.map((q, qIdx) => {
|
||||
const answersSrc = q.answers || q.options || q.choices || []
|
||||
const answers = (Array.isArray(answersSrc) ? answersSrc : []).map((a, aIdx) => ({
|
||||
id: a?.id || createId(`answer-${qIdx}-${aIdx}`),
|
||||
title: typeof a === 'string' ? a : a?.title || a?.text || a?.label || '',
|
||||
}))
|
||||
return {
|
||||
id: q.id || createId(`question-${qIdx}`),
|
||||
title: q.title || q.question || q.text || '',
|
||||
score: q.score ?? q.barom ?? '',
|
||||
correctAnswerId: q.correctAnswerId || q.correctOptionId || q.correctAnswer?.id || null,
|
||||
answers: answers.length > 0 ? answers : blankQuestion().answers,
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
watch(existingExam, (exam) => {
|
||||
if (!exam) return
|
||||
if (exam.session) selectedSession.value = exam.session
|
||||
form.value = {
|
||||
title: exam.title || '',
|
||||
sessionId: exam.session?.id || exam.sessionId || '',
|
||||
endDate: exam.endDate || '',
|
||||
durationMinutes: exam.durationMinutes ?? '',
|
||||
passingScore: exam.passingScore ?? '',
|
||||
randomize: exam.randomize ?? true,
|
||||
description: exam.description || '',
|
||||
}
|
||||
questions.value = normalizeQuestions(exam.questions)
|
||||
})
|
||||
|
||||
const validateQuestionList = () => {
|
||||
const list = questions.value
|
||||
if (list.some((q) => !String(q.title || '').trim() || !String(q.score || '').trim())) {
|
||||
questionError.value = 'لطفا متن سوال و بارم هر سوال را وارد کنید.'
|
||||
return null
|
||||
}
|
||||
if (list.some((q) => q.answers.filter((a) => a.title?.trim()).length < 2)) {
|
||||
questionError.value = 'برای هر سوال حداقل دو گزینه وارد کنید.'
|
||||
return null
|
||||
}
|
||||
if (
|
||||
list.some((q) => {
|
||||
if (!q.correctAnswerId) return true
|
||||
return !q.answers.some((a) => String(a.id) === String(q.correctAnswerId) && a.title?.trim())
|
||||
})
|
||||
) {
|
||||
questionError.value = 'گزینه صحیح هر سوال را از گزینههای موجود انتخاب کنید.'
|
||||
return null
|
||||
}
|
||||
questionError.value = ''
|
||||
return list.map((q) => ({
|
||||
id: q.id,
|
||||
title: q.title.trim(),
|
||||
score: q.score,
|
||||
correctAnswerId: q.correctAnswerId,
|
||||
answers: q.answers.filter((a) => a.title?.trim()).map((a) => ({ id: a.id, title: a.title })),
|
||||
}))
|
||||
}
|
||||
|
||||
const addMutation = useAddAdminExamMutation()
|
||||
const updateMutation = useUpdateAdminExamMutation()
|
||||
|
||||
const submitting = computed(() => addMutation.isPending.value || updateMutation.isPending.value)
|
||||
|
||||
const onSubmit = async () => {
|
||||
const { isValid, payload } = await validate(form.value)
|
||||
const cleanQuestions = validateQuestionList()
|
||||
if (!isValid || !cleanQuestions) return
|
||||
const finalPayload = {
|
||||
...payload,
|
||||
questions: cleanQuestions,
|
||||
questionsCount: cleanQuestions.length,
|
||||
}
|
||||
if (isEditMode.value) {
|
||||
await updateMutation.mutateAsync({ id: examId.value, payload: finalPayload })
|
||||
} else {
|
||||
await addMutation.mutateAsync(finalPayload)
|
||||
}
|
||||
await queryClient.invalidateQueries({ queryKey: adminExamsKeys.all })
|
||||
router.push({ name: 'admin-exams' })
|
||||
}
|
||||
|
||||
const onCancel = () => router.push({ name: 'admin-exams' })
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.exam-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
|
||||
&__heading {
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
&__form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
&__card {
|
||||
background: rgba(255, 255, 255, 60%);
|
||||
border-radius: 1.5rem;
|
||||
padding: 1rem;
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 2.5%);
|
||||
}
|
||||
|
||||
&__grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 0.75rem;
|
||||
|
||||
@media (min-width: 768px) {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
|
||||
@media (min-width: 1280px) {
|
||||
grid-template-columns: repeat(6, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
&__toggle-cell {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
min-height: 4.25rem;
|
||||
}
|
||||
|
||||
&__error {
|
||||
margin-top: 0.5rem;
|
||||
padding-inline: 0.5rem;
|
||||
color: var(--color-error);
|
||||
font-family: var(--font-family-fa);
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
&__divider {
|
||||
border-block-end: 1px solid var(--color-thd-gray);
|
||||
margin-block: 1rem;
|
||||
}
|
||||
|
||||
&__actions {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 0.625rem;
|
||||
}
|
||||
|
||||
&__btn-cancel {
|
||||
min-width: 9rem;
|
||||
}
|
||||
|
||||
&__btn-submit {
|
||||
min-width: 13rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,152 @@
|
||||
<template>
|
||||
<div class="exams-page">
|
||||
<BoxedIconTitleBlock
|
||||
class="exams-page__heading"
|
||||
title="مدیریت آزمونها"
|
||||
desc="در این قسمت میتوانید آزمونهای خود را مدیریت کنید"
|
||||
>
|
||||
<template #icon>
|
||||
<SvgIcon name="pencil" :size="24" color="var(--color-primary)" />
|
||||
</template>
|
||||
</BoxedIconTitleBlock>
|
||||
|
||||
<ExamsFilters v-model="filters" @apply="onFilterApply" @reset="onFilterReset" />
|
||||
|
||||
<div class="exams-page__list-header">
|
||||
<SimpleTitleIconBlock title="لیست همه آزمونها" class="exams-page__list-title">
|
||||
<template #header-icon>
|
||||
<SvgIcon name="list-bullets" :size="16" color="#bcbcbc" />
|
||||
</template>
|
||||
</SimpleTitleIconBlock>
|
||||
<BaseButton text="افزودن آزمون جدید" custom-class="exams-page__add-btn" @click="onAdd">
|
||||
<template #appendIcon>
|
||||
<SvgIcon name="plus" :size="18" color="#fff" />
|
||||
</template>
|
||||
</BaseButton>
|
||||
</div>
|
||||
|
||||
<SkeletonLoaderBlock v-if="isLoading" :rows="6" :cols-per-row="1" />
|
||||
<div v-else-if="exams.length > 0">
|
||||
<ExamItem
|
||||
v-for="exam in exams"
|
||||
:key="exam.id"
|
||||
:exam="exam"
|
||||
@edit="onEdit"
|
||||
@delete="onAskDelete"
|
||||
@show-details="onShowDetails"
|
||||
@show-participants="onShowParticipants"
|
||||
/>
|
||||
</div>
|
||||
<NoItems v-else title="متاسفیم" desc="آزمونی برای نمایش وجود ندارد." />
|
||||
|
||||
<PaginationBlock :pagination="paginationMeta" @update:page="setPage" />
|
||||
|
||||
<ExamParticipantsModal v-if="isModal('ExamParticipantsModal')" />
|
||||
<ExamParticipantDetailsModal v-if="isModal('ExamParticipantDetailsModal')" />
|
||||
<ExamDetailsModal v-if="isModal('ExamDetailsModal')" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, ref } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
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 ExamItem from '@/features/admin/exams/components/ExamItem.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()
|
||||
const { openModal, isModal } = useModal()
|
||||
|
||||
const filters = ref({ title: '', courseTemplateId: '', fromDate: '', toDate: '' })
|
||||
const { pagination, setPage, reset: resetPagination } = usePagination({ page: 1, perPage: 10 })
|
||||
|
||||
const { data, isLoading } = useAdminExamsListQuery(filters, pagination, {
|
||||
keepPreviousData: true,
|
||||
})
|
||||
|
||||
const exams = computed(() => data.value?.data ?? [])
|
||||
const paginationMeta = computed(() => ({
|
||||
page: pagination.value.page,
|
||||
perPage: pagination.value.perPage,
|
||||
...data.value?.meta,
|
||||
}))
|
||||
|
||||
const onFilterApply = () => resetPagination()
|
||||
const onFilterReset = () => resetPagination()
|
||||
|
||||
const onAdd = () => {
|
||||
router.push({ name: 'admin-add-exam' }).catch(() => {})
|
||||
}
|
||||
|
||||
const onEdit = (exam) => {
|
||||
router.push({ name: 'admin-edit-exam', params: { id: exam.id } }).catch(() => {})
|
||||
}
|
||||
|
||||
const onShowDetails = (exam) => {
|
||||
openModal('ExamDetailsModal', { id: exam.id })
|
||||
}
|
||||
|
||||
const onShowParticipants = (exam) => {
|
||||
openModal('ExamParticipantsModal', { id: exam.id, title: exam.title })
|
||||
}
|
||||
|
||||
const invalidate = () => queryClient.invalidateQueries({ queryKey: adminExamsKeys.all })
|
||||
|
||||
const deleteMutation = useDeleteAdminExamMutation()
|
||||
|
||||
const onAskDelete = (exam) => {
|
||||
openModal('ConfirmModal', {
|
||||
title: `حذف ${exam.title}`,
|
||||
message: `بعد از حذف امکان بازگشت وجود ندارد، آیا مطمئن هستید که میخواهید <strong>${exam.title}</strong> را حذف کنید؟`,
|
||||
onConfirm: () => deleteMutation.mutate(exam.id, { onSuccess: invalidate }),
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.exams-page {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
|
||||
&__heading {
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
&__list-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.625rem;
|
||||
margin-bottom: 0.375rem;
|
||||
}
|
||||
|
||||
&__list-title {
|
||||
flex: 1;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
&__add-btn {
|
||||
min-width: fit-content;
|
||||
padding: 0 1.25rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,10 @@
|
||||
import { number, object, string } from 'yup'
|
||||
|
||||
export const examSchema = object().shape({
|
||||
title: string().required().min(3),
|
||||
sessionId: string().required(),
|
||||
endDate: string().required(),
|
||||
durationMinutes: number().typeError('مدت زمان باید عدد باشد').required(),
|
||||
passingScore: number().typeError('حد نصاب قبولی باید عدد باشد').required(),
|
||||
description: string().nullable().notRequired(),
|
||||
})
|
||||
Reference in New Issue
Block a user