eduvia/lms
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: achievements position

Browse Source
This commit is contained in:
Jannat Patel
2024-05-09 12:25:48 +05:30
parent 3478f278ff
commit 0075c44918
11 changed files with 118 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
frontend/src/pages/Profile.vue
View File

@@ -140,7 +140,7 @@ const coverImage = createResource({
const setActiveTab = () => {
let fragments = route.path.split('/')
let sections = ['certificates', 'achievements', 'roles', 'evaluations']
let sections = ['certificates', 'roles', 'evaluations']
sections.forEach((section) => {
if (fragments.includes(section)) {
activeTab.value = convertToTitleCase(section)
@@ -154,7 +154,6 @@ watchEffect(() => {
let route = {
About: { name: 'ProfileAbout' },
Certificates: { name: 'ProfileCertificates' },
Achievements: { name: 'ProfileAchievements' },
Roles: { name: 'ProfileRoles' },
Evaluations: { name: 'ProfileEvaluator' },
}[activeTab.value]
@@ -171,11 +170,7 @@ const isSessionUser = () => {
}
const getTabButtons = () => {
let buttons = [
{ label: 'About' },
{ label: 'Certificates' },
{ label: 'Achievements' },
]
let buttons = [{ label: 'About' }, { label: 'Certificates' }]
if ($user.data?.is_moderator) buttons.push({ label: 'Roles' })
if (isSessionUser() && $user.data?.is_evaluator)
buttons.push({ label: 'Evaluations' })

80
frontend/src/pages/ProfileAbout.vue
View File

@@ -12,12 +12,92 @@
{{ __('No introduction') }}
</div>
</div>
<div class="mt-7 mb-10">
<h2 class="mb-3 text-lg font-semibold text-gray-900">
{{ __('Achievements') }}
</h2>
<div class="grid grid-cols-5 gap-4">
<div v-if="badges.data" v-for="badge in badges.data">
<Popover trigger="hover">
<template #target>
<div class="relative">
<img
:src="badge.badge_image"
:alt="badge.badge"
class="h-[80px]"
/>
<div
v-if="badge.count > 1"
class="flex items-end bg-gray-100 p-2 text-xs font-semibold rounded-full absolute right-0 bottom-0"
>
<span>
<X class="w-3 h-3" />
</span>
{{ badge.count }}
</div>
</div>
</template>
<template #body-main>
<div class="w-[250px] text-base">
<img
:src="badge.badge_image"
:alt="badge.badge"
class="bg-gray-100 rounded-t-md"
/>
<div class="p-5">
<div class="text-2xl font-semibold mb-2">
{{ badge.badge }}
</div>
<div class="leading-5 mb-4">
{{ badge.badge_description }}
</div>
<div class="flex flex-col">
<span class="text-xs text-gray-700 font-medium mb-1">
{{ __('Issued on') }}:
</span>
{{ dayjs(badge.issued_on).format('DD MMM YYYY') }}
</div>
</div>
</div>
</template>
</Popover>
</div>
</div>
</div>
</template>
<script setup>
import { inject } from 'vue'
import { createResource, Popover } from 'frappe-ui'
import { X } from 'lucide-vue-next'
const dayjs = inject('$dayjs')
const props = defineProps({
profile: {
type: Object,
required: true,
},
})
const badges = createResource({
url: 'frappe.client.get_list',
params: {
doctype: 'LMS Badge Assignment',
fields: ['name', 'badge', 'badge_image', 'badge_description', 'issued_on'],
filters: {
member: props.profile.data.name,
},
},
auto: true,
transform(data) {
let finalBadges = []
let groupedBadges = Object.groupBy(data, ({ badge }) => badge)
for (let badge in groupedBadges) {
let badgeData = groupedBadges[badge][0]
badgeData.count = groupedBadges[badge].length
finalBadges.push(badgeData)
}
return finalBadges
},
})
</script>

89
frontend/src/pages/ProfileAchievements.vue
View File

@@ -1,89 +0,0 @@
<template>
<div class="mt-7 mb-10">
<h2 class="mb-3 text-lg font-semibold text-gray-900">
{{ __('Achievements') }}
</h2>
<div class="grid grid-cols-5 gap-4">
<div v-if="badges.data" v-for="badge in badges.data">
<Popover trigger="hover">
<template #target>
<div class="relative">
<img
:src="badge.badge_image"
:alt="badge.badge"
class="h-[80px]"
/>
<div
class="flex items-end bg-gray-100 p-2 text-xs font-semibold rounded-full absolute right-0 bottom-0"
>
<span>
<X class="w-3 h-3" />
</span>
{{ badge.count }}
</div>
</div>
</template>
<template #body-main>
<div class="w-[250px] text-base">
<img
:src="badge.badge_image"
:alt="badge.badge"
class="bg-gray-100 rounded-t-md"
/>
<div class="p-5">
<div class="text-2xl font-semibold mb-2">
{{ badge.badge }}
</div>
<div class="leading-5 mb-4">
{{ badge.badge_description }}
</div>
<div class="flex flex-col">
<span class="text-xs text-gray-700 font-medium mb-1">
{{ __('Issued on') }}:
</span>
{{ dayjs(badge.issued_on).format('DD MMM YYYY') }}
</div>
</div>
</div>
</template>
</Popover>
</div>
</div>
</div>
</template>
<script setup>
import { createResource, Popover } from 'frappe-ui'
import { inject } from 'vue'
import { X } from 'lucide-vue-next'
const dayjs = inject('$dayjs')
const props = defineProps({
profile: {
type: Object,
required: true,
},
})
const badges = createResource({
url: 'frappe.client.get_list',
params: {
doctype: 'LMS Badge Assignment',
fields: ['name', 'badge', 'badge_image', 'badge_description', 'issued_on'],
filters: {
member: props.profile.data.name,
},
},
auto: true,
transform(data) {
let finalBadges = []
let groupedBadges = Object.groupBy(data, ({ badge }) => badge)
for (let badge in groupedBadges) {
let badgeData = groupedBadges[badge][0]
badgeData.count = groupedBadges[badge].length
finalBadges.push(badgeData)
}
return finalBadges
},
})
</script>