Merge pull request #1145 from pateljannat/learning-paths

feat: learning paths

frontend/src/components/AppSidebar.vue

@@ -99,6 +99,7 @@ import { getSidebarLinks } from '../utils'
 import { usersStore } from '@/stores/user'
 import { sessionStore } from '@/stores/session'
 import { useSidebar } from '@/stores/sidebar'
+import { useSettings } from '@/stores/settings'
 import { ChevronRight, Plus } from 'lucide-vue-next'
 import { createResource, Button } from 'frappe-ui'
 import PageModal from '@/components/Modals/PageModal.vue'
@@ -114,6 +115,7 @@ const isModerator = ref(false)
 const isInstructor = ref(false)
 const pageToEdit = ref(null)
 const showWebPages = ref(false)
+const settingsStore = useSettings()
 
 onMounted(() => {
 	socket.on('publish_lms_notifications', (data) => {
@@ -183,6 +185,28 @@ 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
+		}
+
+		sidebarLinks.value.splice(index, 0, {
+			label: 'Programs',
+			icon: 'Route',
+			to: 'Programs',
+			activeFor: activeFor,
+		})
+	}
+}
+
 const openPageModal = (link) => {
 	showPageModal.value = true
 	pageToEdit.value = link
@@ -215,6 +239,7 @@ watch(userResource, () => {
 		isModerator.value = userResource.data.is_moderator
 		isInstructor.value = userResource.data.is_instructor
 		addQuizzes()
+		addPrograms()
 	}
 })
 

frontend/src/components/Controls/Autocomplete.vue

@@ -92,7 +92,7 @@
 													{{ option.label }}
 												</div>
 												<div
-													v-if="option.label != option.description"
+													v-if="option.description"
 													class="text-xs text-gray-700"
 													v-html="option.description"
 												></div>

frontend/src/components/Controls/Link.vue

@@ -44,6 +44,7 @@
 				</div>
 			</template>
 		</Autocomplete>
+		<p v-if="description" class="text-sm text-gray-600">{{ description }}</p>
 	</div>
 </template>
 
@@ -67,6 +68,10 @@ const props = defineProps({
 		type: String,
 		default: '',
 	},
+	description: {
+		type: String,
+		default: '',
+	},
 })
 
 const emit = defineEmits(['update:modelValue', 'change'])
