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

feat: Implement user profile management, course browsing, and dashboard structure with new components and layouts.
All checks were successful
Build and Deploy Frontend Learner / Build Frontend Learner Docker Image (push) Successful in 45s
Details
Build and Deploy Frontend Learner / Deploy E-learning Frontend Learner to Dev Server (push) Successful in 4s
Details
Build and Deploy Frontend Learner / Notify Deployment Status (push) Successful in 1s
Details

Browse source
This commit is contained in:
supalerk-ar66 2026-02-19 17:37:28 +07:00
parent c118e5c3dc
commit 0f92f0d00c
10 changed files with 446 additions and 195 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -25,6 +25,8 @@ interface CourseCardProps {
showContinue?: boolean
showCertificate?: boolean
showStudyAgain?: boolean
hideProgress?: boolean
hideActions?: boolean
}
const props = withDefaults(defineProps<CourseCardProps>(), {
@ -106,7 +108,7 @@ const displayCategory = computed(() => getLocalizedText(props.category))
<div class="mt-auto pt-4">
<!-- Progress Bar -->
<div v-if="progress !== undefined && !completed" class="mb-4">
<div v-if="progress !== undefined && !completed && !hideProgress" class="mb-4">
<div class="flex justify-between text-[10px] font-bold uppercase mb-1">
<span class="text-slate-500 dark:text-slate-400">{{ $t('course.progress') }}</span>
<span class="text-blue-600 dark:text-blue-400">{{ progress }}%</span>
@ -117,25 +119,27 @@ const displayCategory = computed(() => getLocalizedText(props.category))
</div>
<!-- Action Buttons -->
<!-- View Details (Secondary Action) -->
<q-btn
v-if="showViewDetails && !completed && !progress"
flat
rounded
class="w-full font-bold !text-blue-600 !bg-blue-50 hover:!bg-blue-100 dark:!bg-blue-900/40 dark:!text-blue-300 dark:hover:!bg-blue-900/60"
:label="$t('menu.viewDetails')"
:to="`/course/${id}`"
/>
<div v-if="!hideActions" class="flex flex-col gap-3">
<!-- View Details (Secondary Action) -->
<q-btn
v-if="showViewDetails && !completed && !progress"
flat
rounded
class="w-full font-bold !text-blue-600 !bg-blue-50 hover:!bg-blue-100 dark:!bg-blue-900/40 dark:!text-blue-300 dark:hover:!bg-blue-900/60"
:label="$t('menu.viewDetails')"
:to="`/course/${id}`"
/>
<!-- Continue Learning (Primary Action) -->
<q-btn
v-if="showContinue || (progress && !completed) || (progress === 0 && !completed)"
unelevated
rounded
class="w-full font-bold !bg-blue-600 !text-white hover:!bg-blue-700 shadow-md shadow-blue-500/20 transition-all hover:scale-[1.02]"
:label="(!progress || progress === 0) ? $t('course.startLearning') : $t('course.continueLearning')"
:to="`/classroom/learning?course_id=${id}`"
/>
<!-- Continue Learning (Primary Action) -->
<q-btn
v-if="showContinue || (progress && !completed) || (progress === 0 && !completed)"
unelevated
rounded
class="w-full font-bold !bg-blue-600 !text-white hover:!bg-blue-700 shadow-md shadow-blue-500/20 transition-all hover:scale-[1.02]"
:label="(!progress || progress === 0) ? $t('course.startLearning') : $t('course.continueLearning')"
:to="`/classroom/learning?course_id=${id}`"
/>
</div>
<div v-if="completed" class="space-y-2">
<!-- Study Again -->