feat: upcoming evals

frontend/src/pages/BatchDetail.vue

@@ -1,42 +1,45 @@
 <template>
-	<div v-if="batch.doc" class="h-screen text-base">
+	<div v-if="batch.data" class="h-screen text-base">
 		<header class="sticky top-0 z-10 border-b bg-white px-3 py-2.5 sm:px-5">
 			<Breadcrumbs :items="breadcrumbs" />
 		</header>
 		<div class="m-5 pb-10">
 			<div>
 				<div class="text-3xl font-semibold">
-					{{ batch.doc.title }}
+					{{ batch.data.title }}
 				</div>
 				<div class="my-3">
-					{{ batch.doc.description }}
+					{{ batch.data.description }}
 				</div>
 				<div class="flex items-center justify-between w-1/2">
 					<div class="flex items-center">
 						<BookOpen class="h-4 w-4 text-gray-700 mr-2" />
-						<span> {{ batch.doc.courses.length }} {{ __('Courses') }} </span>
+						<span> {{ batch.data.courses.length }} {{ __('Courses') }} </span>
 					</div>
-					<span v-if="batch.doc.courses">&middot;</span>
+					<span v-if="batch.data.courses">&middot;</span>
 					<div class="flex items-center">
 						<Calendar class="h-4 w-4 text-gray-700 mr-2" />
 						<span>
-							{{ dayjs(batch.doc.start_date).format('DD MMM YYYY') }} -
-							{{ dayjs(batch.doc.end_date).format('DD MMM YYYY') }}
+							{{ dayjs(batch.data.start_date).format('DD MMM YYYY') }} -
+							{{ dayjs(batch.data.end_date).format('DD MMM YYYY') }}
 						</span>
 					</div>
-					<span v-if="batch.doc.start_date">&middot;</span>
+					<span v-if="batch.data.start_date">&middot;</span>
 					<div class="flex items-center">
 						<Clock class="h-4 w-4 text-gray-700 mr-2" />
 						<span>
-							{{ formatTime(batch.doc.start_time) }} -
-							{{ formatTime(batch.doc.end_time) }}
+							{{ formatTime(batch.data.start_time) }} -
+							{{ formatTime(batch.data.end_time) }}
 						</span>
 					</div>
 				</div>
 			</div>
 			<div class="grid grid-cols-[60%,20%] gap-20 mt-10">
 				<div class="">
-					<div v-html="batch.doc.batch_details" class="batch-description"></div>
+					<div
+						v-html="batch.data.batch_details"
+						class="batch-description"
+					></div>
 				</div>
 				<div>
 					<BatchOverlay :batch="batch" />
@@ -46,29 +49,41 @@
 				<div class="text-2xl font-semibold">
 					{{ __('Courses') }}
 				</div>
-				<div
-					v-if="batch.doc.courses"
-					v-for="course in batch.doc.courses"
-					:key="course.course"
-					class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-8 mt-5"
-				>
-					<router-link
-						:to="{
-							name: 'CourseDetail',
-							params: {
-								courseName: course.course,
-							},
-						}"
+				<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-8 mt-5">
+					<div
+						v-if="batch.data.courses"
+						v-for="course in courses.data"
+						:key="course.course"
 					>
-						<CourseCard :course="course.course" :key="course.course" />
-					</router-link>
+						<router-link
+							:to="{
+								name: 'CourseDetail',
+								params: {
+									courseName: course.name,
+								},
+							}"
+						>
+							<CourseCard :course="course" :key="course.name" />
+						</router-link>
+					</div>
+				</div>
+				<div v-if="batch.data.batch_details_raw">
+					<div
+						v-html="batch.data.batch_details_raw"
+						class="batch-description"
+					></div>
 				</div>
 			</div>
 		</div>
 	</div>
 </template>
 <script setup>
-import { Breadcrumbs, createDocumentResource } from 'frappe-ui'
+import {
+	Breadcrumbs,
+	createDocumentResource,
+	createListResource,
+	createResource,
+} from 'frappe-ui'
 import { BookOpen, Calendar, Clock } from 'lucide-vue-next'
 import { formatTime } from '../utils'
 import { computed, inject } from 'vue'
@@ -84,18 +99,29 @@ const props = defineProps({
 	},
 })
 
-const batch = createDocumentResource({
-	doctype: 'LMS Batch',
-	name: props.batchName,
+const batch = createResource({
+	url: 'lms.lms.utils.get_batch_details',
 	cache: ['batch', props.batchName],
+	params: {
+		batch: props.batchName,
+	},
+	auto: true,
+})
+
+const courses = createResource({
+	url: 'lms.lms.utils.get_batch_courses',
+	params: {
+		batch: props.batchName,
+	},
+	cache: ['batchCourses', props.batchName],
 	auto: true,
 })
 
 const breadcrumbs = computed(() => {
 	let items = [{ label: 'All Batches', route: { name: 'Batches' } }]
 	items.push({
-		label: batch?.doc?.title,
-		route: { name: 'BatchDetail', params: { batchName: batch?.doc?.name } },
+		label: batch?.data?.title,
+		route: { name: 'BatchDetail', params: { batchName: batch?.data?.name } },
 	})
 	return items
 })