feat: batch creation

2024-03-15 21:54:02 +05:30
parent 83a1b03bb7
commit 63bcbb6506
33 changed files with 1536 additions and 887 deletions
--- a/frontend/src/components/LessonPlugins.vue
+++ b/frontend/src/components/LessonPlugins.vue
@@ -0,0 +1,137 @@
+<template>
+	<div class="text-lg font-semibold">
+		{{ __('Components') }}
+	</div>
+	<div class="mt-5">
+		<div class="">
+			<div class="text-xs text-gray-600 mb-1">
+				{{ __('Select an Editor') }}
+			</div>
+			<Select v-model="currentEditor" :options="getEditorOptions()" />
+		</div>
+		<div class="flex mt-4">
+			<Link
+				v-model="quiz"
+				class="flex-1"
+				doctype="LMS Quiz"
+				:label="__('Select a Quiz')"
+			/>
+			<Button @click="addQuiz()" class="self-end ml-2">
+				<template #icon>
+					<Plus class="h-4 w-4 stroke-1.5" />
+				</template>
+			</Button>
+		</div>
+		<div class="mt-4">
+			<div class="text-xs text-gray-600 mb-1">
+				{{ __('Add an image, video, pdf or audio.') }}
+			</div>
+			<div class="flex">
+				<FileUploader
+					v-if="!file"
+					:fileTypes="['image/*', 'video/*', 'audio/*', '.pdf']"
+					:validateFile="validateFile"
+					@success="(data) => addFile(data)"
+				>
+					<template v-slot="{ file, progress, uploading, openFileSelector }">
+						<div class="">
+							<Button @click="openFileSelector" :loading="uploading">
+								{{
+									uploading
+										? __('Uploading {0}%').format(progress)
+										: __('Upload an File')
+								}}
+							</Button>
+						</div>
+					</template>
+				</FileUploader>
+				<div v-else class="">
+					<div class="flex items-center">
+						<div class="border rounded-md p-2 mr-2">
+							<FileText class="h-4 w-4 stroke-1.5 text-gray-700" />
+						</div>
+						<div class="flex flex-col">
+							<span class="text-xs">
+								{{ file.file_name }}
+							</span>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+<script setup>
+import Link from '@/components/Controls/Link.vue'
+import { FileUploader, Button, Select } from 'frappe-ui'
+import { Plus, FileText } from 'lucide-vue-next'
+import { ref, watch } from 'vue'
+
+const quiz = ref(null)
+const file = ref(null)
+const lessonEditor = ref(null)
+const instructorEditor = ref(null)
+const currentEditor = ref('Lesson Content')
+
+const props = defineProps({
+	editor: {
+		required: true,
+	},
+	notesEditor: {
+		required: true,
+	},
+})
+
+const addQuiz = () => {
+	getCurrentEditor().caret.setToLastBlock('end', 0)
+	if (quiz.value) {
+		getCurrentEditor().blocks.insert('quiz', {
+			quiz: quiz.value,
+		})
+		quiz.value = null
+	}
+}
+
+const addFile = (data) => {
+	getCurrentEditor().caret.setToLastBlock('end', 0)
+	getCurrentEditor().blocks.insert('upload', data)
+}
+
+const getBlocksCount = () => {
+	return getCurrentEditor().blocks.getBlocksCount
+}
+
+const validateFile = (file) => {
+	let extension = file.name.split('.').pop().toLowerCase()
+	if (!['jpg', 'jpeg', 'png', 'mp4', 'mov', 'mp3'].includes(extension)) {
+		return 'Only image and video files are allowed.'
+	}
+}
+
+const getEditorOptions = () => {
+	return [
+		{
+			label: 'Lesson Content',
+			value: 'Lesson Content',
+		},
+		{
+			label: 'Instructor Content',
+			value: 'Instructor Content',
+		},
+	]
+}
+
+const getCurrentEditor = () => {
+	return currentEditor.value == 'Lesson Content'
+		? lessonEditor.value
+		: instructorEditor.value
+}
+
+watch(
+	() => [props.editor, props.notesEditor],
+	([newEditor, newNotesEditor], [oldEditor, oldNotesEditor]) => {
+		lessonEditor.value = newEditor
+		instructorEditor.value = newNotesEditor
+	}
+)
+</script>