first commit
This commit is contained in:
sajjadtalkhabi
@@ -0,0 +1,318 @@
|
||||
<template>
|
||||
<BasicModal width="95%" max-width="60rem" min-width="auto" :show-close-button="true">
|
||||
<template #default="{ close }">
|
||||
<form class="offered-course" @submit.prevent="onSubmit(close)">
|
||||
<LineTitleBlock :title="modeTitle" title-en="Offered Course" />
|
||||
|
||||
<div class="offered-course__grid">
|
||||
<div class="offered-course__image-col">
|
||||
<ImageCropper
|
||||
v-model="image"
|
||||
name="image"
|
||||
bg-color="#eeeeee"
|
||||
@crop="onImageCropped"
|
||||
@error="onImageError"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="offered-course__main-col">
|
||||
<div class="offered-course__row">
|
||||
<div class="offered-course__cell">
|
||||
<SelectField
|
||||
v-model="form.termId"
|
||||
name="termId"
|
||||
label="ترم"
|
||||
:options="termOptions"
|
||||
option-label="title"
|
||||
option-value="id"
|
||||
:searchable="true"
|
||||
:on-search="searchTerms"
|
||||
:error="errors.termId"
|
||||
/>
|
||||
</div>
|
||||
<div class="offered-course__cell">
|
||||
<SelectField
|
||||
v-model="form.templateId"
|
||||
name="templateId"
|
||||
label="دوره الگو"
|
||||
:options="templateOptions"
|
||||
option-label="title"
|
||||
option-value="id"
|
||||
:searchable="true"
|
||||
:on-search="searchTemplates"
|
||||
:error="errors.templateId"
|
||||
/>
|
||||
</div>
|
||||
<div class="offered-course__cell">
|
||||
<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>
|
||||
</div>
|
||||
<div class="offered-course__cell">
|
||||
<TextField
|
||||
v-model="form.capacity"
|
||||
name="capacity"
|
||||
label="ظرفیت (نفر)"
|
||||
inputmode="numeric"
|
||||
:convert-digits="true"
|
||||
:error="errors.capacity"
|
||||
@blur="validateAt('capacity', form.capacity)"
|
||||
/>
|
||||
</div>
|
||||
<div class="offered-course__cell offered-course__toggle-cell">
|
||||
<ToggleSwitch v-model="form.isActive" label="دوره فعال باشد" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="offered-course__divider" />
|
||||
|
||||
<div class="offered-course__actions">
|
||||
<BaseButton
|
||||
variant="transparent"
|
||||
text="منصرف شدم"
|
||||
custom-class="offered-course__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="offered-course__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 { toast } from 'vue3-toastify'
|
||||
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 SelectField from '@/components/form/SelectField.vue'
|
||||
import ToggleSwitch from '@/components/form/ToggleSwitch.vue'
|
||||
import ImageCropper from '@/components/form/ImageCropper.vue'
|
||||
import SvgIcon from '@/components/icons/SvgIcon.vue'
|
||||
import useModal from '@/composables/useModal'
|
||||
import useYup from '@/composables/useYup'
|
||||
import {
|
||||
adminCoursesKeys,
|
||||
useAddAdminCourseMutation,
|
||||
useAdminCourseQuery,
|
||||
useUpdateAdminCourseMutation,
|
||||
} from '@/services/query/admin-courses'
|
||||
import { useUploadTemporaryMutation } from '@/services/query/auth'
|
||||
import { useAdminTermsListQuery } from '@/services/query/admin-terms'
|
||||
import { useAdminCourseTemplatesListQuery } from '@/services/query/admin-course-templates'
|
||||
import useDebounce from '@/composables/useDebounce'
|
||||
import { offeredCourseSchema } from '@/features/admin/courses/schema'
|
||||
import { objectToFormData } from '@/utils/object-to-formdata'
|
||||
|
||||
defineOptions({ name: 'AddOfferedCourseModal' })
|
||||
|
||||
const { getModal } = useModal()
|
||||
const queryClient = useQueryClient()
|
||||
|
||||
const modalData = computed(() => getModal('AddOfferedCourseModal')?.data ?? {})
|
||||
const mode = computed(() => modalData.value.mode || 'add')
|
||||
const courseId = computed(() => modalData.value.courseId ?? null)
|
||||
const isEditMode = computed(() => mode.value === 'edit')
|
||||
|
||||
const modeTitle = computed(() =>
|
||||
isEditMode.value ? 'ویرایش دوره ارائه شده' : 'افزودن دوره ارائه شده'
|
||||
)
|
||||
|
||||
const form = ref({
|
||||
termId: '',
|
||||
templateId: '',
|
||||
title: '',
|
||||
capacity: '',
|
||||
imageId: null,
|
||||
isActive: false,
|
||||
})
|
||||
const image = ref(null)
|
||||
|
||||
const schema = offeredCourseSchema
|
||||
|
||||
const { validate, validateAt, errors, resetErrors } = useYup(schema)
|
||||
|
||||
const termSearch = ref('')
|
||||
const termFilters = computed(() => ({ title: termSearch.value }))
|
||||
const termPagination = ref({ page: 1, perPage: 30 })
|
||||
const { data: termsResponse } = useAdminTermsListQuery(termFilters, termPagination)
|
||||
const selectedTerm = ref(null)
|
||||
const termOptions = computed(() => {
|
||||
const base = termsResponse.value?.data ?? []
|
||||
if (selectedTerm.value && !base.some((t) => t.id === selectedTerm.value.id)) {
|
||||
return [...base, selectedTerm.value]
|
||||
}
|
||||
return base
|
||||
})
|
||||
|
||||
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 searchTerms = useDebounce((q) => {
|
||||
termSearch.value = q || ''
|
||||
}, 400)
|
||||
const searchTemplates = useDebounce((q) => {
|
||||
templateSearch.value = q || ''
|
||||
}, 400)
|
||||
|
||||
const { data: existingCourse } = useAdminCourseQuery(courseId, {
|
||||
enabled: () => isEditMode.value && !!courseId.value,
|
||||
})
|
||||
|
||||
watch(existingCourse, (course) => {
|
||||
if (!course) return
|
||||
if (course.term) selectedTerm.value = course.term
|
||||
if (course.template) selectedTemplate.value = course.template
|
||||
form.value = {
|
||||
termId: course.term?.id || course.termId || '',
|
||||
templateId: course.template?.id || course.templateId || '',
|
||||
title: course.title || '',
|
||||
capacity: course.capacity ?? '',
|
||||
imageId: course.imageId || null,
|
||||
isActive: course.isActive ?? false,
|
||||
}
|
||||
if (course.image) image.value = { url: course.image }
|
||||
})
|
||||
|
||||
const uploadMutation = useUploadTemporaryMutation()
|
||||
|
||||
const onImageCropped = async (file) => {
|
||||
try {
|
||||
const formData = objectToFormData({ file, subType: 'avatar', context: 'course' })
|
||||
const response = await uploadMutation.mutateAsync(formData)
|
||||
const payload = response?.data ?? response
|
||||
image.value = { url: payload?.url, uploadId: payload?.uploadId, ...payload }
|
||||
form.value.imageId = payload?.uploadId || payload?.id
|
||||
} catch {
|
||||
/* handled globally */
|
||||
}
|
||||
}
|
||||
|
||||
const onImageError = (msg) => toast.error(msg)
|
||||
|
||||
const addMutation = useAddAdminCourseMutation()
|
||||
const updateMutation = useUpdateAdminCourseMutation()
|
||||
|
||||
const submitting = computed(() => addMutation.isPending.value || updateMutation.isPending.value)
|
||||
|
||||
const onSubmit = async (close) => {
|
||||
const { isValid, payload } = await validate(form.value)
|
||||
if (!isValid) return
|
||||
if (isEditMode.value) {
|
||||
await updateMutation.mutateAsync({ id: courseId.value, payload })
|
||||
} else {
|
||||
await addMutation.mutateAsync(payload)
|
||||
}
|
||||
await queryClient.invalidateQueries({ queryKey: adminCoursesKeys.all })
|
||||
resetErrors()
|
||||
close()
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.offered-course {
|
||||
width: 100%;
|
||||
text-align: start;
|
||||
|
||||
&__grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 1rem;
|
||||
margin-block: 0.75rem;
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
grid-template-columns: 4fr 8fr;
|
||||
}
|
||||
}
|
||||
|
||||
&__image-col {
|
||||
order: 2;
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
order: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&__main-col {
|
||||
order: 1;
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
order: 2;
|
||||
padding-inline-start: 1.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
&__row {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 0.5rem;
|
||||
|
||||
@media (min-width: 640px) {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
&__toggle-cell {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&__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