feat: Implement core e-learning features including video playback, user profile management, and course discovery.
This commit is contained in:
supalerk-ar66
parent
2cd1d481aa
commit
a648c41b72
11 changed files with 1085 additions and 747 deletions
94
Frontend-Learner/components/classroom/AnnouncementModal.vue
Normal file
94
Frontend-Learner/components/classroom/AnnouncementModal.vue
Normal file
|
|
@ -0,0 +1,94 @@
|
|||
<script setup lang="ts">
|
||||
/**
|
||||
* @file AnnouncementModal.vue
|
||||
* @description Modal component to display course announcements
|
||||
*/
|
||||
|
||||
const props = defineProps<{
|
||||
modelValue: boolean;
|
||||
announcements: any[];
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:modelValue', value: boolean): void;
|
||||
}>();
|
||||
|
||||
// Helper for localization
|
||||
const getLocalizedText = (text: any) => {
|
||||
if (!text) return ''
|
||||
if (typeof text === 'string') return text
|
||||
return text.th || text.en || ''
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<q-dialog :model-value="modelValue" @update:model-value="(val) => emit('update:modelValue', val)" backdrop-filter="blur(4px)">
|
||||
<q-card class="min-w-[320px] md:min-w-[600px] rounded-3xl overflow-hidden bg-white dark:bg-slate-900 shadow-2xl">
|
||||
<q-card-section class="bg-white dark:bg-slate-900 border-b border-gray-100 dark:border-white/5 p-5 flex items-center justify-between sticky top-0 z-10">
|
||||
<div>
|
||||
<div class="text-xl font-bold flex items-center gap-2 text-slate-900 dark:text-white">
|
||||
<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', 'ประกาศในคอร์สเรียน') }}
|
||||
</div>
|
||||
<div class="text-xs text-slate-500 dark:text-slate-400 ml-12 mt-1">{{ announcements.length }} รายการ</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>
|
||||
|
||||
<q-card-section class="p-0 scroll max-h-[70vh] bg-slate-50 dark:bg-[#0B0F1A]">
|
||||
<div v-if="announcements.length > 0" class="p-4 space-y-4">
|
||||
<div
|
||||
v-for="(ann, index) in announcements"
|
||||
:key="index"
|
||||
class="p-5 rounded-2xl bg-white dark:bg-slate-800 shadow-sm border border-gray-200 dark:border-white/5 transition-all hover:shadow-md relative overflow-hidden group"
|
||||
:class="{'ring-2 ring-orange-200 dark:ring-orange-900/40 bg-orange-50/50 dark:bg-orange-900/10': ann.is_pinned}"
|
||||
>
|
||||
<!-- Pinned Banner -->
|
||||
<div v-if="ann.is_pinned" class="absolute top-0 right-0 p-3">
|
||||
<q-icon name="push_pin" color="orange" size="18px" class="transform rotate-45" />
|
||||
</div>
|
||||
|
||||
<div class="flex items-start gap-4 mb-3">
|
||||
<q-avatar
|
||||
:color="ann.is_pinned ? 'orange-100' : 'blue-50'"
|
||||
:text-color="ann.is_pinned ? 'orange-700' : 'blue-700'"
|
||||
size="42px"
|
||||
font-size="20px"
|
||||
class="shadow-sm"
|
||||
>
|
||||
<span class="font-bold">{{ (getLocalizedText(ann.title) || 'A').charAt(0) }}</span>
|
||||
</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) || 'ประกาศ' }}
|
||||
</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' }) }}
|
||||
</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' }) }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pl-[58px]">
|
||||
<div class="text-slate-600 dark:text-slate-300 leading-relaxed text-sm whitespace-pre-wrap">
|
||||
{{ getLocalizedText(ann.content) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="p-10 flex flex-col items-center justify-center text-slate-400">
|
||||
<q-icon name="campaign" size="40px" class="mb-2 opacity-50" />
|
||||
<p>{{ $t('classroom.noAnnouncements', 'ไม่มีประกาศในขณะนี้') }}</p>
|
||||
</div>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
</template>
|
||||
101
Frontend-Learner/components/classroom/CurriculumSidebar.vue
Normal file
101
Frontend-Learner/components/classroom/CurriculumSidebar.vue
Normal file
|
|
@ -0,0 +1,101 @@
|
|||
<script setup lang="ts">
|
||||
/**
|
||||
* @file CurriculumSidebar.vue
|
||||
* @description Sidebar Component for displaying course curriculum (Chapters & Lessons)
|
||||
* Handles lesson navigation, locked status display, and unread announcement badge.
|
||||
*/
|
||||
|
||||
const props = defineProps<{
|
||||
modelValue: boolean; // Sidebar open state (v-model)
|
||||
courseData: any;
|
||||
currentLessonId: number;
|
||||
isLoading: boolean;
|
||||
hasUnreadAnnouncements: boolean;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:modelValue', value: boolean): void;
|
||||
(e: 'select-lesson', lessonId: number): void;
|
||||
(e: 'open-announcements'): void;
|
||||
}>();
|
||||
|
||||
// Helper for localization
|
||||
const getLocalizedText = (text: any) => {
|
||||
if (!text) return ''
|
||||
if (typeof text === 'string') return text
|
||||
return text.th || text.en || ''
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<q-drawer
|
||||
:model-value="modelValue"
|
||||
@update:model-value="(val) => emit('update:modelValue', val)"
|
||||
show-if-above
|
||||
bordered
|
||||
side="left"
|
||||
:width="320"
|
||||
:breakpoint="1024"
|
||||
class="bg-[var(--bg-surface)]"
|
||||
content-class="bg-[var(--bg-surface)]"
|
||||
>
|
||||
<div v-if="courseData" class="h-full scroll">
|
||||
<q-list class="pb-10">
|
||||
<!-- Announcements Sidebar Item -->
|
||||
<q-item
|
||||
clickable
|
||||
v-ripple
|
||||
@click="emit('open-announcements')"
|
||||
class="bg-blue-50 dark:bg-blue-900/10 border-b border-blue-100 dark:border-blue-900/20"
|
||||
>
|
||||
<q-item-section>
|
||||
<q-item-label class="font-bold text-slate-800 dark:text-blue-200 text-sm pl-2">
|
||||
{{ $t('classroom.announcements', 'ประกาศในคอร์ส') }}
|
||||
</q-item-label>
|
||||
</q-item-section>
|
||||
<q-item-section side v-if="hasUnreadAnnouncements">
|
||||
<q-badge color="red" rounded label="New" />
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
|
||||
<template v-for="chapter in courseData.chapters" :key="chapter.id">
|
||||
<q-item-label header class="bg-slate-100 dark:bg-slate-800 text-[var(--text-main)] font-bold sticky top-0 z-10 border-b dark:border-white/5 text-sm py-4">
|
||||
{{ getLocalizedText(chapter.title) }}
|
||||
</q-item-label>
|
||||
|
||||
<q-item
|
||||
v-for="lesson in chapter.lessons"
|
||||
:key="lesson.id"
|
||||
clickable
|
||||
v-ripple
|
||||
:active="currentLessonId === lesson.id"
|
||||
active-class="bg-blue-50 text-blue-700 dark:bg-blue-900/20 dark:text-blue-200 font-medium"
|
||||
class="border-b border-gray-50 dark:border-white/5"
|
||||
@click="!lesson.is_locked && emit('select-lesson', lesson.id)"
|
||||
:disable="lesson.is_locked"
|
||||
>
|
||||
<q-item-section avatar v-if="lesson.is_locked">
|
||||
<q-icon name="lock" size="xs" color="grey" />
|
||||
</q-item-section>
|
||||
|
||||
<q-item-section>
|
||||
<q-item-label class="text-sm md:text-base line-clamp-2 text-[var(--text-main)]">
|
||||
{{ getLocalizedText(lesson.title) }}
|
||||
</q-item-label>
|
||||
</q-item-section>
|
||||
|
||||
<q-item-section side>
|
||||
<q-icon v-if="lesson.is_completed" name="check_circle" color="positive" size="xs" />
|
||||
<q-icon v-else-if="currentLessonId === lesson.id" name="play_circle" color="primary" size="xs" />
|
||||
<q-icon v-else name="radio_button_unchecked" color="grey-4" size="xs" />
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</template>
|
||||
</q-list>
|
||||
</div>
|
||||
<div v-else-if="isLoading" class="p-6 text-center text-slate-500">
|
||||
<q-spinner color="primary" size="2em" />
|
||||
<div class="mt-2 text-xs">{{ $t('classroom.loadingCurriculum') }}</div>
|
||||
</div>
|
||||
</q-drawer>
|
||||
</template>
|
||||
142
Frontend-Learner/components/classroom/VideoPlayer.vue
Normal file
142
Frontend-Learner/components/classroom/VideoPlayer.vue
Normal file
|
|
@ -0,0 +1,142 @@
|
|||
<script setup lang="ts">
|
||||
/**
|
||||
* @file VideoPlayer.vue
|
||||
* @description Video Player Component with custom controls provided by design
|
||||
*/
|
||||
|
||||
const props = defineProps<{
|
||||
src: string;
|
||||
initialSeekTime?: number;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'timeupdate', currentTime: number, duration: number): void;
|
||||
(e: 'ended'): void;
|
||||
(e: 'loadedmetadata'): void;
|
||||
}>();
|
||||
|
||||
const videoRef = ref<HTMLVideoElement | null>(null);
|
||||
const isPlaying = ref(false);
|
||||
const videoProgress = ref(0);
|
||||
const currentTime = ref(0);
|
||||
const duration = ref(0);
|
||||
|
||||
// Media Prefs
|
||||
const { volume, muted: isMuted, setVolume, setMuted, applyTo } = useMediaPrefs();
|
||||
|
||||
const volumeIcon = computed(() => {
|
||||
if (isMuted.value || volume.value === 0) return 'volume_off';
|
||||
if (volume.value < 0.5) return 'volume_down';
|
||||
return 'volume_up';
|
||||
});
|
||||
|
||||
const formatTime = (time: number) => {
|
||||
const m = Math.floor(time / 60);
|
||||
const s = Math.floor(time % 60);
|
||||
return `${m}:${s.toString().padStart(2, '0')}`;
|
||||
};
|
||||
|
||||
const currentTimeDisplay = computed(() => formatTime(currentTime.value));
|
||||
const durationDisplay = computed(() => formatTime(duration.value || 0));
|
||||
|
||||
const togglePlay = () => {
|
||||
if (!videoRef.value) return;
|
||||
if (isPlaying.value) videoRef.value.pause();
|
||||
else videoRef.value.play();
|
||||
isPlaying.value = !isPlaying.value;
|
||||
};
|
||||
|
||||
const handleTimeUpdate = () => {
|
||||
if (!videoRef.value) return;
|
||||
currentTime.value = videoRef.value.currentTime;
|
||||
duration.value = videoRef.value.duration;
|
||||
videoProgress.value = (currentTime.value / duration.value) * 100;
|
||||
|
||||
emit('timeupdate', currentTime.value, duration.value);
|
||||
};
|
||||
|
||||
const handleLoadedMetadata = () => {
|
||||
if (videoRef.value) {
|
||||
applyTo(videoRef.value);
|
||||
if (props.initialSeekTime && props.initialSeekTime > 0) {
|
||||
const seekTo = Math.min(props.initialSeekTime, videoRef.value.duration || Infinity)
|
||||
videoRef.value.currentTime = seekTo;
|
||||
}
|
||||
}
|
||||
emit('loadedmetadata');
|
||||
};
|
||||
|
||||
const handleEnded = () => {
|
||||
isPlaying.value = false;
|
||||
emit('ended');
|
||||
};
|
||||
|
||||
const seek = (e: MouseEvent) => {
|
||||
if (!videoRef.value) return;
|
||||
const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
|
||||
const percent = (e.clientX - rect.left) / rect.width;
|
||||
videoRef.value.currentTime = percent * videoRef.value.duration;
|
||||
};
|
||||
|
||||
const handleToggleMute = () => {
|
||||
setMuted(!isMuted.value);
|
||||
};
|
||||
|
||||
const handleVolumeChange = (val: any) => {
|
||||
const newVol = typeof val === 'number' ? val : Number(val.target.value);
|
||||
setVolume(newVol);
|
||||
};
|
||||
|
||||
// Expose video ref for parent to control if needed
|
||||
defineExpose({
|
||||
videoRef,
|
||||
pause: () => videoRef.value?.pause(),
|
||||
currentTime: () => videoRef.value?.currentTime || 0
|
||||
});
|
||||
|
||||
// Watch for volume/mute changes to apply to video element
|
||||
watch([volume, isMuted], () => {
|
||||
if (videoRef.value) applyTo(videoRef.value);
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="bg-black rounded-xl overflow-hidden shadow-2xl mb-6 aspect-video relative group ring-1 ring-white/10">
|
||||
<video
|
||||
ref="videoRef"
|
||||
:src="src"
|
||||
class="w-full h-full object-contain"
|
||||
@click="togglePlay"
|
||||
@timeupdate="handleTimeUpdate"
|
||||
@loadedmetadata="handleLoadedMetadata"
|
||||
@ended="handleEnded"
|
||||
/>
|
||||
|
||||
<!-- Custom Controls Overlay -->
|
||||
<div class="absolute bottom-0 left-0 right-0 p-4 bg-gradient-to-t from-black/80 via-black/40 to-transparent transition-opacity opacity-0 group-hover:opacity-100">
|
||||
<div class="flex items-center gap-4 text-white">
|
||||
<q-btn flat round dense :icon="isPlaying ? 'pause' : 'play_arrow'" @click.stop="togglePlay" />
|
||||
<div class="relative flex-grow h-1.5 bg-white/20 rounded-full cursor-pointer group/progress overflow-hidden" @click="seek">
|
||||
<div class="absolute top-0 left-0 h-full bg-blue-500 rounded-full group-hover/progress:bg-blue-400 transition-all shadow-[0_0_10px_rgba(59,130,246,0.5)]" :style="{ width: videoProgress + '%' }"></div>
|
||||
</div>
|
||||
<span class="text-xs font-mono font-medium opacity-90">{{ currentTimeDisplay }} / {{ durationDisplay }}</span>
|
||||
|
||||
<!-- Volume Control -->
|
||||
<div class="flex items-center gap-2 group/volume">
|
||||
<q-btn flat round dense :icon="volumeIcon" @click.stop="handleToggleMute" color="white" />
|
||||
<div class="w-0 group-hover/volume:w-20 overflow-hidden transition-all duration-300 flex items-center">
|
||||
<input
|
||||
type="range"
|
||||
min="0"
|
||||
max="1"
|
||||
step="0.1"
|
||||
:value="volume"
|
||||
@input="handleVolumeChange"
|
||||
class="w-20 h-1 bg-white/30 rounded-lg appearance-none cursor-pointer accent-blue-500"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
80
Frontend-Learner/components/discovery/CategorySidebar.vue
Normal file
80
Frontend-Learner/components/discovery/CategorySidebar.vue
Normal file
|
|
@ -0,0 +1,80 @@
|
|||
<script setup lang="ts">
|
||||
/**
|
||||
* @file CategorySidebar.vue
|
||||
* @description Sidebar for filtering courses by category
|
||||
*/
|
||||
|
||||
const props = defineProps<{
|
||||
categories: any[];
|
||||
modelValue: number[]; // selectedCategoryIds
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:modelValue', value: number[]): void;
|
||||
}>();
|
||||
|
||||
const showAllCategories = ref(false);
|
||||
|
||||
const getLocalizedText = (text: any) => {
|
||||
if (!text) return ''
|
||||
if (typeof text === 'string') return text
|
||||
return text.th || text.en || ''
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="bg-white rounded-2xl shadow-sm border border-slate-200 overflow-hidden">
|
||||
<q-expansion-item
|
||||
expand-separator
|
||||
:label="`หมวดหมู่ (${modelValue.length})`"
|
||||
class="font-bold text-slate-900"
|
||||
header-class="bg-white"
|
||||
text-color="slate-900"
|
||||
:header-style="{ color: '#0f172a' }"
|
||||
default-opened
|
||||
>
|
||||
<q-list class="bg-white border-t border-slate-200">
|
||||
<q-item
|
||||
v-for="cat in (showAllCategories ? categories : categories.slice(0, 4))"
|
||||
:key="cat.id"
|
||||
tag="label"
|
||||
clickable
|
||||
v-ripple
|
||||
dense
|
||||
>
|
||||
<q-item-section avatar>
|
||||
<q-checkbox
|
||||
:model-value="modelValue"
|
||||
@update:model-value="(val) => emit('update:modelValue', val)"
|
||||
:val="cat.id"
|
||||
color="primary"
|
||||
dense
|
||||
class="checkbox-visible"
|
||||
/>
|
||||
</q-item-section>
|
||||
<q-item-section>
|
||||
<q-item-label class="text-sm font-medium text-slate-900">{{ getLocalizedText(cat.name) }}</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
|
||||
<!-- Show More/Less Button -->
|
||||
<q-item
|
||||
v-if="categories.length > 4"
|
||||
clickable
|
||||
v-ripple
|
||||
@click="showAllCategories = !showAllCategories"
|
||||
class="text-blue-600 font-bold text-sm"
|
||||
>
|
||||
<q-item-section>
|
||||
<div class="flex items-center gap-1">
|
||||
{{ showAllCategories ? 'แสดงน้อยลง' : 'แสดงเพิ่มเติม' }}
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" :class="showAllCategories ? 'rotate-180' : ''">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
|
||||
</svg>
|
||||
</div>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-expansion-item>
|
||||
</div>
|
||||
</template>
|
||||
191
Frontend-Learner/components/discovery/CourseDetailView.vue
Normal file
191
Frontend-Learner/components/discovery/CourseDetailView.vue
Normal file
|
|
@ -0,0 +1,191 @@
|
|||
<script setup lang="ts">
|
||||
/**
|
||||
* @file CourseDetailView.vue
|
||||
* @description Quick view of course details including video preview, curriculum, and enroll logic
|
||||
*/
|
||||
import { ref, computed } from 'vue'
|
||||
|
||||
const props = defineProps<{
|
||||
course: any;
|
||||
user: any;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'back'): void;
|
||||
(e: 'enroll', courseId: number): void;
|
||||
}>();
|
||||
|
||||
const getLocalizedText = (text: any) => {
|
||||
if (!text) return ''
|
||||
if (typeof text === 'string') return text
|
||||
return text.th || text.en || ''
|
||||
}
|
||||
|
||||
const formatPrice = (price: number) => {
|
||||
return new Intl.NumberFormat('th-TH', { style: 'currency', currency: 'THB' }).format(price);
|
||||
}
|
||||
|
||||
const enrollmentLoading = ref(false);
|
||||
|
||||
const handleEnroll = () => {
|
||||
if(!props.course) return;
|
||||
enrollmentLoading.value = true;
|
||||
emit('enroll', props.course.id);
|
||||
// Loading state reset depends on parent, but locally we can reset after emit or keep until prop changes
|
||||
// In this pattern, we just emit.
|
||||
setTimeout(() => enrollmentLoading.value = false, 2000); // Safety timeout
|
||||
};
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="animate-fade-in-up">
|
||||
<q-btn
|
||||
flat
|
||||
icon="arrow_back"
|
||||
label="ย้อนกลับ"
|
||||
class="mb-6 font-bold text-slate-500 hover:text-slate-800 transition-colors"
|
||||
@click="emit('back')"
|
||||
/>
|
||||
|
||||
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
|
||||
<!-- Left: Content Detail -->
|
||||
<div class="lg:col-span-2 space-y-8">
|
||||
|
||||
<!-- Video Preview Section -->
|
||||
<div class="relative aspect-video rounded-3xl overflow-hidden shadow-2xl group bg-black">
|
||||
<template v-if="course.media?.video_url">
|
||||
<video
|
||||
controls
|
||||
class="w-full h-full object-cover"
|
||||
:poster="course.cover_image || 'https://placehold.co/800x450?text=Course+Preview'"
|
||||
>
|
||||
<source :src="course.media.video_url" type="video/mp4">
|
||||
Your browser does not support the video tag.
|
||||
</video>
|
||||
</template>
|
||||
<!-- Placeholder if no video -->
|
||||
<template v-else>
|
||||
<img
|
||||
:src="course.cover_image || 'https://placehold.co/800x450?text=No+Preview'"
|
||||
class="w-full h-full object-cover opacity-60"
|
||||
/>
|
||||
<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" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<!-- Course Title & Description -->
|
||||
<div>
|
||||
<h1 class="text-3xl md:text-4xl font-extrabold text-slate-900 mb-4 leading-tight">
|
||||
{{ getLocalizedText(course.title) }}
|
||||
</h1>
|
||||
<div class="flex flex-wrap items-center gap-4 text-sm text-slate-500 mb-6">
|
||||
<span class="flex items-center gap-1 bg-slate-100 px-3 py-1 rounded-full text-slate-700 font-medium">
|
||||
<q-icon name="category" size="16px" class="text-blue-500" />
|
||||
{{ course.category?.name?.th || course.category?.name?.en || 'ทั่วไป' }}
|
||||
</span>
|
||||
<span class="flex items-center gap-1">
|
||||
<q-icon name="schedule" size="16px" />
|
||||
{{ course.duration_minutes || 60 }} นาที
|
||||
</span>
|
||||
<span class="flex items-center gap-1">
|
||||
<q-icon name="person" size="16px" />
|
||||
{{ course.instructor?.first_name }} {{ course.instructor?.last_name }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="prose max-w-none text-slate-600 leading-relaxed font-light">
|
||||
<p>{{ getLocalizedText(course.description) }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Curriculum Preview -->
|
||||
<div class="bg-slate-50 rounded-3xl p-6 md:p-8">
|
||||
<h3 class="text-xl font-bold text-slate-900 mb-6 flex items-center gap-2">
|
||||
<q-icon name="list_alt" class="text-blue-600" />
|
||||
เนื้อหาบทเรียน
|
||||
</h3>
|
||||
|
||||
<div class="space-y-4">
|
||||
<div v-for="(chapter, idx) in course.chapters" :key="chapter.id" class="bg-white rounded-xl border border-slate-200 overflow-hidden">
|
||||
<div class="px-6 py-4 bg-slate-100 font-bold text-slate-800 flex justify-between items-center">
|
||||
<span>{{ idx + 1 }}. {{ getLocalizedText(chapter.title) }}</span>
|
||||
<span class="text-xs text-slate-500 font-normal">{{ chapter.lessons?.length || 0 }} บทเรียน</span>
|
||||
</div>
|
||||
<div class="divide-y divide-slate-100">
|
||||
<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 hover:bg-slate-50 transition-colors">
|
||||
<q-icon
|
||||
:name="lesson.type === 'VIDEO' ? 'play_circle' : 'article'"
|
||||
:class="lesson.type === 'VIDEO' ? 'text-blue-500' : 'text-orange-500'"
|
||||
size="18px"
|
||||
/>
|
||||
<span class="flex-1">{{ getLocalizedText(lesson.title) }}</span>
|
||||
<span v-if="lesson.duration_minutes" class="text-slate-400 text-xs">{{ lesson.duration_minutes }} นาที</span>
|
||||
<q-icon v-if="lesson.is_locked !== false" name="lock" size="14px" class="text-slate-300" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="!course.chapters || course.chapters.length === 0" class="text-center text-slate-400 py-8">
|
||||
ยังไม่มีเนื้อหาในขณะนี้
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Right: Enrollment Card -->
|
||||
<div class="lg:col-span-1">
|
||||
<div class="sticky top-24">
|
||||
<div class="bg-white rounded-3xl shadow-xl shadow-slate-200/50 p-6 border border-slate-100 relative overflow-hidden">
|
||||
<div class="absolute top-0 right-0 w-32 h-32 bg-gradient-to-br from-blue-500/10 to-purple-500/10 rounded-full blur-3xl -mr-16 -mt-16"></div>
|
||||
|
||||
<div class="relative">
|
||||
<div class="text-3xl font-black text-slate-900 mb-2 font-display">
|
||||
{{ course.price > 0 ? formatPrice(course.price) : 'เรียนฟรี' }}
|
||||
</div>
|
||||
<div v-if="course.price > 0" class="text-sm text-slate-500 mb-6 line-through">
|
||||
{{ formatPrice(course.price * 2) }}
|
||||
</div>
|
||||
|
||||
<q-btn
|
||||
unelevated
|
||||
rounded
|
||||
size="lg"
|
||||
color="primary"
|
||||
class="w-full mb-4 shadow-lg shadow-blue-600/30 font-bold"
|
||||
:label="user ? (course.enrolled ? 'เข้าสู่บทเรียน' : (course.price > 0 ? 'ซื้อคอร์สเรียนนี้' : 'ลงทะเบียนเรียนฟรี')) : 'เข้าสู่ระบบเพื่อลงทะเบียน'"
|
||||
:loading="enrollmentLoading"
|
||||
@click="handleEnroll"
|
||||
/>
|
||||
|
||||
<div class="text-xs text-center text-slate-400">
|
||||
รับประกันความพึงพอใจ คืนเงินภายใน 7 วัน
|
||||
</div>
|
||||
|
||||
<hr class="my-6 border-slate-100">
|
||||
|
||||
<div class="space-y-3 block">
|
||||
<div class="flex items-center gap-3 text-sm text-slate-600">
|
||||
<q-icon name="check_circle" class="text-green-500" />
|
||||
เข้าเรียนได้ตลอดชีพ
|
||||
</div>
|
||||
<div class="flex items-center gap-3 text-sm text-slate-600">
|
||||
<q-icon name="check_circle" class="text-green-500" />
|
||||
ทำแบบทดสอบไม่จำกัด
|
||||
</div>
|
||||
<div class="flex items-center gap-3 text-sm text-slate-600">
|
||||
<q-icon name="check_circle" class="text-green-500" />
|
||||
ใบประกาศนียบัตรเมื่อเรียนจบ
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
150
Frontend-Learner/components/profile/PasswordChangeForm.vue
Normal file
150
Frontend-Learner/components/profile/PasswordChangeForm.vue
Normal file
|
|
@ -0,0 +1,150 @@
|
|||
<script setup lang="ts">
|
||||
/**
|
||||
* @file PasswordChangeForm.vue
|
||||
* @description From for changing user password
|
||||
*/
|
||||
|
||||
const props = defineProps<{
|
||||
modelValue: any; // passwordForm (currentPassword, newPassword, confirmPassword)
|
||||
loading: boolean;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:modelValue', value: any): void;
|
||||
(e: 'submit'): void;
|
||||
}>();
|
||||
|
||||
const { t } = useI18n();
|
||||
|
||||
const passwordRules = [
|
||||
(val: string) => !!val || t('common.required'),
|
||||
(val: string) => val.length >= 6 || t('common.passwordTooShort'),
|
||||
(val: string) => val !== props.modelValue.currentPassword || 'รหัสผ่านใหม่ต้องไม่ซ้ำกับรหัสผ่านปัจจุบัน'
|
||||
];
|
||||
|
||||
const confirmPasswordRules = [
|
||||
(val: string) => !!val || t('common.required'),
|
||||
(val: string) => val === props.modelValue.newPassword || t('common.passwordsDoNotMatch')
|
||||
];
|
||||
|
||||
const showCurrentPassword = ref(false);
|
||||
const showNewPassword = ref(false);
|
||||
const showConfirmPassword = ref(false);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="card-premium p-8 h-fit">
|
||||
<h2 class="text-xl font-bold flex items-center gap-3 text-slate-900 dark:text-white mb-6">
|
||||
<q-icon name="lock" class="text-amber-500 text-2xl" />
|
||||
{{ $t('profile.security') }}
|
||||
</h2>
|
||||
|
||||
<q-form @submit="emit('submit')" class="flex flex-col gap-6">
|
||||
<div class="text-sm text-slate-500 dark:text-slate-400 mb-2">
|
||||
{{ $t('profile.securityDesc') }}
|
||||
</div>
|
||||
|
||||
<div class="space-y-4">
|
||||
<div>
|
||||
<label class="text-xs font-bold text-slate-500 dark:text-slate-400 ml-1 uppercase">{{ $t('profile.currentPassword') }}</label>
|
||||
<q-input
|
||||
v-model="modelValue.currentPassword"
|
||||
:type="showCurrentPassword ? 'text' : 'password'"
|
||||
outlined dense rounded
|
||||
class="premium-q-input"
|
||||
placeholder=""
|
||||
:rules="[val => !!val || $t('common.required')]"
|
||||
>
|
||||
<template v-slot:append>
|
||||
<q-icon
|
||||
:name="showCurrentPassword ? 'visibility_off' : 'visibility'"
|
||||
class="cursor-pointer text-slate-400"
|
||||
@click="showCurrentPassword = !showCurrentPassword"
|
||||
/>
|
||||
</template>
|
||||
</q-input>
|
||||
</div>
|
||||
|
||||
<q-separator class="bg-slate-100 dark:bg-white/5 my-2" />
|
||||
|
||||
<div>
|
||||
<label class="text-xs font-bold text-slate-500 dark:text-slate-400 ml-1 uppercase">{{ $t('profile.newPassword') }}</label>
|
||||
<q-input
|
||||
v-model="modelValue.newPassword"
|
||||
:type="showNewPassword ? 'text' : 'password'"
|
||||
outlined dense rounded
|
||||
class="premium-q-input"
|
||||
:placeholder="$t('profile.newPasswordHint')"
|
||||
:rules="passwordRules"
|
||||
>
|
||||
<template v-slot:append>
|
||||
<q-icon
|
||||
:name="showNewPassword ? 'visibility_off' : 'visibility'"
|
||||
class="cursor-pointer text-slate-400"
|
||||
@click="showNewPassword = !showNewPassword"
|
||||
/>
|
||||
</template>
|
||||
</q-input>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="text-xs font-bold text-slate-500 dark:text-slate-400 ml-1 uppercase">{{ $t('profile.confirmNewPassword') }}</label>
|
||||
<q-input
|
||||
v-model="modelValue.confirmPassword"
|
||||
:type="showConfirmPassword ? 'text' : 'password'"
|
||||
outlined dense rounded
|
||||
class="premium-q-input"
|
||||
:placeholder="$t('profile.confirmPasswordHint')"
|
||||
:rules="confirmPasswordRules"
|
||||
>
|
||||
<template v-slot:append>
|
||||
<q-icon
|
||||
:name="showConfirmPassword ? 'visibility_off' : 'visibility'"
|
||||
class="cursor-pointer text-slate-400"
|
||||
@click="showConfirmPassword = !showConfirmPassword"
|
||||
/>
|
||||
</template>
|
||||
</q-input>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pt-2">
|
||||
<q-btn
|
||||
type="submit"
|
||||
unelevated
|
||||
rounded
|
||||
class="w-full py-3 font-bold text-base shadow-lg shadow-amber-500/20"
|
||||
style="background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); color: white;"
|
||||
:label="$t('profile.changePasswordBtn')"
|
||||
:loading="loading"
|
||||
/>
|
||||
</div>
|
||||
</q-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.card-premium {
|
||||
@apply bg-white dark:bg-[#1e293b] border-slate-200 dark:border-white/5;
|
||||
border-radius: 1.5rem;
|
||||
border-width: 1px;
|
||||
box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.05);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.dark .card-premium {
|
||||
box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.premium-q-input :deep(.q-field__control) {
|
||||
border-radius: 12px;
|
||||
}
|
||||
.dark .premium-q-input :deep(.q-field__control) {
|
||||
background: #0f172a;
|
||||
}
|
||||
.dark .premium-q-input :deep(.q-field__native) {
|
||||
color: white;
|
||||
}
|
||||
.dark .premium-q-input :deep(.q-field__label) {
|
||||
color: #94a3b8;
|
||||
}
|
||||
</style>
|
||||
214
Frontend-Learner/components/profile/ProfileEditForm.vue
Normal file
214
Frontend-Learner/components/profile/ProfileEditForm.vue
Normal file
|
|
@ -0,0 +1,214 @@
|
|||
<script setup lang="ts">
|
||||
/**
|
||||
* @file ProfileEditForm.vue
|
||||
* @description From for editing user personal information
|
||||
*/
|
||||
|
||||
const props = defineProps<{
|
||||
modelValue: any; // userData (firstName, lastName, phone, etc.)
|
||||
loading: boolean;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:modelValue', value: any): void;
|
||||
(e: 'submit'): void;
|
||||
(e: 'upload', file: File): void;
|
||||
}>();
|
||||
|
||||
const { t } = useI18n();
|
||||
const fileInput = ref<HTMLInputElement | null>(null);
|
||||
|
||||
const nameRules = [(val: string) => !!val || t('common.required')];
|
||||
const emailRules = [
|
||||
(val: string) => !!val || t('common.required'),
|
||||
(val: string) => /.+@.+\..+/.test(val) || t('common.invalidEmail')
|
||||
];
|
||||
const phoneRules = [
|
||||
(val: string) => !!val || t('common.required'),
|
||||
(val: string) => /^0[0-9]{8,9}$/.test(val) || t('common.invalidPhone')
|
||||
];
|
||||
|
||||
const triggerUpload = () => {
|
||||
fileInput.value?.click();
|
||||
};
|
||||
|
||||
const handleFileUpload = (event: Event) => {
|
||||
const target = event.target as HTMLInputElement;
|
||||
if (target.files && target.files[0]) {
|
||||
emit('upload', target.files[0]);
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="card-premium p-8 h-fit">
|
||||
<h2 class="text-xl font-bold flex items-center gap-3 text-slate-900 dark:text-white mb-6">
|
||||
<q-icon name="person" class="text-blue-500 text-2xl" />
|
||||
{{ $t('profile.editPersonalDesc') }}
|
||||
</h2>
|
||||
|
||||
<div class="flex flex-col gap-6">
|
||||
|
||||
<div class="flex items-center gap-6">
|
||||
<div class="relative group cursor-pointer" @click="triggerUpload">
|
||||
<UserAvatar
|
||||
:photo-u-r-l="modelValue.photoURL"
|
||||
:first-name="modelValue.firstName"
|
||||
:last-name="modelValue.lastName"
|
||||
size="80"
|
||||
class="rounded-2xl border-2 border-slate-100 dark:border-white/10"
|
||||
/>
|
||||
|
||||
<div class="absolute inset-0 bg-black/40 rounded-2xl flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
|
||||
<q-icon name="camera_alt" class="text-white text-xl" />
|
||||
</div>
|
||||
<!-- Hidden Input -->
|
||||
<input ref="fileInput" type="file" class="hidden" accept="image/*" @change="handleFileUpload" >
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col gap-2">
|
||||
<div class="font-bold text-slate-900 dark:text-white mb-1">{{ $t('profile.yourAvatar') }}</div>
|
||||
|
||||
<!-- Buttons Row -->
|
||||
<div class="flex items-center gap-3">
|
||||
<template v-if="modelValue.photoURL">
|
||||
<q-btn
|
||||
unelevated
|
||||
rounded
|
||||
color="primary"
|
||||
:label="$t('profile.changeAvatar')"
|
||||
class="font-bold shadow-lg shadow-blue-500/30"
|
||||
@click="triggerUpload"
|
||||
/>
|
||||
</template>
|
||||
<template v-else>
|
||||
<q-btn
|
||||
unelevated
|
||||
rounded
|
||||
color="primary"
|
||||
:label="$t('profile.uploadNew')"
|
||||
class="font-bold shadow-lg shadow-blue-500/30"
|
||||
@click="triggerUpload"
|
||||
/>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<!-- Add Limit Text -->
|
||||
<div class="mt-1 text-xs text-slate-500 dark:text-slate-400">
|
||||
{{ $t('profile.uploadLimit') }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<q-separator class="bg-slate-100 dark:bg-white/5" />
|
||||
|
||||
<q-form @submit="emit('submit')" class="flex flex-col gap-6">
|
||||
|
||||
<div class="grid grid-cols-1 gap-4">
|
||||
<div class="space-y-1">
|
||||
<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="['นาย', 'นาง', 'นางสาว']"
|
||||
outlined
|
||||
dense
|
||||
rounded
|
||||
class="premium-q-input"
|
||||
popup-content-class="text-slate-900"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label class="text-xs font-bold text-slate-500 dark:text-slate-400 ml-1 uppercase">{{ $t('profile.firstName') }}</label>
|
||||
<q-input
|
||||
v-model="modelValue.firstName"
|
||||
outlined dense rounded
|
||||
class="premium-q-input"
|
||||
:rules="nameRules"
|
||||
hide-bottom-space
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label class="text-xs font-bold text-slate-500 dark:text-slate-400 ml-1 uppercase">{{ $t('profile.lastName') }}</label>
|
||||
<q-input
|
||||
v-model="modelValue.lastName"
|
||||
outlined dense rounded
|
||||
class="premium-q-input"
|
||||
:rules="nameRules"
|
||||
hide-bottom-space
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="flex justify-between items-end mb-1">
|
||||
<label class="text-xs font-bold text-slate-500 dark:text-slate-400 ml-1 uppercase">{{ $t('profile.email') }}</label>
|
||||
|
||||
</div>
|
||||
<q-input
|
||||
v-model="modelValue.email"
|
||||
type="email"
|
||||
outlined dense rounded
|
||||
class="premium-q-input"
|
||||
:rules="emailRules"
|
||||
hide-bottom-space
|
||||
disable
|
||||
:hint="$t('profile.emailHint')"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="text-xs font-bold text-slate-500 dark:text-slate-400 ml-1 uppercase">{{ $t('profile.phone') }}</label>
|
||||
<q-input
|
||||
v-model="modelValue.phone"
|
||||
outlined dense rounded
|
||||
class="premium-q-input"
|
||||
:rules="phoneRules"
|
||||
hide-bottom-space
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pt-2">
|
||||
<q-btn
|
||||
type="submit"
|
||||
unelevated
|
||||
rounded
|
||||
color="primary"
|
||||
class="w-full py-3 font-bold text-base shadow-lg shadow-blue-500/20"
|
||||
:label="$t('common.save')"
|
||||
:loading="loading"
|
||||
/>
|
||||
</div>
|
||||
</q-form>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.card-premium {
|
||||
@apply bg-white dark:bg-[#1e293b] border-slate-200 dark:border-white/5;
|
||||
border-radius: 1.5rem;
|
||||
border-width: 1px;
|
||||
box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.05);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.dark .card-premium {
|
||||
box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.premium-q-input :deep(.q-field__control) {
|
||||
border-radius: 12px;
|
||||
}
|
||||
.dark .premium-q-input :deep(.q-field__control) {
|
||||
background: #0f172a;
|
||||
}
|
||||
.dark .premium-q-input :deep(.q-field__native) {
|
||||
color: white;
|
||||
}
|
||||
.dark .premium-q-input :deep(.q-field__label) {
|
||||
color: #94a3b8;
|
||||
}
|
||||
</style>
|
||||
Loading…
Add table
Add a link
Reference in a new issue