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({