From 5b1af9d43b9c8f810feb6dd8d09b27cfe20c2a03 Mon Sep 17 00:00:00 2001
From: Missez <lertpisi@gmail.com>
Date: Thu, 5 Feb 2026 16:39:58 +0700
Subject: [PATCH] feat: Implement course instructor management UI with search,
 add, set primary, and remove instructor capabilities.

---
 frontend_management/.gitignore                |  3 ++-
 frontend_management/app.vue                   | 20 +++++++++++++++++++
 .../components/course/InstructorsTab.vue      |  4 ++--
 frontend_management/docker-compose.yml        |  2 +-
 .../services/instructor.service.ts            |  4 ++--
 5 files changed, 27 insertions(+), 6 deletions(-)

diff --git a/frontend_management/.gitignore b/frontend_management/.gitignore
index 2d135b04..c05a50a2 100644
--- a/frontend_management/.gitignore
+++ b/frontend_management/.gitignore
@@ -22,4 +22,5 @@ logs
 .env
 .env.*
 !.env.example
-deploy.ps1
\ No newline at end of file
+deploy.ps1
+*.tar
\ No newline at end of file
diff --git a/frontend_management/app.vue b/frontend_management/app.vue
index be012dac..eb018bec 100644
--- a/frontend_management/app.vue
+++ b/frontend_management/app.vue
@@ -62,4 +62,24 @@ h6, .text-h6 { font-size: 1rem !important; }
 .text-overline { font-size: 0.75rem !important; }
 .text-subtitle1 { font-size: 1rem !important; }
 .text-subtitle2 { font-size: 0.875rem !important; }
+
+/* Fix Quasar button full width - only for buttons */
+.q-btn.w-full,
+button.w-full {
+  width: 100% !important;
+}
+
+/* Fix Quasar checkbox styling */
+.q-checkbox__inner {
+  font-size: 40px !important;
+}
+
+.q-checkbox__bg {
+  border-radius: 4px !important;
+}
+
+.q-checkbox__inner--truthy .q-checkbox__bg {
+  background-color: var(--q-primary) !important;
+  border-color: var(--q-primary) !important;
+}
 </style>
diff --git a/frontend_management/components/course/InstructorsTab.vue b/frontend_management/components/course/InstructorsTab.vue
index d102cb13..323a5a72 100644
--- a/frontend_management/components/course/InstructorsTab.vue
+++ b/frontend_management/components/course/InstructorsTab.vue
@@ -175,7 +175,7 @@ const addInstructor = async () => {
   if (!selectedUser.value) return;
   addingInstructor.value = true;
   try {
-    await instructorService.addCourseInstructor(props.courseId, selectedUser.value.id);
+    await instructorService.addInstructor(props.courseId, selectedUser.value.email);
     $q.notify({ type: 'positive', message: 'เพิ่มผู้สอนสำเร็จ', position: 'top' });
     showAddDialog.value = false;
     selectedUser.value = null;
@@ -213,7 +213,7 @@ const removeInstructor = async (userId: number) => {
     persistent: true
   }).onOk(async () => {
     try {
-      await instructorService.removeCourseInstructor(props.courseId, userId);
+      await instructorService.removeInstructor(props.courseId, userId);
       $q.notify({ type: 'positive', message: 'ลบผู้สอนสำเร็จ', position: 'top' });
       fetchInstructors();
     } catch (error: any) {
diff --git a/frontend_management/docker-compose.yml b/frontend_management/docker-compose.yml
index 0ee04808..e3488897 100644
--- a/frontend_management/docker-compose.yml
+++ b/frontend_management/docker-compose.yml
@@ -12,7 +12,7 @@ services:
       - apparmor=unconfined
     environment:
       - NODE_ENV=production
-      - NUXT_PUBLIC_API_BASE_URL=${NUXT_PUBLIC_API_BASE_URL:-http://localhost:4000/api}
+      - NUXT_PUBLIC_API_BASE_URL=${NUXT_PUBLIC_API_BASE_URL:-http://localhost:4000}
     restart: unless-stopped
     healthcheck:
       test: [ "CMD", "wget", "--no-verbose", "--tries=1", "--spider", "http://localhost:3001" ]
diff --git a/frontend_management/services/instructor.service.ts b/frontend_management/services/instructor.service.ts
index 52d1b5c0..207c5e5e 100644
--- a/frontend_management/services/instructor.service.ts
+++ b/frontend_management/services/instructor.service.ts
@@ -286,9 +286,9 @@ export const instructorService = {
         );
     },
 
-    async searchInstructors(query: string): Promise<SearchInstructorResult[]> {
+    async searchInstructors(query: string, courseId: number): Promise<SearchInstructorResult[]> {
         const response = await authRequest<SearchInstructorsResponse>(
-            `/api/instructors/courses/search-instructors?query=${encodeURIComponent(query)}`
+            `/api/instructors/courses/${courseId}/search-instructors?query=${encodeURIComponent(query)}`
         );
         return response.data;
     },