From 69d266e01867ed738afc060a650a975a030f7318 Mon Sep 17 00:00:00 2001
From: Jannat Patel <pateljannat2308@gmail.com>
Date: Fri, 19 Jul 2024 11:55:36 +0530
Subject: [PATCH] feat: image pasting

---
 frontend/package.json                        |  2 +-
 frontend/src/components/BatchCard.vue        | 23 ++++---
 frontend/src/pages/CreateLesson.vue          |  7 ++-
 frontend/src/utils/image.js                  | 64 ++++++++++++++++++++
 frontend/src/utils/index.js                  | 10 +--
 frontend/yarn.lock                           | 12 ++++
 lms/lms/doctype/lms_batch/lms_batch.json     |  5 +-
 lms/lms/doctype/lms_batch/lms_batch.py       |  1 +
 lms/templates/emails/batch_confirmation.html |  3 +-
 9 files changed, 106 insertions(+), 21 deletions(-)
 create mode 100644 frontend/src/utils/image.js

diff --git a/frontend/package.json b/frontend/package.json
index 82258fe4..7935452a 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -14,10 +14,10 @@
     "@editorjs/editorjs": "^2.29.0",
     "@editorjs/embed": "^2.7.0",
     "@editorjs/header": "^2.8.1",
-    "@editorjs/image": "^2.9.2",
     "@editorjs/inline-code": "^1.5.0",
     "@editorjs/nested-list": "^1.4.2",
     "@editorjs/paragraph": "^2.11.3",
+    "@editorjs/simple-image": "^1.6.0",
     "chart.js": "^4.4.1",
     "dayjs": "^1.11.6",
     "feather-icons": "^4.28.0",
diff --git a/frontend/src/components/BatchCard.vue b/frontend/src/components/BatchCard.vue
index 84697c51..734950c7 100644
--- a/frontend/src/components/BatchCard.vue
+++ b/frontend/src/components/BatchCard.vue
@@ -3,6 +3,9 @@
 		class="flex flex-col shadow hover:bg-gray-100 rounded-md p-4 h-full"
 		style="min-height: 150px"
 	>
+		<div class="text-xl font-semibold mb-2">
+			{{ batch.title }}
+		</div>
 		<Badge
 			v-if="batch.seat_count && batch.seats_left > 0"
 			theme="green"
@@ -19,9 +22,6 @@
 		>
 			{{ __('Sold Out') }}
 		</Badge>
-		<div class="text-xl font-semibold mb-1">
-			{{ batch.title }}
-		</div>
 		<div class="short-introduction">
 			{{ batch.description }}
 		</div>
@@ -29,23 +29,26 @@
 			<div v-if="batch.amount" class="font-semibold text-lg">
 				{{ batch.price }}
 			</div>
-			<div class="flex items-center">
-				<BookOpen class="h-4 w-4 stroke-1.5 mr-2 text-gray-700" />
+			<!-- <div class="flex items-center text-sm text-gray-700">
+				<BookOpen class="h-3 w-3 stroke-1.5 mr-2 text-gray-700" />
 				<span> {{ batch.courses.length }} {{ __('Courses') }} </span>
-			</div>
+			</div> -->
 			<DateRange
 				:startDate="batch.start_date"
 				:endDate="batch.end_date"
-				class="mb-3"
+				class="text-sm text-gray-700 mb-3"
 			/>
-			<div class="flex items-center">
+			<div class="flex items-center text-sm text-gray-700">
 				<Clock class="h-4 w-4 stroke-1.5 mr-2 text-gray-700" />
 				<span>
 					{{ formatTime(batch.start_time) }} - {{ formatTime(batch.end_time) }}
 				</span>
 			</div>
-			<div v-if="batch.timezone" class="flex items-center">
-				<Globe class="h-4 w-4 stroke-1.5 mr-2 text-gray-700" />
+			<div
+				v-if="batch.timezone"
+				class="flex items-center text-sm text-gray-700"
+			>
+				<Globe class="h-4 w-4 stroke-1.5 mr-2 text-gray-600" />
 				<span>
 					{{ batch.timezone }}
 				</span>
diff --git a/frontend/src/pages/CreateLesson.vue b/frontend/src/pages/CreateLesson.vue
index 7e7a47e3..cdd9703a 100644
--- a/frontend/src/pages/CreateLesson.vue
+++ b/frontend/src/pages/CreateLesson.vue
@@ -43,7 +43,7 @@
 							<div
 								v-show="openInstructorEditor"
 								id="instructor-notes"
-								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 py-3"
+								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 py-3"
 							></div>
 						</div>
 					</div>
@@ -54,7 +54,7 @@
 							</label>
 							<div
 								id="content"
-								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 py-3"
+								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 py-3"
 							></div>
 						</div>
 					</div>
