first commit
This commit is contained in:
sajjadtalkhabi
@@ -0,0 +1,325 @@
|
||||
<template>
|
||||
<BasicModal width="95%" max-width="64rem" min-width="auto" :show-close-button="true">
|
||||
<template #default="{ close }">
|
||||
<form class="add-assignment" @submit.prevent="onSubmit(close)">
|
||||
<LineTitleBlock
|
||||
:title="isEditMode ? 'ویرایش تکلیف' : 'افزودن تکلیف جدید'"
|
||||
:title-en="isEditMode ? 'Edit Assignment' : 'Add Assignment'"
|
||||
/>
|
||||
|
||||
<div class="add-assignment__grid">
|
||||
<TextField
|
||||
v-model="form.title"
|
||||
name="title"
|
||||
label="عنوان تکلیف"
|
||||
:error="errors.title"
|
||||
@blur="validateAt('title', form.title)"
|
||||
>
|
||||
<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"
|
||||
:error="errors.courseTemplateId"
|
||||
@update:model-value="onCourseChange"
|
||||
/>
|
||||
<SelectField
|
||||
v-model="form.sessionId"
|
||||
name="sessionId"
|
||||
label="جلسه مرتبط"
|
||||
:options="sessionOptions"
|
||||
option-label="title"
|
||||
option-value="id"
|
||||
:searchable="true"
|
||||
:on-search="searchSessions"
|
||||
:disabled="!form.courseTemplateId"
|
||||
:error="errors.sessionId"
|
||||
/>
|
||||
<DatePickerField
|
||||
v-model="form.startDate"
|
||||
name="startDate"
|
||||
label="تاریخ شروع"
|
||||
:error="errors.startDate"
|
||||
/>
|
||||
<DatePickerField
|
||||
v-model="form.endDate"
|
||||
name="endDate"
|
||||
label="تاریخ پایان"
|
||||
:error="errors.endDate"
|
||||
/>
|
||||
<SelectField
|
||||
v-model="form.priority"
|
||||
name="priority"
|
||||
label="اولویت"
|
||||
:options="priorityOptions"
|
||||
option-label="label"
|
||||
option-value="value"
|
||||
:error="errors.priority"
|
||||
/>
|
||||
<div class="add-assignment__cell--full">
|
||||
<TextareaField
|
||||
v-model="form.description"
|
||||
name="description"
|
||||
label="توضیحات تکلیف"
|
||||
:row="5"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="add-assignment__files">
|
||||
<LineTitleBlock title="فایلهای تکلیف" title-en="Assignment Files" />
|
||||
<FileUploader
|
||||
v-model="attachments"
|
||||
accept=".mp4,.mov,.avi,.mp3,.wav,.jpg,.jpeg,.png,.pdf,.txt,.doc,.docx"
|
||||
:multiple="true"
|
||||
:max-files="10"
|
||||
context="assignment"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="add-assignment__divider" />
|
||||
|
||||
<div class="add-assignment__actions">
|
||||
<BaseButton
|
||||
variant="transparent"
|
||||
text="منصرف شدم"
|
||||
custom-class="add-assignment__btn-cancel"
|
||||
@click="close"
|
||||
>
|
||||
<template #prependIcon>
|
||||
<SvgIcon name="caret-right" :size="14" color="var(--color-sec-gray)" />
|
||||
</template>
|
||||
</BaseButton>
|
||||
<BaseButton
|
||||
type="submit"
|
||||
text="تایید اطلاعات"
|
||||
:loading="submitting"
|
||||
custom-class="add-assignment__btn-submit"
|
||||
>
|
||||
<template #appendIcon>
|
||||
<SvgIcon name="arrow-left" :size="18" color="#fff" />
|
||||
</template>
|
||||
</BaseButton>
|
||||
</div>
|
||||
</form>
|
||||
</template>
|
||||
</BasicModal>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, ref, watch } from 'vue'
|
||||
import { useQueryClient } from '@tanstack/vue-query'
|
||||
import BasicModal from '@/components/BasicModal.vue'
|
||||
import BaseButton from '@/components/BaseButton.vue'
|
||||
import LineTitleBlock from '@/components/LineTitleBlock.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 FileUploader from '@/components/form/FileUploader.vue'
|
||||
import SvgIcon from '@/components/icons/SvgIcon.vue'
|
||||
import useModal from '@/composables/useModal'
|
||||
import useYup from '@/composables/useYup'
|
||||
import {
|
||||
adminAssignmentsKeys,
|
||||
useAddAdminAssignmentMutation,
|
||||
useAdminAssignmentQuery,
|
||||
useUpdateAdminAssignmentMutation,
|
||||
} from '@/services/query/admin-assignments'
|
||||
import { useAdminCourseTemplatesListQuery } from '@/services/query/admin-course-templates'
|
||||
import { useAdminSessionsListQuery } from '@/services/query/admin-sessions'
|
||||
import useDebounce from '@/composables/useDebounce'
|
||||
import { ASSIGNMENT_PRIORITY } from '@/enums'
|
||||
import { assignmentSchema } from '@/features/admin/assignments/schema'
|
||||
|
||||
defineOptions({ name: 'AddAssignmentModal' })
|
||||
|
||||
const queryClient = useQueryClient()
|
||||
const { getModal } = useModal()
|
||||
|
||||
const modalData = computed(() => getModal('AddAssignmentModal')?.data ?? {})
|
||||
const assignmentId = computed(() => modalData.value.id ?? null)
|
||||
const isEditMode = computed(() => !!assignmentId.value)
|
||||
|
||||
const priorityOptions = Object.entries(ASSIGNMENT_PRIORITY).map(([value, label]) => ({
|
||||
value,
|
||||
label,
|
||||
}))
|
||||
|
||||
const form = ref({
|
||||
title: '',
|
||||
courseTemplateId: '',
|
||||
sessionId: '',
|
||||
startDate: '',
|
||||
endDate: '',
|
||||
priority: 'mandatory',
|
||||
description: '',
|
||||
})
|
||||
|
||||
const attachments = ref([])
|
||||
|
||||
const schema = assignmentSchema
|
||||
|
||||
const { validate, validateAt, errors, resetErrors } = useYup(schema)
|
||||
|
||||
const templateSearch = ref('')
|
||||
const templateFilters = computed(() => ({ title: templateSearch.value }))
|
||||
const templatePagination = ref({ page: 1, perPage: 30 })
|
||||
const { data: templatesResponse } = useAdminCourseTemplatesListQuery(
|
||||
templateFilters,
|
||||
templatePagination
|
||||
)
|
||||
const selectedTemplate = ref(null)
|
||||
const templateOptions = computed(() => {
|
||||
const base = templatesResponse.value?.data ?? []
|
||||
if (selectedTemplate.value && !base.some((t) => t.id === selectedTemplate.value.id)) {
|
||||
return [...base, selectedTemplate.value]
|
||||
}
|
||||
return base
|
||||
})
|
||||
|
||||
const sessionSearch = ref('')
|
||||
const sessionFilters = computed(() => ({
|
||||
title: sessionSearch.value,
|
||||
courseTemplateId: form.value.courseTemplateId,
|
||||
}))
|
||||
const sessionPagination = ref({ page: 1, perPage: 30 })
|
||||
const { data: sessionsResponse } = useAdminSessionsListQuery(sessionFilters, sessionPagination, {
|
||||
enabled: () => !!form.value.courseTemplateId,
|
||||
})
|
||||
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 searchTemplates = useDebounce((q) => {
|
||||
templateSearch.value = q || ''
|
||||
}, 400)
|
||||
const searchSessions = useDebounce((q) => {
|
||||
sessionSearch.value = q || ''
|
||||
}, 400)
|
||||
|
||||
const onCourseChange = (value) => {
|
||||
form.value.courseTemplateId = value
|
||||
form.value.sessionId = ''
|
||||
selectedSession.value = null
|
||||
}
|
||||
|
||||
const { data: existingAssignment } = useAdminAssignmentQuery(assignmentId, {
|
||||
enabled: () => !!assignmentId.value,
|
||||
})
|
||||
|
||||
watch(existingAssignment, (assignment) => {
|
||||
if (!assignment) return
|
||||
const tpl = assignment.courseTemplate
|
||||
const sessionEntity = assignment.session
|
||||
if (tpl) selectedTemplate.value = tpl
|
||||
if (sessionEntity) selectedSession.value = sessionEntity
|
||||
form.value = {
|
||||
title: assignment.title || '',
|
||||
courseTemplateId: tpl?.id || assignment.courseTemplateId || '',
|
||||
sessionId: sessionEntity?.id || assignment.sessionId || '',
|
||||
startDate: assignment.startDate || '',
|
||||
endDate: assignment.endDate || '',
|
||||
priority: assignment.priority || 'mandatory',
|
||||
description: assignment.description || '',
|
||||
}
|
||||
attachments.value = Array.isArray(assignment.attachments)
|
||||
? assignment.attachments.map((file) => ({
|
||||
id: file.id,
|
||||
name: file.title || `فایل ${file.id}`,
|
||||
url: file.fileUrl || '',
|
||||
type: file.type || 'other',
|
||||
}))
|
||||
: []
|
||||
})
|
||||
|
||||
const addMutation = useAddAdminAssignmentMutation()
|
||||
const updateMutation = useUpdateAdminAssignmentMutation()
|
||||
|
||||
const submitting = computed(() => addMutation.isPending.value || updateMutation.isPending.value)
|
||||
|
||||
const onSubmit = async (close) => {
|
||||
const { isValid, payload } = await validate(form.value)
|
||||
if (!isValid) return
|
||||
const finalPayload = {
|
||||
...payload,
|
||||
attachments: attachments.value.map((file, index) => ({
|
||||
fileId: file.id,
|
||||
type: file.type || 'other',
|
||||
title: file.name,
|
||||
order: index + 1,
|
||||
})),
|
||||
}
|
||||
if (isEditMode.value) {
|
||||
await updateMutation.mutateAsync({ id: assignmentId.value, payload: finalPayload })
|
||||
} else {
|
||||
await addMutation.mutateAsync(finalPayload)
|
||||
}
|
||||
await queryClient.invalidateQueries({ queryKey: adminAssignmentsKeys.all })
|
||||
resetErrors()
|
||||
close()
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.add-assignment {
|
||||
width: 100%;
|
||||
text-align: start;
|
||||
padding: 0.5rem 0;
|
||||
|
||||
&__grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 0.5rem;
|
||||
margin-block: 0.75rem;
|
||||
|
||||
@media (min-width: 768px) {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
|
||||
@media (min-width: 1280px) {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
&__cell--full {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
&__files {
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
&__divider {
|
||||
border-block-end: 1px solid var(--color-thd-gray);
|
||||
margin-block: 1.5rem;
|
||||
}
|
||||
|
||||
&__actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 0.625rem;
|
||||
}
|
||||
|
||||
&__btn-cancel {
|
||||
min-width: 9rem;
|
||||
}
|
||||
|
||||
&__btn-submit {
|
||||
min-width: 12rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user