feat(batch): add load more pagination for batch students

frontend/src/components/BatchStudents.vue

@@ -2,7 +2,7 @@
 	<div>
 		<div class="flex items-center justify-between mb-4">
 			<div class="text-ink-gray-9 font-medium">
-				{{ students.data?.length }} {{ __('Students') }}
+				{{ studentCount.data ?? 0 }} {{ __('Students') }}
 			</div>
 			<Button v-if="!readOnlyMode" @click="openStudentModal()">
 				<template #prefix>
@@ -15,7 +15,7 @@
 		<div v-if="students.data?.length">
 			<ListView
 				class="max-h-[75vh]"
-				:columns="getStudentColumns()"
+				:columns="studentColumns"
 				:rows="students.data"
 				row-key="name"
 				:options="{
@@ -27,7 +27,7 @@
 				>
 					<ListHeaderItem
 						:item="item"
-						v-for="item in getStudentColumns()"
+						v-for="item in studentColumns"
 						:title="item.label"
 					>
 						<template #prefix="{ item }">
@@ -88,6 +88,11 @@
 						</div>
 					</template>
 				</ListSelectBanner>
+				<div class="mt-4">
+					<Button v-if="students.hasNextPage" @click="students.next()">
+						{{ __('Load More') }}
+					</Button>
+				</div>
 			</ListView>
 		</div>
 		<div v-else-if="!students.loading" class="text-sm italic text-ink-gray-5">
@@ -110,6 +115,7 @@
 import {
 	Avatar,
 	Button,
+	createListResource,
 	createResource,
 	FeatherIcon,
 	ListHeader,
@@ -139,39 +145,47 @@ const props = defineProps({
 	},
 })
 
-const students = createResource({
-	url: 'lms.lms.utils.get_batch_students',
+const studentCount = createResource({
+	url: 'lms.lms.utils.get_batch_student_count',
+	cache: ['batch_student_count', props.batch?.data?.name],
 	params: {
 		batch: props.batch?.data?.name,
 	},
 	auto: true,
 })
 
-const getStudentColumns = () => {
-	let columns = [
-		{
-			label: 'Full Name',
-			key: 'full_name',
-			width: '20rem',
-			icon: 'user',
-		},
-		{
-			label: 'Progress',
-			key: 'progress',
-			width: '15rem',
-			icon: 'activity',
-		},
-		{
-			label: 'Last Active',
-			key: 'last_active',
-			width: '10rem',
-			align: 'center',
-			icon: 'clock',
-		},
-	]
+const students = createListResource({
+	doctype: 'LMS Batch Enrollment',
+	url: 'lms.lms.utils.get_batch_students',
+	cache: ['batch_students', props.batch?.data?.name],
+	pageLength: 50,
+	filters: {
+		batch: props.batch?.data?.name,
+	},
+	auto: true,
+})
 
-	return columns
-}
+const studentColumns = [
+	{
+		label: 'Full Name',
+		key: 'full_name',
+		width: '20rem',
+		icon: 'user',
+	},
+	{
+		label: 'Progress',
+		key: 'progress',
+		width: '15rem',
+		icon: 'activity',
+	},
+	{
+		label: 'Last Active',
+		key: 'last_active',
+		width: '10rem',
+		align: 'center',
+		icon: 'clock',
+	},
+]
 
 const openStudentModal = () => {
 	showStudentModal.value = true
@@ -200,6 +214,7 @@ const removeStudents = (selections, unselectAll) => {
 		{
 			onSuccess(data) {
 				students.reload()
+				studentCount.reload()
 				props.batch.reload()
 				toast.success(__('Students deleted successfully'))
 				unselectAll()