@@ -439,7 +439,8 @@ const pageMeta = computed(() => {
 updateDocumentTitle(pageMeta)
 </script>
 <style>
-.embed-tool__caption {
+.embed-tool__caption,
+.cdx-simple-image__caption {
 	display: none;
 }
 
diff --git a/frontend/src/utils/image.js b/frontend/src/utils/image.js
new file mode 100644
index 00000000..fa2f2c66
--- /dev/null
+++ b/frontend/src/utils/image.js
@@ -0,0 +1,64 @@
+class ImageTool {
+	constructor({ data, api }) {
+		this.api = api
+		this.data = data
+		this.wrapper = undefined
+	}
+
+	static get toolbox() {
+		return {
+			title: 'Image',
+			icon: '<svg width="18" height="18" viewBox="0 0 24 24"><path d="M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zm-2 0H5V5h14v14zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z"/></svg>',
+		}
+	}
+
+	render() {
+		this.wrapper = document.createElement('div')
+		this.wrapper.classList.add('image-tool')
+
+		if (this.data && this.data.url) {
+			this._createImage(this.data.url)
+		}
+
+		this.wrapper.addEventListener('paste', (event) => {
+			this._handlePaste(event)
+		})
+
+		return this.wrapper
+	}
+
+	_createImage(url) {
+		const image = document.createElement('img')
+		image.src = url
+		image.classList.add('image-tool__image')
+		this.wrapper.innerHTML = ''
+		this.wrapper.appendChild(image)
+
+		const resizeObserver = new ResizeObserver(() => {
+			image.style.width = `${this.wrapper.clientWidth}px`
+		})
+		resizeObserver.observe(this.wrapper)
+	}
+
+	_handlePaste(event) {
+		const clipboardData = event.clipboardData || window.clipboardData
+		const items = clipboardData.items
+		for (let i = 0; i < items.length; i++) {
+			if (items[i].type.indexOf('image') !== -1) {
+				const file = items[i].getAsFile()
+				const reader = new FileReader()
+				reader.onload = (e) => {
+					this._createImage(e.target.result)
+				}
+				reader.readAsDataURL(file)
+			}
+		}
+	}
+
+	save(blockContent) {
+		const img = blockContent.querySelector('img')
+		return {
+			url: img.src,
+		}
+	}
+}
diff --git a/frontend/src/utils/index.js b/frontend/src/utils/index.js
index 54c07d32..c981296e 100644
--- a/frontend/src/utils/index.js
+++ b/frontend/src/utils/index.js
@@ -4,13 +4,13 @@ import { Quiz } from '@/utils/quiz'
 import { Upload } from '@/utils/upload'
 import Header from '@editorjs/header'
 import Paragraph from '@editorjs/paragraph'
-import Image from '@editorjs/image'
 import { CodeBox } from '@/utils/code'
 import NestedList from '@editorjs/nested-list'
 import InlineCode from '@editorjs/inline-code'
 import { watch } from 'vue'
 import dayjs from '@/utils/dayjs'
 import Embed from '@editorjs/embed'
+import SimpleImage from '@editorjs/simple-image'
 
 export function createToast(options) {
 	toast({
@@ -137,7 +137,7 @@ export function getEditorTools() {
 		header: Header,
 		quiz: Quiz,
 		upload: Upload,
-		image: Image,
+		image: SimpleImage,
 		paragraph: {
 			class: Paragraph,
 			inlineToolbar: true,
@@ -173,7 +173,7 @@ export function getEditorTools() {
 						regex: /(?:https?:\/\/)?(?:www\.)?(?:(?:youtu\.be\/)|(?:youtube\.com)\/(?:v\/|u\/\w\/|embed\/|watch))(?:(?:\?v=)?([^#&?=]*))?((?:[?&]\w*=\w*)*)/,
 						embedUrl:
 							'https://www.youtube.com/embed/<%= remote_id %>',
-						html: '<iframe style="width:100%;" height="320" frameborder="0" allowfullscreen></iframe>',
+						html: '<iframe style="width:100%; height: 30rem;" frameborder="0" allowfullscreen></iframe>',
 						height: 320,
 						width: 580,
 						id: ([id, params]) => {
@@ -181,7 +181,7 @@ export function getEditorTools() {
 								return id
 							}
 
-							const paramsMap: Record<string, string> = {
+							const paramsMap = {
 								start: 'start',
 								end: 'end',
 								t: 'start',
@@ -227,7 +227,7 @@ export function getEditorTools() {
 						regex: /(?:http[s]?:\/\/)?(?:www.)?aparat\.com\/v\/([^\/\?\&]+)\/?/,
 						embedUrl:
 							'https://www.aparat.com/video/video/embed/videohash/<%= remote_id %>/vt/frame',
-						html: '<iframe width="600" height="300" style="margin: 0 auto;" frameborder="0" scrolling="no" allowtransparency="true"></iframe>',
+						html: '<iframe style="margin: 0 auto; width: 100%; height: 25rem;" frameborder="0" scrolling="no" allowtransparency="true"></iframe>',
 						height: 300,
 						width: 600,
 					},
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
index 254beaea..30adce7c 100644
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@@ -27,6 +27,11 @@
   resolved "https://registry.yarnpkg.com/@codexteam/icons/-/icons-0.0.5.tgz#d17f39b6a0497c6439f57dd42711817a3dd3679c"
   integrity sha512-s6H2KXhLz2rgbMZSkRm8dsMJvyUNZsEjxobBEg9ztdrb1B2H3pEzY6iTwI4XUPJWJ3c3qRKwV4TrO3J5jUdoQA==
 
+"@codexteam/icons@^0.0.6":
+  version "0.0.6"
+  resolved "https://registry.yarnpkg.com/@codexteam/icons/-/icons-0.0.6.tgz#5553ada48dddf5940851ccc142cfe17835c36ad3"
+  integrity sha512-L7Q5PET8PjKcBT5wp7VR+FCjwCi5PUp7rd/XjsgQ0CI5FJz0DphyHGRILMuDUdCW2MQT9NHbVr4QP31vwAkS/A==
+
 "@codexteam/icons@^0.3.0":
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/@codexteam/icons/-/icons-0.3.0.tgz#62380b4053d487a257de443864b5c72dafab95e6"
@@ -91,6 +96,13 @@
   dependencies:
     "@codexteam/icons" "^0.0.4"
 
+"@editorjs/simple-image@^1.6.0":
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/@editorjs/simple-image/-/simple-image-1.6.0.tgz#711c3900e17845331d6667cf0fe91793a5557f84"
+  integrity sha512-WvdGfQPlozwZd3PXQrJnRXk6gEYbv1U2vRupYJ6lTd3/UsLInXYUX5jSFcnGB5ZMH3bd0JDZfcb4d4Sv1/1big==
+  dependencies:
+    "@codexteam/icons" "^0.0.6"
+
 "@esbuild/aix-ppc64@0.20.2":
   version "0.20.2"
   resolved "https://registry.yarnpkg.com/@esbuild/aix-ppc64/-/aix-ppc64-0.20.2.tgz#a70f4ac11c6a1dfc18b8bbb13284155d933b9537"
diff --git a/lms/lms/doctype/lms_batch/lms_batch.json b/lms/lms/doctype/lms_batch/lms_batch.json
index bf36dc8c..482b7783 100644
--- a/lms/lms/doctype/lms_batch/lms_batch.json
+++ b/lms/lms/doctype/lms_batch/lms_batch.json
@@ -103,6 +103,7 @@
    "fieldname": "start_date",
    "fieldtype": "Date",
    "in_list_view": 1,
+   "in_standard_filter": 1,
    "label": "Start Date",
    "reqd": 1
   },
@@ -127,6 +128,7 @@
   {
    "fieldname": "start_time",
    "fieldtype": "Time",
+   "in_list_view": 1,
    "label": "Start Time",
    "reqd": 1
   },
@@ -165,6 +167,7 @@
   {
    "fieldname": "category",
    "fieldtype": "Link",
+   "in_standard_filter": 1,
    "label": "Category",
    "options": "LMS Category"
   },
@@ -325,7 +328,7 @@
  ],
  "index_web_pages_for_search": 1,
  "links": [],
- "modified": "2024-06-24 16:24:45.536453",
+ "modified": "2024-07-18 18:06:37.229885",
  "modified_by": "Administrator",
  "module": "LMS",
  "name": "LMS Batch",
diff --git a/lms/lms/doctype/lms_batch/lms_batch.py b/lms/lms/doctype/lms_batch/lms_batch.py
index 5883c4d1..2150fb4f 100644
--- a/lms/lms/doctype/lms_batch/lms_batch.py
+++ b/lms/lms/doctype/lms_batch/lms_batch.py
@@ -96,6 +96,7 @@ class LMSBatch(Document):
 		)
 
 		args = {
+			"title": self.title,
 			"student_name": student.student_name,
 			"start_time": self.start_time,
 			"start_date": self.start_date,
diff --git a/lms/templates/emails/batch_confirmation.html b/lms/templates/emails/batch_confirmation.html
index ce8850a2..b74d5a3d 100644
--- a/lms/templates/emails/batch_confirmation.html
+++ b/lms/templates/emails/batch_confirmation.html
@@ -8,10 +8,11 @@
 <br>
 <p>
     <b>
-        {{ _("Important Details:") }}
+        {{ title }}
     </b>
 </p>
 
+
 <p>
     <b>{{ _("Batch Start Date:") }}</b> {{ frappe.utils.format_date(start_date, "medium") }}
 </p>