Features/refine pagination

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

@@ -1,3 +1,5 @@
+import { goto } from '$app/navigation';
+
 export function range(size = 3, startAt = 0) {
     return [...Array(size).keys()].map((i) => i + startAt);
 };
@@ -81,4 +83,46 @@ 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 {{ page: any, pageSize: any }} args
+ * @param {{ defaultPageSize: number, maxPageSize?: number }} defaults
+ */
+export function getPagingQueryParams(args, defaults = { defaultPageSize: 12, maxPageSize: 30 }) {
+    const pNum = Number(args.page) || 0;
+    const pSize = Number(args.pageSize) || 0;
+    const pageNum = pNum > 0 ? pNum : 1;
+    const pageSizeNum = pSize > 0 ? Math.min(pSize, defaults.maxPageSize || 30) : defaults.defaultPageSize;
+
+    return {
+        pageNum,
+        pageSizeNum
+    };
+}
+
+/**
+ * @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?.();
+}
+
+/**
+ * @param {string} url
+ * @param {boolean} replaceState
+ */
+export function goToUrl(url, replaceState = true) {
+    goto(url, { replaceState: replaceState });
+}

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,11 @@
 	import { ADMIN_ROLES } from '$lib/helpers/constants';
 	import { globalEventStore } from '$lib/helpers/store';
 	import CardAgent from './card-agent.svelte';
+	import {
+		getPagingQueryParams,
+		setUrlQueryParams,
+		goToUrl
+	} from '$lib/helpers/utils/common';
 
 
   	const firstPage = 1;
@@ -32,7 +38,7 @@
 	};
 
 	/** @type {import('$agentTypes').AgentFilter} */
-	let filter = { ... initFilter };
+	let filter = { ...initFilter };
 
 	/** @type {import('$commonTypes').Pagination} */
 	let pager = filter.pager;
@@ -57,6 +63,25 @@
 	let selectedAgentLabels = [];
 
 	onMount(async () => {
+		const { pageNum, pageSizeNum } = getPagingQueryParams({
+			page: $page.url.searchParams.get("page"),
+			pageSize: $page.url.searchParams.get("pageSize")
+		}, { defaultPageSize: pageSize });
+
+		filter = {
+			...filter,
+			pager: {
+				...filter.pager,
+				page: pageNum,
+				size: pageSizeNum
+			}
+		};
+
+		setUrlQueryParams($page.url, [
+			{ key: 'page', value: `${filter.pager.page}` },
+			{ key: 'pageSize', value: `${filter.pager.size}` }
+		], () => goToUrl(`${$page.url.pathname}${$page.url.search}`));
+
 		user = await myInfo();
 		getPagedAgents();
 		getAgentLabelOptions();
@@ -65,11 +90,20 @@
 			if (event.name !== GlobalEvent.Search) return;
 
 			filter = {
-				pager: initFilter.pager,
+				pager: {
+					...filter.pager,
+					page: firstPage,
+					count: 0
+				},
 				types: selectedAgentTypes?.length > 0 ? selectedAgentTypes : null,
 				labels: selectedAgentLabels?.length > 0 ? selectedAgentLabels : null,
 				similarName: event.payload || null
 			};
+
+			setUrlQueryParams($page.url, [
+				{ key: 'page', value: `${filter.pager.page}` }
+			], () => () => goToUrl(`${$page.url.pathname}${$page.url.search}`));
+
 			getPagedAgents();
 		});
 	});
@@ -128,7 +162,7 @@
 
 	function refresh() {
 		refreshAgents();
-		refreshPager(agents.count, filter.pager.page, filter.pager.size);
+		refreshPager(agents.count, filter.pager.page);
 	}
 
 	function refreshAgents() {
@@ -139,10 +173,10 @@
 	}
 
 	/** @param {number} totalItemsCount */
