HSNM2 · Brook072 · May 30, 2023 · May 30, 2023 · May 30, 2023 · May 30, 2023
diff --git a/src/models/instructor.ts b/src/models/instructor.ts
@@ -29,6 +29,20 @@ export function DeleteCourseRequest(params: { id: number }) {
   })
 }
 
+export function PublishCourseRequest(params: { courseId: number }) {
+  return request({
+    url: `api/courseProvider/course/${params.courseId}/inStack`,
+    method: 'post'
+  })
+}
+
+export function UnpublishCourseRequest(params: { courseId: number }) {
+  return request({
+    url: `api/courseProvider/course/${params.courseId}/offStack`,
+    method: 'post'
+  })
+}
+
 export function CourseChaptersRequest(params: { courseId: number }) {
   return request({
     url: `/api/courseProvider/course/${params.courseId}/chapter`,
@@ -124,6 +138,28 @@ export function DeleteCourseLessonRequest(params: {
   })
 }
 
+export function PublishCourseLessonRequest(params: {
+  courseId: number
+  chapterId: number
+  lessonId: number
+}) {
+  return request({
+    url: `api/courseProvider/course/${params.courseId}/chapter/${params.chapterId}/lesson/${params.lessonId}/inStack`,
+    method: 'post'
+  })
+}
+
+export function UnPublishCourseLessonRequest(params: {
+  courseId: number
+  chapterId: number
+  lessonId: number
+}) {
+  return request({
+    url: `api/courseProvider/course/${params.courseId}/chapter/${params.chapterId}/lesson/${params.lessonId}/offStack`,
+    method: 'post'
+  })
+}
+
 export function CourseFAQsRequest(params: { courseId: number }) {
   return request({
     url: `/api/courseProvider/course/${params.courseId}/faq`,
@@ -227,17 +263,3 @@ export function UnpublishCourseFAQQuestionRequest(params: {
     method: 'post'
   })
 }
-
-export function PublishCourseRequest(params: { courseId: number }) {
-  return request({
-    url: `api/courseProvider/course/${params.courseId}/inStack`,
-    method: 'post'
-  })
-}
-
-export function UnpublishCourseRequest(params: { courseId: number }) {
-  return request({
-    url: `api/courseProvider/course/${params.courseId}/offStack`,
-    method: 'post'
-  })
-}
diff --git a/src/stores/instructor.ts b/src/stores/instructor.ts
@@ -6,6 +6,8 @@ import {
   AddCourseRequest,
   CourseRequest,
   DeleteCourseRequest,
+  PublishCourseRequest,
+  UnpublishCourseRequest,
   CourseChaptersRequest,
   AddCourseChapterRequest,
   DeleteCourseChapterRequest,
@@ -14,6 +16,8 @@ import {
   AddCourseLessonRequest,
   EditCourseLessonRequest,
   DeleteCourseLessonRequest,
+  PublishCourseLessonRequest,
+  UnPublishCourseLessonRequest,
   CourseFAQsRequest,
   AddCourseFAQCategoryRequest,
   editCourseFAQCategoryRequest,
@@ -22,9 +26,7 @@ import {
   EditCourseFAQQuestionRequest,
   DeleteCourseFAQQuestionRequest,
   PublishCourseFAQQuestionRequest,
-  UnpublishCourseFAQQuestionRequest,
-  PublishCourseRequest,
-  UnpublishCourseRequest
+  UnpublishCourseFAQQuestionRequest
 } from '@/models/instructor'
 
 interface Course {
@@ -94,6 +96,14 @@ export const useInstructorStore = defineStore('instructor', () => {
     return DeleteCourseRequest(payload)
   }
 
+  function coursePublish(payload: { courseId: number }) {
+    return PublishCourseRequest(payload)
+  }
+
+  function courseUnpublish(payload: { courseId: number }) {
+    return UnpublishCourseRequest(payload)
+  }
+
   //
   // 課程章節相關
   //
@@ -161,6 +171,18 @@ export const useInstructorStore = defineStore('instructor', () => {
     return DeleteCourseLessonRequest(payload)
   }
 
+  function publishCourseLesson(payload: { courseId: number; chapterId: number; lessonId: number }) {
+    return PublishCourseLessonRequest(payload)
+  }
+
+  function unPublishCourseLesson(payload: {
+    courseId: number
+    chapterId: number
+    lessonId: number
+  }) {
+    return UnPublishCourseLessonRequest(payload)
+  }
+
   //
   // 常見問題相關
   //
@@ -230,16 +252,6 @@ export const useInstructorStore = defineStore('instructor', () => {
     return UnpublishCourseFAQQuestionRequest(payload)
   }
 
-  //
-  // 課程上下架
-  //
-  function coursePublish(payload: { courseId: number }) {
-    return PublishCourseRequest(payload)
-  }
-  function courseUnpublish(payload: { courseId: number }) {
-    return UnpublishCourseRequest(payload)
-  }
-
   return {
     courses,
     course,
@@ -253,6 +265,8 @@ export const useInstructorStore = defineStore('instructor', () => {
     addCourse,
     getCourse,
     deleteCourse,
+    coursePublish,
+    courseUnpublish,
 
     getCourseChapters,
     getCourseChapter,
@@ -264,6 +278,8 @@ export const useInstructorStore = defineStore('instructor', () => {
     addCourseLesson,
     editCourseLesson,
     deleteCourseLesson,
+    publishCourseLesson,
+    unPublishCourseLesson,
 
     getCourseFAQs,
     addCourseFAQCategory,
@@ -273,9 +289,6 @@ export const useInstructorStore = defineStore('instructor', () => {
     editCourseFAQQuestion,
     deleteCourseFAQQuestion,
     FAQQuestionPublish,
-    FAQQuestionUnpublish,
-
-    coursePublish,
-    courseUnpublish
+    FAQQuestionUnpublish
   }
 })
diff --git a/src/views/instructor/course/CourseChapterView.vue b/src/views/instructor/course/CourseChapterView.vue
@@ -67,26 +67,33 @@
           >
             <template #item="{ element: lesson }">
               <li class="border">
-                <div
-                  @click="editLesson(chapter.id, lesson.id)"
+                <router-link
+                  :to="`/instructor/course/${+route.params.courseId}/chapter/${chapter.id}/lesson/${
+                    lesson.id
+                  }`"
                   class="flex cursor-pointer items-center p-4"
                 >
                   <i class="material-icons js-draggable me-2 cursor-row-resize">sort</i>
                   <span class="me-3">{{ lesson.title }}</span>
                   <span
-                    :class="[lesson.is_publish ? 'text-emerald-700' : 'text-neutral-600']"
+                    :class="[lesson.isPublish ? 'text-emerald-700' : 'text-neutral-600']"
                     class="rounded-full border bg-neutral-50 px-4 py-1 text-sm"
-                    >{{ lesson.is_publish ? '已發布' : '未發布' }}</span
+                    >{{ lesson.isPublish ? '已發布' : '未發布' }}</span
                   >
                   <i class="material-icons me-4 ms-auto cursor-pointer text-neutral-800"
                     >visibility</i
                   >
                   <i
-                    :class="[lesson.is_publish ? 'text-emerald-700' : 'text-neutral-600']"
+                    :class="[lesson.isPublish ? 'text-emerald-700' : 'text-neutral-600']"
                     class="material-icons cursor-pointer"
+                    @click.prevent="
+                      lesson.isPublish
+                        ? unPublishLesson(chapter.id, lesson.id)
+                        : publishLesson(chapter.id, lesson.id)
+                    "
                     >check_circle_outline</i
                   >
-                </div>
+                </router-link>
               </li>
             </template>
           </draggable>
@@ -145,11 +152,25 @@ const { updateLoading } = useStatusStore()
 const { showError } = useErrorHandler()
 
 const instructor = useInstructorStore()
-const { getCourseChapters, addCourseChapter, deleteCourseChapter, editCourseChapterTitle } =
-  instructor
+const {
+  getCourseChapters,
+  addCourseChapter,
+  deleteCourseChapter,
+  editCourseChapterTitle,
+  publishCourseLesson,
+  unPublishCourseLesson
+} = instructor
 const { chapters, course } = storeToRefs(instructor)
 
 onMounted(() => {
+  getChapter()
+})
+
+//
+// 章節
+//
+
+function getChapter() {
   updateLoading(true)
   getCourseChapters({ courseId: +route.params.courseId })
     .catch((err) => {
@@ -158,11 +179,8 @@ onMounted(() => {
     .finally(() => {
       updateLoading(false)
     })
-})
+}
 
-//
-// 章節
-//
 function deleteChapter(chapterId: number) {
   Swal.fire({
     icon: 'warning',
@@ -256,9 +274,39 @@ function addLesson(chapterId: number) {
   router.push(`/instructor/course/${+route.params.courseId}/chapter/${chapterId}/lesson`)
 }
 
-function editLesson(chapterId: number, lessonId: number) {
-  router.push(
-    `/instructor/course/${+route.params.courseId}/chapter/${chapterId}/lesson/${lessonId}`
-  )
+function publishLesson(chapterId: number, lessonId: number) {
+  updateLoading(true)
+  publishCourseLesson({ courseId: +route.params.courseId, chapterId, lessonId })
+    .then(() => {
+      const chapterIdx = chapters.value.findIndex((chapter) => chapter.id === chapterId)
+      const lessonIdx = chapters.value[chapterIdx].lessons.findIndex(
+        (lesson) => lesson.id === lessonId
+      )
+      chapters.value[chapterIdx].lessons[lessonIdx].isPublish = true
+    })
+    .catch((err) => {
+      showError(err)
+    })
+    .finally(() => {
+      updateLoading(false)
+    })
+}
+
+function unPublishLesson(chapterId: number, lessonId: number) {
+  updateLoading(true)
+  unPublishCourseLesson({ courseId: +route.params.courseId, chapterId, lessonId })
+    .then(() => {
+      const chapterIdx = chapters.value.findIndex((chapter) => chapter.id === chapterId)
+      const lessonIdx = chapters.value[chapterIdx].lessons.findIndex(
+        (lesson) => lesson.id === lessonId
+      )
+      chapters.value[chapterIdx].lessons[lessonIdx].isPublish = false
+    })
+    .catch((err) => {
+      showError(err)
+    })
+    .finally(() => {
+      updateLoading(false)
+    })
 }
 </script>