eduvia/lms
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: edit existing lesson

Browse Source
This commit is contained in:
Jannat Patel
2023-05-03 17:41:18 +05:30
parent bbdfaa32e9
commit 4336839932
7 changed files with 168 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
lms/public/css/style.css
View File

@@ -121,8 +121,7 @@ textarea.field-input {
}
.outline-lesson {
border-bottom: 1px solid var(--gray-300);
padding: 1rem 0;
padding: 0.5rem 0;
}
.common-card-style .outline-lesson:last-of-type {
@@ -160,6 +159,12 @@ textarea.field-input {
padding-top: 0.5rem;
}
.lesson-parent .breadcrumb {
border-bottom: 1px solid var(--gray-300);
margin-bottom: 2rem;
padding-bottom: 1rem;
}
body {
background-color: #FFFFFF;
}
@@ -764,15 +769,12 @@ input[type=checkbox] {
}
.course-content-parent .course-home-headings {
margin: 0 0 1rem;
margin: 0 0 0.5rem;
width: 100%;
}
.lesson-pagination {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 2rem
margin: 2rem 0;
}
.lesson-video {
@@ -937,7 +939,7 @@ input[type=checkbox] {
}
.progress-bar {
background-color: var(--accent-color);
background-color: var(--primary-color);
}
.progress-percent {

7
lms/www/batch/edit.html
View File

@@ -46,7 +46,7 @@
</div>
</div>
<div class="">
<input id="lesson-title" type="text" class="field-input" {% if lesson.name %} data-course="{{ lesson.name }}" value="{{ lesson.title }}" {% endif %}>
<input id="lesson-title" type="text" class="field-input" data-index="{{ lesson_index }}" data-chapter="{{ chapter }}" data-course="{{ lesson.name }}" {% if lesson.name %} data-lesson="{{ lesson.name }}" value="{{ lesson.title }}" {% endif %}>
</div>
</div>
@@ -60,6 +60,9 @@
</div>
</div>
<div id="lesson-content" class="lesson-editor"></div>
{% if lesson.body %}
<div id="current-lesson-content" class="hide">{{ lesson.body }}</div>
{% endif %}
</div>
@@ -86,5 +89,7 @@
{% endif %}
{{ include_script('controls.bundle.js') }}
<script src="https://cdn.jsdelivr.net/npm/@editorjs/editorjs@latest"></script>
<script src="https://cdn.jsdelivr.net/npm/@editorjs/paragraph@latest"></script>
<script src="https://cdn.jsdelivr.net/npm/@editorjs/header@latest"></script>
{% endblock %}

158
lms/www/batch/edit.js
View File

@@ -1,5 +1,9 @@
frappe.ready(() => {
let self = this;
if ($("#current-lesson-content").length) {
parse_string_to_lesson();
}
setup_editor();
fetch_quiz_list();
@@ -8,19 +12,102 @@ frappe.ready(() => {
});
});
const parse_string_to_lesson = () => {
let lesson_content = $("#current-lesson-content").html();
let lesson_blocks = [];
lesson_content.split("\n").forEach((block) => {
if (block.includes("{{ YouTubeVideo")) {
let youtube_id = block.match(/'([^']+)'/)[1];
lesson_blocks.push({
type: "youtube",
data: {
youtube: youtube_id,
},
});
} else if (block.includes("{{ Quiz")) {
let quiz = block.match(/'([^']+)'/)[1];
lesson_blocks.push({
type: "quiz",
data: {
quiz: quiz,
},
});
} else {
lesson_blocks.push({
type: "paragraph",
data: {
text: block,
},
});
}
});
this.blocks = lesson_blocks;
};
const setup_editor = () => {
self.editor = new EditorJS({
holder: "lesson-content",
tools: {
youtube: YouTubeVideo,
quiz: Quiz,
paragraph: {
class: Paragraph,
inlineToolbar: true,
config: {
preserveBlank: true,
},
},
},
data: {
blocks: self.blocks ? self.blocks : [],
},
});
};
const save_lesson = (e) => {
self.editor.save().then((outputData) => {
parse_lesson(outputData);
parse_lesson_to_string(outputData);
});
};
const parse_lesson_to_string = (data) => {
let lesson_content = "";
data.blocks.forEach((block) => {
if (block.type == "youtube") {
lesson_content += `{{ YouTubeVideo("${block.data.youtube}") }}\n`;
} else if (block.type == "quiz") {
lesson_content += `{{ Quiz("${block.data.quiz}") }}\n`;
} else if (block.type == "paragraph") {
lesson_content += `${block.data.text}\n`;
}
});
save(lesson_content);
};
const save = (lesson_content) => {
let lesson = $("#lesson-title").data("lesson");
frappe.call({
method: "lms.lms.doctype.lms_course.lms_course.save_lesson",
args: {
title: $("#lesson-title").val(),
body: lesson_content,
chapter: $("#lesson-title").data("chapter"),
preview: 0,
idx: $("#lesson-title").data("index"),
lesson: lesson ? lesson : "",
},
callback: (data) => {
frappe.show_alert({
message: __("Saved"),
indicator: "green",
});
setTimeout(() => {
window.location.href = window.location.href.split("?")[0];
}, 1000);
},
});
};
@@ -33,9 +120,11 @@ const fetch_quiz_list = () => {
});
};
const parse_lesson = (data) => {};
class YouTubeVideo {
constructor({ data }) {
this.data = data;
}
static get toolbox() {
return {
title: "YouTube Video",
@@ -43,8 +132,17 @@ class YouTubeVideo {
}
render() {
let self = this;
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 self = this;
let youtubedialog = new frappe.ui.Dialog({
title: __("YouTube Video"),
fields: [
@@ -59,23 +157,26 @@ class YouTubeVideo {
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>`);
$(self.wrapper).html(self.render_youtube(values.youtube));
},
});
youtubedialog.show();
return this.wrapper;
}
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>`;
}
save(block_content) {
return {
youtube: this.youtube,
youtube: this.data.youtube || this.youtube,
};
}
}
@@ -87,8 +188,21 @@ class Quiz {
};
}
constructor({ data }) {
this.data = data;
}
render() {
this.wrapper = document.createElement("div");
if (this.data && this.data.quiz) {
$(this.wrapper).html(this.render_quiz(this.data.quiz));
} else {
this.render_quiz_dialog();
}
return this.wrapper;
}
render_quiz_dialog() {
let self = this;
let quizdialog = new frappe.ui.Dialog({
title: __("Select a Quiz"),
@@ -105,11 +219,7 @@ class Quiz {
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>`
);
$(self.wrapper).html(self.render_quiz(self.quiz));
},
});
quizdialog.show();
@@ -117,12 +227,17 @@ class Quiz {
$(".modal-body").css("min-height", "300px");
$(".modal-body input").focus();
}, 1000);
return this.wrapper;
}
render_quiz(quiz) {
return `<div class="common-card-style p-2 my-2 bold-heading">
Quiz: ${quiz}
</div>`;
}
save(block_content) {
return {
quiz: this.quiz,
quiz: this.data.quiz || this.quiz,
};
}
}
@@ -136,7 +251,6 @@ class Video {
render() {
this.wrapper = document.createElement("div");
let self = this;
new frappe.ui.FileUploader({
disable_file_browser: true,
folder: "Home/Attachments",

4
lms/www/batch/edit.py
View File

@@ -9,6 +9,10 @@ def get_context(context):
chapter_index = frappe.form_dict.get("chapter")
lesson_index = frappe.form_dict.get("lesson")
lesson_number = f"{chapter_index}.{lesson_index}"
context.lesson_index = lesson_index
context.chapter = frappe.db.get_value(
"Chapter Reference", {"idx": chapter_index, "parent": context.course.name}, "chapter"
)
context.lesson = get_current_lesson_details(lesson_number, context, True)
context.is_moderator = has_course_moderator_role()
instructor = is_instructor(context.course.name)

20
lms/www/batch/learn.html
View File

@@ -42,7 +42,7 @@
{{ widgets.CourseOutline(course=course, membership=membership, lesson_page=True) }}
</div>
</div>
<div class="lesson-pagination-parent">
<div class="lesson-parent">
{{ BreadCrumb(course, lesson) }}
{{ LessonContent(lesson) }}
{% if course.status == "Approved" and not course.upcoming %}
@@ -85,7 +85,7 @@
{% endif %}
</div>
<div class="page-title title {% if membership %} is-member {% endif %}
<div class="course-home-headings title {% if membership %} is-member {% endif %}
{% if membership or is_instructor %} eligible-for-submission {% endif %}" id="title"
data-index="{{ lesson_index }}" data-course="{{ course.name }}" data-chapter="{{ chapter }}"
{% if lesson.name %} data-lesson="{{ lesson.name }}" {% endif %}
@@ -155,19 +155,15 @@
{% if prev_url or next_url %}
<div class="lesson-pagination">
{% if prev_url %}
<div>
<a class="btn btn-secondary btn-sm prev" href="{{ prev_url }}">
{{ _("Previous") }}
</a>
</div>
<a class="btn btn-secondary btn-sm prev" href="{{ prev_url }}">
{{ _("Previous Lesson") }}
</a>
{% endif %}
{% if next_url %}
<div>
<a class="btn btn-primary btn-sm next ml-2 " href="{{ next_url }}">
{{ _("Next") }}
</a>
</div>
<a class="btn btn-primary btn-sm next pull-right" href="{{ next_url }}">
{{ _("Next Lesson") }}
</a>
{% endif %}
</div>
{% endif %}

2
lms/www/courses/create.js
View File

@@ -75,7 +75,7 @@ const save_course = (e) => {
indicator: "green",
});
setTimeout(() => {
window.location.href = `/courses/${data.message}`;
window.location.href = `/courses/${data.message}/outline`;
}, 1000);
},
});

3
lms/www/courses/outline.html
View File

@@ -52,9 +52,12 @@
{{ chapter.title }}
</div>
</div>
{% if chapter.description %}
<div class="mb-2 ml-5 chapter-description">
{{ chapter.description }}
</div>
{% endif %}
{% for lesson in lessons %}
<div class="outline-lesson level">