feat: implement my courses page with course fetching, filtering, and enrollment/certificate modals.

Frontend-Learner/composables/useCourse.ts

@@ -33,6 +33,27 @@ interface CourseResponse {
   total: number
 }
 
+export interface EnrolledCourse {
+    id: number // enrollment_id
+    course_id: number
+    course: Course
+    status: 'ENROLLED' | 'IN_PROGRESS' | 'COMPLETED' | 'DROPPED'
+    progress_percentage: number
+    enrolled_at: string
+    started_at?: string
+    completed_at?: string
+    last_accessed_at?: string
+}
+
+interface EnrolledCourseResponse {
+    code: number
+    message: string
+    data: EnrolledCourse[]
+    total: number
+    page: number
+    limit: number
+}
+
 export const useCourse = () => {
     const config = useRuntimeConfig()
     const API_BASE_URL = config.public.apiBase as string
@@ -112,10 +133,41 @@ export const useCourse = () => {
         }
     }
 
+    const fetchEnrolledCourses = async (params: { page?: number; limit?: number; status?: string } = {}) => {
+        try {
+            const queryParams = new URLSearchParams()
+            if (params.page) queryParams.append('page', params.page.toString())
+            if (params.limit) queryParams.append('limit', params.limit.toString())
+            if (params.status && params.status !== 'ALL') queryParams.append('status', params.status)
+
+            const data = await $fetch<EnrolledCourseResponse>(`${API_BASE_URL}/students/courses?${queryParams.toString()}`, {
+                method: 'GET',
+                headers: token.value ? {
+                    Authorization: `Bearer ${token.value}`
+                } : {}
+            })
+
+            return {
+                success: true,
+                data: data.data || [],
+                total: data.total || 0,
+                page: data.page,
+                limit: data.limit
+            }
+        } catch (err: any) {
+            console.error('Fetch enrolled courses failed:', err)
+            return {
+                success: false,
+                error: err.data?.message || err.message || 'Error fetching enrolled courses'
+            }
+        }
+    }
+
     return {
         fetchCourses,
         fetchCourseById,
-        enrollCourse
+        enrollCourse,
+        fetchEnrolledCourses
     }
 }
 

Frontend-Learner/pages/dashboard/my-courses.vue

@@ -27,38 +27,63 @@ onMounted(() => {
   }
 })
 
-// Mock Enrolled Courses Data
+// Helper to get localized text
-const courses = [
+const getLocalizedText = (text: string | { th: string; en: string } | undefined) => {
-  {
+  if (!text) return ''
-    id: 1,
+  if (typeof text === 'string') return text
-    title: 'เบื้องต้นการออกแบบ UX/UI',
+  return text.th || text.en || ''
-    progress: 65,
+}
-    category: 'progress'
-  },
-  {
-    id: 2,
-    title: 'การเข้าถึงเว็บ (WCAG)',
-    progress: 10,
-    category: 'progress'
-  },
-  {
-    id: 3,
-    title: 'HTML5 พื้นฐาน',
-    progress: 100,
-    completed: true,
-    category: 'completed'
-  }
-]
 
