Merge pull request #327 from pateljannat/image-in-lesson-webform

feat: image markdown extension

lms/lms/doctype/course_lesson/course_lesson.json

@@ -10,9 +10,9 @@
  "field_order": [
   "chapter",
   "course",
-  "include_in_preview",
   "column_break_4",
   "title",
+  "include_in_preview",
   "index_label",
   "section_break_6",
   "body",
@@ -75,7 +75,6 @@
    "fetch_from": "chapter.course",
    "fieldname": "course",
    "fieldtype": "Link",
-   "hidden": 1,
    "label": "Course",
    "options": "LMS Course",
    "read_only": 1
@@ -83,7 +82,7 @@
  ],
  "index_web_pages_for_search": 1,
  "links": [],
- "modified": "2022-03-14 18:56:31.969801",
+ "modified": "2022-04-22 12:59:23.641915",
  "modified_by": "Administrator",
  "module": "LMS",
  "name": "Course Lesson",

lms/lms/web_form/lesson/lesson.js

@@ -1,16 +1,94 @@
 frappe.ready(function() {
-	frappe.web_form.after_save = () => {
+
-      frappe.call({
+    frappe.web_form.after_load = () => {
+        add_file_upload_component();
+        fetch_course();
+    };
+
+    frappe.web_form.after_save = () => {
+        show_success_message();
+    };
+
+    $(document).on("click", ".add-attachment", (e) => {
+        show_upload_modal();
+    });
+
+    $(document).on("click", ".copy-link", (e) => {
+        frappe.utils.copy_to_clipboard($(e.currentTarget).data("link"));
+        $(".attachments").collapse("hide");
+    });
+
+});
+
+const fetch_course = () => {
+    frappe.call({
         method: "lms.lms.doctype.course_lesson.course_lesson.get_lesson_info",
         args: {
-          "chapter": frappe.web_form.doc.chapter
+            "chapter": frappe.web_form.doc.chapter
         },
         callback: (data) => {
-            frappe.msgprint(__(`Lesson has been saved successfully. Go back to the chapter and add this lesson to the lessons table.`));
+            this.course = data.message;
-            setTimeout(() => {
-                window.location.href = `/courses/${data.message}`;
-            }, 3000);
         }
     });
-  };
+}
-});
+
+const show_upload_modal = () => {
+    new frappe.ui.FileUploader({
+        folder: "Home/Attachments",
+        restrictions: {
+            allowed_file_types: ['image/*']
+        },
+        on_success: (file_doc) => {
+            $(".attachments").append(build_attachment_table(file_doc));
+            let count = $(".attachment-count").data("count") + 1;
+            $(".attachment-count").data("count", count);
+            $(".attachment-count").html(__(`${count} attachments`));
+            $(".attachments").removeClass("hide");
+        },
+    });
+};
+
+const show_success_message = () => {
+    frappe.msgprint(__(`Lesson has been saved successfully. Go back to the chapter and add this lesson to the lessons table.`));
+    setTimeout(() => {
+        window.location.href = `/courses/${this.course}`;
+    }, 2000);
+};
+
+const add_file_upload_component = () => {
+    $(get_attachment_controls_html()).insertBefore($(`[data-fieldname="include_in_preview"]`).first());
+};
+
+const get_attachment_controls_html = () => {
+    return `
+        <div class="attachments-parent">
+            <div class="attachment-controls">
+                <div class="show-attachments" data-toggle="collapse" data-target="#collapse-attachments" aria-expanded="false">
+                    <svg class="icon icon-sm">
+                        <use class="" href="#icon-attachment">
+                    </svg>
+                    <span class="attachment-count" data-count="0">0 {{ _("attachments") }}</span>
+                </div>
+                <div class="add-attachment">
+                    <span class="button is-secondary">
+                        <svg class="icon icon-sm">
+                            <use class="" href="#icon-upload">
+                        </svg>
+                        {{ _("Upload Attachments") }}
+                    </span>
+                </div>
+            </div>
+            <table class="attachments common-card-style collapse hide" id="collapse-attachments"></table>
+        </div>
+    `;
+};
+
+const build_attachment_table = (file_doc) => {
+    return $(`
+        <tr class="attachment-row">
+            <td>${file_doc.file_name}</td>
+            <td class=""><a class="button is-secondary button-links copy-link" data-link="![](${file_doc.file_url})"
+            data-name="${file_doc.file_name}" > {{ _("Copy Link") }} </a></td>
+        </tr>
+    `);
+};

lms/lms/web_form/lesson/lesson.json

@@ -11,17 +11,17 @@
  "apply_document_permissions": 1,
  "button_label": "Save",
  "creation": "2022-03-07 18:41:42.549831",
- "custom_css": "",
+ "custom_css": "#introduction {\n    font-size: var(--text-base);\n}",
  "doc_type": "Course Lesson",
  "docstatus": 0,
  "doctype": "Web Form",
  "idx": 0,
