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

feat: Implement user profile page with view/edit functionality, profile updates, password changes, and avatar upload.
All checks were successful
Build and Deploy Frontend Learner / Build Frontend Learner Docker Image (push) Successful in 34s
Details
Build and Deploy Frontend Management to Dev Server / Build Frontend Management Docker Image (push) Successful in 34s
Details
Build and Deploy Frontend Learner / Deploy E-learning Frontend Learner to Dev Server (push) Successful in 4s
Details
Build and Deploy Frontend Management to Dev Server / Deploy E-learning Frontend Management to Dev Server (push) Successful in 3s
Details
Build and Deploy Frontend Learner / Notify Deployment Status (push) Successful in 1s
Details
Build and Deploy Frontend Management to Dev Server / Notify Deployment Status (push) Successful in 1s
Details

Browse source
This commit is contained in:
supalerk-ar66 2026-02-10 16:53:56 +07:00
parent 9c52abcfd9
commit 0c67bb782e
1 changed files with 3 additions and 46 deletions
Download patch file Download diff file Expand all files Collapse all files

49
Frontend-Learner/pages/dashboard/profile.vue
View file

@ -9,7 +9,7 @@ useHead({
})
const { currentUser, updateUserProfile, changePassword, uploadAvatar, sendVerifyEmail, fetchUserProfile } = useAuth()
const { fetchAllCertificates, getLocalizedText } = useCourse()
const { getLocalizedText } = useCourse()
const { locale, t } = useI18n()
@ -20,9 +20,7 @@ const isPasswordSaving = ref(false)
const isSendingVerify = ref(false)
const isHydrated = ref(false)
// Certificates State
const certificates = ref<any[]>([])
const isLoadingCerts = ref(false)
const formatDate = (dateString?: string) => {
if (!dateString) return '-'
@ -195,24 +193,10 @@ watch(() => currentUser.value, (newUser) => {
}
}, { deep: true })
const loadCertificates = async () => {
isLoadingCerts.value = true
const res = await fetchAllCertificates()
if (res.success) {
certificates.value = res.data || []
}
isLoadingCerts.value = false
}
const viewCertificate = (url: string) => {
if (url) {
window.open(url, '_blank')
}
}
onMounted(async () => {
await fetchUserProfile(true)
loadCertificates()
isHydrated.value = true
})
</script>
@ -292,34 +276,7 @@ onMounted(async () => {
</div>
</div>
<!-- Section: My Certificates -->
<div v-if="!isEditing && certificates.length > 0" class="mt-12 fade-in" style="animation-delay: 0.1s;">
<h2 class="text-2xl font-black mb-6 text-slate-900 dark:text-white flex items-center gap-3">
<q-icon name="workspace_premium" color="warning" size="32px" />
{{ $t('profile.myCertificates') }}
</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<div v-for="cert in certificates" :key="cert.certificate_id" class="card-premium p-6 hover:border-warning/50 transition-all group">
<div class="flex items-start justify-between mb-4">
<div class="p-3 rounded-xl bg-orange-50 dark:bg-orange-900/10 text-orange-600 dark:text-orange-400">
<q-icon name="card_membership" size="32px" />
</div>
<q-btn flat round color="primary" icon="download" @click="viewCertificate(cert.download_url)" class="opacity-0 group-hover:opacity-100 transition-opacity" />
</div>
<h3 class="font-bold text-slate-900 dark:text-white mb-1 line-clamp-1">{{ getLocalizedText(cert.course_title) }}</h3>
<p class="text-xs text-slate-500 dark:text-slate-400 mb-4 italic">{{ $t('profile.issuedAt') }}: {{ formatDate(cert.issued_at) }}</p>
<q-btn
unelevated
rounded
color="warning"
text-color="dark"
class="w-full font-bold"
:label="$t('profile.viewCertificate')"
@click="viewCertificate(cert.download_url)"
/>
</div>
</div>
</div>
<div v-else class="grid grid-cols-1 lg:grid-cols-2 gap-8 fade-in">