elearning/frontend_management/pages/instructor/courses/[id]/edit.vue

<template>
  <div>
    <!-- Header -->
    <div class="flex items-center gap-4 mb-6">
      <q-btn
        flat
        round
        icon="arrow_back"
        @click="navigateTo(`/instructor/courses/${route.params.id}`)"
      />
      <div>
        <h1 class="text-2xl font-bold text-primary-600">แก้ไขหลักสูตร</h1>
        <p class="text-gray-600 mt-1">แก้ไขข้อมูลหลักสูตรของคุณ</p>
      </div>
    </div>

    <!-- Loading -->
    <div v-if="initialLoading" class="flex justify-center py-20">
      <q-spinner-dots size="50px" color="primary" />
    </div>

    <!-- Form -->
    <div v-else class="bg-white rounded-xl shadow-sm p-6">
      <q-form @submit="handleSubmit">
        <!-- Basic Info -->
        <h2 class="text-lg font-semibold text-primary-600 mb-4">ข้อมูลพื้นฐาน</h2>
        
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
          <q-input
            v-model="form.title.th"
            label="ชื่อหลักสูตร (ภาษาไทย) *"
            outlined
            :rules="[val => !!val || 'กรุณากรอกชื่อหลักสูตร']"
          />
          <q-input
            v-model="form.title.en"
            label="ชื่อหลักสูตร (English) *"
            outlined
            :rules="[val => !!val || 'Please enter course title']"
          />
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
          <q-input
            v-model="form.slug"
            label="Slug (URL) *"
            outlined
            hint="ใช้สำหรับ URL เช่น javascript-basics"
            :rules="[val => !!val || 'กรุณากรอก slug']"
          />
          <q-select
            v-model="form.category_id"
            :options="categoryOptions"
            label="หมวดหมู่ *"
            outlined
            emit-value
            map-options
            :rules="[val => !!val || 'กรุณาเลือกหมวดหมู่']"
          />
        </div>

        <div class="mb-6">
          <q-input
            v-model="form.description.th"
            label="คำอธิบาย (ภาษาไทย)"
            type="textarea"
            outlined
            autogrow
            rows="3"
          />
        </div>

        <div class="mb-6">
          <q-input
            v-model="form.description.en"
            label="คำอธิบาย (English)"
            type="textarea"
            outlined
            autogrow
            rows="3"
          />
        </div>

        <!-- Pricing -->
        <q-separator class="my-6" />
        <h2 class="text-lg font-semibold text-primary-600 mb-4">ราคาและการตั้งค่า</h2>

        <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
          <q-toggle
            v-model="form.is_free"
            label="หลักสูตรฟรี"
            color="primary"
          />
          <q-input
            v-if="!form.is_free"
            v-model.number="form.price"
            label="ราคา (บาท)"
            type="number"
            outlined
            prefix="฿"
            :rules="[val => form.is_free || val > 0 || 'กรุณากรอกราคา']"
          />
          <q-toggle
            v-model="form.have_certificate"
            label="มีใบประกาศนียบัตร"
            color="primary"
          />
        </div>

        <!-- Thumbnail -->
        <q-separator class="my-6" />
        <h2 class="text-lg font-semibold text-primary-600 mb-4">รูปภาพปก</h2>

        <div class="mb-6">
          <q-input
            v-model="form.thumbnail_url"
            label="URL รูปภาพปก"
            outlined
            hint="ใส่ URL รูปภาพ (optional)"
          >
            <template v-slot:prepend>
              <q-icon name="image" />
            </template>
          </q-input>
        </div>

        <!-- Preview thumbnail if exists -->
        <div v-if="form.thumbnail_url" class="mb-6">
          <img
            :src="form.thumbnail_url"
            alt="Thumbnail preview"
            class="max-w-xs rounded-lg shadow"
            @error="form.thumbnail_url = ''"
          />
        </div>

        <!-- Actions -->
        <div class="flex justify-end gap-3 mt-8">
          <q-btn
            flat
            label="ยกเลิก"
            color="grey-7"
            @click="navigateTo(`/instructor/courses/${route.params.id}`)"
          />
          <q-btn
            type="submit"
            label="บันทึกการแก้ไข"
            color="primary"
            :loading="saving"
          />
        </div>
      </q-form>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useQuasar } from 'quasar';
import { instructorService, type CreateCourseRequest } from '~/services/instructor.service';
import { adminService, type CategoryResponse } from '~/services/admin.service';

definePageMeta({
  layout: 'instructor',
  middleware: ['auth']
});

const $q = useQuasar();
const route = useRoute();

// Data
const initialLoading = ref(true);
const saving = ref(false);
const categories = ref<CategoryResponse[]>([]);

// Form
const form = ref<CreateCourseRequest>({
  category_id: 0,
  title: { th: '', en: '' },
  slug: '',
  description: { th: '', en: '' },
  thumbnail_url: null,
  price: 0,
  is_free: true,
  have_certificate: true
});

// Category options
const categoryOptions = computed(() =>
  categories.value.map(cat => ({
    label: cat.name.th,
    value: cat.id
  }))
);

// Methods
const fetchData = async () => {
  initialLoading.value = true;
  try {
    const courseId = parseInt(route.params.id as string);
    
    // Fetch course and categories in parallel
    const [course, cats] = await Promise.all([
      instructorService.getCourseById(courseId),
      adminService.getCategories()
    ]);

    categories.value = cats;

    // Populate form with course data
    form.value = {
      category_id: course.category_id,
      title: { ...course.title },
      slug: course.slug,
      description: { ...course.description },
      thumbnail_url: course.thumbnail_url,
      price: parseFloat(course.price),
      is_free: course.is_free,
      have_certificate: course.have_certificate
    };
  } catch (error) {
    $q.notify({
      type: 'negative',
      message: 'ไม่สามารถโหลดข้อมูลหลักสูตรได้',
      position: 'top'
    });
    navigateTo('/instructor/courses');
  } finally {
    initialLoading.value = false;
  }
};

const handleSubmit = async () => {
  saving.value = true;
  try {
    const courseId = parseInt(route.params.id as string);

    // Set price to 0 if free
    if (form.value.is_free) {
      form.value.price = 0;
    }

    await instructorService.updateCourse(courseId, form.value);
    
    $q.notify({
      type: 'positive',
      message: 'บันทึกการแก้ไขสำเร็จ',
      position: 'top'
    });

    navigateTo(`/instructor/courses/${courseId}`);
  } catch (error: any) {
    $q.notify({
      type: 'negative',
      message: error.message || 'เกิดข้อผิดพลาด กรุณาลองใหม่',
      position: 'top'
    });
  } finally {
    saving.value = false;
  }
};

// Lifecycle
onMounted(() => {
  fetchData();
});
</script>