lms/frontend/src/pages/Badge.vue at d370ca796fbd524a1aa32c4e296f748f99cc6eef · frappe/lms · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
<template>
	<div v-if="badge.data">
		<div class="p-5 flex flex-col items-center mt-40">
			<div class="text-3xl font-semibold">
				{{ badge.data.badge }}
			</div>
			<img
				:src="badge.data.badge_image"
				:alt="badge.data.badge"
				class="h-60 mt-2"
			/>
			<div class="">
				{{
					__('This badge has been awarded to {0} on {1}.').format(
						badge.data.member_name,
						dayjs(badge.data.issued_on).format('DD MMM YYYY')
					)
				}}
			</div>
			<div class="mt-2">
				{{ badge.data.badge_description }}
			</div>
		</div>
	</div>
</template>
<script setup>
import { createResource, usePageMeta } from 'frappe-ui'
import { computed, inject } from 'vue'
import { sessionStore } from '../stores/session'

const dayjs = inject('$dayjs')
const { brand } = sessionStore()

const props = defineProps({
	badgeName: {
		type: String,
		required: true,
	},
	email: {
		type: String,
		required: true,
	},
})

const badge = createResource({
	url: 'frappe.client.get',
	makeParams(values) {
		return {
			doctype: 'LMS Badge Assignment',
			filters: {
				badge: props.badgeName,
				member: props.email,
			},
		}
	},
	auto: true,
})

const breadcrumbs = computed(() => {
	return [
		{
			label: __('Badges'),
		},
		{
			label: badge.data.badge,
			route: {
				name: 'Badge',
				params: {
					badge: badge.data.badge,
				},
			},
		},
	]
})

usePageMeta(() => {
	return {
		title: badge.data.badge,
		icon: brand.favicon,
	}
})
</script>