Merge pull request #1156 from pateljannat/program-saving-issue

fix: misc issues

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

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

frontend/src/pages/QuizSubmission.vue

@@ -15,38 +15,45 @@
 			</Button>
 		</div>
 	</header>
-	<div v-if="submisisonDetails.doc" class="w-1/2 mx-auto py-5 space-y-4">
-		<div class="grid grid-cols-2 gap-5">
-			<FormControl
-				v-model="submisisonDetails.doc.quiz_title"
-				:label="__('Quiz')"
-				:disabled="true"
-			/>
-			<FormControl
-				v-model="submisisonDetails.doc.member_name"
-				:label="__('Member')"
-				:disabled="true"
-			/>
+	<div v-if="submisisonDetails.doc" class="w-1/2 mx-auto py-5 space-y-5">
+		<div class="text-xl font-semibold">
+			{{ submisisonDetails.doc.member_name }}
 		</div>
+		<div class="space-y-4 border p-5 rounded-md">
+			<div class="grid grid-cols-2 gap-5">
+				<FormControl
+					v-model="submisisonDetails.doc.quiz_title"
+					:label="__('Quiz')"
+					:disabled="true"
+				/>
+				<FormControl
+					v-model="submisisonDetails.doc.member_name"
+					:label="__('Member')"
+					:disabled="true"
+				/>
+			</div>
 
-		<div class="grid grid-cols-2 gap-5">
-			<FormControl
-				v-model="submisisonDetails.doc.score"
-				:label="__('Score')"
-				:disabled="true"
-			/>
-			<FormControl
-				v-model="submisisonDetails.doc.percentage"
-				:label="__('Percentage')"
-				:disabled="true"
-			/>
+			<div class="grid grid-cols-2 gap-5">
+				<FormControl
+					v-model="submisisonDetails.doc.score"
+					:label="__('Score')"
+					:disabled="true"
+				/>
+				<FormControl
+					v-model="submisisonDetails.doc.percentage"
+					:label="__('Percentage')"
+					:disabled="true"
+				/>
+			</div>
 		</div>
 
 		<div
 			v-for="row in submisisonDetails.doc.result"
 			class="border p-5 rounded-md space-y-4"
 		>
-			<div class="font-semibold">{{ row.idx }}. {{ row.question }}</div>
+			<div class="flex space-x-1 font-semibold">
+				<span class="leading-5" v-html="row.question"> </span>
+			</div>
 			<div v-html="row.answer" class="leading-5"></div>
 			<div class="grid grid-cols-2 gap-5">
 				<FormControl v-model="row.marks" :label="__('Marks')" />
@@ -67,7 +74,7 @@ import {
 	Button,
 	Badge,
 } from 'frappe-ui'
-import { computed, onMounted, inject } from 'vue'
+import { computed, onBeforeUnmount, onMounted, inject } from 'vue'
 import { useRouter } from 'vue-router'
 import { showToast } from '@/utils'
 
@@ -77,8 +84,25 @@ const user = inject('$user')
 onMounted(() => {
 	if (!user.data?.is_instructor && !user.data?.is_moderator)
 		router.push({ name: 'Courses' })
+
+	window.addEventListener('keydown', keyboardShortcut)
 })
 
+onBeforeUnmount(() => {
+	window.removeEventListener('keydown', keyboardShortcut)
+})
+
+const keyboardShortcut = (e) => {
+	if (
+		e.key === 's' &&
+		(e.ctrlKey || e.metaKey) &&
+		!e.target.classList.contains('ProseMirror')
+	) {
+		saveSubmission()
+		e.preventDefault()
+	}
+}
+
 const props = defineProps({
 	submission: {
 		type: String,