feat: quiz plugin in lesson

2024-03-11 09:38:27 +05:30
parent 2126b4f657
commit 83a1b03bb7
10 changed files with 266 additions and 222 deletions
--- a/frontend/src/components/Controls/Link.vue
+++ b/frontend/src/components/Controls/Link.vue
@@ -77,7 +77,6 @@ const valuePropPassed = computed(() => 'value' in attrs)
 const value = computed({
 	get: () => (valuePropPassed.value ? attrs.value : props.modelValue),
 	set: (val) => {
-		console.log(val?.value, valuePropPassed.value)
 		return (
 			val?.value &&
 			emit(valuePropPassed.value ? 'change' : 'update:modelValue', val?.value)
--- a/frontend/src/components/QuizBlock.vue
+++ b/frontend/src/components/QuizBlock.vue
@@ -0,0 +1,26 @@
+<template>
+	<Quiz v-if="user.data" :quizName="quiz"></Quiz>
+	<div v-else class="border rounded-md text-center py-20">
+		<div>
+			{{ __('Please login to access the quiz.') }}
+		</div>
+		<Button @click="redirectToLogin()" class="mt-2">
+			<span>
+				{{ __('Login') }}
+			</span>
+		</Button>
+	</div>
+</template>
+<script setup>
+import { inject } from 'vue'
+import { Button } from 'frappe-ui'
+import Quiz from '@/components/Quiz.vue'
+
+const user = inject('$user')
+const props = defineProps({
+	quiz: {
+		type: String,
+		required: true,
+	},
+})
+</script>
--- a/frontend/src/pages/CreateCourse.vue
+++ b/frontend/src/pages/CreateCourse.vue
@@ -265,7 +265,7 @@ onMounted(() => {
 	}
 })

-const course = computed(() => {
+/* const course = computed(() => {
 	return {
 		title: courseResource.doc?.title || '',
 		short_introduction: courseResource.doc?.short_introduction || '',
@@ -284,6 +284,21 @@ const course = computed(() => {
 		currency: courseResource.doc?.currency || '',
 		image: courseResource.doc?.image || null,
 	}
+}) */
+
+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 getTags = computed(() => {
@@ -291,21 +306,6 @@ const getTags = computed(() => {
 		? 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',
@@ -321,7 +321,6 @@ const courseCreationResource = createResource({
 })

 const submitCourse = () => {
-	console.log(courseResource.doc?.modified)
 	if (courseResource.doc) {
 		courseResource.setValue.submit(
 			{
--- a/frontend/src/pages/CreateLesson.vue
+++ b/frontend/src/pages/CreateLesson.vue
@@ -1,36 +1,63 @@
 <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 py-5">
-			<div class="flex items-center justify-between mb-5">
-				<div class="text-lg font-semibold">
-					{{ __('Lesson Details') }}
+		<div class="grid grid-cols-[75%,25%] 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 :items="breadcrumbs" />
+					<Button variant="solid" @click="saveLesson()">
+						{{ __('Save') }}
+					</Button>
+				</header>
+				<div class="w-5/6 mx-auto py-5">
+					<div class="flex items-center justify-between mb-5">
+						<div class="text-lg font-semibold">
+							{{ __('Lesson Details') }}
+						</div>
+					</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">
+							{{ __('Instructor Notes') }}
+						</label>
+						<div
+							id="instructor-notes"
+							class="border rounded-md px-10 py-3"
+						></div>
+					</div>
+					<div class="mt-4">
+						<label class="block text-xs text-gray-600 mb-1">
+							{{ __('Content') }}
+						</label>
+						<div id="content" class="border rounded-md py-3"></div>
+					</div>
 				</div>
-				<Button variant="solid" @click="saveLesson()">
-					{{ __('Save') }}
-				</Button>
 			</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">
-					{{ __('Instructor Notes') }}
-				</label>
-				<div id="instructor-notes" class="border rounded-md px-10 py-3"></div>
-			</div>
-			<div class="mt-4">
-				<label class="block text-xs text-gray-600 mb-1">
-					{{ __('Content') }}
-				</label>
-				<div id="content" class="border rounded-md py-3"></div>
+			<div class="border-l px-5 pt-5">
+				<div class="text-lg font-semibold">
+					{{ __('Components') }}
+				</div>
+				<div class="mt-5">
+					<div class="flex">
+						<Link
+							v-model="quiz"
+							class="flex-1"
+							doctype="LMS Quiz"
+							:label="__('Select a Quiz')"
+						/>
+						<Button @click="addQuiz()" class="self-end ml-2">
+							<template #icon>
+								<Plus class="h-4 w-4 stroke-1.5" />
+							</template>
+						</Button>
+					</div>
+				</div>
 			</div>
 		</div>
 	</div>
@@ -43,18 +70,16 @@ import {
 	Button,
 	createDocumentResource,
 } from 'frappe-ui'
-import { computed, reactive, onMounted, inject } from 'vue'
+import { computed, reactive, onMounted, inject, ref } 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'
 import { createToast } from '../utils'
+import Link from '@/components/Controls/Link.vue'
+import { Plus } from 'lucide-vue-next'
+import { getEditorTools } from '../utils'

 let editor
-let editLessonResource
 const user = inject('$user')
+const quiz = ref(null)

 const props = defineProps({
 	courseName: {
@@ -85,38 +110,6 @@ const renderEditor = (holder) => {
 	})
 }

-const getEditorTools = () => {
-	return {
-		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,
@@ -135,7 +128,13 @@ const lessonDetails = createResource({
 	auto: true,
 	onSuccess(data) {
 		if (data.lesson) {
-			createEditResource(data)
+			Object.keys(data.lesson).forEach((key) => {
+				lesson[key] = data.lesson[key]
+			})
+			lesson.include_in_preview = data.include_in_preview ? true : false
+			editor.isReady.then(() => {
+				editor.render(JSON.parse(data.lesson.content))
+			})
 		}
 	},
 })
@@ -154,24 +153,16 @@ const newLessonResource = createResource({
 	},
 })

-const createEditResource = (data) => {
-	editLessonResource = createDocumentResource({
-		doctype: 'Course Lesson',
-		name: data.lesson,
-		auto: true,
-		onSuccess(data) {
-			Object.keys(data).forEach((key) => {
-				lesson[key] = data[key]
-			})
-			lesson.include_in_preview = data.include_in_preview ? true : false
-			console.log(editor)
-			console.log(editor.isReady)
-			editor.isReady.then(() => {
-				editor.render(JSON.parse(data.content))
-			})
-		},
-	})
-}
+const editLesson = createResource({
+	url: 'frappe.client.set_value',
+	makeParams(values) {
+		return {
+			doctype: 'Course Lesson',
+			name: values.lesson,
+			fieldname: lesson,
+		}
+	},
+})

 const lessonReference = createResource({
 	url: 'frappe.client.insert',
@@ -192,11 +183,10 @@ const lessonReference = createResource({
 const saveLesson = () => {
 	editor.save().then((outputData) => {
 		lesson.content = JSON.stringify(outputData)
-		console.log(editLessonResource?.doc?.modified)
-		if (editLessonResource?.doc) {
-			editLessonResource.setValue.submit(
+		if (lessonDetails.data?.lesson) {
+			editLesson.submit(
 				{
-					...lesson,
+					lesson: lessonDetails.data.lesson.name,
 				},
 				{
 					validate() {
@@ -249,6 +239,20 @@ const validateLesson = () => {
 	}
 }

+const addQuiz = () => {
+	if (quiz.value) {
+		editor.blocks.insert(
+			'quiz',
+			{
+				quiz: quiz.value,
+			},
+			{},
+			editor.blocks.getBlocksCount()
+		)
+		quiz.value = null
+	}
+}
+
 const showToast = (title, text, icon) => {
 	createToast({
 		title: title,
@@ -275,9 +279,9 @@ const breadcrumbs = computed(() => {
 		},
 	]

-	if (editLessonResource?.doc) {
+	if (lessonDetails?.data?.lesson) {
 		crumbs.push({
-			label: editLessonResource.doc.title,
+			label: lessonDetails.data.lesson.title,
 			route: {
 				name: 'Lesson',
 				params: {
@@ -289,7 +293,7 @@ const breadcrumbs = computed(() => {
 		})
 	}
 	crumbs.push({
-		label: editLessonResource?.doc ? 'Edit Lesson' : 'Create Lesson',
+		label: lessonDetails?.data?.lesson ? 'Edit Lesson' : 'Create Lesson',
 		route: {
 			name: 'CreateLesson',
 			params: {
--- a/frontend/src/pages/Lesson.vue
+++ b/frontend/src/pages/Lesson.vue
@@ -115,11 +115,7 @@
 					v-for="content in JSON.parse(lesson.data.content).blocks"
 					class="ProseMirror prose prose-table:table-fixed prose-td:p-2 prose-th:p-2 prose-td:border prose-th:border prose-td:border-gray-300 prose-th:border-gray-300 prose-td:relative prose-th:relative prose-th:bg-gray-100 prose-sm max-w-none !whitespace-normal mt-6"
 				>
-					<div v-if="content.type == 'paragraph'">
-						<div>
-							{{ content.data.text }}
-						</div>
-					</div>
+					<div id="editor"></div>
 				</div>
 				<div
 					v-else
@@ -147,17 +143,7 @@
 							></iframe>
 						</div>
 						<div v-else-if="block.includes('{{ Quiz')">
-							<Quiz v-if="user.data" :quizName="getId(block)"></Quiz>
-							<div v-else class="border rounded-md text-center py-20">
-								<div>
-									{{ __('Please login to access the quiz.') }}
-								</div>
-								<Button @click="redirectToLogin()" class="mt-2">
-									<span>
-										{{ __('Login') }}
-									</span>
-								</Button>
-							</div>
+							<Quiz :quiz="getId(block)" />
 						</div>
 						<div v-else-if="block.includes('{{ Video')">
 							<video controls width="100%" controlsList="nodownload">
@@ -191,17 +177,7 @@
 						<div v-else v-html="markdown.render(block)"></div>
 					</div>
 					<div v-if="lesson.data.quiz_id">
-						<Quiz v-if="user.data" :quizName="getId(block)"></Quiz>
-						<div v-else class="border rounded-md text-center py-20">
-							<div>
-								{{ __('Please login to access the quiz.') }}
-							</div>
-							<Button @click="redirectToLogin()" class="mt-2">
-								<span>
-									{{ __('Login') }}
-								</span>
-							</Button>
-						</div>
+						<Quiz :quiz="lesson.data.quiz_id" />
 					</div>
 				</div>
 				<div class="mt-20">
@@ -241,17 +217,20 @@
 </template>
 <script setup>
 import { createResource, Breadcrumbs, Button } from 'frappe-ui'
-import { computed, watch, ref, inject } from 'vue'
+import { computed, watch, ref, inject, createApp } from 'vue'
 import CourseOutline from '@/components/CourseOutline.vue'
 import UserAvatar from '@/components/UserAvatar.vue'
 import { useRoute } from 'vue-router'
 import MarkdownIt from 'markdown-it'
 import { ChevronLeft, ChevronRight } from 'lucide-vue-next'
-import Quiz from '@/components/Quiz.vue'
 import Discussions from '@/components/Discussions.vue'
+import Quiz from '@/components/QuizBlock.vue'
+import { getEditorTools } from '../utils'
+import EditorJS from '@editorjs/editorjs'

 const user = inject('$user')
 const route = useRoute()
+let editor

 const markdown = new MarkdownIt({
 	html: true,
@@ -285,15 +264,28 @@ const lesson = createResource({
 	},
 	auto: true,
 	onSuccess(data) {
+		console.log(data)
 		if (data.membership)
 			current_lesson.submit({
 				name: data.membership.name,
 				lesson_name: data.name,
 			})
+		renderEditor()
 		markProgress(data)
 	},
 })

+const renderEditor = () => {
+	if (lesson.data?.content) {
+		editor = new EditorJS({
+			holder: 'editor',
+			tools: getEditorTools(),
+			data: JSON.parse(lesson.data.content),
+			readOnly: true,
+		})
+	}
+}
+
 const markProgress = (data) => {
 	setTimeout(() => {
 		if (!data.progress) progress.submit()
--- a/frontend/src/utils/index.js
+++ b/frontend/src/utils/index.js
@@ -1,6 +1,11 @@
 import { toast } from 'frappe-ui'
 import { useDateFormat, useTimeAgo } from '@vueuse/core'
 import { BookOpen, Users, TrendingUp, Briefcase } from 'lucide-vue-next'
+import { Quiz } from '@/utils/quiz'
+import Header from '@editorjs/header'
+import Paragraph from '@editorjs/paragraph'
+import List from '@editorjs/list'
+import Embed from '@editorjs/embed'

 export function createToast(options) {
 	toast({
@@ -64,6 +69,37 @@ export function getFileSize(file_size) {
 	return value
 }

+export function getEditorTools() {
+	return {
+		header: Header,
+		quiz: Quiz,
+		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>",
+					},
+				},
+			},
+		},
+	}
+}
+
 export function getTimezones() {
 	return [
 		'Pacific/Midway',
--- a/frontend/src/utils/quiz.js
+++ b/frontend/src/utils/quiz.js
@@ -0,0 +1,58 @@
+import QuizBlock from '@/components/QuizBlock.vue'
+import { createApp } from 'vue'
+import { usersStore } from '../stores/user'
+import translationPlugin from '../translation'
+
+export class Quiz {
+	static get toolbox() {
+		return {
+			title: 'Quiz',
+			icon: `<img src="/assets/lms/icons/quiz.svg" width="15" height="15">`,
+		}
+	}
+
+	constructor({ data, api, readOnly }) {
+		this.data = data
+		this.readOnly = readOnly
+	}
+
+	static get isReadOnlySupported() {
+		return true
+	}
+
+	render() {
+		this.wrapper = document.createElement('div')
+		if (this.data) {
+			let renderedQuiz = this.renderQuiz(this.data.quiz)
+			if (!this.readOnly) {
+				this.wrapper.innerHTML = renderedQuiz
+			}
+		}
+		return this.wrapper
+	}
+
+	renderQuiz(quiz) {
+		if (this.readOnly) {
+			const app = createApp(QuizBlock, {
+				quiz: quiz, // Pass quiz content as prop
+			})
+			app.use(translationPlugin)
+			const { userResource } = usersStore()
+			app.provide('$user', userResource)
+			app.mount(this.wrapper)
+			return
+		}
+		return `<div class='border rounded-md p-10 text-center'>
+            <span class="font-medium">
+                Quiz: ${quiz}
+            </span>
+        </div>`
+	}
+
+	save(blockContent) {
+		console.log(blockContent)
+		return {
+			quiz: this.data.quiz,
+		}
+	}
+}
--- a/frontend/src/utils/youtube.js
+++ b/frontend/src/utils/youtube.js
@@ -1,78 +0,0 @@
-export default class YouTubeVideo {
-	constructor({ data }) {
-		this.data = data
-	}
-
-	static get toolbox() {
-		return {
-			title: 'YouTube Video',
-			icon: `<img src="/assets/lms/icons/video.svg" width="15" height="15">`,
-		}
-	}
-
-	render() {
-		this.wrapper = document.createElement('div')
-		if (this.data && this.data.youtube) {
-			$(this.wrapper).html(this.render_youtube(this.data.youtube))
-		} else {
-			this.render_youtube_dialog()
-		}
-		return this.wrapper
-	}
-
-	render_youtube_dialog() {
-		let me = this
-		let youtubedialog = new frappe.ui.Dialog({
-			title: __('YouTube Video'),
-			fields: [
-				{
-					fieldname: 'youtube',
-					fieldtype: 'Data',
-					label: __('YouTube Video ID'),
-					reqd: 1,
-				},
-				{
-					fieldname: 'instructions_section_break',
-					fieldtype: 'Section Break',
-					label: __('Instructions:'),
-				},
-				{
-					fieldname: 'instructions',
-					fieldtype: 'HTML',
-					label: __('Instructions'),
-					options: __(
-						'Enter the YouTube Video ID. The ID is the part of the URL after <code>watch?v=</code>. For example, if the URL is <code>https://www.youtube.com/watch?v=QH2-TGUlwu4</code>, the ID is <code>QH2-TGUlwu4</code>'
-					),
-				},
-			],
-			primary_action_label: __('Insert'),
-			primary_action(values) {
-				youtubedialog.hide()
-				me.youtube = values.youtube
-				$(me.wrapper).html(me.render_youtube(values.youtube))
-			},
-		})
-		youtubedialog.show()
-	}
-
-	render_youtube(youtube) {
-		return `<iframe width="100%" height="400"
-			src="https://www.youtube.com/embed/${youtube}"
-			title="YouTube video player"
-			frameborder="0"
-			style="border-radius: var(--border-radius-lg); margin: 1rem 0;"
-			allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-			allowfullscreen>
-		</iframe>`
-	}
-
-	validate(savedData) {
-		return !savedData.youtube || !savedData.youtube.trim() ? false : true
-	}
-
-	save(block_content) {
-		return {
-			youtube: this.data.youtube || this.youtube,
-		}
-	}
-}
--- a/lms/lms/doctype/lms_batch/lms_batch.py
+++ b/lms/lms/doctype/lms_batch/lms_batch.py
@@ -70,7 +70,10 @@ class LMSBatch(Document):

 	def send_confirmation_mail(self):
 		for student in self.students:
-			if not student.confirmation_email_sent:
+			outgoing_email_account = frappe.get_cached_value(
+				"Email Account", {"default_outgoing": 1, "enable_outgoing": 1}, "name"
+			)
+			if not student.confirmation_email_sent and outgoing_email_account:
 				self.send_mail(student)
 				student.confirmation_email_sent = 1

--- a/lms/lms/utils.py
+++ b/lms/lms/utils.py
@@ -1758,12 +1758,17 @@ def get_lesson_creation_details(course, chapter, lesson):
 	)

 	if lesson_name:
-		lesson_details = frappe.db.get_value("Course Lesson", lesson_name, [""])
+		lesson_details = frappe.db.get_value(
+			"Course Lesson",
+			lesson_name,
+			["name", "title", "include_in_preview", "body", "content", "instructor_notes"],
+			as_dict=1,
+		)

 	return {
 		"course_title": frappe.db.get_value("LMS Course", course, "title"),
 		"chapter": frappe.db.get_value(
 			"Course Chapter", chapter_name, ["title", "name"], as_dict=True
 		),
-		"lesson": lesson_name if lesson_name else None,
+		"lesson": lesson_details if lesson_name else None,
 	}