feat: batch creation

frontend/src/components/BatchCourses.vue

@@ -0,0 +1,141 @@
+<template>
+	<div>
+		<div class="flex items-center justify-between mb-4">
+			<div class="text-xl font-semibold">
+				{{ __('Courses') }}
+			</div>
+			<Button
+				v-if="user.data?.is_moderator"
+				variant="solid"
+				@click="openCourseModal()"
+			>
+				<template #prefix>
+					<Plus class="h-4 w-4" />
+				</template>
+				{{ __('Add Course') }}
+			</Button>
+		</div>
+		<div v-if="courses.data?.length">
+			<ListView
+				:columns="getCoursesColumns()"
+				:rows="courses.data"
+				row-key="name"
+				:options="{ showTooltip: false }"
+			>
+				<ListHeader
+					class="mb-2 grid items-center space-x-4 rounded bg-gray-100 p-2"
+				>
+					<ListHeaderItem :item="item" v-for="item in getCoursesColumns()">
+						<template #prefix="{ item }">
+							<component
+								v-if="item.icon"
+								:is="item.icon"
+								class="h-4 w-4 stroke-1.5 ml-4"
+							/>
+						</template>
+					</ListHeaderItem>
+				</ListHeader>
+				<ListRows>
+					<ListRow :row="row" v-for="row in courses.data">
+						<template #default="{ column, item }">
+							<ListRowItem :item="row[column.key]" :align="column.align">
+								<div>
+									{{ row[column.key] }}
+								</div>
+							</ListRowItem>
+						</template>
+					</ListRow>
+				</ListRows>
+				<ListSelectBanner>
+					<template #actions="{ unselectAll, selections }">
+						<div class="flex gap-2">
+							<Button variant="ghost" @click="removeCourses(selections)">
+								<Trash2 class="h-4 w-4 stroke-1.5" />
+							</Button>
+						</div>
+					</template>
+				</ListSelectBanner>
+			</ListView>
+		</div>
+		<BatchCourseModal
+			v-model="showCourseModal"
+			:batch="batch"
+			v-model:courses="courses"
+		/>
+	</div>
+</template>
+<script setup>
+import { ref, inject } from 'vue'
+import BatchCourseModal from '@/components/Modals/BatchCourseModal.vue'
+import {
+	createResource,
+	Button,
+	ListHeader,
+	ListHeaderItem,
+	ListSelectBanner,
+	ListRow,
+	ListRows,
+	ListView,
+	ListRowItem,
+} from 'frappe-ui'
+import { Plus, Trash2 } from 'lucide-vue-next'
+
+const showCourseModal = ref(false)
+const user = inject('$user')
+
+const props = defineProps({
+	batch: {
+		type: String,
+		required: true,
+	},
+})
+
+const courses = createResource({
+	url: 'lms.lms.utils.get_batch_courses',
+	params: {
+		batch: props.batch,
+	},
+	cache: ['batchCourses', props.batchName],
+	auto: true,
+})
+
+const openCourseModal = () => {
+	showCourseModal.value = true
+}
+
+const getCoursesColumns = () => {
+	return [
+		{
+			label: 'Title',
+			key: 'title',
+		},
+		{
+			label: 'Lessons',
+			key: 'lesson_count',
+		},
+		{
+			label: 'Enrollments',
+			key: 'enrollment_count',
+		},
+	]
+}
+
+const removeCourse = createResource({
+	url: 'frappe.client.delete',
+	makeParams(values) {
+		return {
+			doctype: 'Batch Course',
+			name: values.course,
+		}
+	},
+})
+
+const removeCourses = (selections) => {
+	console.log(selections)
+	selections.forEach(async (course) => {
+		removeCourse.submit({ course })
+		await setTimeout(1000)
+	})
+	courses.reload()
+}
+</script>

frontend/src/components/BatchOverlay.vue

@@ -73,11 +73,21 @@
 		>
 			{{ __('Enroll Now') }}
 		</Button>
