feat: lesson editor youtube and quiz components

lms/www/batch/edit.js

@@ -20,10 +20,21 @@ const setup_editor = () => {
 
 const save_lesson = (e) => {
 	self.editor.save().then((outputData) => {
-		console.log(outputData);
+		parse_lesson(outputData);
 	});
 };
 
+const fetch_quiz_list = () => {
+	frappe.call({
+		method: "lms.lms.doctype.lms_quiz.lms_quiz.get_user_quizzes",
+		callback: (r) => {
+			self.quiz_list = r.message;
+		},
+	});
+};
+
+const parse_lesson = (data) => {};
+
 class YouTubeVideo {
 	static get toolbox() {
 		return {
@@ -32,18 +43,39 @@ class YouTubeVideo {
 	}
 
 	render() {
+		let self = this;
 		this.wrapper = document.createElement("div");
-		$(this.wrapper).html(`<div class="field-group">
-            <div class="">
-                <input id="youtube" type="text" class="field-input">
-            </div>
-        </div>`);
+		let youtubedialog = new frappe.ui.Dialog({
+			title: __("YouTube Video"),
+			fields: [
+				{
+					fieldname: "youtube",
+					fieldtype: "Data",
+					label: __("YouTube Video ID"),
+					reqd: 1,
+				},
+			],
+			primary_action_label: __("Insert"),
+			primary_action(values) {
+				youtubedialog.hide();
+				self.youtube = values.youtube;
+				$(self.wrapper).html(` <iframe width="100%" height="400"
+				src="https://www.youtube.com/embed/${self.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>`);
+			},
+		});
+		youtubedialog.show();
 		return this.wrapper;
 	}
 
 	save(block_content) {
 		return {
-			youtube: $("#youtube").val(),
+			youtube: this.youtube,
 		};
 	}
 }
@@ -57,28 +89,68 @@ class Quiz {
 
 	render() {
 		this.wrapper = document.createElement("div");
-		$(this.wrapper).html(
-			`<div>
-                <select id="quiz" class="field-input">
-                    <option value="">Select Quiz</option>
-                </select>
-            </div>`
-		);
-		self.quiz_list.forEach((quiz) => {
-			$(this.wrapper)
-				.find("#quiz")
-				.append(`<option value="${quiz.name}">${quiz.title}</option>`);
+		let self = this;
+		let quizdialog = new frappe.ui.Dialog({
+			title: __("Select a Quiz"),
+			fields: [
+				{
+					fieldname: "quiz",
+					fieldtype: "Link",
+					label: __("Quiz"),
+					reqd: 1,
+					options: "LMS Quiz",
+				},
+			],
+			primary_action_label: __("Insert"),
+			primary_action(values) {
+				self.quiz = values.quiz;
+				quizdialog.hide();
+				$(self.wrapper).html(
+					`<div class="common-card-style p-2 my-2 bold-heading">
+						Quiz: ${self.quiz}
+					</div>`
+				);
+			},
 		});
-
+		quizdialog.show();
+		setTimeout(() => {
+			$(".modal-body").css("min-height", "300px");
+			$(".modal-body input").focus();
+		}, 1000);
 		return this.wrapper;
 	}
+
+	save(block_content) {
+		return {
+			quiz: this.quiz,
+		};
+	}
 }
 
-const fetch_quiz_list = () => {
-	frappe.call({
-		method: "lms.lms.doctype.lms_quiz.lms_quiz.get_user_quizzes",
-		callback: (r) => {
-			self.quiz_list = r.message;
-		},
-	});
-};
+class Video {
+	static get toolbox() {
+		return {
+			title: "Video",
+		};
+	}
+
+	render() {
+		this.wrapper = document.createElement("div");
+		let self = this;
+		new frappe.ui.FileUploader({
+			disable_file_browser: true,
+			folder: "Home/Attachments",
+			make_attachments_public: true,
+			restrictions: {
+				allowed_file_types: ["video/*"],
+			},
+			on_success: (file_doc) => {
+				$(e.target)
+					.parent()
+					.siblings("img")
+					.addClass("image-preview")
+					.attr("src", file_doc.file_url);
+			},
+		});
+	}
+}