fix: misc issues

frontend/src/components/AppSidebar.vue

@@ -186,18 +186,27 @@ const addQuizzes = () => {
 }
 
 const addPrograms = () => {
-	if (settingsStore.learningPaths.data) {
-		let activeFor = ['Programs', 'ProgramForm']
-		let index = 1
-		if (!isInstructor.value && !isModerator.value) {
-			sidebarLinks.value = sidebarLinks.value.filter(
-				(link) => link.label !== 'Courses'
-			)
-			activeFor.push('CourseDetail')
-			activeFor.push('Lesson')
-			index = 0
-		}
+	let activeFor = ['Programs', 'ProgramForm']
+	let index = 1
+	let canAddProgram = false
+
+	if (
+		!isInstructor.value &&
+		!isModerator.value &&
+		settingsStore.learningPaths.data
+	) {
+		sidebarLinks.value = sidebarLinks.value.filter(
+			(link) => link.label !== 'Courses'
+		)
+		activeFor.push('CourseDetail')
+		activeFor.push('Lesson')
+		index = 0
+		canAddProgram = true
+	} else if (isInstructor.value || isModerator.value) {
+		canAddProgram = true
+	}
 
+	if (canAddProgram) {
 		sidebarLinks.value.splice(index, 0, {
 			label: 'Programs',
 			icon: 'Route',

frontend/src/components/DesktopLayout.vue

@@ -8,7 +8,6 @@
 					<AppSidebar />
 				</div>
 				<div class="w-full overflow-auto" id="scrollContainer">
-					<OnboardingBanner />
 					<slot />
 				</div>
 			</div>
@@ -17,5 +16,4 @@
 </template>
 <script setup>
 import AppSidebar from './AppSidebar.vue'
-import OnboardingBanner from '@/components/OnboardingBanner.vue'
 </script>

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>

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,6 +25,10 @@ const props = defineProps({
 		type: [String, null],
 		required: true,
 	},
+	title: {
+		type: String,
+		required: true,
+	},
 })
 
 const file = computed(() => {

frontend/src/components/OnboardingBanner.vue

@@ -11,11 +11,11 @@
 				@click="redirectToCourseForm()"
 				class="flex items-center space-x-2"
 				:class="{
-					'cursor-pointer': !onboardingDetails.data.course_created.length,
+					'cursor-pointer': !onboardingDetails.data.course_created?.length,
 				}"
 			>
 				<span
-					v-if="onboardingDetails.data.course_created.length"
+					v-if="onboardingDetails.data.course_created?.length"
 					class="py-1 px-1 bg-white rounded-full"
 				>
 					<Check class="h-4 w-4 stroke-2 text-green-600" />
@@ -32,13 +32,13 @@
 				class="flex items-center space-x-2"
 				:class="{
 					'cursor-pointer':
-						onboardingDetails.data.course_created.length &&
-						!onboardingDetails.data.chapter_created.length,
-					'text-gray-400': !onboardingDetails.data.course_created.length,
+						onboardingDetails.data.course_created?.length &&
+						!onboardingDetails.data.chapter_created?.length,
+					'text-gray-400': !onboardingDetails.data.course_created?.length,
 				}"
 			>
 				<span
-					v-if="onboardingDetails.data.chapter_created.length"
+					v-if="onboardingDetails.data.chapter_created?.length"
 					class="py-1 px-1 bg-white rounded-full"
 				>
 					<Check class="h-4 w-4 stroke-2 text-green-600" />
@@ -55,15 +55,15 @@
 				class="flex items-center space-x-2"
 				:class="{
 					'cursor-pointer':
-						onboardingDetails.data.course_created.length &&
-						onboardingDetails.data.chapter_created.length,
+						onboardingDetails.data.course_created?.length &&
+						onboardingDetails.data.chapter_created?.length,
 					'text-gray-400':
-						!onboardingDetails.data.course_created.length ||
-						!onboardingDetails.data.chapter_created.length,
+						!onboardingDetails.data.course_created?.length ||
+						!onboardingDetails.data.chapter_created?.length,
 				}"
 			>
 				<span
-					v-if="onboardingDetails.data.lesson_created.length"
+					v-if="onboardingDetails.data.lesson_created?.length"
 					class="py-1 px-1 bg-white rounded-full"
 				>
 					<Check class="h-4 w-4 stroke-2 text-green-600" />

frontend/src/pages/ProgramForm.vue

@@ -3,7 +3,7 @@
 		class="sticky top-0 z-10 flex flex-col md:flex-row md:items-center justify-between border-b bg-white px-3 py-2.5 sm:px-5"
 	>
 		<Breadcrumbs :items="breadbrumbs" />
-		<Button variant="solid">
+		<Button variant="solid" @click="saveProgram()">
 			{{ __('Save') }}
 		</Button>
 	</header>
@@ -50,6 +50,7 @@
 						item-key="name"
 						group="items"
 						@end="updateOrder"
+						class="cursor-move"
 					>
 						<template #item="{ element: row }">
 							<ListRow :row="row" />
@@ -191,11 +192,13 @@ import { Plus, Trash2 } from 'lucide-vue-next'
 import Link from '@/components/Controls/Link.vue'
 import { showToast } from '@/utils/'
 import Draggable from 'vuedraggable'
+import { useRouter } from 'vue-router'
 
 const showDialog = ref(false)
 const currentForm = ref(null)
 const course = ref(null)
 const member = ref(null)
+const router = useRouter()
 
 const props = defineProps({
 	programName: {
@@ -302,6 +305,16 @@ const updateOrder = (e) => {
 	)
 }
 
+const saveProgram = () => {
+	call('frappe.model.rename_doc.update_document_title', {
+		doctype: 'LMS Program',
+		docname: program.doc.name,
+		name: program.doc.title,
+	}).then((data) => {
+		router.push({ name: 'ProgramForm', params: { programName: data } })
+	})
+}
+
 const courseColumns = computed(() => {
 	return [
 		{
@@ -332,10 +345,10 @@ const memberColumns = computed(() => {
 			align: 'left',
 		},
 		{
-			label: 'Progress',
+			label: 'Progress (%)',
 			key: 'progress',
 			width: 3,
-			align: 'left',
+			align: 'right',
 		},
 	]
 })

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 }}
@@ -61,12 +61,23 @@
 				v-if="program.courses?.length"
 				class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5 mt-5"
 			>
-				<CourseCard
-					v-for="course in program.courses"
-					:course="course"
-					@click="enrollMember(program.name, course.name)"
-					class="cursor-pointer"
-				/>
+				<div v-for="course in program.courses" class="relative group">
+					<CourseCard
+						:course="course"
+						@click="enrollMember(program.name, course.name)"
+						class="cursor-pointer"
+					/>
+					<div
+						v-if="lockCourse(course)"
+						class="absolute inset-0 bg-black-overlay-500 opacity-60 rounded-md"
+					></div>
+					<div
+						v-if="lockCourse(course)"
+						class="absolute inset-0 flex items-center justify-center"
+					>
+						<LockKeyhole class="size-10 text-white" />
+					</div>
+				</div>
 			</div>
 			<div v-else class="text-sm italic text-gray-600 mt-4">
 				{{ __('No courses in this program') }}
@@ -118,16 +129,28 @@ import {
 	Dialog,
 	FormControl,
 } from 'frappe-ui'
-import { computed, inject, ref } from 'vue'
-import { BookOpen, Edit, Plus } from 'lucide-vue-next'
+import { computed, inject, onMounted, ref } from 'vue'
+import { BookOpen, Edit, Plus, LockKeyhole } from 'lucide-vue-next'
 import CourseCard from '@/components/CourseCard.vue'
 import { useRouter } from 'vue-router'
 import { showToast, singularize } from '@/utils'
+import { useSettings } from '@/stores/settings'
 
 const user = inject('$user')
 const showDialog = ref(false)
 const router = useRouter()
 const title = ref('')
+const settings = useSettings()
+
+onMounted(() => {
+	if (
+		!settings.learningPaths.data &&
+		!user.data?.is_moderator &&
+		!user.data?.is_instructor
+	) {
+		router.push({ name: 'Courses' })
+	}
+})
 
 const programs = createResource({
 	url: 'lms.lms.utils.get_programs',
@@ -177,6 +200,13 @@ const enrollMember = (program, course) => {
 		})
 }
 
+const lockCourse = (course) => {
+	if (user.data?.is_moderator || user.data?.is_instructor) return false
+	if (course.membership) return false
+	if (course.eligible) return false
+	return true
+}
+
 const breadbrumbs = computed(() => [
 	{
 		label: 'Programs',

frontend/src/pages/QuizForm.vue

@@ -205,7 +205,6 @@ import {
 	inject,
 	onBeforeUnmount,
 	watch,
-	isReactive,
 } from 'vue'
 import { Plus, Trash2 } from 'lucide-vue-next'
 import Question from '@/components/Modals/Question.vue'