Merge pull request #795 from pateljannat/badges

feat: badges
frappe · May 14, 2024 · 0094809 · 0094809
2 parents 9670dfa + 2ea5858
commit 0094809
Show file tree

Hide file tree

Showing 28 changed files with 2,721 additions and 2,102 deletions.
diff --git a/frontend/src/components/CourseOutline.vue b/frontend/src/components/CourseOutline.vue
@@ -2,7 +2,7 @@
 	<div class="text-base">
 		<div
 			v-if="title && (outline.data?.length || allowEdit)"
-			class="grid grid-cols-[70%,30%] mb-4 px-3"
+			class="grid grid-cols-[70%,30%] mb-4"
 		>
 			<div class="font-semibold text-lg">
 				{{ __(title) }}
@@ -67,7 +67,7 @@
 									{{ lesson.title }}
 									<Check
 										v-if="lesson.is_complete"
-										class="h-4 w-4 text-green-500 stroke-1.5 ml-2"
+										class="h-4 w-4 text-green-700 ml-2"
 									/>
 								</div>
 							</router-link>
@@ -105,7 +105,7 @@
 </template>
 <script setup>
 import { Button, createResource } from 'frappe-ui'
-import { ref } from 'vue'
+import { ref, computed } from 'vue'
 import { Disclosure, DisclosureButton, DisclosurePanel } from '@headlessui/vue'
 import {
 	ChevronRight,
@@ -139,13 +139,18 @@ const props = defineProps({
 		type: Boolean,
 		default: false,
 	},
+	getProgress: {
+		type: Boolean,
+		default: false,
+	},
 })
 
 const outline = createResource({
 	url: 'lms.lms.utils.get_course_outline',
 	cache: ['course_outline', props.courseName],
 	params: {
 		course: props.courseName,
+		progress: props.getProgress,
 	},
 	auto: true,
 })

diff --git a/frontend/src/pages/Lesson.vue b/frontend/src/pages/Lesson.vue
@@ -151,7 +151,7 @@
 				</div>
 			</div>
 			<div class="sticky top-10">
-				<div class="bg-gray-50 py-5 pl-2 border-b">
+				<div class="bg-gray-50 py-5 px-2 border-b">
 					<div class="text-lg font-semibold">
 						{{ lesson.data.course_title }}
 					</div>
@@ -170,7 +170,11 @@
 						></div>
 					</div>
 				</div>
-				<CourseOutline :courseName="courseName" :key="chapterNumber" />
+				<CourseOutline
+					:courseName="courseName"
+					:key="chapterNumber"
+					:getProgress="lesson.data.membership ? true : false"
+				/>
 			</div>
 		</div>
 	</div>

diff --git a/frontend/src/pages/ProfileAbout.vue b/frontend/src/pages/ProfileAbout.vue
@@ -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>