From ab8b76cada528ecf1afef2865a883fd2fb0b9495 Mon Sep 17 00:00:00 2001 From: Jannat Patel Date: Tue, 2 May 2023 11:09:46 +0530 Subject: [PATCH] feat: lesson editor youtube and quiz components --- lms/public/css/style.css | 22 ++++++- lms/www/batch/edit.html | 28 ++++++++- lms/www/batch/edit.js | 126 ++++++++++++++++++++++++++++++--------- lms/www/batch/edit.py | 7 +++ 4 files changed, 154 insertions(+), 29 deletions(-) diff --git a/lms/public/css/style.css b/lms/public/css/style.css index 3a670fb6..e70bf947 100644 --- a/lms/public/css/style.css +++ b/lms/public/css/style.css @@ -140,6 +140,26 @@ textarea.field-input { margin: 0 0.5rem; } +.quiz-modal { + min-height: 500px; +} + +.ce-block__content { + max-width: 100%; + padding: 0 0.5rem; + margin: 0; +} + +.ce-toolbar__content { + position: unset; +} + +.lesson-editor { + border: 1px solid var(--gray-300); + border-radius: var(--border-radius-md); + padding-top: 0.5rem; +} + body { background-color: #FFFFFF; } @@ -732,7 +752,7 @@ input[type=checkbox] { .course-content-parent { display: grid; - grid-gap: 2rem; + grid-gap: 4rem; grid-template-columns: 1fr 3fr; } diff --git a/lms/www/batch/edit.html b/lms/www/batch/edit.html index 4e301986..a99e8d75 100644 --- a/lms/www/batch/edit.html +++ b/lms/www/batch/edit.html @@ -50,7 +50,18 @@ -
+
+
+
+ {{ _("Content") }} +
+
+ {{ _("Add your lesson content here") }} +
+
+
+
+ {% endmacro %} @@ -58,6 +69,21 @@ {%- block script %} {{ super() }} + {% if is_moderator %} + + {% endif %} {{ include_script('controls.bundle.js') }} {% endblock %} diff --git a/lms/www/batch/edit.js b/lms/www/batch/edit.js index 22fce367..c162f7bb 100644 --- a/lms/www/batch/edit.js +++ b/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(`
-
- -
-
`); + 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(` `); + }, + }); + 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( - `
- -
` - ); - self.quiz_list.forEach((quiz) => { - $(this.wrapper) - .find("#quiz") - .append(``); + 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( + `
+ Quiz: ${self.quiz} +
` + ); + }, }); - + 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); + }, + }); + } +} diff --git a/lms/www/batch/edit.py b/lms/www/batch/edit.py index 6c8d6620..1734b8e4 100644 --- a/lms/www/batch/edit.py +++ b/lms/www/batch/edit.py @@ -1,5 +1,7 @@ import frappe from lms.www.utils import get_current_lesson_details, get_common_context +from lms.lms.utils import is_instructor, has_course_moderator_role +from frappe import _ def get_context(context): @@ -8,3 +10,8 @@ def get_context(context): lesson_index = frappe.form_dict.get("lesson") lesson_number = f"{chapter_index}.{lesson_index}" context.lesson = get_current_lesson_details(lesson_number, context, True) + context.is_moderator = has_course_moderator_role() + instructor = is_instructor(context.course.name) + + if not instructor and not has_course_moderator_role(): + raise frappe.PermissionError(_("You do not have permission to access this page."))