-		<Button v-if="user?.data?.is_moderator" class="w-full mt-2">
-			<span>
-				{{ __('Edit') }}
-			</span>
-		</Button>
+		<router-link
+			v-if="user?.data?.is_moderator"
+			:to="{
+				name: 'BatchCreation',
+				params: {
+					batchName: batch.data.name,
+				},
+			}"
+		>
+			<Button class="w-full mt-2">
+				<span>
+					{{ __('Edit') }}
+				</span>
+			</Button>
+		</router-link>
 	</div>
 </template>
 <script setup>

frontend/src/components/BatchStudents.vue

@@ -55,16 +55,14 @@
 						<Button variant="ghost" @click="removeStudents(selections)">
 							<Trash2 class="h-4 w-4 stroke-1.5" />
 						</Button>
-						<Button
-							variant="ghost"
-							label="Unselect all"
-							@click="unselectAll.toString()"
-						/>
 					</div>
 				</template>
 			</ListSelectBanner>
 		</ListView>
 	</div>
+	<div v-else class="text-sm italic text-gray-600">
+		{{ __('There are no students in this batch.') }}
+	</div>
 	<StudentModal
 		:batch="props.batch"
 		v-model="showStudentModal"

frontend/src/components/CourseCardOverlay.vue

@@ -103,8 +103,8 @@ import { computed, inject } from 'vue'
 import { Button, createResource } from 'frappe-ui'
 import { createToast } from '@/utils/'
 import { useRouter } from 'vue-router'
-const router = useRouter()
 