- "introduction_text": "<div class=\"ql-editor read-mode\"><p><br></p><p><br></p><p>Create lessons for your course. You can add some additional content to the lesson using a special syntax. The table below mentions all types of dynamic content that you can add to the lessons and the syntax for the same.</p><p><br></p><table class=\"table table-bordered\"><tbody><tr><td data-row=\"row-wxk1\"><strong>Content Type</strong></td><td data-row=\"row-wxk1\"><strong>Syntax</strong></td></tr><tr><td data-row=\"row-lawj\">Video</td><td data-row=\"row-lawj\">{{ Video(\"url_of_source\") }}</td></tr><tr><td data-row=\"insert-table\">YouTube Video</td><td data-row=\"insert-table\">{{ YouTubeVideo(\"unique_embed_id\") }}</td></tr><tr><td data-row=\"insert-row-below\">Exercise</td><td data-row=\"insert-row-below\">{{ Exercise(\"exercise_name\") }}</td></tr><tr><td data-row=\"row-3b6n\">Quiz</td><td data-row=\"row-3b6n\">{{ Quiz(\"lms_quiz_name\") }}</td></tr><tr><td data-row=\"row-r57s\">Assignment</td><td data-row=\"row-r57s\">{{ Assignment(\"id-filetype\") }}</td></tr></tbody></table></div>",
+ "introduction_text": "<div class=\"ql-editor read-mode\">\n    <p>Create lessons for your course. For adding content, use markdown syntax. You can add some additional content to the lesson using a special syntax. The table below mentions all types of dynamic content that you can add to the lessons and the syntax for the same.</p>\n    <table class=\"table table-bordered\">\n        <tbody>\n            <tr>\n                <td data-row=\"row-wxk1\">\n                    <strong>Content Type</strong>\n                </td>\n                <td data-row=\"row-wxk1\">\n                    <strong> Syntax </strong>\n                </td>\n            </tr>\n            <tr>\n                <td data-row=\"row-r57s\"> Assignment </td>\n                <td data-row=\"row-r57s\">{{ Assignment(\"id-filetype\") }}</td>\n            </tr>\n            <tr>\n                <td data-row=\"row-3b6n\"> Quiz </td>\n                <td data-row=\"row-3b6n\">{{ Quiz(\"lms_quiz_name\") }}</td>\n            </tr>\n            <tr>\n                <td data-row=\"insert-table\"> YouTube Video </td>\n                <td data-row=\"insert-table\">{{ YouTubeVideo(\"unique_embed_id\") }}</td>\n            </tr>\n        </tbody>\n    </table>\n    <p> <b> Note: </b> You can also attach videos from Vimeo by including the iframe embed of the video to the lesson. </p>\n</div>",
  "is_multi_step_form": 0,
  "is_standard": 1,
  "login_required": 1,
  "max_attachment_size": 0,
- "modified": "2022-03-14 18:49:33.526455",
+ "modified": "2022-04-25 10:26:12.691050",
  "modified_by": "Administrator",
  "module": "LMS",
  "name": "lesson",
@@ -34,7 +34,7 @@
  "show_in_grid": 0,
  "show_sidebar": 0,
  "sidebar_items": [],
- "success_url": "/lesson",
+ "success_url": "",
  "title": "Lesson",
  "web_form_fields": [
   {
@@ -80,7 +80,7 @@
    "fieldname": "body",
    "fieldtype": "Text",
    "hidden": 0,
-   "label": "Body",
+   "label": "Content",
    "max_length": 0,
    "max_value": 0,
    "read_only": 0,

lms/public/css/style.css

@@ -1414,3 +1414,32 @@ pre {
 .btn-outline-primary {
     border: 1px solid var(--primary-color);
 }
+
+.show-attachments {
+    padding-right: 0.5rem;
+    display: flex;
+    align-items: center;
+}
+
+.attachment-controls {
+    display: flex;
+    align-items: center;
+    width: fit-content;
+    cursor: pointer;
+}
+
+.attachments {
+    flex-direction: column;
+    padding: 0.5rem 0;
+    margin-top: 1rem;
+    position: absolute;
+    z-index: 1;
+    width: fit-content;
+    border-collapse: separate;
+    border-spacing: 1rem 0.5rem;
+}
+
+.attachments-parent {
+    float: right;
+    font-size: var(--text-sm);
+}

lms/public/icons/symbol-defs.svg

@@ -28,4 +28,17 @@
         <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path>
         <circle cx="12" cy="10" r="3"></circle>
     </svg>
+    <svg width="16" height="16" viewBox="0 0 16 16" id="icon-upload" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M8 14.5C11.5899 14.5 14.5 11.5899 14.5 8C14.5 4.41015 11.5899 1.5 8 1.5C4.41015 1.5 1.5 4.41015 1.5 8C1.5 11.5899
+            4.41015 14.5 8 14.5Z" stroke="#505A62" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+        <path d="M8 4.75V11.1351" stroke="#505A62" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+        <path d="M5.29102 7.45833L7.99935 4.75L10.7077 7.45833" stroke="#505A62" stroke-miterlimit="10" stroke-linecap="round"
+        stroke-linejoin="round"/>
+	</svg>
+    <svg width="14" height="14" id="icon-attachment" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M12.6004 6.68841L7.6414 11.5616C6.23259 12.946 3.8658 12.946 2.45699 11.5616C1.04819 10.1772
+        1.04819 7.85132 2.45699 6.4669L6.85247 2.14749C7.86681 1.15071 9.44467 1.15071 10.459 2.14749C11.4733
+        3.14428 11.4733 4.69483 10.459 5.69162L6.40165 9.62339C5.83813 10.1772 4.93649 10.1772 4.42932 9.62339C3.8658
+        9.06962 3.8658 8.18359 4.42932 7.68519L7.81045 4.36257" stroke="#2D95F0" stroke-miterlimit="10" stroke-linecap="round"/>
+    </svg>
 </svg>