refine agents page pagination

Author: Jicheng Lu

src/lib/common/markdown/Markdown.svelte

@@ -18,6 +18,9 @@
 	/** @type {boolean} */
 	export let rawText = false;
 
+	/** @type {boolean} */
+	export let scrollable = false;
+
 	const scrollbarId = uuidv4();
 
 	const options = {
@@ -33,7 +36,9 @@
 	};
 
 	onMount(() => {
-		initScrollbar();
+		if (scrollable) {
+			initScrollbar();
+		}
 	});
 
 	function initScrollbar() {

src/lib/helpers/utils/common.js

@@ -81,4 +81,22 @@ export function removeDuplicates(arr, key) {
 /**
  * @param {(string | null)[]} args
  */
-export const classnames = (...args) => args.filter(Boolean).join(' ');
+export const classnames = (...args) => args.filter(Boolean).join(' ');
+
+
+/**
+ * @param {URL} url
+ * @param {import('$commonTypes').KeyValuePair[]} pairs
+ * @param {() => void} [callback]
+ */
+export function setUrlQueryParams(url, pairs, callback) {
+    if (!pairs?.length) {
+        return;
+    }
+
+    pairs?.map(p => {
+        url.searchParams.set(p.key, p.value);
+    });
+    
+    callback?.();
+}

src/routes/page/agent/+page.svelte

@@ -3,6 +3,7 @@
 	import { _ } from 'svelte-i18n';
 	import { goto } from '$app/navigation';
 	import Swal from 'sweetalert2';
+	import { page } from '$app/stores';
 	import { Button, Col, Row } from '@sveltestrap/sveltestrap';
 	import Breadcrumb from '$lib/common/Breadcrumb.svelte';
 	import HeadTitle from '$lib/common/HeadTitle.svelte';
@@ -15,6 +16,7 @@
 	import { ADMIN_ROLES } from '$lib/helpers/constants';
 	import { globalEventStore } from '$lib/helpers/store';
 	import CardAgent from './card-agent.svelte';
+	import { setUrlQueryParams } from '$lib/helpers/utils/common';
 	
 	
   	const firstPage = 1;
@@ -32,7 +34,7 @@
 	};
 
 	/** @type {import('$agentTypes').AgentFilter} */
-	let filter = { ... initFilter };
+	let filter = { ...initFilter };
 
 	/** @type {import('$commonTypes').Pagination} */
 	let pager = filter.pager;
@@ -57,6 +59,21 @@
 	let selectedAgentLabels = [];
 
 	onMount(async () => {
+		const { pageNum, pageSizeNum } = getQueryParams();
+		setUrlQueryParams($page.url, [
+			{ key: 'page', value: `${pageNum}` },
+			{ key: 'pageSize', value: `${pageSizeNum}` }
+		], () => replaceUrl());
+ 
+		filter = {
+			...filter,
+			pager: {
+				...filter.pager,
+				page: pageNum,
+				size: pageSizeNum
+			}
+		};
+
 		user = await myInfo();
 		getPagedAgents();
 		getAgentLabelOptions();
@@ -70,6 +87,11 @@
 				labels: selectedAgentLabels?.length > 0 ? selectedAgentLabels : null,
 				similarName: event.payload || null
 			};
+
+			setUrlQueryParams($page.url, [
+				{ key: 'page', value: `${filter.pager.page}` }
+			], () => () => replaceUrl());
+
 			getPagedAgents();
 		});
 	});
@@ -131,6 +153,22 @@
 		refreshPager(agents.count, filter.pager.page, filter.pager.size);
 	}
 
+	function getQueryParams() {
+		const pNum = Number($page.url.searchParams.get('page'));
+		const pSize = Number($page.url.searchParams.get('pageSize'));
+		const pageNum = pNum > 0 ? pNum : firstPage;
+		const pageSizeNum = pSize > 0 ? Math.min(pSize, 30) : pageSize;
+
+		return {
+			pageNum,
+			pageSizeNum
+		};
+	}
+	
+	function replaceUrl() {
+		goto(`${$page.url.pathname}${$page.url.search}`, { replaceState: true });
+	}
+
 	function refreshAgents() {
 		agents = {
 			items: agents?.items?.map(t => { return { ...t }; }) || [],
@@ -148,12 +186,16 @@
 	}
 
 	/**
-	 * @param {number} pageNum
+	 * @param {number} pn
 	 */
-	function pageTo(pageNum) {
+	function pageTo(pn) {
+		setUrlQueryParams($page.url, [
+			{ key: 'page', value: `${pn}` }
+		], () => replaceUrl());
+
 		pager = {
 			...pager,
-			page: pageNum
+			page: pn
 		};
 
 		filter = {

src/routes/page/agent/[agentId]/agent-components/agent-utility.svelte

@@ -439,6 +439,7 @@
                                                 >
                                                     <Markdown
                                                         rawText
+                                                        scrollable
                                                         containerClasses={'markdown-div'}
                                                         containerStyles={`max-width: ${Math.floor(windowWidth*0.55)}px;`}
                                                         text={description}