From 861773b05ba1ab66ed5a65dcb4e44e49786f3da9 Mon Sep 17 00:00:00 2001
From: Server Migration <migration@madresebanoo.ir>
Date: Sun, 16 Aug 2026 17:03:36 +0330
Subject: [PATCH] fix: make admin media uploads reliable

---
 src/components/form/FileUploader.vue          | 20 +++++++-
 src/enums/index.js                            | 12 +++--
 .../admin/courses/pages/CourseFormPage.vue    | 29 ++++++++---
 .../admin/courses/pages/CoursesListPage.vue   |  7 ++-
 src/features/admin/courses/schema/index.js    |  3 +-
 .../admin/sessions/pages/SessionFormPage.vue  | 51 +++++++++++++++----
 .../admin/sessions/pages/SessionsListPage.vue |  7 ++-
 src/services/api/auth.js                      |  6 ++-
 src/utils/error-handler.js                    | 12 +++++
 9 files changed, 119 insertions(+), 28 deletions(-)

diff --git a/src/components/form/FileUploader.vue b/src/components/form/FileUploader.vue
index c6af20a..fd8b668 100644
--- a/src/components/form/FileUploader.vue
+++ b/src/components/form/FileUploader.vue
@@ -3,9 +3,12 @@
     <label class="file-uploader__dropzone-wrap">
       <div
         class="file-uploader__dropzone"
-        :class="{ 'file-uploader__dropzone--active': isDragging }"
+        :class="{
+          'file-uploader__dropzone--active': isDragging,
+          'file-uploader__dropzone--disabled': disabled,
+        }"
         @dragover.prevent
-        @dragenter="isDragging = true"
+        @dragenter="onDragEnter"
         @dragleave="isDragging = false"
         @drop="handleDrop"
       >
@@ -19,6 +22,7 @@
           class="file-uploader__input"
           :accept="accept"
           :multiple="multiple"
+          :disabled="disabled"
           @change="handleFileSelect"
         />
       </div>
@@ -75,6 +79,7 @@ const props = defineProps({
   multiple: { type: Boolean, default: true },
   maxFiles: { type: Number, default: 10 },
   maxSize: { type: Number, default: 0 },
+  disabled: { type: Boolean, default: false },
 })
 
 const emit = defineEmits(['update:modelValue', 'select', 'remove', 'error'])
