feat: chapter creation

frontend/src/pages/Batches.vue

@@ -16,7 +16,13 @@
 				</Button>
 			</div>
 		</header>
-		<div class="pb-5">
+		<div v-if="batches.data" class="pb-5">
+			<div
+				v-if="batches.data.length == 0 && batches.list.loading"
+				class="p-5 text-base text-gray-700"
+			>
+				{{ __('Loading Batches...') }}
+			</div>
 			<Tabs v-model="tabIndex" :tabs="tabs" tablistClass="overflow-x-visible">
 				<template #tab="{ tab, selected }">
 					<div>
@@ -69,13 +75,14 @@
 	</div>
 </template>
 <script setup>
-import { createResource, Breadcrumbs, Button, Tabs, Badge } from 'frappe-ui'
+import { createListResource, Breadcrumbs, Button, Tabs, Badge } from 'frappe-ui'
 import { Plus } from 'lucide-vue-next'
 import BatchCard from '@/components/BatchCard.vue'
 import { inject, ref, computed } from 'vue'
 
 const user = inject('$user')
-const batches = createResource({
+const batches = createListResource({
+	doctype: 'LMS Batch',
 	url: 'lms.lms.utils.get_batches',
 	cache: ['batches', user?.data?.email],
 	auto: true,

frontend/src/pages/CourseDetail.vue

@@ -82,7 +82,7 @@
 						<CourseOutline
 							:courseName="course.data.name"
 							:showOutline="true"
-							:showHeader="true"
+							title="Course Outline"
 						/>
 					</div>
 					<CourseReviews

frontend/src/pages/CreateCourse.vue

@@ -109,8 +109,7 @@
 							</div>
 							<div class="flex items-center">
 								<div
-									v-if="tags"
-									v-for="tag in tags?.split(', ')"
+									v-for="tag in getTags"
 									class="flex items-center bg-gray-100 p-2 rounded-md mr-2"
 								>
 									{{ tag }}
@@ -170,27 +169,14 @@
 					</div>
 				</div>
 			</div>
-			<div class="bg-gray-50 px-5 pt-5">
-				<div v-if="courseResource.doc">
-					<div class="text-xl font-semibold">
-						{{ course.title }}
-					</div>
-					<div v-if="courseResource.doc.chapters.length">
-						{{ courseResource.chapters }}
-					</div>
-					<div v-else class="border bg-white rounded-md p-5 text-center mt-4">
-						<div>
-							{{
-								__(
-									'There are no chapters in this course. Create and manage chapters from here.'
-								)
-							}}
-						</div>
-						<Button class="mt-4">
-							{{ __('Add Chapter') }}
-						</Button>
-					</div>
-				</div>
+			<div class="border-l px-5 pt-5">
+				<!-- <CreateOutline v-if="courseResource.doc" :course="courseResource.doc"/> -->
+				<CourseOutline
+					v-if="courseResource.doc"
+					:courseName="courseResource.doc.name"
+					:title="courseResource.doc.title"
+					:allowEdit="true"
+				/>
 			</div>
 		</div>
 	</div>
@@ -205,10 +191,11 @@ import {
 	FormControl,
 	FileUploader,
 } from 'frappe-ui'
-import { inject, onMounted, computed, ref } from 'vue'
+import { inject, onMounted, computed, ref, reactive } from 'vue'
 import { convertToTitleCase, createToast, getFileSize } from '../utils'
 import Link from '@/components/Controls/Link.vue'
 import { FileText, X } from 'lucide-vue-next'
+import CourseOutline from '@/components/CourseOutline.vue'
 
 const user = inject('$user')
 const tags = ref('')
@@ -246,8 +233,13 @@ const courseResource = createDocumentResource({
 	name: props.courseName,
 	auto: false,
 	onSuccess(data) {
-		imageResource.reload({ image: data.image })
 		tags.value = data.tags
+		imageResource.reload({ image: data.image })
+		Object.assign(course, data)
+		course.published = data.published ? true : false
+		course.upcoming = data.upcoming ? true : false
+		course.disable_self_learning = data.disable_self_learning ? true : false
+		course.paid_course = data.paid_course ? true : false
 	},
 })
 
@@ -280,7 +272,7 @@ const course = computed(() => {
 		description: courseResource.doc?.description || '',
 		video_link: courseResource.doc?.video_link || '',
 		course_image: courseResource.doc?.image || null,
-		tags: tags.value,
+		tags: courseResource.doc?.tags || '',
 		published: courseResource.doc?.published ? true : false,
 		upcoming: courseResource.doc?.upcoming ? true : false,
 		disable_self_learning: courseResource.doc?.disable_self_learning
@@ -290,9 +282,31 @@ const course = computed(() => {
 		paid_course: courseResource.doc?.paid_course ? true : false,
 		course_price: courseResource.doc?.course_price || '',
 		currency: courseResource.doc?.currency || '',
+		image: courseResource.doc?.image || null,
 	}
 })
 
+const getTags = computed(() => {
+	return courseResource.doc?.tags
+		? courseResource.doc.tags.split(', ')
+		: tags.value?.split(', ')
+})
+/* 
+const course = reactive({
+	title: '',
+	short_introduction: '',
+	description: '',
+	video_link: '',
+	course_image: null,
+	tags: "",
+	published: false,
+	upcoming: false,
+	disable_self_learning: false,
+	paid_course: false,
+	course_price: '',
+	currency: '',
+}) */
+
 const courseCreationResource = createResource({
 	url: 'frappe.client.insert',
 	makeParams(values) {

frontend/src/pages/CreateLesson.vue

@@ -0,0 +1,130 @@
+<template>
+	<div 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"
+		>
+			<Breadcrumbs :items="breadcrumbs" />
+		</header>
+		<div class="w-7/12 mx-auto pt-5">
+			<div class="text-lg font-semibold mb-5">
+				{{ __('Lesson Details') }}
+			</div>
+			<FormControl v-model="lesson.title" label="Title" class="mb-4" />
+			<FormControl
+				v-model="lesson.include_in_preview"
+				type="checkbox"
+				label="Include in Preview"
+			/>
+			<div class="mt-4">
+				<label class="block text-xs text-gray-600 mb-1">
+					{{ __('Content') }}
+				</label>
+				<div id="content" class="border rounded-md px-10 py-3"></div>
+			</div>
+		</div>
+	</div>
+</template>
+<script setup>
+import { Breadcrumbs, FormControl, createResource } from 'frappe-ui'
+import { computed, reactive, onMounted } from 'vue'
+import EditorJS from '@editorjs/editorjs'
+import Header from '@editorjs/header'
+import Paragraph from '@editorjs/paragraph'
+import List from '@editorjs/list'
+import Embed from '@editorjs/embed'
+import YouTubeVideo from '../utils/youtube.js'
+
+const props = defineProps({
+	courseName: {
+		type: String,
+		required: true,
+	},
+	chapterNumber: {
+		type: String,
+		required: true,
+	},
+	lessonNumber: {
+		type: String,
+		required: true,
+	},
+})
+
+onMounted(
+	() =>
+		new EditorJS({
+			holder: 'content',
+			tools: {
+				header: Header,
+				youtube: YouTubeVideo,
+				paragraph: {
+					class: Paragraph,
+					inlineToolbar: true,
+					config: {
+						preserveBlank: true,
+					},
+				},
+				list: List,
+				embed: {
+					class: Embed,
+					config: {
+						services: {
+							youtube: true,
+							vimeo: true,
+							codepen: true,
+							slides: {
+								regex:
+									/https:\/\/docs\.google\.com\/presentation\/d\/e\/([A-Za-z0-9_-]+)\/pub/,
+								embedUrl:
+									'https://docs.google.com/presentation/d/e/<%= remote_id %>/embed',
+								html: "<iframe width='100%' height='300' frameborder='0' allowfullscreen='true'></iframe>",
+							},
+						},
+					},
+				},
+			},
+		})
+)
+
+const lesson = reactive({
+	title: '',
+	include_in_preview: false,
+	body: '',
+	instructor_notes: '',
+})
+
+const lessonDetails = createResource({
+	url: 'lms.lms.utils.get_lesson_creation_details',
+	params: {
+		course: props.courseName,
+		chapter: props.chapterNumber,
+		lesson: props.lessonNumber,
+	},
+	auto: true,
+})
+
+const breadcrumbs = computed(() => {
+	let crumbs = [
+		{
+			label: 'Courses',
+			route: { name: 'Courses' },
+		},
+		{
+			label: lessonDetails.data?.course_title,
+			route: { name: 'CourseDetail', params: { courseName: props.courseName } },
+		},
+	]
+
+	crumbs.push({
+		label: 'Create Lesson',
+		route: {
+			name: 'CreateLesson',
+			params: {
+				courseName: props.courseName,
+				chapterNumber: props.chapterNumber,
+				lessonNumber: props.lessonNumber,
+			},
+		},
+	})
+	return crumbs
+})
+</script>

frontend/src/pages/CreateOutline.vue

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