-	function refreshPager(totalItemsCount, page = firstPage, pageCount = pageSize) {
+	function refreshPager(totalItemsCount, page = firstPage) {
 		pager = {
+			...filter.pager,
 			page: page,
-			size: pageCount || 0,
 			count: totalItemsCount || 0
 		};
 	}
@@ -161,6 +195,10 @@
 			pager: pager
 		};
 
+		setUrlQueryParams($page.url, [
+			{ key: 'page', value: `${pageNum}` }
+		], () => goToUrl(`${$page.url.pathname}${$page.url.search}`));
+
 		getPagedAgents();
 	}
 

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}

src/routes/page/conversation/+page.svelte

@@ -1,5 +1,6 @@
 <script>
 	import { onMount } from 'svelte';
+	import { page } from '$app/stores';
 	import { _ } from 'svelte-i18n';
 	import Swal from 'sweetalert2';
 	import lodash from "lodash";
@@ -21,6 +22,11 @@
 	import { getConversations, deleteConversation, getConversationStateSearchKeys } from '$lib/services/conversation-service.js';
 	import { utcToLocal } from '$lib/helpers/datetime';
 	import { ConversationChannel } from '$lib/helpers/enums';
+	import {
+		getPagingQueryParams,
+		setUrlQueryParams,
+		goToUrl
+	} from '$lib/helpers/utils/common';
 
 
 	const duration = 3000;
@@ -79,6 +85,25 @@
     ];
 
     onMount(async () => {
+		const { pageNum, pageSizeNum } = getPagingQueryParams({
+			page: $page.url.searchParams.get("page"),
+			pageSize: $page.url.searchParams.get("pageSize")
+		}, { defaultPageSize: pageSize });
+
+		filter = {
+			...filter,
+			pager: {
+				...filter.pager,
+				page: pageNum,
+				size: pageSizeNum
+			}
+		};
+
+		setUrlQueryParams($page.url, [
+			{ key: 'page', value: `${filter.pager.page}` },
+			{ key: 'pageSize', value: `${filter.pager.size}` }
+		], () => goToUrl(`${$page.url.pathname}${$page.url.search}`));
+
 		isLoading = true;
 		Promise.all([
 			loadAgentOptions(),
@@ -123,7 +148,7 @@
 
 	function refresh() {
 		refreshConversations();
-		refreshPager(conversations.count, filter.pager.page, filter.pager.size);
+		refreshPager(conversations.count, filter.pager.page);
 	}
 
 	function refreshConversations() {
@@ -134,10 +159,10 @@
 	}
 
 	/** @param {number} totalItemsCount */
-	function refreshPager(totalItemsCount, page = firstPage, pageCount = pageSize) {
+	function refreshPager(totalItemsCount, page = firstPage) {
 		pager = {
+			...filter.pager,
 			page: page,
-			size: pageCount,
 			count: totalItemsCount
 		};
 	}
@@ -154,6 +179,10 @@
 			pager: pager
 		};
 
+		setUrlQueryParams($page.url, [
+			{ key: 'page', value: `${pageNum}` }
+		], () => goToUrl(`${$page.url.pathname}${$page.url.search}`));
+
 		getPagedConversations();
 	}
 
@@ -209,8 +238,16 @@
 	function initFilterPager() {
 		filter = {
 			...filter,
-			pager: { page: firstPage, size: pageSize, count: 0 },
+			pager: {
+				...filter.pager,
+				page: firstPage,
+				count: 0
+			}
 		};
+
+		setUrlQueryParams($page.url, [
+			{ key: 'page', value: `${filter.pager.page}` }
+		], () => goToUrl(`${$page.url.pathname}${$page.url.search}`));
 	}
 
 	/**
@@ -337,7 +374,7 @@
 				query: query,
 				keyLimit: 20,
 				agentIds: searchOption.agentId ? [searchOption.agentId] : null
-			}).then(res => {
+			}).then((/** @type {any[]} */ res) => {
 				resolve(res || []);
 			}).catch(() => resolve([]));
 		});