feat: Implement core e-learning platform features including quiz, dashboard, course discovery, and classroom learning with i18n support.
All checks were successful
Build and Deploy Frontend Learner / Build Frontend Learner Docker Image (push) Successful in 35s
Build and Deploy Frontend Learner / Deploy E-learning Frontend Learner to Dev Server (push) Successful in 4s
Build and Deploy Frontend Learner / Notify Deployment Status (push) Successful in 1s
All checks were successful
Build and Deploy Frontend Learner / Build Frontend Learner Docker Image (push) Successful in 35s
Build and Deploy Frontend Learner / Deploy E-learning Frontend Learner to Dev Server (push) Successful in 4s
Build and Deploy Frontend Learner / Notify Deployment Status (push) Successful in 1s
This commit is contained in:
supalerk-ar66
parent
d787412036
commit
a0ca6f7e6b
13 changed files with 429 additions and 246 deletions
|
|
@ -112,7 +112,7 @@ const handleEnroll = async (id: number) => {
|
|||
} else {
|
||||
$q.notify({
|
||||
type: 'negative',
|
||||
message: res.error || 'Failed to enroll',
|
||||
message: res.error || t('enrollment.error'),
|
||||
position: 'top',
|
||||
timeout: 3000,
|
||||
actions: [{ icon: 'close', color: 'white' }]
|
||||
|
|
@ -127,6 +127,15 @@ watch(selectedCategoryIds, () => {
|
|||
loadCourses(1);
|
||||
}, { deep: true });
|
||||
|
||||
const toggleCategory = (id: number) => {
|
||||
const index = selectedCategoryIds.value.indexOf(id)
|
||||
if (index === -1) {
|
||||
selectedCategoryIds.value.push(id)
|
||||
} else {
|
||||
selectedCategoryIds.value.splice(index, 1)
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
loadCategories();
|
||||
loadCourses();
|
||||
|
|
@ -140,91 +149,101 @@ onMounted(() => {
|
|||
<div v-if="!showDetail">
|
||||
|
||||
<!-- Top Header Area -->
|
||||
<div class="flex flex-col md:flex-row md:items-center justify-between gap-6 mb-8">
|
||||
<!-- Title -->
|
||||
<h1 class="text-3xl font-black text-slate-900 dark:text-white flex items-center gap-3">
|
||||
<span class="w-1.5 h-8 bg-blue-600 rounded-full shadow-sm shadow-blue-500/50"></span>
|
||||
{{ $t('discovery.title') }}
|
||||
</h1>
|
||||
<div class="flex flex-col gap-6 mb-10">
|
||||
<div class="flex flex-col md:flex-row md:items-center justify-between gap-6">
|
||||
<!-- Title -->
|
||||
<h1 class="text-3xl font-black text-slate-900 dark:text-white flex items-center gap-3">
|
||||
<span class="w-1.5 h-8 bg-blue-600 rounded-full shadow-sm shadow-blue-500/50"></span>
|
||||
{{ $t('discovery.title') }}
|
||||
</h1>
|
||||
|
||||
<!-- Right Side: Search & Sort -->
|
||||
<div class="flex items-center gap-3 w-full md:w-auto">
|
||||
<!-- Search Input -->
|
||||
<q-input
|
||||
v-model="searchQuery"
|
||||
dense
|
||||
outlined
|
||||
rounded
|
||||
:placeholder="$t('discovery.searchPlaceholder')"
|
||||
class="w-full md:w-72 search-input"
|
||||
bg-color="transparent"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="search" class="text-slate-400" />
|
||||
</template>
|
||||
</q-input>
|
||||
<!-- Right Side: Search -->
|
||||
<div class="flex items-center gap-3 w-full md:w-auto">
|
||||
<q-input
|
||||
v-model="searchQuery"
|
||||
dense
|
||||
outlined
|
||||
rounded
|
||||
:placeholder="$t('discovery.searchPlaceholder')"
|
||||
class="w-full md:w-72 search-input shadow-sm"
|
||||
bg-color="transparent"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="search" class="text-slate-400" />
|
||||
</template>
|
||||
</q-input>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Unified Filter Section: Categories -->
|
||||
<div class="flex flex-wrap items-center gap-2">
|
||||
<q-btn
|
||||
flat
|
||||
rounded
|
||||
dense
|
||||
class="px-4 font-bold transition-all text-xs uppercase tracking-widest"
|
||||
:class="selectedCategoryIds.length === 0 ? 'bg-blue-600 text-white shadow-lg shadow-blue-600/30' : 'bg-white dark:bg-slate-800 text-slate-500 dark:text-slate-400 border border-slate-200 dark:border-white/5'"
|
||||
@click="selectedCategoryIds = []"
|
||||
:label="$t('discovery.showAll')"
|
||||
/>
|
||||
<q-btn
|
||||
v-for="cat in categories"
|
||||
:key="cat.id"
|
||||
flat
|
||||
rounded
|
||||
dense
|
||||
class="px-4 font-bold transition-all text-xs uppercase tracking-widest"
|
||||
:class="selectedCategoryIds.includes(cat.id) ? 'bg-blue-600 text-white shadow-lg shadow-blue-600/30' : 'bg-white dark:bg-slate-800 text-slate-500 dark:text-slate-400 border border-slate-200 dark:border-white/5'"
|
||||
@click="toggleCategory(cat.id)"
|
||||
:label="getLocalizedText(cat.name)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Main Layout: Sidebar + Grid -->
|
||||
<div class="flex flex-col lg:flex-row gap-8">
|
||||
|
||||
<!-- LEFT SIDEBAR: Category Filter -->
|
||||
<div class="w-full lg:w-64 flex-shrink-0 lg:sticky lg:top-24 z-10">
|
||||
<ClientOnly>
|
||||
<CategorySidebar
|
||||
:categories="categories"
|
||||
v-model="selectedCategoryIds"
|
||||
/>
|
||||
</ClientOnly>
|
||||
</div>
|
||||
|
||||
<!-- RIGHT CONTENT: Course Grid -->
|
||||
<div class="flex-1 w-full">
|
||||
<div v-if="filteredCourses.length > 0" class="flex flex-col gap-12">
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6">
|
||||
<CourseCard
|
||||
v-for="course in filteredCourses"
|
||||
:key="course.id"
|
||||
v-bind="{ ...course, image: course.thumbnail_url }"
|
||||
show-view-details
|
||||
@view-details="selectCourse(course.id)"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Pagination Controls -->
|
||||
<div v-if="totalPages > 1" class="flex justify-center pb-10">
|
||||
<q-pagination
|
||||
v-model="currentPage"
|
||||
:max="totalPages"
|
||||
:max-pages="6"
|
||||
boundary-numbers
|
||||
direction-links
|
||||
color="primary"
|
||||
flat
|
||||
active-design="unelevated"
|
||||
active-color="primary"
|
||||
@update:model-value="loadCourses"
|
||||
/>
|
||||
</div>
|
||||
<!-- Main Layout: Grid Only -->
|
||||
<div class="w-full">
|
||||
<div v-if="filteredCourses.length > 0" class="flex flex-col gap-12">
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8">
|
||||
<CourseCard
|
||||
v-for="course in filteredCourses"
|
||||
:key="course.id"
|
||||
v-bind="{ ...course, image: course.thumbnail_url }"
|
||||
show-view-details
|
||||
@view-details="selectCourse(course.id)"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Empty State -->
|
||||
<div
|
||||
v-else
|
||||
class="flex flex-col items-center justify-center py-20 bg-slate-50 dark:bg-slate-800/50 rounded-3xl border-2 border-dashed border-slate-200 dark:border-slate-700"
|
||||
>
|
||||
<q-icon name="search_off" size="64px" class="text-slate-300 dark:text-slate-600 mb-4" />
|
||||
<h3 class="text-xl font-bold text-slate-900 dark:text-white mb-2">{{ $t('discovery.emptyTitle') }}</h3>
|
||||
<p class="text-slate-500 dark:text-slate-400 text-center max-w-md">
|
||||
{{ $t('discovery.emptyDesc') }}
|
||||
</p>
|
||||
<button class="mt-6 font-bold text-blue-600 hover:text-blue-700 dark:hover:text-blue-400 transition-colors" @click="searchQuery = ''; selectedCategoryIds = []">
|
||||
{{ $t('discovery.showAll') }}
|
||||
</button>
|
||||
<!-- Pagination Controls -->
|
||||
<div v-if="totalPages > 1" class="flex justify-center pb-10">
|
||||
<q-pagination
|
||||
v-model="currentPage"
|
||||
:max="totalPages"
|
||||
:max-pages="6"
|
||||
boundary-numbers
|
||||
direction-links
|
||||
color="primary"
|
||||
flat
|
||||
active-design="unelevated"
|
||||
active-color="primary"
|
||||
@update:model-value="loadCourses"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Empty State -->
|
||||
<div
|
||||
v-else
|
||||
class="flex flex-col items-center justify-center py-20 bg-white dark:bg-slate-800/50 rounded-3xl border-2 border-dashed border-slate-200 dark:border-slate-700 shadow-sm"
|
||||
>
|
||||
<q-icon name="search_off" size="64px" class="text-slate-300 dark:text-slate-600 mb-4" />
|
||||
<h3 class="text-xl font-bold text-slate-900 dark:text-white mb-2">{{ $t('discovery.emptyTitle') }}</h3>
|
||||
<p class="text-slate-500 dark:text-slate-400 text-center max-w-md">
|
||||
{{ $t('discovery.emptyDesc') }}
|
||||
</p>
|
||||
<button class="mt-6 font-bold text-blue-600 hover:text-blue-700 dark:hover:text-blue-400 transition-colors" @click="searchQuery = ''; selectedCategoryIds = []">
|
||||
{{ $t('discovery.showAll') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue