chamomind/elearning
7
0
Fork 0
Code Issues 4 Pull requests Projects Releases Packages 3 Wiki Activity Actions

feat: Implement core e-learning features including course discovery, classroom components, user profile management, and internationalization for English and Thai.

Browse source
This commit is contained in:
supalerk-ar66 2026-02-11 11:25:55 +07:00
parent e7a2ac8b5a
commit 7ead98375e
11 changed files with 107 additions and 43 deletions
Download patch file Download diff file Expand all files Collapse all files

16
Frontend-Learner/components/classroom/AnnouncementModal.vue
View file

@ -13,11 +13,15 @@ const emit = defineEmits<{
(e: 'update:modelValue', value: boolean): void;
}>();
const { locale, t } = useI18n()
// Helper for localization
const getLocalizedText = (text: any) => {
if (!text) return ''
if (typeof text === 'string') return text
return text.th || text.en || ''
const currentLocale = locale.value as 'th' | 'en'
return text[currentLocale] || text.th || text.en || ''
}
</script>
@ -30,9 +34,9 @@ const getLocalizedText = (text: any) => {
<div class="w-10 h-10 rounded-full bg-blue-50 dark:bg-blue-900/30 text-primary flex items-center justify-center">
<q-icon name="campaign" size="22px" />
</div>
{{ $t('classroom.announcements', 'ประกาศในคอร์สเรียน') }}
{{ $t('classroom.announcements') }}
</div>
<div class="text-xs text-slate-500 dark:text-slate-400 ml-12 mt-1">{{ announcements.length }} รายการ</div>
<div class="text-xs text-slate-500 dark:text-slate-400 ml-12 mt-1">{{ announcements.length }} {{ $t('common.items') }}</div>
</div>
<q-btn icon="close" flat round dense v-close-popup class="text-slate-400 hover:text-slate-700 dark:hover:text-white bg-slate-50 dark:bg-slate-800" />
</q-card-section>
@ -62,16 +66,16 @@ const getLocalizedText = (text: any) => {
</q-avatar>
<div class="flex-1">
<div class="font-bold text-lg text-slate-900 dark:text-white leading-tight pr-8 capitalize font-display">
{{ getLocalizedText(ann.title) || 'ประกาศ' }}
{{ getLocalizedText(ann.title) || $t('sidebar.announcements') }}
</div>
<div class="text-xs text-slate-500 dark:text-slate-400 flex items-center gap-2 mt-1.5">
<span class="flex items-center gap-1 bg-slate-100 dark:bg-slate-700 px-2 py-0.5 rounded-md">
<q-icon name="today" size="12px" />
{{ new Date(ann.created_at || Date.now()).toLocaleDateString('th-TH', { day: 'numeric', month: 'short', year: 'numeric' }) }}
{{ new Date(ann.created_at || Date.now()).toLocaleDateString(locale === 'th' ? 'th-TH' : 'en-US', { day: 'numeric', month: 'short', year: 'numeric' }) }}
</span>
<span class="flex items-center gap-1 bg-slate-100 dark:bg-slate-700 px-2 py-0.5 rounded-md">
<q-icon name="access_time" size="12px" />
{{ new Date(ann.created_at || Date.now()).toLocaleTimeString('th-TH', { hour: '2-digit', minute: '2-digit' }) }}
{{ new Date(ann.created_at || Date.now()).toLocaleTimeString(locale === 'th' ? 'th-TH' : 'en-US', { hour: '2-digit', minute: '2-digit' }) }}
</span>
</div>
</div>

6
Frontend-Learner/components/classroom/CurriculumSidebar.vue
View file

@ -19,11 +19,15 @@ const emit = defineEmits<{
(e: 'open-announcements'): void;
}>();
const { locale } = useI18n()
// Helper for localization
const getLocalizedText = (text: any) => {
if (!text) return ''
if (typeof text === 'string') return text
return text.th || text.en || ''
const currentLocale = locale.value as 'th' | 'en'
return text[currentLocale] || text.th || text.en || ''
}
</script>

6
Frontend-Learner/components/course/CourseCard.vue
View file

@ -39,10 +39,14 @@ const emit = defineEmits<{
viewCertificate: []
}>()
const { locale } = useI18n()
const getLocalizedText = (text: string | { th: string; en: string } | undefined) => {
if (!text) return ''
if (typeof text === 'string') return text
return text.th || text.en || ''
const currentLocale = locale.value as 'th' | 'en'
return text[currentLocale] || text.th || text.en || ''
}
const displayTitle = computed(() => getLocalizedText(props.title))

9
Frontend-Learner/components/discovery/CategorySidebar.vue
View file

@ -13,12 +13,15 @@ const emit = defineEmits<{
(e: "update:modelValue", value: number[]): void;
}>();
const { locale, t } = useI18n();
const showAllCategories = ref(false);
const getLocalizedText = (text: any) => {
if (!text) return "";
if (typeof text === "string") return text;
return text.th || text.en || "";
const currentLocale = locale.value as 'th' | 'en';
return text[currentLocale] || text.th || text.en || "";
};
</script>
@ -26,7 +29,7 @@ const getLocalizedText = (text: any) => {
<div class="category-sidebar-root border rounded-2xl overflow-hidden shadow-sm">
<q-expansion-item
expand-separator
:label="`หมวดหมู่ (${modelValue.length})`"
:label="`${$t('discovery.categoryTitle')} (${modelValue.length})`"
class="category-sidebar-expansion"
header-class="category-sidebar-header"
default-opened
@ -67,7 +70,7 @@ const getLocalizedText = (text: any) => {
>
<q-item-section>
<div class="flex items-center gap-1 text-blue-600 dark:text-blue-400">
{{ showAllCategories ? "แสดงน้อยลง" : "แสดงเพิ่มเติม" }}
{{ showAllCategories ? $t('discovery.showLess') : $t('discovery.showMore') }}
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-4 w-4"

43
Frontend-Learner/components/discovery/CourseDetailView.vue
View file

@ -15,14 +15,21 @@ const emit = defineEmits<{
(e: 'enroll', courseId: number): void;
}>();
const { locale, t } = useI18n();
const getLocalizedText = (text: any) => {
if (!text) return ''
if (typeof text === 'string') return text
return text.th || text.en || ''
const currentLocale = locale.value as 'th' | 'en'
return text[currentLocale] || text.th || text.en || ''
}
const formatPrice = (price: number) => {
return new Intl.NumberFormat('th-TH', { style: 'currency', currency: 'THB' }).format(price);
return new Intl.NumberFormat(locale.value === 'th' ? 'th-TH' : 'en-US', {
style: 'currency',
currency: 'THB'
}).format(price);
}
const enrollmentLoading = ref(false);
@ -43,7 +50,7 @@ const handleEnroll = () => {
<q-btn
flat
icon="arrow_back"
label="ย้อนกลับ"
:label="$t('common.back')"
class="mb-6 font-bold text-slate-500 hover:text-slate-800 dark:text-slate-400 dark:hover:text-white transition-colors"
@click="emit('back')"
/>
@ -72,7 +79,7 @@ const handleEnroll = () => {
/>
<div class="absolute inset-0 flex items-center justify-center">
<div class="w-16 h-16 bg-white/20 backdrop-blur-sm rounded-full flex items-center justify-center ring-1 ring-white/50">
<q-icon name="play_arrow" size="40px" class="text-white" />
<q-icon name="play_arrow" size="40px" class="text-white" />
</div>
</div>
</template>
@ -86,11 +93,11 @@ const handleEnroll = () => {
<div class="flex flex-wrap items-center gap-4 text-sm text-slate-500 dark:text-slate-400 mb-6">
<span class="flex items-center gap-1 bg-slate-100 dark:bg-slate-800 px-3 py-1 rounded-full text-slate-700 dark:text-slate-300 font-medium">
<q-icon name="category" size="16px" class="text-blue-500" />
{{ course.category?.name?.th || course.category?.name?.en || 'ทั่วไป' }}
{{ getLocalizedText(course.category?.name) }}
</span>
<span class="flex items-center gap-1">
<q-icon name="schedule" size="16px" />
{{ course.duration_minutes || 60 }} นาที
{{ course.duration_minutes || 60 }} {{ $t('course.minutes') }}
</span>
<span class="flex items-center gap-1">
<q-icon name="person" size="16px" />
@ -107,14 +114,14 @@ const handleEnroll = () => {
<div class="bg-slate-50 dark:bg-white/5 rounded-3xl p-6 md:p-8">
<h3 class="text-xl font-bold text-slate-900 dark:text-white mb-6 flex items-center gap-2">
<q-icon name="list_alt" class="text-blue-600 dark:text-blue-400" />
เนื้อหาบทเรียน
{{ $t('course.courseContent') }}
</h3>
<div class="space-y-4">
<div v-for="(chapter, idx) in course.chapters" :key="chapter.id" class="bg-white dark:bg-slate-900 rounded-xl border border-slate-200 dark:border-slate-800 overflow-hidden">
<div class="px-6 py-4 bg-slate-100 dark:bg-white/5 font-bold text-slate-800 dark:text-white flex justify-between items-center">
<span>{{ idx + 1 }}. {{ getLocalizedText(chapter.title) }}</span>
<span class="text-xs text-slate-500 dark:text-slate-400 font-normal">{{ chapter.lessons?.length || 0 }} บทเรียน</span>
<span>{{ Number(idx) + 1 }}. {{ getLocalizedText(chapter.title) }}</span>
<span class="text-xs text-slate-500 dark:text-slate-400 font-normal">{{ chapter.lessons?.length || 0 }} {{ $t('course.lessonsUnit') }}</span>
</div>
<div class="divide-y divide-slate-100 dark:divide-slate-800">
<div v-for="lesson in chapter.lessons" :key="lesson.id" class="px-6 py-3 flex items-center gap-3 text-sm text-slate-600 dark:text-slate-400 hover:bg-slate-50 dark:hover:bg-white/5 transition-colors">
@ -124,13 +131,13 @@ const handleEnroll = () => {
size="18px"
/>
<span class="flex-1">{{ getLocalizedText(lesson.title) }}</span>
<span v-if="lesson.duration_minutes" class="text-slate-400 dark:text-slate-500 text-xs">{{ lesson.duration_minutes }} นาที</span>
<span v-if="lesson.duration_minutes" class="text-slate-400 dark:text-slate-500 text-xs">{{ lesson.duration_minutes }} {{ $t('course.minutes') }}</span>
<q-icon v-if="lesson.is_locked !== false" name="lock" size="14px" class="text-slate-300 dark:text-slate-600" />
</div>
</div>
</div>
<div v-if="!course.chapters || course.chapters.length === 0" class="text-center text-slate-400 dark:text-slate-600 py-8">
ยังไม่มีเนื้อหาในขณะนี้
{{ $t('course.noContent') }}
</div>
</div>
</div>
@ -145,10 +152,10 @@ const handleEnroll = () => {
<div class="relative">
<div class="text-3xl font-black text-slate-900 dark:text-white mb-2 font-display">
{{ course.price > 0 ? formatPrice(course.price) : 'เรียนฟรี' }}
{{ course.price > 0 ? formatPrice(course.price) : $t('course.free') }}
</div>
<div v-if="course.price > 0" class="text-sm text-slate-500 dark:text-slate-400 mb-6 line-through">
{{ formatPrice(course.price * 2) }}
{{ formatPrice(Number(course.price) * 2) }}
</div>
<q-btn
@ -157,13 +164,13 @@ const handleEnroll = () => {
size="lg"
color="primary"
class="w-full mb-4 shadow-lg shadow-blue-600/30 font-bold"
:label="user ? (course.enrolled ? 'เข้าสู่บทเรียน' : (course.price > 0 ? 'ซื้อคอร์สเรียนนี้' : 'ลงทะเบียนเรียนฟรี')) : 'เข้าสู่ระบบเพื่อลงทะเบียน'"
:label="user ? (course.enrolled ? $t('course.startLearning') : (course.price > 0 ? $t('course.buyNow') : $t('course.enrollFree'))) : $t('course.loginToEnroll')"
:loading="enrollmentLoading"
@click="handleEnroll"
/>
<div class="text-xs text-center text-slate-400 dark:text-slate-500">
รับประกันความพึงพอใจ คืนเงินภายใน 7 วัน
{{ $t('course.satisfactionGuarantee') }}
</div>
<hr class="my-6 border-slate-100 dark:border-slate-800">
@ -171,15 +178,15 @@ const handleEnroll = () => {
<div class="space-y-3 block">
<div class="flex items-center gap-3 text-sm text-slate-600 dark:text-slate-400">
<q-icon name="check_circle" class="text-green-500" />
เข้าเรียนได้ตลอดชีพ
{{ $t('course.lifetimeAccess') }}
</div>
<div class="flex items-center gap-3 text-sm text-slate-600 dark:text-slate-400">
<q-icon name="check_circle" class="text-green-500" />
ทำแบบทดสอบไม่จำกัด
{{ $t('course.unlimitedQuizzes') }}
</div>
<div class="flex items-center gap-3 text-sm text-slate-600 dark:text-slate-400">
<q-icon name="check_circle" class="text-green-500" />
ใบประกาศนียบัตรเมื่อเรียนจบ
{{ $t('course.certificate') }} ({{ $t('course.available') }})
</div>
</div>
</div>

13
Frontend-Learner/components/layout/MobileNav.vue
View file

@ -1,9 +1,12 @@
<script setup lang="ts">
const navItems = [
{ to: '/dashboard', icon: 'dashboard', label: 'หน้าหลัก' },
{ to: '/browse/discovery', icon: 'explore', label: 'รายการคอร์ส' },
{ to: '/dashboard/my-courses', icon: 'school', label: 'คอร์สของฉัน' }
]
const { t } = useI18n()
const navItems = computed(() => [
{ to: '/dashboard', icon: 'dashboard', label: t('sidebar.overview') },
{ to: '/browse/discovery', icon: 'explore', label: t('sidebar.browseCourses') },
{ to: '/dashboard/my-courses', icon: 'school', label: t('sidebar.myCourses') }
])
const handleNavigate = (path: string) => {
if (import.meta.client) {
window.location.href = path

12
Frontend-Learner/components/profile/ProfileEditForm.vue
View file

@ -111,7 +111,13 @@ const handleFileUpload = (event: Event) => {
<label class="text-xs font-bold text-slate-500 dark:text-slate-400 ml-1 uppercase">{{ $t('profile.prefix') }}</label>
<q-select
v-model="modelValue.prefix"
:options="['นาย', 'นาง', 'นางสาว']"
:options="[
{ label: $t('profile.mr'), value: 'นาย' },
{ label: $t('profile.mrs'), value: 'นาง' },
{ label: $t('profile.miss'), value: 'นางสาว' }
]"
emit-value
map-options
outlined
dense
rounded
@ -161,7 +167,7 @@ const handleFileUpload = (event: Event) => {
<template v-slot:append>
<div v-if="modelValue.emailVerifiedAt" class="flex items-center gap-1">
<q-icon name="check_circle" color="positive" />
<span class="text-green-600 text-xs font-bold">{{ $t('profile.emailVerified') || 'ยืนยันแล้ว' }}</span>
<span class="text-green-600 text-xs font-bold">{{ $t('profile.emailVerified') }}</span>
</div>
<q-btn
v-else
@ -170,7 +176,7 @@ const handleFileUpload = (event: Event) => {
no-caps
color="negative"
icon="mark_email_read"
:label="$t('profile.verifyEmail') || 'ยืนยัน'"
:label="$t('profile.verifyEmail')"
class="text-sm font-bold"
:loading="verifying"
@click="$emit('verify')"

7
Frontend-Learner/composables/useCourse.ts
View file

@ -644,14 +644,19 @@ export const useCourse = () => {
}
}
const { locale } = useI18n()
/**
* Helper: แปลงข้อมูล 2 ภาษาเป็นข้อความตาม locale ปัจจุบัน หรือค่าที่มีอยู่
*/
const getLocalizedText = (text: string | { th: string; en: string } | undefined | null) => {
if (!text) return ''
if (typeof text === 'string') return text
// Return based on current locale, fallback to th then en
const currentLocale = locale.value as 'th' | 'en'
// @ts-ignore
return text.th || text.en || ''
return text[currentLocale] || text.th || text.en || ''
}
return {

16
Frontend-Learner/i18n/locales/en.json
View file

@ -39,7 +39,15 @@
"startLearning": "Start Learning",
"studyAgain": "Study Again",
"downloadCertificate": "Download Certificate",
"completed": "Completed"
"completed": "Completed",
"lifetimeAccess": "Lifetime access",
"unlimitedQuizzes": "Unlimited quizzes",
"satisfactionGuarantee": "Satisfaction guarantee, 7-day refund",
"noContent": "No content available yet",
"buyNow": "Buy this course",
"enrollFree": "Enroll for free",
"loginToEnroll": "Log in to enroll",
"minutes": "Minutes"
},
"sidebar": {
"overview": "Home",
@ -99,6 +107,9 @@
"removeAvatar": "Remove Profile Photo",
"uploadLimit": "PNG, JPG, WEBP only, max 5 MB",
"prefix": "Prefix",
"mr": "Mr.",
"mrs": "Mrs.",
"miss": "Ms.",
"firstName": "First Name",
"lastName": "Last Name",
"security": "Security",
@ -166,7 +177,8 @@
"back": "Back",
"backToHome": "Back to Home",
"error": "Error",
"loading": "Loading"
"loading": "Loading",
"items": "Items"
},
"classroom": {
"backToDashboard": "Back to My Courses",

16
Frontend-Learner/i18n/locales/th.json
View file

@ -39,7 +39,15 @@
"startLearning": "เริ่มเรียนทันที",
"studyAgain": "ทบทวนบทเรียน",
"downloadCertificate": "ดาวน์โหลดประกาศนียบัตร",
"completed": "เรียนจบเรียบร้อย"
"completed": "เรียนจบเรียบร้อย",
"lifetimeAccess": "เข้าเรียนได้ตลอดชีพ",
"unlimitedQuizzes": "ทำแบบทดสอบไม่จำกัด",
"satisfactionGuarantee": "รับประกันความพึงพอใจ คืนเงินภายใน 7 วัน",
"noContent": "ยังไม่มีเนื้อหาในขณะนี้",
"buyNow": "ซื้อคอร์สเรียนนี้",
"enrollFree": "ลงทะเบียนเรียนฟรี",
"loginToEnroll": "เข้าสู่ระบบเพื่อลงทะเบียน",
"minutes": "นาที"
},
"sidebar": {
"overview": "หน้าหลัก",
@ -99,6 +107,9 @@
"removeAvatar": "ลบรูปโปรไฟล์",
"uploadLimit": "เฉพาะไฟล์ png, jpg, ขนาดไม่เกิน 5 MB",
"prefix": "คำนำหน้า",
"mr": "นาย",
"mrs": "นาง",
"miss": "นางสาว",
"firstName": "ชื่อ",
"lastName": "นามสกุล",
"security": "ความปลอดภัย",
@ -166,7 +177,8 @@
"back": "ย้อนกลับ",
"backToHome": "กลับสู่หน้าหลัก",
"error": "เกิดข้อผิดพลาด",
"loading": "กำลังโหลด"
"loading": "กำลังโหลด",
"items": "รายการ"
},
"classroom": {
"backToDashboard": "กลับไปคอร์สของฉัน",

6
Frontend-Learner/pages/dashboard/my-courses.vue
View file

@ -27,11 +27,15 @@ onMounted(() => {
}
})
const { locale } = useI18n()
// Helper to get localized text
const getLocalizedText = (text: string | { th: string; en: string } | undefined) => {
if (!text) return ''
if (typeof text === 'string') return text
return text.th || text.en || ''
const currentLocale = locale.value as 'th' | 'en'
return text[currentLocale] || text.th || text.en || ''
}
// Data Handling