583 lines
18 KiB
Vue
583 lines
18 KiB
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 rounded-full flex items-center justify-center text-6xl mb-4 overflow-hidden bg-primary-100">
|
|
<img
|
|
v-if="profile.avatarUrl"
|
|
:key="profile.avatarUrl"
|
|
:src="profile.avatarUrl"
|
|
alt=""
|
|
class="w-full h-full object-cover"
|
|
@error="onAvatarError"
|
|
/>
|
|
<span v-else>{{ profile.avatar }}</span>
|
|
</div>
|
|
<q-btn
|
|
outline
|
|
color="primary"
|
|
label="เปลี่ยนรูป"
|
|
icon="photo_camera"
|
|
:loading="uploadingAvatar"
|
|
@click="triggerAvatarUpload"
|
|
/>
|
|
<p class="text-xs text-gray-400 mt-2">ขนาดไม่เกิน 5MB</p>
|
|
<input
|
|
ref="avatarInputRef"
|
|
type="file"
|
|
accept="image/*"
|
|
class="hidden"
|
|
@change="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 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 flex items-center gap-2">
|
|
{{ profile.email }}
|
|
<q-badge v-if="profile.emailVerified" color="positive" label="ยืนยันแล้ว" />
|
|
<q-badge v-else color="warning" label="ยังไม่ยืนยัน" />
|
|
</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">{{ profile.roleName || getRoleLabel(profile.role) }}</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 flex-wrap 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"
|
|
/>
|
|
<q-btn
|
|
v-if="!profile.emailVerified"
|
|
outline
|
|
color="orange"
|
|
label="ขอยืนยันอีเมล"
|
|
icon="mark_email_unread"
|
|
:loading="sendingVerification"
|
|
@click="handleSendVerificationEmail"
|
|
/>
|
|
</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 || 'กรุณากรอกชื่อ']"
|
|
lazy-rules="ondemand"
|
|
hide-bottom-space
|
|
>
|
|
<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 || 'กรุณากรอกนามสกุล']"
|
|
lazy-rules="ondemand"
|
|
hide-bottom-space
|
|
>
|
|
<template v-slot:prepend>
|
|
<q-icon name="person" />
|
|
</template>
|
|
</q-input>
|
|
|
|
<q-input
|
|
v-model="editForm.phone"
|
|
label="เบอร์โทร"
|
|
outlined
|
|
class="mb-4"
|
|
lazy-rules="ondemand"
|
|
hide-bottom-space
|
|
>
|
|
<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 || 'กรุณากรอกรหัสผ่านปัจจุบัน']"
|
|
lazy-rules="ondemand"
|
|
hide-bottom-space
|
|
>
|
|
<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 ตัวอักษร'
|
|
]"
|
|
lazy-rules="ondemand"
|
|
hide-bottom-space
|
|
>
|
|
<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 || 'รหัสผ่านไม่ตรงกัน'
|
|
]"
|
|
lazy-rules="ondemand"
|
|
hide-bottom-space
|
|
>
|
|
<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';
|
|
import { authService } from '~/services/auth.service';
|
|
|
|
definePageMeta({
|
|
layout: 'admin',
|
|
middleware: 'auth'
|
|
});
|
|
|
|
const $q = useQuasar();
|
|
const authStore = useAuthStore();
|
|
|
|
// Loading state
|
|
const loading = ref(true);
|
|
|
|
// Profile data
|
|
const profile = ref({
|
|
fullName: '',
|
|
email: '',
|
|
emailVerified: false,
|
|
username: '',
|
|
phone: '',
|
|
role: '',
|
|
roleName: '',
|
|
avatar: '',
|
|
avatarUrl: '' as string | null,
|
|
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: ''
|
|
});
|
|
|
|
// Email verification
|
|
const sendingVerification = ref(false);
|
|
|
|
// Methods
|
|
const getRoleLabel = (role: string) => {
|
|
const labels: Record<string, string> = {
|
|
INSTRUCTOR: 'ผู้สอน',
|
|
ADMIN: 'ผู้ดูแลระบบ',
|
|
STUDENT: 'ผู้เรียน'
|
|
};
|
|
return labels[role] || role;
|
|
};
|
|
|
|
const formatDate = (date: string, includeTime = true) => {
|
|
const options: Intl.DateTimeFormatOptions = {
|
|
day: 'numeric',
|
|
month: 'short',
|
|
year: '2-digit'
|
|
};
|
|
|
|
if (includeTime) {
|
|
options.hour = '2-digit';
|
|
options.minute = '2-digit';
|
|
}
|
|
|
|
return new Date(date).toLocaleDateString('th-TH', options);
|
|
};
|
|
|
|
// Avatar upload
|
|
const avatarInputRef = ref<HTMLInputElement | null>(null);
|
|
const uploadingAvatar = ref(false);
|
|
|
|
const triggerAvatarUpload = () => {
|
|
avatarInputRef.value?.click();
|
|
};
|
|
|
|
const onAvatarError = () => {
|
|
// Fallback to emoji if image fails
|
|
profile.value.avatarUrl = null;
|
|
};
|
|
|
|
const handleAvatarUpload = async (event: Event) => {
|
|
const input = event.target as HTMLInputElement;
|
|
const file = input.files?.[0];
|
|
if (!file) return;
|
|
|
|
// Validate file type
|
|
if (!file.type.startsWith('image/')) {
|
|
$q.notify({
|
|
type: 'warning',
|
|
message: 'กรุณาเลือกไฟล์รูปภาพเท่านั้น',
|
|
position: 'top'
|
|
});
|
|
return;
|
|
}
|
|
|
|
// Validate file size (max 5MB)
|
|
if (file.size > 5 * 1024 * 1024) {
|
|
$q.notify({
|
|
type: 'warning',
|
|
message: 'ไฟล์มีขนาดใหญ่เกิน 5MB',
|
|
position: 'top'
|
|
});
|
|
return;
|
|
}
|
|
|
|
uploadingAvatar.value = true;
|
|
try {
|
|
const response = await userService.uploadAvatar(file);
|
|
|
|
// Re-fetch profile to get presigned URL from backend
|
|
await fetchProfile();
|
|
|
|
$q.notify({
|
|
type: 'positive',
|
|
message: response.message || 'อัพโหลดรูปโปรไฟล์สำเร็จ',
|
|
position: 'top'
|
|
});
|
|
} catch (error: any) {
|
|
console.error('Failed to upload avatar:', error);
|
|
$q.notify({
|
|
type: 'negative',
|
|
message: error.data?.message || 'เกิดข้อผิดพลาดในการอัพโหลดรูป',
|
|
position: 'top'
|
|
});
|
|
} finally {
|
|
uploadingAvatar.value = false;
|
|
input.value = '';
|
|
}
|
|
};
|
|
|
|
const handleUpdateProfile = async () => {
|
|
saving.value = true;
|
|
|
|
try {
|
|
// Call real API to update profile
|
|
const response = 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: response.message || 'อัพเดทโปรไฟล์สำเร็จ',
|
|
position: 'top'
|
|
});
|
|
|
|
showEditModal.value = false;
|
|
} catch (error: any) {
|
|
$q.notify({
|
|
type: 'negative',
|
|
message: error.data?.message || 'เกิดข้อผิดพลาด กรุณาลองใหม่อีกครั้ง',
|
|
position: 'top'
|
|
});
|
|
} finally {
|
|
saving.value = false;
|
|
}
|
|
};
|
|
|
|
const handleChangePassword = async () => {
|
|
changingPassword.value = true;
|
|
|
|
try {
|
|
// Call real API to change password
|
|
const response = await userService.changePassword(
|
|
passwordForm.value.currentPassword,
|
|
passwordForm.value.newPassword
|
|
);
|
|
|
|
$q.notify({
|
|
type: 'positive',
|
|
message: response.message || 'เปลี่ยนรหัสผ่านสำเร็จ',
|
|
position: 'top'
|
|
});
|
|
|
|
showPasswordModal.value = false;
|
|
passwordForm.value = {
|
|
currentPassword: '',
|
|
newPassword: '',
|
|
confirmPassword: ''
|
|
};
|
|
} catch (error: any) {
|
|
$q.notify({
|
|
type: 'negative',
|
|
message: error.data?.message || (error.response?.status === 401
|
|
? 'รหัสผ่านปัจจุบันไม่ถูกต้อง'
|
|
: 'เกิดข้อผิดพลาดในการเปลี่ยนรหัสผ่าน'),
|
|
position: 'top'
|
|
});
|
|
} finally {
|
|
changingPassword.value = false;
|
|
}
|
|
};
|
|
|
|
const handleSendVerificationEmail = async () => {
|
|
sendingVerification.value = true;
|
|
try {
|
|
const response = await authService.sendVerifyEmail();
|
|
$q.notify({
|
|
type: 'positive',
|
|
message: response.message || 'ส่งอีเมลยืนยันไปยังอีเมลของคุณแล้ว',
|
|
position: 'top'
|
|
});
|
|
} catch (error: any) {
|
|
$q.notify({
|
|
type: 'negative',
|
|
message: error.data?.message || 'เกิดข้อผิดพลาดในการส่งอีเมลยืนยัน',
|
|
position: 'top'
|
|
});
|
|
} finally {
|
|
sendingVerification.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,
|
|
emailVerified: !!data.email_verified_at,
|
|
username: data.username,
|
|
phone: data.profile.phone || '',
|
|
role: data.role.code,
|
|
roleName: data.role.name.th,
|
|
avatar: '',
|
|
avatarUrl: 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>
|