+const router = useRouter()
 const user = inject('$user')
 
 const props = defineProps({

frontend/src/components/CourseOutline.vue

@@ -4,10 +4,10 @@
 			v-if="title && (outline.data?.length || allowEdit)"
 			class="flex items-center justify-between mb-4"
 		>
-			<div class="text-lg font-semibold">
+			<div class="font-semibold" :class="allowEdit ? 'text-base' : 'text-lg'">
 				{{ __(title) }}
 			</div>
-			<Button v-if="allowEdit" @click="openChapterModal()">
+			<Button size="sm" v-if="allowEdit" @click="openChapterModal()">
 				{{ __('Add Chapter') }}
 			</Button>
 			<!-- <span class="font-medium cursor-pointer" @click="expandAllChapters()">

frontend/src/components/LessonContent.vue

@@ -0,0 +1,99 @@
+<template>
+	<div v-if="youtube">
+		<iframe
+			class="youtube-video"
+			:src="getYouTubeVideoSource(youtube)"
+			width="100%"
+			height="400"
+			frameborder="0"
+			allowfullscreen
+		></iframe>
+	</div>
+	<div v-for="block in content.split('\n\n')">
+		<div v-if="block.includes('{{ YouTubeVideo')">
+			<iframe
+				class="youtube-video"
+				:src="getYouTubeVideoSource(block)"
+				width="100%"
+				height="400"
+				frameborder="0"
+				allowfullscreen
+			></iframe>
+		</div>
+		<div v-else-if="block.includes('{{ Quiz')">
+			<Quiz :quiz="getId(block)" />
+		</div>
+		<div v-else-if="block.includes('{{ Video')">
+			<video controls width="100%" controlsList="nodownload">
+				<source :src="getId(block)" type="video/mp4" />
+			</video>
+		</div>
+		<div v-else-if="block.includes('{{ PDF')">
+			<iframe
+				:src="getPDFSource(block)"
+				width="100%"
+				height="400"
+				frameborder="0"
+				allowfullscreen
+			></iframe>
+		</div>
+		<div v-else-if="block.includes('{{ Audio')">
+			<audio width="100%" controls controlsList="nodownload">
+				<source :src="getId(block)" type="audio/mp3" />
+			</audio>
+		</div>
+		<div v-else-if="block.includes('{{ Embed')">
+			<iframe
+				width="100%"
+				height="400"
+				:src="getId(block)"
+				frameborder="0"
+				allowfullscreen
+			>
+			</iframe>
+		</div>
+		<div v-else v-html="markdown.render(block)"></div>
+	</div>
+	<div v-if="quizId">
+		<Quiz :quiz="quizId" />
+	</div>
+</template>
+<script setup>
+import Quiz from '@/components/QuizBlock.vue'
+import MarkdownIt from 'markdown-it'
+
+const markdown = new MarkdownIt({
+	html: true,
+	linkify: true,
+})
+
+const props = defineProps({
+	content: {
+		type: String,
+		required: true,
+	},
+	youtube: {
+		type: String,
+		required: false,
+	},
+	quizId: {
+		type: String,
+		required: false,
+	},
+})
+
+const getYouTubeVideoSource = (block) => {
+	if (block.includes('{{')) {
+		block = getId(block)
+	}
+	return `https://www.youtube.com/embed/${block}`
+}
+
+const getPDFSource = (block) => {
+	return `${getId(block)}#toolbar=0`
+}
+
+const getId = (block) => {
+	return block.match(/\(["']([^"']+?)["']\)/)[1]
+}
+</script>

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>

frontend/src/components/LiveClass.vue

@@ -9,7 +9,7 @@
 			<Plus class="h-4 w-4" />
 		</template>
 		<span>
-			{{ __('Create') }}
+			{{ __('Add Live Class') }}
 		</span>
 	</Button>
 	<div class="text-lg font-semibold mb-4">
@@ -88,7 +88,7 @@ const props = defineProps({
 const liveClasses = createListResource({
 	doctype: 'LMS Live Class',
 	filters: {
-		batch: props.batchName,
+		batch_name: props.batch,
 		date: ['>=', new Date()],
 	},
 	fields: [

frontend/src/components/Modals/BatchCourseModal.vue

@@ -0,0 +1,68 @@
+<template>
+	<Dialog
+		v-model="show"
+		:options="{
+			title: __('Add a course'),
+			size: 'sm',
+			actions: [
+				{
+					label: __('Submit'),
+					variant: 'solid',
+					onClick: (close) => addCourse(close),
+				},
+			],
+		}"
+	>
+		<template #body-content>
+			<Link doctype="LMS Course" v-model="course" />
+		</template>
+	</Dialog>
+</template>
+<script setup>
+import { Dialog, createResource } from 'frappe-ui'
+import { ref, defineModel } from 'vue'
+import Link from '@/components/Controls/Link.vue'
+import { showToast } from '@/utils'
+
+const show = defineModel()
+const course = ref(null)
+const courses = defineModel('courses')
+
+const props = defineProps({
+	batch: {
+		type: String,
+		default: null,
+	},
+})
+
+const createBatchCourse = createResource({
+	url: 'frappe.client.insert',
+	makeParams(values) {
+		return {
+			doc: {
+				doctype: 'Batch Course',
+				parent: props.batch,
+				parenttype: 'LMS Batch',
+				parentfield: 'courses',
+				course: course.value,
+			},
+		}
+	},
+})
+
+const addCourse = (close) => {
+	createBatchCourse.submit(
+		{},
+		{
+			onSuccess() {
+				courses.value.reload()
+				close()
+				course.value = null
+			},
+			onError(err) {
+				showToast('Error', err.message[0] || err, 'x')
+			},
+		}
+	)
+}
+</script>

frontend/src/components/Modals/BatchCreation.vue

@@ -1,192 +0,0 @@
-<template>
-	<Dialog
-		v-model="show"
-		:options="{
-			title: __('Create a Batch'),
-			size: '3xl',
-			actions: [
-				{
-					label: __('Save'),
-					variant: 'solid',
-					onClick: (close) => createBatch(close),
-				},
-			],
-		}"
-	>
-		<template #body-content>
-			<div>
-				<div class="grid grid-cols-3 gap-4">
-					<div>
-						<FormControl
-							v-model="batch.title"
-							:label="__('Title')"
-							class="mb-4"
-						/>
-						<FormControl
-							v-model="batch.published"
-							type="checkbox"
-							:label="__('Published')"
-						/>
-					</div>
-					<div>
-						<FormControl
-							v-model="batch.start_date"
-							:label="__('Start Date')"
-							type="date"
-							class="mb-4"
-						/>
-						<FormControl
-							v-model="batch.end_date"
-							:label="__('End Date')"
-							type="date"
-							class="mb-4"
-						/>
-					</div>
-					<div>
-						<FormControl
-							v-model="batch.start_time"
-							:label="__('Start Time')"
-							type="time"
-							class="mb-4"
-						/>
-						<FormControl
-							v-model="batch.end_time"
-							:label="__('End Time')"
-							type="time"
-							class="mb-4"
-						/>
-					</div>
-				</div>
-				<div class="grid grid-cols-3 gap-4 mt-4 border-t pt-4">
-					<div>
-						<FormControl
-							v-model="batch.seat_count"
-							:label="__('Seat Count')"
-							type="number"
-							class="mb-4"
-						/>
-						<FormControl
-							v-model="batch.evaluation_end_date"
-							:label="__('Evaluation End Date')"
-							type="date"
-							class="mb-4"
-						/>
-					</div>
-					<div>
-						<FormControl
-							v-model="batch.medium"
-							:label="__('Medium')"
-							class="mb-4"
-						/>
-						<FormControl
-							v-model="batch.category"
-							:label="__('Category')"
-							class="mb-4"
-						/>
-					</div>
-					<div>
-						<FileUploader
-							v-if="!batch.meta_image"
-							:fileTypes="['image/*']"
-							:validateFile="validateFile"
-							@success="
-								(file) => {
-									batch.meta_image.value = file
-								}
-							"
-						>
-							<template
-								v-slot="{ file, progress, uploading, openFileSelector }"
-							>
-								<div class="mb-4">
-									<Button @click="openFileSelector" :loading="uploading">
-										{{
-											uploading ? `Uploading ${progress}%` : 'Upload an image'
-										}}
-									</Button>
-								</div>
-							</template>
-						</FileUploader>
-					</div>
-				</div>
-				<div class="border-t pt-4 mb-4">
-					<FormControl
-						v-model="batch.paid_batch"
-						type="checkbox"
-						:label="__('Paid Batch')"
-					/>
-					<FormControl
-						v-model="batch.amount"
-						:label="__('Amount')"
-						type="number"
-						class="my-4"
-					/>
-					<Link
-						doctype="Currency"
-						v-model="batch.currency"
-						:filters="{ enabled: 1 }"
-						:label="__('Currency')"
-					/>
-				</div>
-				<div class="grid grid-cols-2 gap-4 border-y pt-4 mb-4"></div>
-				<FormControl
-					v-model="batch.description"
-					:label="__('Description')"
-					type="textarea"
-					class="mb-4"
-				/>
-				<div>
-					<label class="block text-sm text-gray-600 mb-1">
-						{{ __('Batch Details') }}
-					</label>
-					<TextEditor
-						:content="batch.batch_details"
-						@change="(val) => (batch.batch_details = val)"
-						:editable="true"
-						:fixedMenu="true"
-						editorClass="prose-sm max-w-none border-b border-x bg-gray-100 rounded-b-md py-1 px-2 min-h-[7rem] mb-4"
-					/>
-				</div>
-				<FormControl
-					v-model="batch.batch_details_raw"
-					:label="__('Batch Details Raw')"
-					type="textarea"
-					class="mb-4"
-				/>
-			</div>
-		</template>
-	</Dialog>
-</template>
-<script setup>
-import {
-	Dialog,
-	FormControl,
-	TextEditor,
-	FileUploader,
-	Button,
-} from 'frappe-ui'
-import { reactive, defineModel } from 'vue'
-import Link from '@/components/Controls/Link.vue'
-
-const show = defineModel()
-
-const batch = reactive({
-	title: '',
-	published: false,
-	start_date: '',
-	end_date: '',
-	start_time: '',
-	end_time: '',
-	medium: '',
-	category: '',
-	seat_count: 0,
-	evaluation_end_date: '',
-	description: '',
-	batch_details: '',
-	batch_details_raw: '',
-	meta_image: '',
-	paid_batch: false,
-	amount: 0,
-	currency: '',
-})
-</script>

frontend/src/components/Modals/StudentModal.vue

@@ -3,7 +3,7 @@
 		v-model="show"
 		:options="{
 			title: __('Add a Student'),
-			size: 'xl',
+			size: 'sm',
 			actions: [
 				{
 					label: 'Submit',