feat: Add course detail page and comprehensive English and Thai internationalization.
All checks were successful
Build and Deploy Frontend Learner / Build Frontend Learner Docker Image (push) Successful in 33s
Build and Deploy Frontend Learner / Deploy E-learning Frontend Learner to Dev Server (push) Successful in 3s
Build and Deploy Frontend Learner / Notify Deployment Status (push) Successful in 1s

This commit is contained in:
supalerk-ar66 2026-02-11 17:52:34 +07:00
parent 883e08c6ed
commit d787412036
3 changed files with 11 additions and 6 deletions

View file

@ -83,7 +83,8 @@
"successTitle": "Enrollment Successful!", "successTitle": "Enrollment Successful!",
"successDesc": "You have successfully enrolled in this course.", "successDesc": "You have successfully enrolled in this course.",
"startNow": "Start Learning", "startNow": "Start Learning",
"later": "Later" "later": "Later",
"alreadyEnrolledHint": "You have already enrolled in the course {course}."
}, },
"certificate": { "certificate": {
"title": "Certificate of Completion", "title": "Certificate of Completion",
@ -167,6 +168,7 @@
"newBadge": "New", "newBadge": "New",
"popularBadge": "Popular", "popularBadge": "Popular",
"save": "Save", "save": "Save",
"ok": "OK",
"close": "Close", "close": "Close",
"cancel": "Cancel", "cancel": "Cancel",
"required": "This field is required", "required": "This field is required",

View file

@ -83,7 +83,8 @@
"successTitle": "ลงทะเบียนสำเร็จ!", "successTitle": "ลงทะเบียนสำเร็จ!",
"successDesc": "คุณได้ลงทะเบียนคอร์สนี้เรียบร้อยแล้ว", "successDesc": "คุณได้ลงทะเบียนคอร์สนี้เรียบร้อยแล้ว",
"startNow": "เริ่มเรียนทันที", "startNow": "เริ่มเรียนทันที",
"later": "ไว้ทีหลัง" "later": "ไว้ทีหลัง",
"alreadyEnrolledHint": "ท่านเคยลงทะเบียนคอร์ส {course} นี้ไปเรียบร้อยแล้ว"
}, },
"certificate": { "certificate": {
"title": "ใบประกาศนียบัตรจบหลักสูตร", "title": "ใบประกาศนียบัตรจบหลักสูตร",
@ -167,6 +168,7 @@
"newBadge": "ใหม่", "newBadge": "ใหม่",
"popularBadge": "ยอดนิยม", "popularBadge": "ยอดนิยม",
"save": "บันทึก", "save": "บันทึก",
"ok": "ตกลง",
"close": "ปิด", "close": "ปิด",
"cancel": "ยกเลิก", "cancel": "ยกเลิก",
"required": "กรุณากรอกข้อมูล", "required": "กรุณากรอกข้อมูล",

View file

@ -15,6 +15,7 @@ const route = useRoute()
const courseId = computed(() => parseInt(route.params.id as string)) const courseId = computed(() => parseInt(route.params.id as string))
const { currentUser } = useAuth() const { currentUser } = useAuth()
const $q = useQuasar() const $q = useQuasar()
const { t } = useI18n()
const { fetchCourseById, enrollCourse, getLocalizedText } = useCourse() const { fetchCourseById, enrollCourse, getLocalizedText } = useCourse()
// useAsyncData Server-side rendering (SSR) // useAsyncData Server-side rendering (SSR)
@ -35,10 +36,10 @@ const handleEnroll = async () => {
// (Check ) // (Check )
if (course.value.enrolled) { if (course.value.enrolled) {
$q.dialog({ $q.dialog({
message: `<div class="text-slate-800 text-base leading-relaxed">ท่านเคยลงทะเบียนคอร์ส <b class="text-blue-600">"${getLocalizedText(course.value.title)}"</b> นี้ไปเรียบร้อยแล้ว</div>`, message: `<div class="text-slate-800 text-base leading-relaxed">${t('enrollment.alreadyEnrolledHint', { course: `<b class="text-blue-600">"${getLocalizedText(course.value.title)}"</b>` })}</div>`,
html: true, html: true,
ok: { ok: {
label: 'ตกลง', label: t('common.ok'),
color: 'primary', color: 'primary',
rounded: true, rounded: true,
unelevated: true, unelevated: true,
@ -67,10 +68,10 @@ const handleEnroll = async () => {
// API (Code 409) // API (Code 409)
if (res.code === 409) { if (res.code === 409) {
$q.dialog({ $q.dialog({
message: `<div class="text-slate-800 text-base leading-relaxed">ท่านเคยลงทะเบียนคอร์ส <b class="text-blue-600">"${getLocalizedText(course.value.title)}"</b> นี้ไปเรียบร้อยแล้ว</div>`, message: `<div class="text-slate-800 text-base leading-relaxed">${t('enrollment.alreadyEnrolledHint', { course: `<b class="text-blue-600">"${getLocalizedText(course.value.title)}"</b>` })}</div>`,
html: true, html: true,
ok: { ok: {
label: 'ตกลง', label: t('common.ok'),
color: 'primary', color: 'primary',
rounded: true, rounded: true,
unelevated: true, unelevated: true,