feat: reorder courses and students view for programs

2024-11-20 19:32:49 +05:30
parent e1a78382c3
commit 582c7af12d
12 changed files with 575 additions and 137 deletions
--- a/frontend/src/components/Controls/Autocomplete.vue
+++ b/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>
--- a/frontend/src/components/Controls/Link.vue
+++ b/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,
 			}
--- a/frontend/src/components/Modals/Settings.vue
+++ b/frontend/src/components/Modals/Settings.vue
@@ -115,21 +115,21 @@ const tabsStructure = computed(() => {
 							label: 'Enable Learning Paths',
 							name: 'enable_learning_paths',
 							description:
-								'This will change the default flow of the system and enforce students to go through programs assigned to them in the correct order.',
+								'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 and Google Calendar of the evaluator is set in the system, students will receive calendar invites to remind them of their evaluations.',
+								'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. Refer the docs to know more https://unsplash.com/documentation#getting-started.',
+								'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',
 						},
 					],
--- a/frontend/src/pages/Courses.vue
+++ b/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'

 const user = inject('$user')
 const searchQuery = ref('')
 const currentCategory = ref(null)
 const hasCourses = ref(false)
+const router = useRouter()

 onMounted(() => {
+	checkLearningPath()
 	let queries = new URLSearchParams(location.search)
 	if (queries.has('category')) {
 		currentCategory.value = queries.get('category')
 	}
 })

