From 2eb7c68f9fdd7c8b42561f78fb0db84b0fda1f9c Mon Sep 17 00:00:00 2001
From: madresebanoo <info@madresebanoo.ir>
Date: Wed, 2 Sep 2026 15:02:02 +0430
Subject: [PATCH] fix(courses): course cover image not saved on create/edit

The admin course form sent a stray upload id (imageId/uploadId) that
didn't match any field the API accepts; the API expects cover_media_id
with the media id returned from the upload endpoint. Also switch course
displays to the coverUrl field the API actually returns.
---
 .../admin/courses/components/CourseItem.vue   | 22 ++++++++-----------
 .../modals/AddOfferedCourseModal.vue          | 10 ++++-----
 .../components/modals/CourseDetailsModal.vue  |  2 +-
 src/features/admin/courses/schema/index.js    |  2 +-
 .../admin/terms/components/CourseItem.vue     |  4 ++--
 5 files changed, 18 insertions(+), 22 deletions(-)

diff --git a/src/features/admin/courses/components/CourseItem.vue b/src/features/admin/courses/components/CourseItem.vue
index 89e6f2f..22a6859 100644
--- a/src/features/admin/courses/components/CourseItem.vue
+++ b/src/features/admin/courses/components/CourseItem.vue
@@ -1,8 +1,8 @@
 <template>
   <div class="course-item">
     <div class="course-item__main">
-      <div v-if="course.image" class="course-item__image">
-        <img :src="course.image" :alt="course.title" />
+      <div v-if="course.coverUrl" class="course-item__image">
+        <img :src="course.coverUrl" :alt="course.title" />
       </div>
       <div v-else class="course-item__image course-item__image--placeholder">
         <SvgIcon name="book" :size="22" color="#bcbcbc" />
@@ -30,14 +30,13 @@
       />
     </div>
 
-    <div v-if="!isActive" class="course-item__status">
-      <span class="course-item__status-badge">
-        <span class="course-item__status-dot" />
-        غیرفعال
-      </span>
-    </div>
-
     <div class="course-item__actions">
+      <div v-if="!isActive" class="course-item__status">
+        <span class="course-item__status-badge">
+          <span class="course-item__status-dot" />
+          غیرفعال
+        </span>
+      </div>
       <ToggleSwitch
         :model-value="!!isActive"
         @update:model-value="emit('change-status', { id: course.id, isActive: !isActive })"
@@ -192,10 +191,6 @@ const isActive = computed(() => props.course.isActive ?? false)
     justify-content: flex-start;
   }
 
-  &__status {
-    flex: 0 0 auto;
-  }
-
   &__status-badge {
     display: inline-flex;
     align-items: center;
@@ -217,6 +212,7 @@ const isActive = computed(() => props.course.isActive ?? false)
 
   &__actions {
     display: flex;
+    flex-wrap: wrap;
     justify-content: flex-end;
     align-items: center;
     gap: 0.375rem;
diff --git a/src/features/admin/courses/components/modals/AddOfferedCourseModal.vue b/src/features/admin/courses/components/modals/AddOfferedCourseModal.vue
index 097ec63..b87023b 100644
--- a/src/features/admin/courses/components/modals/AddOfferedCourseModal.vue
+++ b/src/features/admin/courses/components/modals/AddOfferedCourseModal.vue
@@ -154,7 +154,7 @@ const form = ref({
   templateId: '',
   title: '',
   capacity: '',
-  imageId: null,
+  coverMediaId: null,
   isActive: false,
 })
 
@@ -212,10 +212,10 @@ watch(existingCourse, (course) => {
     templateId: '',
     title: course.title || '',
     capacity: course.capacity ?? '',
-    imageId: course.imageId || null,
+    coverMediaId: course.coverMediaId || null,
     isActive: course.isActive ?? false,
   }
-  if (course.image) image.value = { url: course.image }
+  if (course.coverUrl) image.value = { url: course.coverUrl }
 })
 
 const uploadMutation = useUploadMediaMutation()
@@ -225,8 +225,8 @@ const onImageCropped = async (file) => {
     const formData = objectToFormData({ file, purpose: 'cover', 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
+    image.value = { url: payload?.url, ...payload }
+    form.value.coverMediaId = payload?.id
   } catch {
     /* handled globally */
   }
diff --git a/src/features/admin/courses/components/modals/CourseDetailsModal.vue b/src/features/admin/courses/components/modals/CourseDetailsModal.vue
index b7e1817..0497432 100644
--- a/src/features/admin/courses/components/modals/CourseDetailsModal.vue
+++ b/src/features/admin/courses/components/modals/CourseDetailsModal.vue
@@ -14,7 +14,7 @@
         <template v-else-if="course">
           <div class="course-details__hero">
             <div class="course-details__image">
-              <img v-if="course.image" :src="course.image" :alt="course.title" />
+              <img v-if="course.coverUrl" :src="course.coverUrl" :alt="course.title" />
               <SvgIcon v-else name="book" :size="32" color="#bcbcbc" />
             </div>
             <div class="course-details__grid">
diff --git a/src/features/admin/courses/schema/index.js b/src/features/admin/courses/schema/index.js
index 6f042bf..53e9ab2 100644
--- a/src/features/admin/courses/schema/index.js
+++ b/src/features/admin/courses/schema/index.js
@@ -24,6 +24,6 @@ export const offeredCourseSchema = object().shape({
     .required()
     .integer('ظرفیت باید عدد صحیح باشد')
     .min(1, 'ظرفیت باید حداقل ۱ نفر باشد'),
-  imageId: string().nullable().notRequired(),
+  coverMediaId: number().typeError('شناسه تصویر دوره باید عدد باشد').nullable().notRequired(),
   isActive: boolean().nullable().notRequired(),
 })
diff --git a/src/features/admin/terms/components/CourseItem.vue b/src/features/admin/terms/components/CourseItem.vue
index 6f18ce9..1a9309b 100644
--- a/src/features/admin/terms/components/CourseItem.vue
+++ b/src/features/admin/terms/components/CourseItem.vue
@@ -1,8 +1,8 @@
 <template>
   <div class="course-item">
     <div class="course-item__main">
-      <div v-if="course.image" class="course-item__image">
-        <img :src="course.image" :alt="course.title" />
+      <div v-if="course.coverUrl" class="course-item__image">
+        <img :src="course.coverUrl" :alt="course.title" />
       </div>
       <div v-else class="course-item__image course-item__image--placeholder">
         <SvgIcon name="book" :size="22" color="#bcbcbc" />