feat: course creation page structure

frontend/src/components/UserDropdown.vue

@@ -46,8 +46,10 @@
 import LMSLogo from '@/components/Icons/LMSLogo.vue'
 import { sessionStore } from '@/stores/session'
 import { Dropdown } from 'frappe-ui'
-import { ChevronDown } from 'lucide-vue-next'
+import { ChevronDown, LogIn, LogOut, User } from 'lucide-vue-next'
+import { useRouter } from 'vue-router'
 
+const router = useRouter()
 const props = defineProps({
 	isCollapsed: {
 		type: Boolean,
@@ -57,10 +59,20 @@ const props = defineProps({
 
 const { logout, user } = sessionStore()
 let { isLoggedIn } = sessionStore()
-
+console.log(user)
 const userDropdownOptions = [
 	{
-		icon: 'log-out',
+		icon: User,
+		label: 'My Profile',
+		onClick: () => {
+			router.push(`/user/${user.data?.username}`)
+		},
+		condition: () => {
+			return isLoggedIn
+		},
+	},
+	{
+		icon: LogOut,
 		label: 'Log out',
 		onClick: () => {
 			logout.submit().then(() => {
@@ -72,7 +84,7 @@ const userDropdownOptions = [
 		},
 	},
 	{
-		icon: 'log-in',
+		icon: LogIn,
 		label: 'Log in',
 		onClick: () => {
 			window.location.href = '/login'

frontend/src/pages/Courses.vue

@@ -9,12 +9,21 @@
 					:items="[{ label: __('All Courses'), route: { name: 'Courses' } }]"
 				/>
 				<div class="flex">
-					<Button v-if="user.data?.is_moderator" variant="solid">
-						<template #prefix>
-							<Plus class="h-4 w-4" />
-						</template>
-						{{ __('New Course') }}
-					</Button>
+					<router-link
+						:to="{
+							name: 'CreateCourse',
+							params: {
+								courseName: 'new',
+							},
+						}"
+					>
+						<Button v-if="user.data?.is_moderator" variant="solid">
+							<template #prefix>
+								<Plus class="h-4 w-4" />
+							</template>
+							{{ __('New Course') }}
+						</Button>
+					</router-link>
 				</div>
 			</header>
 			<div class="">

frontend/src/pages/CreateCourse.vue

@@ -0,0 +1,131 @@
+<template>
+	<div class="h-screen text-base">
+		<div class="grid grid-cols-[70%,30%] h-full">
+			<div>
+				<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
+						class="h-7"
+						:items="[
+							{
+								label: __('Courses'),
+								route: { name: 'Courses' },
+							},
+							{
+								label: __('New Course'),
+								route: { name: 'CreateCourse', params: { courseName: 'new' } },
+							},
+						]"
+					/>
+					<Button variant="solid" @click="submitCourse()">
+						<span>
+							{{ __('Save') }}
+						</span>
+					</Button>
+				</header>
+				<div class="container mt-5">
+					<Input v-model="course.title" :label="__('Title')" class="mb-2" />
+					<Input
+						v-model="course.short_introduction"
+						:label="__('Short Introduction')"
+						class="mb-2"
+					/>
+					<div class="mb-4">
+						<div class="mb-1.5 text-sm text-gray-700">
+							{{ __('Course Description') }}
+						</div>
+						<TextEditor
+							:content="course.description"
+							@change="(val) => (topic.reply = val)"
+							:editable="true"
+							:fixedMenu="true"
+							editorClass="prose-sm max-w-none border-b border-x bg-gray-100 rounded-b-md py-1 px-2 min-h-[7rem]"
+						/>
+					</div>
+					<Input
+						v-model="course.video_link"
+						:label="__('Preview Video')"
+						class="mb-2"
+					/>
+					<Input v-model="course.tags" :label="__('Tags')" class="mb-2" />
+					<div class="flex items-center mb-4">
+						<Checkbox v-model="course.published" :label="__('Published')" />
+						<Checkbox
+							v-model="course.upcoming"
+							:label="__('Upcoming')"
+							class="ml-20"
+						/>
+					</div>
+					<Checkbox
+						v-model="course.paid_course"
+						:label="__('Paid Course')"
+						class="mb-2"
+					/>
+					<Input
+						v-model="course.course_price"
+						:label="__('Course Price')"
+						class="mb-2"
+					/>
+				</div>
+			</div>
+			<div class="bg-gray-50"></div>
+		</div>
+	</div>
+</template>
+<script setup>
+import {
+	Breadcrumbs,
+	Input,
+	TextEditor,
+	Checkbox,
+	Button,
+	createDocumentResource,
+	createResource,
+} from 'frappe-ui'
+import { reactive, inject, onMounted } from 'vue'
+
+const user = inject('$user')
+
+onMounted(() => {
+	if (!user.data?.is_moderator || !user.data?.is_instructor) {
+		window.location.href = '/login'
+	}
+})
+
+const course = reactive({
+	title: '',
+	short_introduction: '',
+	description: '',
+	video_link: '',
+	tags: '',
+	published: false,
+	upcoming: false,
+	image: null,
+	paid_course: false,
+	course_price: 0,
+	currency: '',
+})
+
+const courseResource = createResource({
+	url: 'frappe.client.insert',
+	makeParams() {
+		return {
+			doc: {
+				doctype: 'LMS Course',
+				...course,
+			},
+		}
+	},
+})
+console.log(courseResource)
+
+const submitCourse = () => {
+	courseResource.submit(
+		{},
+		{
+			validate() {},
+		}
+	)
+}
+</script>

frontend/src/pages/JobDetail.vue

@@ -126,7 +126,9 @@ const jobApplication = createResource({
 })
 
 onMounted(() => {
-	jobApplication.submit()
+	if (user.data?.name) {
+		jobApplication.submit()
+	}
 })
 
 const openApplicationModal = () => {

frontend/src/pages/Lesson.vue

@@ -1,5 +1,5 @@
 <template>
-	<div v-if="lesson.data && course.data" class="h-screen text-base">
+	<div v-if="lesson.data" class="h-screen text-base">
 		<header
 			class="sticky top-0 z-10 flex items-center justify-between border-b bg-white px-3 py-2.5 sm:px-5"
 		>
@@ -65,24 +65,24 @@
 					<span
 						class="mr-1"
 						:class="{
-							'avatar-group overlap': course.data.instructors.length > 1,
+							'avatar-group overlap': lesson.data.instructors.length > 1,
 						}"
 					>
 						<UserAvatar
-							v-for="instructor in course.data.instructors"
+							v-for="instructor in lesson.data.instructors"
 							:user="instructor"
 						/>
 					</span>
-					<span v-if="course.data.instructors.length == 1">
-						{{ course.data.instructors[0].full_name }}
+					<span v-if="lesson.data.instructors.length == 1">
+						{{ lesson.data.instructors[0].full_name }}
 					</span>
-					<span v-if="course.data.instructors.length == 2">
-						{{ course.data.instructors[0].first_name }} and
-						{{ course.data.instructors[1].first_name }}
+					<span v-if="lesson.data.instructors.length == 2">
+						{{ lesson.data.instructors[0].first_name }} and
+						{{ lesson.data.instructors[1].first_name }}
 					</span>
-					<span v-if="course.data.instructors.length > 2">
-						{{ course.data.instructors[0].first_name }} and
-						{{ course.data.instructors.length - 1 }} others
+					<span v-if="lesson.data.instructors.length > 2">
+						{{ lesson.data.instructors[0].first_name }} and
+						{{ lesson.data.instructors.length - 1 }} others
 					</span>
 				</div>
 				<div
@@ -180,19 +180,19 @@
 			<div class="sticky top-10">
 				<div class="bg-gray-50 p-5 border-b-2">
 					<div class="text-lg font-semibold">
-						{{ course.data.title }}
+						{{ lesson.data.course_title }}
 					</div>
-					<div v-if="user && course.data.membership" class="text-sm mt-3">
-						{{ Math.ceil(course.data.membership.progress) }}% completed
+					<div v-if="user && lesson.data.membership" class="text-sm mt-3">
+						{{ Math.ceil(lesson.data.membership.progress) }}% completed
 					</div>
 					<div
-						v-if="user && course.data.membership"
+						v-if="user && lesson.data.membership"
 						class="w-full bg-gray-200 rounded-full h-1 my-2"
 					>
 						<div
 							class="bg-gray-900 h-1 rounded-full"
 							:style="{
-								width: Math.ceil(course.data.membership.progress) + '%',
+								width: Math.ceil(lesson.data.membership.progress) + '%',
 							}"
 						></div>
 					</div>
@@ -204,7 +204,7 @@
 </template>
 <script setup>
 import { createResource, Breadcrumbs, Button } from 'frappe-ui'
-import { computed, watch, onBeforeMount, onUnmounted, inject } from 'vue'
+import { computed, watch, ref, inject } from 'vue'
 import CourseOutline from '@/components/CourseOutline.vue'
 import UserAvatar from '@/components/UserAvatar.vue'
 import { useRoute } from 'vue-router'
@@ -215,6 +215,7 @@ import Discussions from '@/components/Discussions.vue'
 
 const user = inject('$user')
 const route = useRoute()
+
 const markdown = new MarkdownIt({
 	html: true,
 	linkify: true,
@@ -247,15 +248,21 @@ const lesson = createResource({
 	},
 	auto: true,
 	onSuccess(data) {
-		if (data.membership) {
+		if (data.membership)
 			current_lesson.submit({
 				name: data.membership.name,
 				lesson_name: data.name,
 			})
-		}
+		markProgress(data)
 	},
 })
 
+const markProgress = (data) => {
+	setTimeout(() => {
+		if (!data.progress) progress.submit()
+	}, 60000)
+}
+
 const current_lesson = createResource({
 	url: 'frappe.client.set_value',
 	makeParams(values) {
@@ -268,19 +275,20 @@ const current_lesson = createResource({
 	},
 })
 
-const course = createResource({
-	url: 'lms.lms.utils.get_course_details',
-	cache: ['course', props.courseName],
-	params: {
-		course: props.courseName,
+const progress = createResource({
+	url: 'lms.lms.doctype.course_lesson.course_lesson.save_progress',
+	makeParams() {
+		return {
+			lesson: lesson.data.name,
+			course: props.courseName,
+		}
 	},
-	auto: true,
 })
 
 const breadcrumbs = computed(() => {
 	let items = [{ label: 'All Courses', route: { name: 'Courses' } }]
 	items.push({
-		label: course?.data?.title,
+		label: lesson?.data?.course_title,
 		route: { name: 'CourseDetail', params: { course: props.courseName } },
 	})
 	items.push({
@@ -297,14 +305,6 @@ const breadcrumbs = computed(() => {
 	return items
 })
 
-onBeforeMount(() => {
-	localStorage.setItem('sidebar_is_collapsed', true)
-})
-
-onUnmounted(() => {
-	localStorage.setItem('sidebar_is_collapsed', false)
-})
-
 watch(
 	[() => route.params.chapterNumber, () => route.params.lessonNumber],
 	(
@@ -341,15 +341,11 @@ const redirectToLogin = () => {
 
 const allowDiscussions = () => {
 	return (
-		course.data?.membership ||
+		lesson.data?.membership ||
 		user.data?.is_moderator ||
 		user.data?.is_instructor
 	)
 }
-
-const hideLesson = () => {
-	return false
-}
 </script>
 <style>
 .avatar-group {

frontend/src/pages/Profile.vue

@@ -0,0 +1 @@
+<template></template>

frontend/src/router.js

@@ -54,6 +54,12 @@ const routes = [
 		name: 'Statistics',
 		component: () => import('@/pages/Statistics.vue'),
 	},
+	{
+		path: '/user/:userName',
+		name: 'Profile',
+		component: () => import('@/pages/Profile.vue'),
+		props: true,
+	},
 	{
 		path: '/job-openings',
 		name: 'Jobs',
@@ -65,6 +71,18 @@ const routes = [
 		component: () => import('@/pages/JobDetail.vue'),
 		props: true,
 	},
+	{
+		path: '/courses/:courseName/edit',
+		name: 'CreateCourse',
+		component: () => import('@/pages/CreateCourse.vue'),
+		props: true,
+	},
+	{
+		path: '/courses/:courseName/outline',
+		name: 'CourseOutline',
+		component: () => import('@/pages/CreateOutline.vue'),
+		props: true,
+	},
 ]
 
 let router = createRouter({

lms/lms/doctype/course_lesson/course_lesson.py

@@ -87,13 +87,32 @@ class CourseLesson(Document):
 
 
 @frappe.whitelist()
-def save_progress(lesson, course, status):
+def save_progress(lesson, course):
 	membership = frappe.db.exists(
 		"LMS Enrollment", {"member": frappe.session.user, "course": course}
 	)
 	if not membership:
 		return 0
 
+	quiz_completed = get_quiz_progress(lesson)
+	if not quiz_completed:
+		return 0
+
+	frappe.get_doc(
+		{
+			"doctype": "LMS Course Progress",
+			"lesson": lesson,
+			"status": "Complete",
+			"member": frappe.session.user,
+		}
+	).save(ignore_permissions=True)
+
+	progress = get_course_progress(course)
+	frappe.db.set_value("LMS Enrollment", membership, "progress", progress)
+	return progress
+
+
+def get_quiz_progress(lesson):
 	body = frappe.db.get_value("Course Lesson", lesson, "body")
 	macros = find_macros(body)
 	quizzes = [value for name, value in macros if name == "Quiz"]
@@ -108,26 +127,9 @@ def save_progress(lesson, course, status):
 				"percentage": [">=", passing_percentage],
 			},
 		):
-			return 0
+			return False
 
-	filters = {"lesson": lesson, "owner": frappe.session.user, "course": course}
-	if frappe.db.exists("LMS Course Progress", filters):
-		doc = frappe.get_doc("LMS Course Progress", filters)
-		doc.status = status
-		doc.save(ignore_permissions=True)
-	else:
-		frappe.get_doc(
-			{
-				"doctype": "LMS Course Progress",
-				"lesson": lesson,
-				"status": status,
-				"member": frappe.session.user,
-			}
-		).save(ignore_permissions=True)
-
-	progress = get_course_progress(course)
-	frappe.db.set_value("LMS Enrollment", membership, "progress", progress)
-	return progress
+	return True
 
 
 @frappe.whitelist()

lms/lms/doctype/lms_course_progress/lms_course_progress.json

@@ -67,7 +67,7 @@
  ],
  "index_web_pages_for_search": 1,
  "links": [],
- "modified": "2022-11-09 14:24:06.312623",
+ "modified": "2024-02-27 11:43:08.326886",
  "modified_by": "Administrator",
  "module": "LMS",
  "name": "LMS Course Progress",
@@ -84,6 +84,16 @@
    "role": "System Manager",
    "share": 1,
    "write": 1
+  },
+  {
+   "create": 1,
+   "email": 1,
+   "export": 1,
+   "print": 1,
+   "read": 1,
+   "report": 1,
+   "role": "LMS Student",
+   "share": 1
   }
  ],
  "sort_field": "modified",

lms/lms/doctype/lms_quiz/lms_quiz.json

@@ -122,7 +122,7 @@
  ],
  "index_web_pages_for_search": 1,
  "links": [],
- "modified": "2023-12-27 12:21:19.289520",
+ "modified": "2024-02-27 13:04:00.785182",
  "modified_by": "Administrator",
  "module": "LMS",
  "name": "LMS Quiz",

lms/lms/doctype/lms_quiz_submission/lms_quiz_submission.json

@@ -110,7 +110,7 @@
  "in_create": 1,
  "index_web_pages_for_search": 1,
  "links": [],
- "modified": "2024-01-01 15:53:33.357595",
+ "modified": "2024-02-27 13:01:53.611726",
  "modified_by": "Administrator",
  "module": "LMS",
  "name": "LMS Quiz Submission",
@@ -132,7 +132,6 @@
    "create": 1,
    "email": 1,
    "export": 1,
-   "if_owner": 1,
    "print": 1,
    "read": 1,
    "report": 1,

lms/lms/utils.py

@@ -1341,11 +1341,20 @@ def get_lesson(course, chapter, lesson):
 		],
 		as_dict=True,
 	)
+
+	if frappe.session.user == "Guest":
+		progress = 0
+	else:
+		progress = get_progress(course, lesson_details.name)
+
 	lesson_details.rendered_content = render_html(lesson_details)
 	neighbours = get_neighbour_lesson(course, chapter, lesson)
 	lesson_details.next = neighbours["next"]
+	lesson_details.progress = progress
 	lesson_details.prev = neighbours["prev"]
 	lesson_details.membership = membership
+	lesson_details.instructors = get_instructors(course)
+	lesson_details.course_title = frappe.db.get_value("LMS Course", course, "title")
 	return lesson_details