104 lines
2.7 KiB
Vue
104 lines
2.7 KiB
Vue
<template>
|
|
<div class="mt-7 mb-10">
|
|
<h2 class="mb-3 text-lg font-semibold text-gray-900">
|
|
{{ __('About') }}
|
|
</h2>
|
|
<div
|
|
v-if="profile.data.bio"
|
|
v-html="profile.data.bio"
|
|
class="ProseMirror prose prose-table:table-fixed prose-td:p-2 prose-th:p-2 prose-td:border prose-th:border prose-td:border-gray-300 prose-th:border-gray-300 prose-td:relative prose-th:relative prose-th:bg-gray-100 prose-sm max-w-none !whitespace-normal"
|
|
></div>
|
|
<div v-else class="text-gray-700 text-sm italic">
|
|
{{ __('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>
|