+const checkLearningPath = () => {
+	call('frappe.client.get_single_value', {
+		doctype: 'LMS Settings',
+		field: 'enable_learning_paths',
+	}).then((res) => {
+		if (res && !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],
--- a/frontend/src/pages/ProgramForm.vue
+++ b/frontend/src/pages/ProgramForm.vue
@@ -7,48 +7,195 @@
 			{{ __('Save') }}
 		</Button>
 	</header>
-	<div v-if="program.doc" class="w-1/2 mx-auto pt-10 space-y-5">
-		<FormControl :label="__('Title')" v-model="program.doc.title" />
+	<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>
-				<div class="font-semibold">
+			<div class="flex items-center justify-between mb-2">
+				<div class="text-lg font-semibold">
 					{{ __('Program Courses') }}
 				</div>
-				<div></div>
+				<Button
+					@click="
+						() => {
+							currentForm = 'course'
+							showDialog = true
+						}
+					"
+				>
+					<template #prefix>
+						<Plus class="w-4 h-4" />
+					</template>
+					{{ __('Add') }}
+				</Button>
 			</div>
+
 			<ListView
-				v-if="program.doc.program_courses.length"
 				:columns="courseColumns"
 				:rows="program.doc.program_courses"
 				row-key="name"
-				:options="{ showTooltip: false, selectable: false }"
+				: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">
-					</ListHeaderItem>
+					<ListHeaderItem :item="item" v-for="item in courseColumns" />
 				</ListHeader>
 				<ListRows>
-					<ListRow :row="row" />
+					<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 } from 'vue'
+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: {
@@ -66,19 +213,135 @@ const program = createDocumentResource({

 console.log(program)

-const courseColumns = computed(() => [
-	{
-		label: 'Course',
-		key: 'course_title',
-		width: '2',
-	},
-])
+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
+	})
+
+	console.log(courses)
+	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',
+		},
+	]
+})

 const breadbrumbs = computed(() => {
 	return [
 		{
 			label: 'Programs',
-			to: { name: 'Programs' },
+			route: { name: 'Programs' },
 		},
 		{
 			label: props.programName === 'new' ? 'New Program' : props.programName,
--- a/frontend/src/pages/Programs.vue
+++ b/frontend/src/pages/Programs.vue
@@ -1,59 +1,98 @@
 <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"
+		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 variant="solid" @click="showDialog = true">
+		<Button
+			v-if="user.data?.is_moderator || user.data?.is_instructor"
+			@click="showDialog = true"
+			variant="solid"
+		>
 			<template #prefix>
-				<Plus class="w-4 h-4" />
+				<Plus class="h-4 w-4 stroke-1.5" />
 			</template>
-			{{ __('New Program') }}
+			{{ __('New') }}
 		</Button>
 	</header>
-	<div class="pt-5 px-5">
-		<div v-if="programs.data?.length">
-			<ListView
-				:columns="programColumns"
-				:rows="programs.data"
-				row-key="name"
-				:options="{ showTooltip: false, selectable: false }"
-			>
-				<ListHeader
-					class="mb-2 grid items-center space-x-4 rounded bg-gray-100 p-2"
-				>
-					<ListHeaderItem :item="item" v-for="item in programColumns">
-					</ListHeaderItem>
-				</ListHeader>
-				<ListRows>
+	<div v-if="programs.data?.length" class="pt-5 px-5">
+		<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 }}
+				</div>
+				<div class="flex items-center space-x-2">
+					<Badge v-if="program.members" variant="subtle" theme="green">
+						{{ program.members }} {{ __('Members') }}
+					</Badge>
 					<router-link
-						v-for="row in programs.data"
+						v-if="user.data?.is_moderator || user.data?.is_instructor"
 						:to="{
 							name: 'ProgramForm',
-							params: {
-								programName: row.name,
-							},
+							params: { programName: program.name },
 						}"
 					>
-						<ListRow :row="row" />
+						<Button>
+							<template #prefix>
+								<Edit class="h-4 w-4 stroke-1.5" />
+							</template>
+							{{ __('Edit') }}
+						</Button>
 					</router-link>
-				</ListRows>
-			</ListView>
+				</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"
+			>
+				<router-link
+					v-for="course in program.courses"
+					:to="
+						course.membership && course.current_lesson
+							? {
+									name: 'Lesson',
+									params: {
+										courseName: course.name,
+										chapterNumber: course.current_lesson.split('-')[0],
+										lessonNumber: course.current_lesson.split('-')[1],
+									},
+							  }
+							: course.membership
+							? {
+									name: 'Lesson',
+									params: {
+										courseName: course.name,
+										chapterNumber: 1,
+										lessonNumber: 1,
+									},
+							  }
+							: {
+									name: 'CourseDetail',
+									params: { courseName: course.name },
+							  }
+					"
+				>
+					<CourseCard :course="course" />
+				</router-link>
+			</div>
+			<div v-else class="text-sm italic text-gray-600 mt-4">
+				{{ __('No courses in this program') }}
+			</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"
-		>
-			<Route class="size-10 mx-auto stroke-1 text-gray-500" />
-			<div class="text-xl font-medium">
-				{{ __('No programs found') }}
-			</div>
-			<div class="leading-5">
-				{{
-					__(
-						'Program lets you create learning paths and assign them to your students. To create one, click on the "New Program" button above.'
-					)
-				}}
-			</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>

@@ -77,88 +116,46 @@
 </template>
 <script setup>
 import {
+	Badge,
 	Breadcrumbs,
 	Button,
-	createListResource,
+	call,
+	createResource,
 	Dialog,
 	FormControl,
-	ListView,
-	ListRows,
-	ListRow,
-	ListHeader,
-	ListHeaderItem,
 } from 'frappe-ui'
-import { computed, inject, onMounted, ref } from 'vue'
-import { Plus, Route } from 'lucide-vue-next'
+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'

 const user = inject('$user')
-const router = useRouter()
 const showDialog = ref(false)
+const router = useRouter()
 const title = ref('')

-onMounted(() => {
-	if (!user.data?.is_moderator) {
-		router.push({ name: 'Courses' })
-	}
-})
-
-const programs = createListResource({
-	doctype: 'LMS Program',
-	fields: ['title', 'name', 'program_courses'],
+const programs = createResource({
+	url: 'lms.lms.utils.get_programs',
 	auto: true,
 	cache: 'programs',
-	transform(data) {
-		return data.map((program) => {
-			console.log(program)
-			program.program_courses = program.program_courses?.length
-			return program
-		})
-	},
 })

-const createProgram = async (close) => {
-	programs.insert.submit(
-		{
+console.log(programs)
+
+const createProgram = (close) => {
+	call('frappe.client.insert', {
+		doc: {
+			doctype: 'LMS Program',
 			title: title.value,
 		},
-		{
-			onSuccess(data) {
-				showDialog.value = false
-				router.push({ name: 'ProgramForm', params: { programName: data.name } })
-			},
-		}
-	)
+	}).then((res) => {
+		router.push({ name: 'ProgramForm', params: { programName: res.name } })
+	})
 }

 const breadbrumbs = computed(() => [
 	{
 		label: 'Programs',
-		route: {
-			name: 'Programs',
-		},
 	},
 ])
-
-const programColumns = computed(() => {
-	return [
-		{
-			label: __('Title'),
-			key: 'title',
-			width: 2,
-		},
-		{
-			label: __('Courses'),
-			key: 'program_courses',
-			width: 1,
-			align: 'center',
-		},
-		{
-			label: __('Members'),
-			key: 'program_members',
-			width: 1,
-			align: 'center',
-		},
-	]
-})
 </script>
--- a/frontend/src/router.js
+++ b/frontend/src/router.js
@@ -182,17 +182,17 @@ const routes = [
 		component: () => import('@/pages/QuizSubmission.vue'),
 		props: true,
 	},
-	{
-		path: '/programs',
-		name: 'Programs',
-		component: () => import('@/pages/Programs.vue'),
-	},
 	{
 		path: '/programs/:programName',
 		name: 'ProgramForm',
 		component: () => import('@/pages/ProgramForm.vue'),
 		props: true,
 	},
+	{
+		path: '/programs',
+		name: 'Programs',
+		component: () => import('@/pages/Programs.vue'),
+	},
 ]

 let router = createRouter({
--- a/frontend/src/utils/index.js
+++ b/frontend/src/utils/index.js
@@ -438,6 +438,8 @@ export function getSidebarLinks() {
 				'Lesson',
 				'CourseForm',
 				'LessonForm',
+				'Programs',
+				'ProgramForm',
 			],
 		},
 		{