elearning/frontend_management/pages/instructor/profile/index.vue

<template>
  <div>
    <!-- Header -->
    <div class="mb-6">
      <h1 class="text-3xl font-bold text-gray-900">โปรไฟล์ของฉัน</h1>
      <p class="text-gray-600 mt-2">จัดการข้อมูลส่วนตัวของคุณ</p>
    </div>

    <!-- Profile Card -->
    <div class="mb-10 ">
      <div class="flex flex-col md:flex-row gap-8">
        <!-- Avatar Section -->
        <div class="flex flex-col items-center">
          <div class="w-32 h-32 bg-primary-100 rounded-full flex items-center justify-center text-6xl mb-4">
            {{ profile.avatar }}
          </div>
          <q-btn
            outline
            color="primary"
            label="เปลี่ยนรูป"
            icon="photo_camera"
            @click="handleAvatarUpload"
          />
        </div>

        <!-- Profile Info -->
        <div class="flex-1">
          <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div>
              <div class="text-sm text-gray-600 mb-1">ชื่อ-นามสกุล</div>
              <div class="text-lg font-semibold text-gray-900">{{ profile.fullName }}</div>
            </div>
            
            <div>
              <div class="text-sm text-gray-600 mb-1">อีเมล</div>
              <div class="text-lg text-gray-900">{{ profile.email }}</div>
            </div>
            
            <div>
              <div class="text-sm text-gray-600 mb-1">Username</div>
              <div class="text-lg text-gray-900">{{ profile.username }}</div>
            </div>
            
            <div>
              <div class="text-sm text-gray-600 mb-1">เบอร์โทร</div>
              <div class="text-lg text-gray-900">{{ profile.phone || '-' }}</div>
            </div>
            
            <div>
              <div class="text-sm text-gray-600 mb-1">ตำแหน่ง</div>
              <div class="text-lg text-gray-900">
                <q-badge color="primary">{{ profile.roleName || getRoleLabel(profile.role) }}</q-badge>
              </div>
            </div>
            
            <div>
              <div class="text-sm text-gray-600 mb-1">วันที่สมัคร</div>
              <div class="text-lg text-gray-900">{{ formatDate(profile.createdAt) }}</div>
            </div>
          </div>

          <!-- Action Buttons -->
          <div class="flex gap-3 mt-6">
            <q-btn
              color="primary"
              label="แก้ไขโปรไฟล์"
              icon="edit"
              @click="showEditModal = true"
            />
            <q-btn
              outline
              color="grey-7"
              label="เปลี่ยนรหัสผ่าน"
              icon="lock"
              @click="showPasswordModal = true"
            />
          </div>
        </div>
      </div>
    </div>
    
    <!-- Stats Cards
    <div class="grid grid-cols-1 md:grid-cols-2 gap-5 mt-5">
      <AppCard>
        <div class="text-center py-4">
          <div class="text-4xl font-bold text-primary-600 mb-2">{{ stats.totalCourses }}</div>
          <div class="text-gray-600">หลักสูตรที่สร้าง</div>
        </div>
      </AppCard>

      <AppCard>
        <div class="text-center py-4">
          <div class="text-4xl font-bold text-secondary-600 mb-2">{{ stats.totalStudents }}</div>
          <div class="text-gray-600">ผู้เรียนทั้งหมด</div>
        </div>
      </AppCard>
    </div> -->

    <!-- Edit Profile Modal -->
    <q-dialog v-model="showEditModal" persistent>
      <q-card style="min-width: 500px">
        <q-card-section class="row items-center q-pb-none">
          <div class="text-h6">แก้ไขโปรไฟล์</div>
          <q-space />
          <q-btn icon="close" flat round dense @click="showEditModal = false" />
        </q-card-section>

        <q-card-section>
          <q-form @submit="handleUpdateProfile">
            <q-input
              v-model="editForm.firstName"
              label="ชื่อ"
              outlined
              class="mb-4"
              :rules="[val => !!val || 'กรุณากรอกชื่อ']"
            >
              <template v-slot:prepend>
                <q-icon name="person" />
              </template>
            </q-input>

            <q-input
              v-model="editForm.lastName"
              label="นามสกุล"
              outlined
              class="mb-4"
              :rules="[val => !!val || 'กรุณากรอกนามสกุล']"
            >
              <template v-slot:prepend>
                <q-icon name="person" />
              </template>
            </q-input>

            <q-input
              v-model="editForm.phone"
              label="เบอร์โทร"
              outlined
              class="mb-4"
            >
              <template v-slot:prepend>
                <q-icon name="phone" />
              </template>
            </q-input>

            <div class="flex justify-end gap-2 mt-4">
              <q-btn
                flat
                label="ยกเลิก"
                color="grey-7"
                @click="showEditModal = false"
              />
              <q-btn
                type="submit"
                label="บันทึก"
                color="primary"
                :loading="saving"
              />
            </div>
          </q-form>
        </q-card-section>
      </q-card>
    </q-dialog>

    <!-- Change Password Modal -->
    <q-dialog v-model="showPasswordModal" persistent>
      <q-card style="min-width: 500px">
        <q-card-section class="row items-center q-pb-none">
          <div class="text-h6">เปลี่ยนรหัสผ่าน</div>
          <q-space />
          <q-btn icon="close" flat round dense @click="showPasswordModal = false" />
        </q-card-section>

        <q-card-section>
          <q-form @submit="handleChangePassword">
            <q-input
              v-model="passwordForm.currentPassword"
              label="รหัสผ่านปัจจุบัน"
              :type="showCurrentPassword ? 'text' : 'password'"
              outlined
              class="mb-4"
              :rules="[val => !!val || 'กรุณากรอกรหัสผ่านปัจจุบัน']"
            >
              <template v-slot:prepend>
                <q-icon name="lock" />
              </template>
              <template v-slot:append>
                <q-icon
                  :name="showCurrentPassword ? 'visibility_off' : 'visibility'"
                  class="cursor-pointer"
                  @click="showCurrentPassword = !showCurrentPassword"
                />
              </template>
            </q-input>

            <q-input
              v-model="passwordForm.newPassword"
              label="รหัสผ่านใหม่"
              :type="showNewPassword ? 'text' : 'password'"
              outlined
              class="mb-4"
              :rules="[
                val => !!val || 'กรุณากรอกรหัสผ่านใหม่',
                val => val.length >= 6 || 'รหัสผ่านต้องมีอย่างน้อย 6 ตัวอักษร'
              ]"
            >
              <template v-slot:prepend>
                <q-icon name="lock" />
              </template>
              <template v-slot:append>
                <q-icon
                  :name="showNewPassword ? 'visibility_off' : 'visibility'"
                  class="cursor-pointer"
                  @click="showNewPassword = !showNewPassword"
                />
              </template>
            </q-input>

            <q-input
              v-model="passwordForm.confirmPassword"
              label="ยืนยันรหัสผ่านใหม่"
              :type="showConfirmPassword ? 'text' : 'password'"
              outlined
              class="mb-4"
              :rules="[
                val => !!val || 'กรุณายืนยันรหัสผ่าน',
                val => val === passwordForm.newPassword || 'รหัสผ่านไม่ตรงกัน'
              ]"
            >
              <template v-slot:prepend>
                <q-icon name="lock" />
              </template>
              <template v-slot:append>
                <q-icon
                  :name="showConfirmPassword ? 'visibility_off' : 'visibility'"
                  class="cursor-pointer"
                  @click="showConfirmPassword = !showConfirmPassword"
                />
              </template>
            </q-input>

            <div class="flex justify-end gap-2 mt-4">
              <q-btn
                flat
                label="ยกเลิก"
                color="grey-7"
                @click="showPasswordModal = false"
              />
              <q-btn
                type="submit"
                label="เปลี่ยนรหัสผ่าน"
                color="primary"
                :loading="changingPassword"
              />
            </div>
          </q-form>
        </q-card-section>
      </q-card>
    </q-dialog>
  </div>
