feat: load more in quiz submissions

frontend/src/components/BatchStudents.vue

@@ -52,7 +52,7 @@
 								{{ row[column.key] }}
 							</div>
 							<div v-else-if="column.icon == 'book-open'">
-								{{ Math.ceil(row.courses[column.key]) }}%
+								{{ Math.ceil(row.courses[column.key]) }}
 							</div>
 							<div v-else-if="column.icon == 'help-circle'">
 								<Badge
@@ -62,7 +62,7 @@
 								>
 									{{ row.assessments[column.key] }}
 								</Badge>
-								<div v-else>{{ parseInt(row.assessments[column.key]) }}%</div>
+								<div v-else>{{ parseInt(row.assessments[column.key]) }}</div>
 							</div>
 						</ListRowItem>
 					</template>
@@ -134,22 +134,10 @@ const getStudentColumns = () => {
 		{
 			label: 'Full Name',
 			key: 'full_name',
-			width: '10rem',
+			width: '15rem',
 		},
 	]
 
-	if (students.data?.[0].courses) {
-		Object.keys(students.data?.[0].courses).forEach((course) => {
-			columns.push({
-				label: course,
-				key: course,
-				width: '10rem',
-				icon: 'book-open',
-				align: 'center',
-			})
-		})
-	}
-
 	if (students.data?.[0].assessments) {
 		Object.keys(students.data?.[0].assessments).forEach((assessment) => {
 			columns.push({
@@ -163,6 +151,19 @@ const getStudentColumns = () => {
 			})
 		})
 	}
+
+	if (students.data?.[0].courses) {
+		Object.keys(students.data?.[0].courses).forEach((course) => {
+			columns.push({
+				label: course,
+				key: course,
+				width: '10rem',
+				icon: 'book-open',
+				align: 'center',
+			})
+		})
+	}
+
 	return columns
 }
 

frontend/src/pages/QuizSubmissionList.vue

@@ -5,6 +5,9 @@
 		<Breadcrumbs :items="breadcrumbs" />
 	</header>
 	<div v-if="submissions.data?.length" class="md:w-3/4 md:mx-auto py-5 mx-5">
+		<div class="text-xl font-semibold mb-5">
+			{{ submissions.data[0].quiz_title }}
+		</div>
 		<ListView
 			:columns="quizColumns"
 			:rows="submissions.data"
@@ -31,12 +34,18 @@
 				</router-link>
 			</ListRows>
 		</ListView>
+		<div class="flex justify-center my-5">
+			<Button v-if="submissions.hasNextPage" @click="submissions.next()">
+				{{ __('Load More') }}
+			</Button>
+		</div>
 	</div>
 </template>
 <script setup>
 import {
 	createListResource,
 	Breadcrumbs,
+	Button,
 	ListView,
 	ListRow,
 	ListRows,
@@ -76,12 +85,7 @@ const quizColumns = computed(() => {
 		{
 			label: __('Member'),
 			key: 'member_name',
-			width: 2,
+			width: 1,
-		},
-		{
-			label: __('Quiz'),
-			key: 'quiz_title',
-			width: 2,
 		},
 		{
 			label: __('Score'),