From a64b0f734a002c439fcf61f5ce8ba263b33d5007 Mon Sep 17 00:00:00 2001
From: Jannat Patel <pateljannat2308@gmail.com>
Date: Wed, 27 Nov 2024 15:45:26 +0530
Subject: [PATCH] fix: misc issues

---
 frontend/src/components/LessonHelp.vue              | 13 ++++++++++---
 .../src/components/Modals/ExplanationVideos.vue     | 11 +++++++++--
 frontend/src/pages/ProgramForm.vue                  |  4 ++--
 frontend/src/pages/Programs.vue                     |  2 +-
 frontend/src/utils/quiz.js                          |  3 +++
 5 files changed, 25 insertions(+), 8 deletions(-)

diff --git a/frontend/src/components/LessonHelp.vue b/frontend/src/components/LessonHelp.vue
index ce84f3e0..30edd44c 100644
--- a/frontend/src/components/LessonHelp.vue
+++ b/frontend/src/components/LessonHelp.vue
@@ -25,7 +25,7 @@
 				@click="openHelpDialog('upload')"
 			>
 				<span class="leading-5">
-					{{ __('How to upload content from your system?') }}
+					{{ __(contentMap['upload']) }}
 				</span>
 				<Info class="w-3 h-3 text-gray-700" />
 			</div>
@@ -44,7 +44,7 @@
 				@click="openHelpDialog('youtube')"
 			>
 				<span>
-					{{ __('How to add a YouTube Video?') }}
+					{{ __(contentMap['youtube']) }}
 				</span>
 				<Info class="w-3 h-3 text-gray-700" />
 			</div>
@@ -72,7 +72,7 @@
 			</div>
 		</div>
 	</div>
-	<ExplanationVideos v-model="showExplanation" :type="type" />
+	<ExplanationVideos v-model="showExplanation" :title="title" :type="type" />
 </template>
 <script setup>
 import { Info } from 'lucide-vue-next'
@@ -81,9 +81,16 @@ import ExplanationVideos from '@/components/Modals/ExplanationVideos.vue'
 
 const showExplanation = ref(false)
 const type = ref(null)
+const title = ref(null)
+const contentMap = {
+	quiz: 'How to add a Quiz?',
+	upload: 'How to upload content from your system?',
+	youtube: 'How to add a YouTube Video?',
+}
 
 const openHelpDialog = (contentType) => {
 	type.value = contentType
+	title.value = contentMap[contentType]
 	showExplanation.value = true
 }
 </script>
diff --git a/frontend/src/components/Modals/ExplanationVideos.vue b/frontend/src/components/Modals/ExplanationVideos.vue
index 2dbf920c..32567c57 100644
--- a/frontend/src/components/Modals/ExplanationVideos.vue
+++ b/frontend/src/components/Modals/ExplanationVideos.vue
@@ -3,10 +3,11 @@
 		v-model="show"
 		:options="{
 			size: '4xl',
+			title: title,
 		}"
 	>
-		<template #body>
-			<div class="p-4">
+		<template #body-content>
+			<div>
 				<VideoBlock :file="file" />
 			</div>
 		</template>
@@ -24,8 +25,14 @@ const props = defineProps({
 		type: [String, null],
 		required: true,
 	},
+	title: {
+		type: String,
+		required: true,
+	},
 })
 
+console.log(props.title)
+
 const file = computed(() => {
 	if (props.type == 'youtube') return '/assets/lms/frontend/Youtube.mp4'
 	if (props.type == 'quiz') return '/assets/lms/frontend/Quiz.mp4'
diff --git a/frontend/src/pages/ProgramForm.vue b/frontend/src/pages/ProgramForm.vue
index 9194e94e..3f99870e 100644
--- a/frontend/src/pages/ProgramForm.vue
+++ b/frontend/src/pages/ProgramForm.vue
@@ -332,10 +332,10 @@ const memberColumns = computed(() => {
 			align: 'left',
 		},
 		{
-			label: 'Progress',
+			label: 'Progress (%)',
 			key: 'progress',
 			width: 3,
-			align: 'left',
+			align: 'right',
 		},
 	]
 })
diff --git a/frontend/src/pages/Programs.vue b/frontend/src/pages/Programs.vue
index b68f0986..c0fc51e1 100644
--- a/frontend/src/pages/Programs.vue
+++ b/frontend/src/pages/Programs.vue
@@ -15,7 +15,7 @@
 		</Button>
 	</header>
 	<div v-if="programs.data?.length" class="pt-5 px-5">
-		<div v-for="program in programs.data" class="mb-20">
+		<div v-for="program in programs.data" class="mb-10">
 			<div class="flex items-center justify-between">
 				<div class="text-xl font-semibold">
 					{{ program.name }}
diff --git a/frontend/src/utils/quiz.js b/frontend/src/utils/quiz.js
index e9bd1e9f..3758eb99 100644
--- a/frontend/src/utils/quiz.js
+++ b/frontend/src/utils/quiz.js
@@ -60,6 +60,9 @@ export class Quiz {
 	}
 
 	renderQuizModal() {
+		if (this.readOnly) {
+			return
+		}
 		const app = createApp(QuizPlugin, {
 			onQuizAddition: (quiz) => {
 				this.data.quiz = quiz