</template>

<script setup lang="ts">
import { useQuasar } from 'quasar';
import { userService, type UserProfileResponse } from '~/services/user.service';

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

const $q = useQuasar();
const authStore = useAuthStore();

// Loading state
const loading = ref(true);

// Profile data
const profile = ref({
  fullName: '',
  email: '',
  username: '',
  phone: '',
  role: '',
  roleName: '',
  avatar: '👨‍🏫',
  createdAt: ''
});

const stats = ref({
  totalCourses: 5,
  totalStudents: 125
});

// Edit form
const showEditModal = ref(false);
const saving = ref(false);
const editForm = ref({
  firstName: '',
  lastName: '',
  phone: ''
});

// Password form
const showPasswordModal = ref(false);
const changingPassword = ref(false);
const showCurrentPassword = ref(false);
const showNewPassword = ref(false);
const showConfirmPassword = ref(false);
const passwordForm = ref({
  currentPassword: '',
  newPassword: '',
  confirmPassword: ''
});

// Methods
const getRoleLabel = (role: string) => {
  const labels: Record<string, string> = {
    INSTRUCTOR: 'ผู้สอน',
    ADMIN: 'ผู้ดูแลระบบ',
    STUDENT: 'ผู้เรียน'
  };
  return labels[role] || role;
};