@@ -118,7 +123,7 @@ const options = createResource({
 	transform: (data) => {
 		return data.map((option) => {
 			return {
-				label: option.value,
+				label: option.label || option.value,
 				value: option.value,
 				description: option.description,
 			}

frontend/src/components/CourseOutline.vue

@@ -303,9 +303,9 @@ const trashChapter = (chapterName) => {
 }
 
 const redirectToChapter = (chapter) => {
+	if (!chapter.is_scorm_package) return
 	event.preventDefault()
 	if (props.allowEdit) return
-	if (!chapter.is_scorm_package) return
 	if (!user.data) {
 		showToast(
 			__('You are not enrolled'),

frontend/src/components/Modals/Settings.vue

@@ -108,9 +108,31 @@ const tabsStructure = computed(() => {
 			hideLabel: true,
 			items: [
 				{
-					label: 'Members',
-					description: 'Manage the members of your learning system',
-					icon: 'UserRoundPlus',
+					label: 'General',
+					icon: 'Wrench',
+					fields: [
+						{
+							label: 'Enable Learning Paths',
+							name: 'enable_learning_paths',
+							description:
+								'This will enforce students to go through programs assigned to them in the correct order.',
+							type: 'checkbox',
+						},
+						{
+							label: 'Send calendar invite for evaluations',
+							name: 'send_calendar_invite_for_evaluations',
+							description:
+								'If enabled, it sends google calendar invite to the student for evaluations.',
+							type: 'checkbox',
+						},
+						{
+							label: 'Unsplash Access Key',
+							name: 'unsplash_access_key',
+							description:
+								'Optional. If this is set, students can pick a cover image from the unsplash library for their profile page. https://unsplash.com/documentation#getting-started.',
+							type: 'text',
+						},
+					],
 				},
 			],
 		},
@@ -156,9 +178,14 @@ const tabsStructure = computed(() => {
 			],
 		},
 		{
-			label: 'Settings',
-			hideLabel: true,
+			label: 'Lists',
+			hideLabel: false,
 			items: [
+				{
+					label: 'Members',
+					description: 'Manage the members of your learning system',
+					icon: 'UserRoundPlus',
+				},
 				{
 					label: 'Categories',
 					description: 'Manage the members of your learning system',

frontend/src/components/Quiz.vue

@@ -397,6 +397,9 @@ const attempts = createResource({
 watch(
 	() => quiz.data,
 	() => {
+		if (quiz.data) {
+			populateQuestions()
+		}
 		if (quiz.data && quiz.data.max_attempts) {
 			attempts.reload()
 			resetQuiz()

frontend/src/components/SettingDetails.vue

@@ -29,6 +29,7 @@
 <script setup>
 import { Button, Badge } from 'frappe-ui'
 import SettingFields from '@/components/SettingFields.vue'
+import { showToast } from '@/utils'
 
 const props = defineProps({
 	fields: {
@@ -54,7 +55,14 @@ const update = () => {
 			props.data.doc[f.name] = f.value
 		}
 	})
-	props.data.save.submit()
+	props.data.save.submit(
+		{},
+		{
+			onError(err) {
+				showToast('Error', err.messages?.[0] || err, 'x')
+			},
+		}
+	)
 }
 </script>
 

frontend/src/components/SettingFields.vue

@@ -90,6 +90,7 @@
 						:type="field.type"
 						:rows="field.rows"
 						:options="field.options"
+						:description="field.description"
 					/>
 				</div>
 			</div>
@@ -100,7 +101,7 @@
 import { FormControl, FileUploader, Button, Switch } from 'frappe-ui'
 import { computed } from 'vue'
 import { getFileSize, validateFile } from '@/utils'
-import { X, FileText } from 'lucide-vue-next'
+import { X } from 'lucide-vue-next'
 import Link from '@/components/Controls/Link.vue'
 import CodeEditor from '@/components/Controls/CodeEditor.vue'
 

frontend/src/pages/Courses.vue

@@ -160,30 +160,45 @@
 
 <script setup>
 import {
-	Breadcrumbs,
-	Tabs,
 	Badge,
+	Breadcrumbs,
 	Button,
-	FormControl,
+	call,
 	createResource,
+	FormControl,
+	Tabs,
 } from 'frappe-ui'
 import CourseCard from '@/components/CourseCard.vue'
 import { BookOpen, Plus, Search } from 'lucide-vue-next'
 import { ref, computed, inject, onMounted, watch } from 'vue'
 import { updateDocumentTitle } from '@/utils'
+import { useRouter } from 'vue-router'
+import { useSettings } from '@/stores/settings'
 
 const user = inject('$user')
 const searchQuery = ref('')
 const currentCategory = ref(null)
 const hasCourses = ref(false)
+const router = useRouter()
+const settings = useSettings()
 
 onMounted(() => {
+	checkLearningPath()
 	let queries = new URLSearchParams(location.search)
 	if (queries.has('category')) {
 		currentCategory.value = queries.get('category')
 	}
 })
 
+const checkLearningPath = () => {
+	if (
+		settings.learningPaths.data &&
+		(!user.data?.is_moderator || !user.data?.is_instructor)
+	) {
+		router.push({ name: 'Programs' })
+	}
+}
+
 const courses = createResource({
 	url: 'lms.lms.utils.get_courses',
 	cache: ['courses', user.data?.email],

frontend/src/pages/ProgramForm.vue

@@ -0,0 +1,354 @@
+<template>
+	<header
+		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">
+			{{ __('Save') }}
+		</Button>
+	</header>
+	<div v-if="program.doc" class="pt-5 px-5 w-3/4 mx-auto space-y-10">
+		<FormControl v-model="program.doc.title" :label="__('Title')" />
+
+		<!-- Courses -->
+		<div>
+			<div class="flex items-center justify-between mb-2">
+				<div class="text-lg font-semibold">
+					{{ __('Program Courses') }}
+				</div>
+				<Button
+					@click="
+						() => {
+							currentForm = 'course'
+							showDialog = true
+						}
+					"
+				>
+					<template #prefix>
+						<Plus class="w-4 h-4" />
+					</template>
+					{{ __('Add') }}
+				</Button>
+			</div>
+
+			<ListView
+				:columns="courseColumns"
+				:rows="program.doc.program_courses"
+				row-key="name"
+				:options="{
+					showTooltip: false,
+				}"
+			>
+				<ListHeader
+					class="mb-2 grid items-center space-x-4 rounded bg-gray-100 p-2"
+				>
+					<ListHeaderItem :item="item" v-for="item in courseColumns" />
+				</ListHeader>
+				<ListRows>
+					<Draggable
+						:list="program.doc.program_courses"
+						item-key="name"
+						group="items"
+						@end="updateOrder"
+					>
+						<template #item="{ element: row }">
+							<ListRow :row="row" />
+						</template>
+					</Draggable>
+				</ListRows>
+				<ListSelectBanner>
+					<template #actions="{ unselectAll, selections }">
+						<div class="flex gap-2">
+							<Button
+								variant="ghost"
+								@click="remove(selections, unselectAll, 'program_courses')"
+							>
+								<Trash2 class="h-4 w-4 stroke-1.5" />
+							</Button>
+						</div>
+					</template>
+				</ListSelectBanner>
+			</ListView>
+		</div>
+
+		<!-- Members -->
+		<div>
+			<div class="flex items-center justify-between mb-2">
+				<div class="text-lg font-semibold">
+					{{ __('Program Members') }}
+				</div>
+				<Button
+					@click="
+						() => {
+							currentForm = 'member'
+							showDialog = true
+						}
+					"
+				>
+					<template #prefix>
+						<Plus class="w-4 h-4" />
+					</template>
+					{{ __('Add') }}
+				</Button>
+			</div>
+
+			<ListView
+				:columns="memberColumns"
+				:rows="program.doc.program_members"
+				row-key="name"
+				:options="{
+					showTooltip: false,
+				}"
+			>
+				<ListHeader
+					class="mb-2 grid items-center space-x-4 rounded bg-gray-100 p-2"
+				>
+					<ListHeaderItem :item="item" v-for="item in memberColumns" />
+				</ListHeader>
+				<ListRows>
+					<ListRow :row="row" v-for="row in program.doc.program_members" />
+				</ListRows>
+				<ListSelectBanner>
+					<template #actions="{ unselectAll, selections }">
+						<div class="flex gap-2">
+							<Button
+								variant="ghost"
+								@click="remove(selections, unselectAll, 'program_members')"
+							>
+								<Trash2 class="h-4 w-4 stroke-1.5" />
+							</Button>
+						</div>
+					</template>
+				</ListSelectBanner>
+			</ListView>
+		</div>
+	</div>
+
+	<Dialog
+		v-model="showDialog"
+		:options="{
+			title:
+				currentForm == 'course'
+					? __('New Program Course')
+					: __('New Program Member'),
+			actions: [
+				{
+					label: __('Add'),
+					variant: 'solid',
+					onClick: () =>
+						currentForm == 'course'
+							? addProgramCourse(close)
+							: addProgramMember(close),
+				},
+			],
+		}"
+	>
+		<template #body-content>
+			<Link
+				v-if="currentForm == 'course'"
+				v-model="course"
+				doctype="LMS Course"
+				:filters="{
+					disable_self_learning: 1,
+				}"
+				:label="__('Program Course')"
+				:description="
+					__(
+						'Only courses for which self learning is disabled can be added to program.'
+					)
+				"
+			/>
+
+			<Link
+				v-if="currentForm == 'member'"
+				v-model="member"
+				doctype="User"
+				:filters="{
+					ignore_user_type: 1,
+				}"
+				:label="__('Program Member')"
+			/>
+		</template>
+	</Dialog>
+</template>
+<script setup>
+import {
+	Breadcrumbs,
+	Button,
+	call,
+	createDocumentResource,
+	Dialog,
+	FormControl,
+	ListView,
+	ListRows,
+	ListRow,
+	ListHeader,
+	ListHeaderItem,
+	ListSelectBanner,
+} from 'frappe-ui'
+import { computed, ref } from 'vue'
+import { Plus, Trash2 } from 'lucide-vue-next'
+import Link from '@/components/Controls/Link.vue'
+import { showToast } from '@/utils/'
+import Draggable from 'vuedraggable'
+
+const showDialog = ref(false)
+const currentForm = ref(null)
+const course = ref(null)
+const member = ref(null)
+
+const props = defineProps({
+	programName: {
+		type: String,
+		required: true,
+	},
+})
+
+const program = createDocumentResource({
+	doctype: 'LMS Program',
+	name: props.programName,
+	auto: true,
+	cache: ['program', props.programName],
+})
+
+const addProgramCourse = () => {
+	program.setValue.submit(
+		{
+			program_courses: [
+				...program.doc.program_courses,
+				{ course: course.value },
+			],
+		},
+		{
+			onSuccess(data) {
+				showDialog.value = false
+				course.value = null
+				showToast(__('Success'), __('Course added to program'), 'check')
+				program.reload()
+			},
+			onError(err) {
+				showToast('Error', err.messages?.[0] || err, 'x')
+			},
+		}
+	)
+}
+
+const addProgramMember = () => {
+	program.setValue.submit(
+		{
+			program_members: [
+				...program.doc.program_members,
+				{ member: member.value },
+			],
+		},
+		{
+			onSuccess(data) {
+				showDialog.value = false
+				member.value = null
+				showToast(__('Success'), __('Member added to program'), 'check')
+				program.reload()
+			},
+			onError(err) {
+				showToast('Error', err.messages?.[0] || err, 'x')
+			},
+		}
+	)
+}
+
+const remove = (selections, unselectAll, doctype) => {
+	selections = Array.from(selections)
+	program.setValue.submit(
+		{
+			[doctype]: program.doc[doctype].filter(
+				(row) => !selections.includes(row.name)
+			),
+		},
+		{
+			onSuccess(data) {
+				unselectAll()
+				showToast(__('Success'), __('Items removed successfully'), 'check')
+				program.reload()
+			},
+			onError(err) {
+				showToast('Error', err.messages?.[0] || err, 'x')
+			},
+		}
+	)
+}
+
+const updateOrder = (e) => {
+	let sourceIdx = e.from.dataset.idx
+	let targetIdx = e.to.dataset.idx
+	let courses = program.doc.program_courses
+	courses.splice(targetIdx, 0, courses.splice(sourceIdx, 1)[0])
+
+	courses.forEach((course, index) => {
+		course.idx = index + 1
+	})
+
+	program.setValue.submit(
+		{
+			program_courses: courses,
+		},
+		{
+			onSuccess(data) {
+				showToast(__('Success'), __('Course moved successfully'), 'check')
+				program.reload()
+			},
+			onError(err) {
+				showToast('Error', err.messages?.[0] || err, 'x')
+			},
+		}
+	)
+}
+
+const courseColumns = computed(() => {
+	return [
+		{
+			label: 'Title',
+			key: 'course_title',
+			width: 3,
+		},
+		{
+			label: 'ID',
+			key: 'course',
+			width: 3,
+		},
+	]
+})
+
+const memberColumns = computed(() => {
+	return [
+		{
+			label: 'Member',
+			key: 'member',
+			width: 3,
+			align: 'left',
+		},
+		{
+			label: 'Full Name',
+			key: 'full_name',
+			width: 3,
+			align: 'left',
+		},
+		{
+			label: 'Progress',
+			key: 'progress',
+			width: 3,
+			align: 'left',
+		},
+	]
+})
+
+const breadbrumbs = computed(() => {
+	return [
+		{
+			label: 'Programs',
+			route: { name: 'Programs' },
+		},
+		{
+			label: props.programName === 'new' ? 'New Program' : props.programName,
+		},
+	]
+})
+</script>

frontend/src/pages/Programs.vue

@@ -0,0 +1,185 @@
+<template>
+	<header
+		class="sticky top-0 z-10 flex items-center justify-between border-b bg-white px-3 py-2.5 sm:px-5"
+	>
+		<Breadcrumbs :items="breadbrumbs" />
+		<Button
+			v-if="user.data?.is_moderator || user.data?.is_instructor"
+			@click="showDialog = true"
+			variant="solid"
+		>
+			<template #prefix>
+				<Plus class="h-4 w-4 stroke-1.5" />
+			</template>
+			{{ __('New') }}
+		</Button>
+	</header>
+	<div v-if="programs.data?.length" class="pt-5 px-5">
+		<div v-for="program in programs.data" class="mb-20">
+			<div class="flex items-center justify-between">
+				<div class="text-xl font-semibold">
+					{{ program.name }}
+				</div>
+				<div class="flex items-center space-x-2">
+					<Badge
+						v-if="program.members"
+						variant="subtle"
+						theme="green"
+						size="lg"
+					>
+						{{ program.members }}
+						{{
+							program.members == 1 ? __(singularize('members')) : __('members')
+						}}
+					</Badge>
+					<Badge
+						v-if="program.progress"
+						variant="subtle"
+						theme="blue"
+						size="lg"
+					>
+						{{ program.progress }}{{ __('% completed') }}
+					</Badge>
+
+					<router-link
+						v-if="user.data?.is_moderator || user.data?.is_instructor"
+						:to="{
+							name: 'ProgramForm',
+							params: { programName: program.name },
+						}"
+					>
+						<Button>
+							<template #prefix>
+								<Edit class="h-4 w-4 stroke-1.5" />
+							</template>
+							{{ __('Edit') }}
+						</Button>
+					</router-link>
+				</div>
+			</div>
+			<div
+				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>
+			<div v-else class="text-sm italic text-gray-600 mt-4">
+				{{ __('No courses in this program') }}
+			</div>
+		</div>
+	</div>
+	<div
+		v-else
+		class="text-center p-5 text-gray-600 mt-52 w-3/4 md:w-1/2 mx-auto space-y-2"
+	>
+		<BookOpen class="size-10 mx-auto stroke-1 text-gray-500" />
+		<div class="text-xl font-medium">
+			{{ __('No programs found') }}
+		</div>
+		<div class="leading-5">
+			{{
+				__(
+					'There are no programs available at the moment. Keep an eye out, fresh learning experiences are on the way soon!'
+				)
+			}}
+		</div>
+	</div>
+
+	<Dialog
+		v-model="showDialog"
+		:options="{
+			title: __('New Program'),
+			actions: [
+				{
+					label: __('Create'),
+					variant: 'solid',
+					onClick: () => createProgram(close),
+				},
+			],
+		}"
+	>
+		<template #body-content>
+			<FormControl :label="__('Title')" v-model="title" />
+		</template>
+	</Dialog>
+</template>
+<script setup>
+import {
+	Badge,
+	Breadcrumbs,
+	Button,
+	call,
+	createResource,
+	Dialog,
+	FormControl,
+} from 'frappe-ui'
+import { computed, inject, ref } from 'vue'
+import { BookOpen, Edit, Plus } from 'lucide-vue-next'
+import CourseCard from '@/components/CourseCard.vue'
+import { useRouter } from 'vue-router'
+import { showToast, singularize } from '@/utils'
+
+const user = inject('$user')
+const showDialog = ref(false)
+const router = useRouter()
+const title = ref('')
+
+const programs = createResource({
+	url: 'lms.lms.utils.get_programs',
+	auto: true,
+	cache: 'programs',
+})
+
+const createProgram = (close) => {
+	call('frappe.client.insert', {
+		doc: {
+			doctype: 'LMS Program',
+			title: title.value,
+		},
+	}).then((res) => {
+		router.push({ name: 'ProgramForm', params: { programName: res.name } })
+	})
+}
+
+const enrollMember = (program, course) => {
+	call('lms.lms.utils.enroll_in_program_course', {
+		program: program,
+		course: course,
+	})
+		.then((data) => {
+			if (data.current_lesson) {
+				router.push({
+					name: 'Lesson',
+					params: {
+						courseName: course,
+						chapterNumber: data.current_lesson.split('-')[0],
+						lessonNumber: data.current_lesson.split('-')[1],
+					},
+				})
+			} else if (data) {
+				router.push({
+					name: 'Lesson',
+					params: {
+						courseName: course,
+						chapterNumber: 1,
+						lessonNumber: 1,
+					},
+				})
+			}
+		})
+		.catch((err) => {
+			showToast('Error', err.messages?.[0] || err, 'x')
+		})
+}
+
+const breadbrumbs = computed(() => [
+	{
+		label: 'Programs',
+	},
+])
+</script>

frontend/src/router.js

@@ -182,6 +182,17 @@ const routes = [
 		component: () => import('@/pages/QuizSubmission.vue'),
 		props: true,
 	},
+	{
+		path: '/programs/:programName',
+		name: 'ProgramForm',
+		component: () => import('@/pages/ProgramForm.vue'),
+		props: true,
+	},
+	{
+		path: '/programs',
+		name: 'Programs',
+		component: () => import('@/pages/Programs.vue'),
+	},
 ]
 
 let router = createRouter({

frontend/src/stores/settings.js

@@ -1,12 +1,25 @@
 import { defineStore } from 'pinia'
 import { ref } from 'vue'
+import { createResource } from 'frappe-ui'
 
 export const useSettings = defineStore('settings', () => {
 	const isSettingsOpen = ref(false)
 	const activeTab = ref(null)
+	const learningPaths = createResource({
+		url: 'frappe.client.get_single_value',
+		makeParams(values) {
+			return {
+				doctype: 'LMS Settings',
+				field: 'enable_learning_paths',
+			}
+		},
+		auto: true,
+		cache: ['learningPaths'],
+	})
 
 	return {
 		isSettingsOpen,
 		activeTab,
+		learningPaths,
 	}
 })