@@ -82,6 +87,7 @@ const emit = defineEmits(['update:modelValue', 'select', 'remove', 'error'])
 const isDragging = ref(false)
 
 const handleFileSelect = (event) => {
+  if (props.disabled) return
   const files = [...event.target.files]
   emitFiles(files)
   event.target.value = ''
@@ -90,10 +96,15 @@ const handleFileSelect = (event) => {
 const handleDrop = (event) => {
   event.preventDefault()
   isDragging.value = false
+  if (props.disabled) return
   const files = [...event.dataTransfer.files]
   emitFiles(files)
 }
 
+const onDragEnter = () => {
+  if (!props.disabled) isDragging.value = true
+}
+
 const emitFiles = (files) => {
   if (props.modelValue.length + files.length > props.maxFiles) {
     emit('error', `حداکثر تعداد فایل مجاز ${props.maxFiles} عدد است.`)
@@ -155,6 +166,11 @@ const formatFileSize = (bytes) => {
     &--active {
       border-color: var(--color-primary);
     }
+
+    &--disabled {
+      cursor: not-allowed;
+      opacity: 0.55;
+    }
   }
 
   &__upload-icon {
diff --git a/src/enums/index.js b/src/enums/index.js
index 21f7767..3a58ab2 100644
--- a/src/enums/index.js
+++ b/src/enums/index.js
@@ -140,9 +140,15 @@ export const COURSE_CONTENT_TYPE = Object.freeze({
 })
 
 export const COURSE_CONTENT_TYPE_ACCEPT = Object.freeze({
-  video: 'video/*',
-  voice: 'audio/*',
-  text: '.pdf,.doc,.docx,.txt',
+  video: '.mp4,.webm,video/mp4,video/webm',
+  voice: '.mp3,.wav,.m4a,.webm,audio/mpeg,audio/wav,audio/mp4,audio/webm',
+  text: '.pdf,application/pdf',
+})
+
+export const COURSE_CONTENT_TYPE_MAX_SIZE = Object.freeze({
+  video: 300 * 1024 * 1024,
+  voice: 50 * 1024 * 1024,
+  text: 50 * 1024 * 1024,
 })
 
 export const SESSION_TYPE = Object.freeze({
diff --git a/src/features/admin/courses/pages/CourseFormPage.vue b/src/features/admin/courses/pages/CourseFormPage.vue
index e14a941..b4ba5db 100644
--- a/src/features/admin/courses/pages/CourseFormPage.vue
+++ b/src/features/admin/courses/pages/CourseFormPage.vue
@@ -33,7 +33,7 @@
               <SelectField
                 v-model="form.teacherId"
                 name="teacherId"
-                label="استاد"
+                label="استاد (اختیاری)"
                 :options="teacherOptions"
                 option-label="name"
                 option-value="id"
@@ -251,12 +251,12 @@ watch(
   { immediate: true }
 )
 
-const uploadMutation = useUploadMediaMutation()
+const coverUploadMutation = useUploadMediaMutation()
 
 const onImageCropped = async (file) => {
   try {
     const formData = objectToFormData({ file, purpose: 'cover', context: 'course' })
-    const response = await uploadMutation.mutateAsync(formData)
+    const response = await coverUploadMutation.mutateAsync(formData)
     const payload = response?.data ?? response
     image.value = { url: payload?.url, ...payload }
     form.value.coverMediaId = payload?.id
@@ -270,15 +270,28 @@ const onImageError = (msg) => toast.error(msg)
 const addMutation = useAddAdminCourseMutation()
 const updateMutation = useUpdateAdminCourseMutation()
 
-const submitting = computed(() => addMutation.isPending.value || updateMutation.isPending.value)
+const submitting = computed(
+  () =>
+    coverUploadMutation.isPending.value ||
+    addMutation.isPending.value ||
+    updateMutation.isPending.value
+)
 
 const onSubmit = async () => {
+  if (coverUploadMutation.isPending.value) {
+    toast.info('لطفاً تا پایان بارگذاری تصویر دوره منتظر بمانید.')
+    return
+  }
   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)
+  try {
+    if (isEditMode.value) {
+      await updateMutation.mutateAsync({ id: courseId.value, payload })
+    } else {
+      await addMutation.mutateAsync(payload)
+    }
+  } catch {
+    return
   }
   await queryClient.invalidateQueries({ queryKey: adminCoursesKeys.all })
   router.push({ name: 'admin-courses' })
diff --git a/src/features/admin/courses/pages/CoursesListPage.vue b/src/features/admin/courses/pages/CoursesListPage.vue
index f1edf0f..7e0d6fe 100644
--- a/src/features/admin/courses/pages/CoursesListPage.vue
+++ b/src/features/admin/courses/pages/CoursesListPage.vue
@@ -69,7 +69,12 @@ const courseIcon = gallery.courseIcon
 const routeTermId = computed(() => (route.params.termId ? Number(route.params.termId) : null))
 
 const onAdd = () => {
-  router.push({ name: 'admin-add-course' }).catch(() => {})
+  router
+    .push({
+      name: 'admin-add-course',
+      query: routeTermId.value ? { termId: routeTermId.value } : undefined,
+    })
+    .catch(() => {})
 }
 
 const tabs = [
diff --git a/src/features/admin/courses/schema/index.js b/src/features/admin/courses/schema/index.js
index ee492e0..6f042bf 100644
--- a/src/features/admin/courses/schema/index.js
+++ b/src/features/admin/courses/schema/index.js
@@ -2,7 +2,8 @@ import { array, boolean, mixed, number, object, string } from 'yup'
 
 export const courseSchema = object().shape({
   title: string().required().min(3).max(255),
-  teacherId: mixed().required(),
+  // The backend intentionally allows courses without an assigned teacher.
+  teacherId: mixed().nullable().notRequired(),
   capacity: number()
     .typeError('ظرفیت باید به‌صورت عدد وارد شود')
     .required()
diff --git a/src/features/admin/sessions/pages/SessionFormPage.vue b/src/features/admin/sessions/pages/SessionFormPage.vue
index 2302902..d07764d 100644
--- a/src/features/admin/sessions/pages/SessionFormPage.vue
+++ b/src/features/admin/sessions/pages/SessionFormPage.vue
@@ -95,7 +95,8 @@
               :accept="contentAccept"
               :multiple="false"
               :max-files="1"
-              :disabled="!form.contentType"
+              :max-size="contentMaxSize"
+              :disabled="!form.contentType || contentUploadMutation.isPending.value"
               @select="onContentSelect"
               @remove="onContentRemove"
               @error="onContentError"
@@ -162,7 +163,12 @@ import TextareaField from '@/components/form/TextareaField.vue'
 import { sessionSchema } from '@/features/admin/sessions/schema'
 import { useAdminCoursesListQuery } from '@/services/query/admin-courses'
 import BoxedIconTitleBlock from '@/components/blocks/BoxedIconTitleBlock.vue'
-import { COURSE_CONTENT_TYPE, COURSE_CONTENT_TYPE_ACCEPT, SESSION_TYPE } from '@/enums'
+import {
+  COURSE_CONTENT_TYPE,
+  COURSE_CONTENT_TYPE_ACCEPT,
+  COURSE_CONTENT_TYPE_MAX_SIZE,
+  SESSION_TYPE,
+} from '@/enums'
 import {
   adminSessionsKeys,
   useAddAdminSessionMutation,
@@ -175,6 +181,7 @@ const router = useRouter()
 const queryClient = useQueryClient()
 
 const sessionId = computed(() => (route.params.id ? Number(route.params.id) : null))
+const presetCourseId = computed(() => (route.query.courseId ? Number(route.query.courseId) : null))
 const isEditMode = computed(() => !!sessionId.value)
 
 const sessionTypeOptions = [
@@ -189,7 +196,7 @@ const contentTypeOptions = Object.entries(COURSE_CONTENT_TYPE).map(([value, labe
 
 const form = ref({
   title: '',
-  courseId: '',
+  courseId: presetCourseId.value ?? '',
   contentType: '',
   type: '',
   link: '',
@@ -202,6 +209,9 @@ const coverMediaId = ref(null)
 const contentMediaId = ref(null)
 
 const contentAccept = computed(() => COURSE_CONTENT_TYPE_ACCEPT[form.value.contentType] || '*')
+const contentMaxSize = computed(
+  () => COURSE_CONTENT_TYPE_MAX_SIZE[form.value.contentType] || 50 * 1024 * 1024
+)
 
 const { validate, validateAt, errors } = useYup(sessionSchema)
 
@@ -276,7 +286,8 @@ watch(
   { immediate: true }
 )
 
-const uploadMutation = useUploadMediaMutation()
+const contentUploadMutation = useUploadMediaMutation()
+const coverUploadMutation = useUploadMediaMutation()
 
 const purposeForContentType = (contentType) => {
   if (contentType === 'video') return 'video'
@@ -293,7 +304,7 @@ const onContentSelect = async (files) => {
       purpose: purposeForContentType(form.value.contentType),
       context: 'session',
     })
-    const response = await uploadMutation.mutateAsync(formData)
+    const response = await contentUploadMutation.mutateAsync(formData)
     const payload = response?.data ?? response
     const id = payload?.id ?? payload?.uploadId
     contentFiles.value = [{ id, name: file.name, size: file.size, url: payload?.url }]
@@ -313,7 +324,7 @@ const onContentError = (msg) => toast.error(msg)
 const onImageCropped = async (file) => {
   try {
     const formData = objectToFormData({ file, purpose: 'cover', context: 'session' })
-    const response = await uploadMutation.mutateAsync(formData)
+    const response = await coverUploadMutation.mutateAsync(formData)
     const payload = response?.data ?? response
     image.value = { url: payload?.url, ...payload }
     coverMediaId.value = payload?.id ?? null
@@ -346,16 +357,34 @@ const buildPayload = (values) => {
 const addMutation = useAddAdminSessionMutation()
 const updateMutation = useUpdateAdminSessionMutation()
 
-const submitting = computed(() => addMutation.isPending.value || updateMutation.isPending.value)
+const submitting = computed(
+  () =>
+    contentUploadMutation.isPending.value ||
+    coverUploadMutation.isPending.value ||
+    addMutation.isPending.value ||
+    updateMutation.isPending.value
+)
 
 const onSubmit = async () => {
+  if (contentUploadMutation.isPending.value || coverUploadMutation.isPending.value) {
+    toast.info('لطفاً تا پایان بارگذاری محتوای جلسه منتظر بمانید.')
+    return
+  }
   const { isValid } = await validate(form.value)
   if (!isValid) return
+  if (form.value.contentType && contentMediaId.value == null) {
+    toast.error('برای نوع محتوای انتخاب‌شده، فایل جلسه را بارگذاری کنید.')
+    return
+  }
   const payload = buildPayload(form.value)
-  if (isEditMode.value) {
-    await updateMutation.mutateAsync({ id: sessionId.value, payload })
-  } else {
-    await addMutation.mutateAsync(payload)
+  try {
+    if (isEditMode.value) {
+      await updateMutation.mutateAsync({ id: sessionId.value, payload })
+    } else {
+      await addMutation.mutateAsync(payload)
+    }
+  } catch {
+    return
   }
   // The list query is inactive while we're on the form page, and the global
   // `refetchOnMount: false` means navigating back won't refetch a merely-stale
diff --git a/src/features/admin/sessions/pages/SessionsListPage.vue b/src/features/admin/sessions/pages/SessionsListPage.vue
index e5d45a0..9e11d57 100644
--- a/src/features/admin/sessions/pages/SessionsListPage.vue
+++ b/src/features/admin/sessions/pages/SessionsListPage.vue
@@ -109,7 +109,12 @@ const onFilterApply = () => resetPagination()
 const onFilterReset = () => resetPagination()
 
 const onAdd = () => {
-  router.push({ name: 'admin-add-session' }).catch(() => {})
+  router
+    .push({
+      name: 'admin-add-session',
+      query: routeCourseId.value ? { courseId: routeCourseId.value } : undefined,
+    })
+    .catch(() => {})
 }
 
 const onEdit = (session) => {
diff --git a/src/services/api/auth.js b/src/services/api/auth.js
index b1f3a5c..66582f8 100644
--- a/src/services/api/auth.js
+++ b/src/services/api/auth.js
@@ -43,4 +43,8 @@ export const apiSaveRegisterData = (data) => http.post(endpoints.registerData, {
 export const apiGetRegistrationQuestionVideo = () =>
   http.get(endpoints.getRegistrationQuestionVideo)
 
-export const apiUploadMedia = (formData) => http.post(endpoints.uploadMedia, formData)
+// Media uploads (especially course videos) can legitimately take several
+// minutes on slower connections. Keep the normal API timeout short, but give
+// this endpoint enough time to complete the backend's 300 MB upload contract.
+export const apiUploadMedia = (formData) =>
+  http.post(endpoints.uploadMedia, formData, { timeout: 10 * 60 * 1000 })
diff --git a/src/utils/error-handler.js b/src/utils/error-handler.js
index 6dda424..3469d14 100644
--- a/src/utils/error-handler.js
+++ b/src/utils/error-handler.js
@@ -24,6 +24,18 @@ export function handleApiError(error_) {
   const data = error_?.response?.data
   const status = error_?.response?.status
 
+  if (error_?.code === 'ECONNABORTED') {
+    toast.error(
+      'زمان بارگذاری فایل به پایان رسید. لطفاً اتصال اینترنت را بررسی و دوباره تلاش کنید.'
+    )
+    return
+  }
+
+  if (status === 413) {
+    toast.error('حجم فایل از حداکثر مجاز بیشتر است.')
+    return
+  }
+
   if (status === 422 && data?.errors) {
     Object.values(data.errors).forEach((messages) => {
       const list = Array.isArray(messages) ? messages : [messages]