const formatDate = (date: string) => {
  return new Date(date).toLocaleDateString('th-TH', {
    year: 'numeric',
    month: 'long',
    day: 'numeric'
  });
};

const handleAvatarUpload = () => {
  $q.notify({
    type: 'info',
    message: 'ฟีเจอร์อัพโหลดรูปภาพจะพร้อมใช้งานเร็วๆ นี้',
    position: 'top'
  });
};

const handleUpdateProfile = async () => {
  saving.value = true;
  
  try {
    // Call real API to update profile
    await userService.updateProfile({
      first_name: editForm.value.firstName,
      last_name: editForm.value.lastName,
      phone: editForm.value.phone || null
    });
    
    // Refresh profile data from API
    await fetchProfile();
    
    $q.notify({
      type: 'positive',
      message: 'อัพเดทโปรไฟล์สำเร็จ',
      position: 'top'
    });
    
    showEditModal.value = false;
  } catch (error: any) {
    $q.notify({
      type: 'negative',
      message: 'เกิดข้อผิดพลาด กรุณาลองใหม่อีกครั้ง',
      position: 'top'
    });
  } finally {
    saving.value = false;
  }
};

const handleChangePassword = async () => {
  changingPassword.value = true;
  
  try {
    // Call real API to change password
    await userService.changePassword(
      passwordForm.value.currentPassword,
      passwordForm.value.newPassword
    );
    
    $q.notify({
      type: 'positive',
      message: 'เปลี่ยนรหัสผ่านสำเร็จ',
      position: 'top'
    });
    
    showPasswordModal.value = false;
    passwordForm.value = {
      currentPassword: '',
      newPassword: '',
      confirmPassword: ''
    };
  } catch (error: any) {
    $q.notify({
      type: 'negative',
      message: error.response?.status === 401 
        ? 'รหัสผ่านปัจจุบันไม่ถูกต้อง' 
        : 'เกิดข้อผิดพลาดในการเปลี่ยนรหัสผ่าน',
      position: 'top'
    });
  } finally {
    changingPassword.value = false;
  }
};

// Watch edit modal
watch(showEditModal, (newVal) => {
  if (newVal) {
    // Split fullName into firstName and lastName for editing
    const nameParts = profile.value.fullName.split(' ');
    editForm.value = {
      firstName: nameParts[0] || '',
      lastName: nameParts.slice(1).join(' ') || '',
      phone: profile.value.phone
    };
  }
});

// Fetch profile from API
const fetchProfile = async () => {
  loading.value = true;
  try {
    const data = await userService.getProfile();
    
    // Map API response to profile
    profile.value = {
      fullName: `${data.profile.first_name} ${data.profile.last_name}`,
      email: data.email,
      username: data.username,
      phone: data.profile.phone || '',
      role: data.role.code,
      roleName: data.role.name.th,
      avatar: data.profile.avatar_url || '👨‍🏫',
      createdAt: data.created_at
    };
  } catch (error) {
    $q.notify({
      type: 'negative',
      message: 'ไม่สามารถโหลดข้อมูลโปรไฟล์ได้',
      position: 'top'
    });
  } finally {
    loading.value = false;
  }
};

// Load profile on mount
onMounted(() => {
  fetchProfile();
});
</script>