From 326c77cdb9ffd60bd6f3e6137ac3b00824047670 Mon Sep 17 00:00:00 2001
From: Md Hussain Nagaria <34810212+NagariaHussain@users.noreply.github.com>
Date: Wed, 26 Jun 2024 00:29:55 +0530
Subject: [PATCH] fix: clip progress bar width to 100% (#892)

* fix: course progress bar should not go beyond 100% width

* refactor: progress bar component should include outer body div
---
 frontend/src/components/CourseCard.vue  | 14 ++++++--------
 frontend/src/components/ProgressBar.vue | 24 ++++++++++++++++++++++++
 frontend/src/pages/Lesson.vue           | 15 +++++----------
 3 files changed, 35 insertions(+), 18 deletions(-)
 create mode 100644 frontend/src/components/ProgressBar.vue

diff --git a/frontend/src/components/CourseCard.vue b/frontend/src/components/CourseCard.vue
index 443420cb..d52dda74 100644
--- a/frontend/src/components/CourseCard.vue
+++ b/frontend/src/components/CourseCard.vue
@@ -80,15 +80,12 @@
 			<div class="short-introduction">
 				{{ course.short_introduction }}
 			</div>
-			<div
+
+			<ProgressBar
 				v-if="user && course.membership"
-				class="w-full bg-gray-200 rounded-full h-1 mb-2"
-			>
-				<div
-					class="bg-gray-900 h-1 rounded-full"
-					:style="{ width: Math.ceil(course.membership.progress) + '%' }"
-				></div>
-			</div>
+				:progress="course.membership.progress"
+			/>
+
 			<div v-if="user && course.membership" class="text-sm mb-4">
 				{{ Math.ceil(course.membership.progress) }}% completed
 			</div>
@@ -120,6 +117,7 @@ import UserAvatar from '@/components/UserAvatar.vue'
 import { sessionStore } from '@/stores/session'
 import { Badge, Tooltip } from 'frappe-ui'
 import CourseInstructors from '@/components/CourseInstructors.vue'
+import ProgressBar from '@/components/ProgressBar.vue'
 
 const { user } = sessionStore()
 
diff --git a/frontend/src/components/ProgressBar.vue b/frontend/src/components/ProgressBar.vue
new file mode 100644
index 00000000..f1fb1fde
--- /dev/null
+++ b/frontend/src/components/ProgressBar.vue
@@ -0,0 +1,24 @@
+<template>
+	<div class="w-full bg-gray-200 rounded-full h-1 my-2">
+		<div
+			class="bg-gray-900 h-1 rounded-full"
+			:style="{ width: progressBarWidth }"
+		></div>
+	</div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+
+const props = defineProps({
+	progress: {
+		type: Number,
+		default: 0,
+	},
+})
+
+const progressBarWidth = computed(() => {
+	const formattedPercentage = Math.min(Math.ceil(props.progress), 100)
+	return `${formattedPercentage}%`
+})
+</script>
diff --git a/frontend/src/pages/Lesson.vue b/frontend/src/pages/Lesson.vue
index 471d3b2a..1039c3bb 100644
--- a/frontend/src/pages/Lesson.vue
+++ b/frontend/src/pages/Lesson.vue
@@ -162,17 +162,11 @@
 					<div v-if="user && lesson.data.membership" class="text-sm mt-3">
 						{{ Math.ceil(lesson.data.membership.progress) }}% completed
 					</div>
-					<div
+
+					<ProgressBar
 						v-if="user && lesson.data.membership"
-						class="w-full bg-gray-200 rounded-full h-1 my-2"
-					>
-						<div
-							class="bg-gray-900 h-1 rounded-full"
-							:style="{
-								width: Math.ceil(lesson.data.membership.progress) + '%',
-							}"
-						></div>
-					</div>
+						:progress="lesson.data.membership.progress"
+					/>
 				</div>
 				<CourseOutline
 					:courseName="courseName"
@@ -195,6 +189,7 @@ import { getEditorTools } from '../utils'
 import EditorJS from '@editorjs/editorjs'
 import LessonContent from '@/components/LessonContent.vue'
 import CourseInstructors from '@/components/CourseInstructors.vue'
+import ProgressBar from '@/components/ProgressBar.vue'
 
 const user = inject('$user')
 const route = useRoute()