From dbc07e66a81568ca5ca1ae2babcf299bf3ef7718 Mon Sep 17 00:00:00 2001
From: ditatompel <ditatompel@gmail.com>
Date: Sat, 4 May 2024 00:41:28 +0700
Subject: [PATCH] Add pagination and fix UI total row count

---
 frontend/src/routes/(loggedin)/app/prober/+page.svelte | 10 +++++++++-
 .../src/routes/(loggedin)/app/prober/api-handler.js    |  2 +-
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/frontend/src/routes/(loggedin)/app/prober/+page.svelte b/frontend/src/routes/(loggedin)/app/prober/+page.svelte
index 3fc0b6d..769fd5e 100644
--- a/frontend/src/routes/(loggedin)/app/prober/+page.svelte
+++ b/frontend/src/routes/(loggedin)/app/prober/+page.svelte
@@ -3,7 +3,13 @@
 	import { format, formatDistance } from 'date-fns';
 	import { loadData } from './api-handler';
 	import { onMount, onDestroy } from 'svelte';
-	import { DtSrThSort, DtSrThFilter, DtSrRowCount } from '$lib/components/datatables/server';
+	import {
+		DtSrRowsPerPage,
+		DtSrThSort,
+		DtSrThFilter,
+		DtSrRowCount,
+		DtSrPagination
+	} from '$lib/components/datatables/server';
 
 	const handler = new DataHandler([], { rowsPerPage: 10, totalRows: 0 });
 	let rows = handler.getRows();
@@ -64,6 +70,7 @@
 
 <div class="dashboard-card">
 	<div class="flex justify-between">
+		<DtSrRowsPerPage {handler} />
 		<div class="invisible flex place-items-center md:visible">
 			<label for="autoRefreshInterval">Auto Refresh:</label>
 			<select
@@ -116,5 +123,6 @@
 
 	<div class="flex justify-between mb-2">
 		<DtSrRowCount {handler} />
+		<DtSrPagination {handler} />
 	</div>
 </div>
diff --git a/frontend/src/routes/(loggedin)/app/prober/api-handler.js b/frontend/src/routes/(loggedin)/app/prober/api-handler.js
index c3e22cf..6651445 100644
--- a/frontend/src/routes/(loggedin)/app/prober/api-handler.js
+++ b/frontend/src/routes/(loggedin)/app/prober/api-handler.js
@@ -4,7 +4,7 @@ import { apiUri } from '$lib/utils/common';
 export const loadData = async (state) => {
 	const response = await fetch(apiUri(`/api/v1/prober?${getParams(state)}`));
 	const json = await response.json();
-	state.setTotalRows(json.data.length ?? 0);
+	state.setTotalRows(json.data.total_rows ?? 0);
 	return json.data.items ?? [];
 };