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({
+const studentCount = createResource({
-	url: 'lms.lms.utils.get_batch_students',
+	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 = () => {
+const students = createListResource({
-	let columns = [
+	doctype: 'LMS Batch Enrollment',
-		{
+	url: 'lms.lms.utils.get_batch_students',
-			label: 'Full Name',
+	cache: ['batch_students', props.batch?.data?.name],
-			key: 'full_name',
+	pageLength: 50,
-			width: '20rem',
+	filters: {
-			icon: 'user',
+		batch: props.batch?.data?.name,
-		},
+	},
-		{
+	auto: true,
-			label: 'Progress',
+})
-			key: 'progress',
-			width: '15rem',
-			icon: 'activity',
-		},
-		{
-			label: 'Last Active',
-			key: 'last_active',
-			width: '10rem',
-			align: 'center',
-			icon: 'clock',
-		},
-	]
 
-	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()

lms/lms/utils.py

@@ -1354,17 +1354,30 @@ def get_exercise_details(assessment, member):
 
 
 @frappe.whitelist()
-def get_batch_students(batch):
+def get_batch_students(filters, offset=0, limit_start=0, limit_page_length=None, limit=None):
+	# limit_start and limit_page_length are used for backward compatibility
+	start = limit_start or offset
+	page_length = limit_page_length or limit
+
+	batch = filters.get("batch")
+	if not batch:
+		return []
+
 	students = []
 	students_list = frappe.get_all(
-		"LMS Batch Enrollment", filters={"batch": batch}, fields=["member", "name"]
+		"LMS Batch Enrollment",
+		filters={"batch": batch},
+		fields=["member", "name"],
+		offset=start,
+		limit=page_length,
+		order_by="creation desc",
 	)
 
 	for student in students_list:
 		details = get_batch_student_details(student)
 		calculate_student_progress(batch, details)
 		students.append(details)
-		students = sorted(students, key=lambda x: x.progress, reverse=True)
+
 	return students