From dec0fc5da08646252377206004c024bacdbe60d0 Mon Sep 17 00:00:00 2001
From: Missez <lertpisi@gmail.com>
Date: Mon, 19 Jan 2026 13:06:26 +0700
Subject: [PATCH] feat: implement instructor courses listing page and data
 service

---
 .../pages/instructor/courses/index.vue        | 284 ++++++++++++++++++
 .../services/instructor.service.ts            | 131 ++++++++
 2 files changed, 415 insertions(+)
 create mode 100644 frontend_management/pages/instructor/courses/index.vue
 create mode 100644 frontend_management/services/instructor.service.ts

diff --git a/frontend_management/pages/instructor/courses/index.vue b/frontend_management/pages/instructor/courses/index.vue
new file mode 100644
index 00000000..5b73b9eb
--- /dev/null
+++ b/frontend_management/pages/instructor/courses/index.vue
@@ -0,0 +1,284 @@
+<template>
+  <div>
+    <!-- Header -->
+    <div class="flex justify-between items-center mb-6">
+      <div>
+        <h1 class="text-2xl font-bold text-primary-600">หลักสูตรของฉัน</h1>
+        <p class="text-gray-600 mt-1">จัดการหลักสูตรที่คุณสร้าง</p>
+      </div>
+      <q-btn
+        color="primary"
+        label="+ สร้างหลักสูตรใหม่"
+        @click="navigateTo('/instructor/courses/create')"
+      />
+    </div>
+
+    <!-- Stats Cards -->
+    <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
+      <div class="bg-white rounded-xl shadow-sm p-5 text-center">
+        <div class="text-3xl font-bold text-primary-600">{{ stats.total }}</div>
+        <div class="text-gray-500 text-sm mt-1">หลักสูตรทั้งหมด</div>
+      </div>
+      <div class="bg-white rounded-xl shadow-sm p-5 text-center">
+        <div class="text-3xl font-bold text-green-600">{{ stats.approved }}</div>
+        <div class="text-gray-500 text-sm mt-1">เผยแพร่แล้ว</div>
+      </div>
+      <div class="bg-white rounded-xl shadow-sm p-5 text-center">
+        <div class="text-3xl font-bold text-yellow-600">{{ stats.pending }}</div>
+        <div class="text-gray-500 text-sm mt-1">รอตรวจสอบ</div>
+      </div>
+      <div class="bg-white rounded-xl shadow-sm p-5 text-center">
+        <div class="text-3xl font-bold text-gray-500">{{ stats.draft }}</div>
+        <div class="text-gray-500 text-sm mt-1">แบบร่าง</div>
+      </div>
+    </div>
+
+    <!-- Filter Bar -->
+    <div class="bg-white rounded-xl shadow-sm p-4 mb-6">
+      <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+        <div class="md:col-span-2">
+          <q-input
+            v-model="searchQuery"
+            placeholder="ค้นหาหลักสูตร..."
+            outlined
+            dense
+            bg-color="grey-1"
+          >
+            <template v-slot:prepend>
+              <q-icon name="search" />
+            </template>
+          </q-input>
+        </div>
+        
+        <q-select
+          v-model="filterStatus"
+          :options="statusOptions"
+          outlined
+          dense
+          emit-value
+          map-options
+        />
+      </div>
+    </div>
+
+    <!-- Courses Grid -->
+    <div v-if="loading" class="flex justify-center py-10">
+      <q-spinner-dots size="50px" color="primary" />
+    </div>
+
+    <div v-else-if="filteredCourses.length === 0" class="bg-white rounded-xl shadow-sm p-10 text-center">
+      <q-icon name="school" size="60px" color="grey-5" class="mb-4" />
+      <p class="text-gray-500 text-lg">ยังไม่มีหลักสูตร</p>
+      <q-btn
+        color="primary"
+        label="สร้างหลักสูตรแรก"
+        class="mt-4"
+        @click="navigateTo('/instructor/courses/create')"
+      />
+    </div>
+
+    <div v-else class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+      <div
+        v-for="course in filteredCourses"
+        :key="course.id"
+        class="bg-white rounded-xl shadow-sm overflow-hidden hover:shadow-md transition-shadow"
+      >
+        <!-- Thumbnail -->
+        <div class="h-40 bg-gradient-to-br from-primary-400 to-primary-600 flex items-center justify-center">
+          <q-icon name="school" size="60px" color="white" />
+        </div>
+
+        <!-- Content -->
+        <div class="p-4">
+          <div class="flex justify-between items-start mb-2">
+            <h3 class="font-semibold text-gray-900 line-clamp-2">{{ course.title.th }}</h3>
+            <q-badge :color="getStatusColor(course.status)" class="ml-2">
+              {{ getStatusLabel(course.status) }}
+            </q-badge>
+          </div>
+          
+          <p class="text-sm text-gray-500 line-clamp-2 mb-3">
+            {{ course.description.th }}
+          </p>
+
+          <div class="flex items-center justify-between text-sm">
+            <span class="font-semibold" :class="course.is_free ? 'text-green-600' : 'text-primary-600'">
+              {{ course.is_free ? 'ฟรี' : `฿${parseFloat(course.price).toLocaleString()}` }}
+            </span>
+            <span class="text-gray-400">
+              {{ formatDate(course.created_at) }}
+            </span>
+          </div>
+        </div>
+
+        <!-- Actions -->
+        <div class="border-t px-4 py-3 flex gap-2">
+          <q-btn
+            flat
+            dense
+            icon="visibility"
+            color="grey"
+            @click="navigateTo(`/instructor/courses/${course.id}`)"
+          >
+            <q-tooltip>ดูรายละเอียด</q-tooltip>
+          </q-btn>
+          <q-btn
+            flat
+            dense
+            icon="edit"
+            color="primary"
+            @click="navigateTo(`/instructor/courses/${course.id}/edit`)"
+          >
+            <q-tooltip>แก้ไข</q-tooltip>
+          </q-btn>
+          <q-space />
+          <q-btn flat round dense icon="more_vert">
+            <q-menu>
+              <q-list style="min-width: 150px">
+                <q-item clickable v-close-popup @click="duplicateCourse(course)">
+                  <q-item-section avatar>
+                    <q-icon name="content_copy" />
+                  </q-item-section>
+                  <q-item-section>ทำสำเนา</q-item-section>
+                </q-item>
+                <q-separator />
+                <q-item clickable v-close-popup @click="confirmDelete(course)">
+                  <q-item-section avatar>
+                    <q-icon name="delete" color="negative" />
+                  </q-item-section>
+                  <q-item-section class="text-negative">ลบ</q-item-section>
+                </q-item>
+              </q-list>
+            </q-menu>
+          </q-btn>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useQuasar } from 'quasar';
+import { instructorService, type CourseResponse } from '~/services/instructor.service';
+
+definePageMeta({
+  layout: 'instructor',
+  middleware: ['auth']
+});
+
+const $q = useQuasar();
+
+// Data
+const courses = ref<CourseResponse[]>([]);
+const loading = ref(true);
+const searchQuery = ref('');
+const filterStatus = ref<string | null>(null);
+
+// Status options
+const statusOptions = [
+  { label: 'สถานะทั้งหมด', value: null },
+  { label: 'เผยแพร่แล้ว', value: 'APPROVED' },
+  { label: 'รอตรวจสอบ', value: 'PENDING' },
+  { label: 'แบบร่าง', value: 'DRAFT' },
+  { label: 'ถูกปฏิเสธ', value: 'REJECTED' }
+];
+
+// Stats
+const stats = computed(() => ({
+  total: courses.value.length,
+  approved: courses.value.filter(c => c.status === 'APPROVED').length,
+  pending: courses.value.filter(c => c.status === 'PENDING').length,
+  draft: courses.value.filter(c => c.status === 'DRAFT').length
+}));
+
+// Filtered courses
+const filteredCourses = computed(() => {
+  let result = courses.value;
+
+  if (searchQuery.value) {
+    const query = searchQuery.value.toLowerCase();
+    result = result.filter(course =>
+      course.title.th.toLowerCase().includes(query) ||
+      course.title.en.toLowerCase().includes(query)
+    );
+  }
+
+  if (filterStatus.value) {
+    result = result.filter(course => course.status === filterStatus.value);
+  }
+
+  return result;
+});
+
+// Methods
+const fetchCourses = async () => {
+  loading.value = true;
+  try {
+    courses.value = await instructorService.getCourses();
+  } catch (error) {
+    $q.notify({
+      type: 'negative',
+      message: 'ไม่สามารถโหลดข้อมูลหลักสูตรได้',
+      position: 'top'
+    });
+  } finally {
+    loading.value = false;
+  }
+};
+
+const getStatusColor = (status: string) => {
+  const colors: Record<string, string> = {
+    APPROVED: 'green',
+    PENDING: 'yellow',
+    DRAFT: 'grey',
+    REJECTED: 'red'
+  };
+  return colors[status] || 'grey';
+};
+
+const getStatusLabel = (status: string) => {
+  const labels: Record<string, string> = {
+    APPROVED: 'เผยแพร่แล้ว',
+    PENDING: 'รอตรวจสอบ',
+    DRAFT: 'แบบร่าง',
+    REJECTED: 'ถูกปฏิเสธ'
+  };
+  return labels[status] || status;
+};
+
+const formatDate = (date: string) => {
+  return new Date(date).toLocaleDateString('th-TH', {
+    day: 'numeric',
+    month: 'short',
+    year: '2-digit'
+  });
+};
+
+const duplicateCourse = (course: CourseResponse) => {
+  $q.notify({
+    type: 'info',
+    message: `กำลังทำสำเนา "${course.title.th}"...`,
+    position: 'top'
+  });
+};
+
+const confirmDelete = (course: CourseResponse) => {
+  $q.dialog({
+    title: 'ยืนยันการลบ',
+    message: `คุณต้องการลบหลักสูตร "${course.title.th}" หรือไม่?`,
+    cancel: true,
+    persistent: true
+  }).onOk(() => {
+    $q.notify({
+      type: 'positive',
+      message: 'ลบหลักสูตรสำเร็จ',
+      position: 'top'
+    });
+  });
+};
+
+// Lifecycle
+onMounted(() => {
+  fetchCourses();
+});
+</script>
diff --git a/frontend_management/services/instructor.service.ts b/frontend_management/services/instructor.service.ts
new file mode 100644
index 00000000..64e54188
--- /dev/null
+++ b/frontend_management/services/instructor.service.ts
@@ -0,0 +1,131 @@
+// Course Response structure
+export interface CourseResponse {
+    id: number;
+    category_id: number;
+    title: {
+        en: string;
+        th: string;
+    };
+    slug: string;
+    description: {
+        en: string;
+        th: string;
+    };
+    thumbnail_url: string | null;
+    price: string;
+    is_free: boolean;
+    have_certificate: boolean;
+    status: 'DRAFT' | 'PENDING' | 'APPROVED' | 'REJECTED';
+    approved_by: number | null;
+    approved_at: string | null;
+    rejection_reason: string | null;
+    created_at: string;
+    created_by: number;
+    updated_at: string;
+    updated_by: number | null;
+}
+
+export interface CoursesListResponse {
+    code: number;
+    message: string;
+    data: CourseResponse[];
+    total: number;
+}
+
+// Helper function to get auth token from cookie
+const getAuthToken = (): string => {
+    const tokenCookie = useCookie('token');
+    return tokenCookie.value || '';
+};
+
+// Mock courses data
+const MOCK_COURSES: CourseResponse[] = [
+    {
+        id: 1,
+        category_id: 1,
+        title: { en: 'JavaScript Fundamentals', th: 'พื้นฐาน JavaScript' },
+        slug: 'javascript-fundamentals',
+        description: {
+            en: 'Learn JavaScript fundamentals from scratch',
+            th: 'เรียนรู้พื้นฐาน JavaScript ตั้งแต่เริ่มต้น'
+        },
+        thumbnail_url: null,
+        price: '0',
+        is_free: true,
+        have_certificate: true,
+        status: 'APPROVED',
+        approved_by: 1,
+        approved_at: '2024-01-15T00:00:00Z',
+        rejection_reason: null,
+        created_at: '2024-01-15T00:00:00Z',
+        created_by: 2,
+        updated_at: '2024-01-15T00:00:00Z',
+        updated_by: null
+    },
+    {
+        id: 2,
+        category_id: 2,
+        title: { en: 'React for Beginners', th: 'React สำหรับผู้เริ่มต้น' },
+        slug: 'react-for-beginners',
+        description: {
+            en: 'Build modern web apps with React',
+            th: 'สร้างเว็บแอปพลิเคชันด้วย React'
+        },
+        thumbnail_url: null,
+        price: '990',
+        is_free: false,
+        have_certificate: true,
+        status: 'PENDING',
+        approved_by: null,
+        approved_at: null,
+        rejection_reason: null,
+        created_at: '2024-02-01T00:00:00Z',
+        created_by: 2,
+        updated_at: '2024-02-01T00:00:00Z',
+        updated_by: null
+    },
+    {
+        id: 3,
+        category_id: 1,
+        title: { en: 'TypeScript Masterclass', th: 'TypeScript ขั้นสูง' },
+        slug: 'typescript-masterclass',
+        description: {
+            en: 'Master TypeScript for better JavaScript development',
+            th: 'เรียนรู้ TypeScript เพื่อพัฒนา JavaScript ได้ดียิ่งขึ้น'
+        },
+        thumbnail_url: null,
+        price: '1290',
+        is_free: false,
+        have_certificate: true,
+        status: 'DRAFT',
+        approved_by: null,
+        approved_at: null,
+        rejection_reason: null,
+        created_at: '2024-02-15T00:00:00Z',
+        created_by: 2,
+        updated_at: '2024-02-15T00:00:00Z',
+        updated_by: null
+    }
+];
+
+export const instructorService = {
+    async getCourses(): Promise<CourseResponse[]> {
+        const config = useRuntimeConfig();
+        const useMockData = config.public.useMockData as boolean;
+
+        if (useMockData) {
+            await new Promise(resolve => setTimeout(resolve, 500));
+            return MOCK_COURSES;
+        }
+
+        const token = getAuthToken();
+        const response = await $fetch<CoursesListResponse>('/api/instructors/courses', {
+            baseURL: config.public.apiBaseUrl as string,
+            headers: {
+                Authorization: `Bearer ${token}`
+            }
+        });
+
+        return response.data;
+    }
+};