-// Computed property to filter courses
+// Data Handling
-const filteredCourses = computed(() => {
+const { fetchEnrolledCourses } = useCourse()
-  if (activeFilter.value === 'all') return courses
+const enrolledCourses = ref<any[]>([])
-  return courses.filter(c => c.category === activeFilter.value)
+const isLoading = ref(false)
+
+const loadEnrolledCourses = async () => {
+  isLoading.value = true
+  const apiStatus = activeFilter.value === 'all' 
+    ? undefined // No status param = all
+    : activeFilter.value === 'completed' 
+      ? 'COMPLETED' 
+      : 'IN_PROGRESS' // 'progress' -> IN_PROGRESS
+
+  // Actually, 'all' in UI might mean showing everything locally, OR fetching everything.
+  // The API supports status filter. Let's use clean fetching for simplicity and accuracy.
+  // Although checking the previous mock, 'all' showed both. 
+  // If we want 'all' to show everything, we should pass undefined status.
+  // If we filter client side, we fetch ALL first.
+  
+  // Strategy: Fetch based on filter.
+  // If 'all', do not send status.
+  const res = await fetchEnrolledCourses({ 
+    status: activeFilter.value === 'all' ? undefined : (activeFilter.value === 'completed' ? 'COMPLETED' : 'IN_PROGRESS')
+  })
+
+  if (res.success) {
+    enrolledCourses.value = (res.data || []).map(item => ({
+      id: item.course_id, // CourseCard might expect course id for links, or enrollment id? Usually CourseCard links to course detail.
+      // Wait, CourseCard likely needs course ID to link to /classroom/learning/:id
+      enrollment_id: item.id,
+      title: getLocalizedText(item.course.title),
+      progress: item.progress_percentage,
+      completed: item.status === 'COMPLETED',
+      thumbnail_url: item.course.thumbnail_url // CourseCard might need this
+    }))
+  }
+  isLoading.value = false
+}
+
+// Watch filter changes to reload
+watch(activeFilter, () => {
+  loadEnrolledCourses()
 })
 
-const filterCourses = (filter: 'all' | 'progress' | 'completed') => {
+onMounted(() => {
-  activeFilter.value = filter
+  if (route.query.enrolled) {
-}
+    showEnrollModal.value = true
+  }
+  loadEnrolledCourses()
+})
 
 // Mock certificate download action
 const downloadCertificate = () => {
@@ -77,21 +102,21 @@ const downloadCertificate = () => {
         <button 
           :class="activeFilter === 'all' ? 'btn btn-primary' : 'btn btn-secondary'" 
           style="white-space: nowrap;"
-          @click="filterCourses('all')"
+          @click="activeFilter = 'all'"
         >
           {{ $t('myCourses.filterAll') }}
         </button>
         <button 
           :class="activeFilter === 'progress' ? 'btn btn-primary' : 'btn btn-secondary'" 
           style="white-space: nowrap;"
-          @click="filterCourses('progress')"
+          @click="activeFilter = 'progress'"
         >
           {{ $t('myCourses.filterProgress') }}
         </button>
         <button 
           :class="activeFilter === 'completed' ? 'btn btn-primary' : 'btn btn-secondary'" 
           style="white-space: nowrap;"
-          @click="filterCourses('completed')"
+          @click="activeFilter = 'completed'"
         >
           {{ $t('myCourses.filterCompleted') }}
         </button>
@@ -99,19 +124,27 @@ const downloadCertificate = () => {
     </div>
 
     <!-- Courses Grid -->
-    <div class="my-courses-grid">
+    <div v-if="isLoading" class="flex justify-center py-20">
-      <template v-for="course in filteredCourses" :key="course.id">
+       <div class="spinner-border animate-spin inline-block w-8 h-8 border-4 rounded-full" role="status">
+          <span class="visually-hidden">Loading...</span>
+       </div>
+    </div>
+    <div v-else class="my-courses-grid">
+      <template v-for="course in enrolledCourses" :key="course.id">
         <!-- In Progress Course Card -->
         <CourseCard 
           v-if="!course.completed"
           :title="course.title"
           :progress="course.progress"
+          :image="course.thumbnail_url"
           show-continue
         />
         <!-- Completed Course Card -->
         <CourseCard 
           v-else
           :title="course.title"
+          :progress="100"
+          :image="course.thumbnail_url"
           :completed="true"
           show-certificate
           show-study-again
@@ -121,7 +154,7 @@ const downloadCertificate = () => {
     </div>
 
     <!-- Empty State -->
-    <div v-if="filteredCourses.length === 0" class="empty-state">
+    <div v-if="!isLoading && enrolledCourses.length === 0" class="empty-state">
       <div class="empty-state-icon">📚</div>
       <h3 class="empty-state-title">{{ $t('myCourses.emptyTitle') }}</h3>
       <p class="empty-state-description">{{ $t('myCourses.emptyDesc') }}</p>