Skip to content

Commit 005b761

Browse files
iceljciceljc
authored
Merge pull request #351 from iceljc/features/refine-pagination
Features/refine pagination
2 parents b60ca93 + b26cc0a commit 005b761

File tree

8 files changed

+255
-32
lines changed

8 files changed

+255
-32
lines changed

‎src/lib/common/markdown/Markdown.svelte‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,9 @@
1818
/** @type {boolean} */
1919
export let rawText = false;
2020
21+
/** @type {boolean} */
22+
export let scrollable = false;
23+
2124
const scrollbarId = uuidv4();
2225
2326
const options = {
@@ -33,7 +36,9 @@
3336
};
3437
3538
onMount(() => {
36-
initScrollbar();
39+
if (scrollable) {
40+
initScrollbar();
41+
}
3742
});
3843
3944
function initScrollbar() {

‎src/lib/helpers/utils/common.js‎

Lines changed: 45 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
import { goto } from '$app/navigation';
2+
13
export function range(size = 3, startAt = 0) {
24
return [...Array(size).keys()].map((i) => i + startAt);
35
};
@@ -81,4 +83,46 @@ export function removeDuplicates(arr, key) {
8183
/**
8284
* @param {(string | null)[]} args
8385
*/
84-
export const classnames = (...args) => args.filter(Boolean).join(' ');
86+
export const classnames = (...args) => args.filter(Boolean).join(' ');
87+
88+
89+
/**
90+
* @param {{ page: any, pageSize: any }} args
91+
* @param {{ defaultPageSize: number, maxPageSize?: number }} defaults
92+
*/
93+
export function getPagingQueryParams(args, defaults = { defaultPageSize: 12, maxPageSize: 30 }) {
94+
const pNum = Number(args.page) || 0;
95+
const pSize = Number(args.pageSize) || 0;
96+
const pageNum = pNum > 0 ? pNum : 1;
97+
const pageSizeNum = pSize > 0 ? Math.min(pSize, defaults.maxPageSize || 30) : defaults.defaultPageSize;
98+
99+
return {
100+
pageNum,
101+
pageSizeNum
102+
};
103+
}
104+
105+
/**
106+
* @param {URL} url
107+
* @param {import('$commonTypes').KeyValuePair[]} pairs
108+
* @param {() => void} [callback]
109+
*/
110+
export function setUrlQueryParams(url, pairs, callback) {
111+
if (!pairs?.length) {
112+
return;
113+
}
114+
115+
pairs?.map(p => {
116+
url.searchParams.set(p.key, p.value);
117+
});
118+
119+
callback?.();
120+
}
121+
122+
/**
123+
* @param {string} url
124+
* @param {boolean} replaceState
125+
*/
126+
export function goToUrl(url, replaceState = true) {
127+
goto(url, { replaceState: replaceState });
128+
}

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

Lines changed: 43 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
import { _ } from 'svelte-i18n';
44
import { goto } from '$app/navigation';
55
import Swal from 'sweetalert2';
6+
import { page } from '$app/stores';
67
import { Button, Col, Row } from '@sveltestrap/sveltestrap';
78
import Breadcrumb from '$lib/common/Breadcrumb.svelte';
89
import HeadTitle from '$lib/common/HeadTitle.svelte';
@@ -15,6 +16,11 @@
1516
import { ADMIN_ROLES } from '$lib/helpers/constants';
1617
import { globalEventStore } from '$lib/helpers/store';
1718
import CardAgent from './card-agent.svelte';
19+
import {
20+
getPagingQueryParams,
21+
setUrlQueryParams,
22+
goToUrl
23+
} from '$lib/helpers/utils/common';
1824
1925
2026
const firstPage = 1;
@@ -32,7 +38,7 @@
3238
};
3339
3440
/** @type {import('$agentTypes').AgentFilter} */
35-
let filter = { ... initFilter };
41+
let filter = { ...initFilter };
3642
3743
/** @type {import('$commonTypes').Pagination} */
3844
let pager = filter.pager;
@@ -57,6 +63,25 @@
5763
let selectedAgentLabels = [];
5864
5965
onMount(async () => {
66+
const { pageNum, pageSizeNum } = getPagingQueryParams({
67+
page: $page.url.searchParams.get("page"),
68+
pageSize: $page.url.searchParams.get("pageSize")
69+
}, { defaultPageSize: pageSize });
70+
71+
filter = {
72+
...filter,
73+
pager: {
74+
...filter.pager,
75+
page: pageNum,
76+
size: pageSizeNum
77+
}
78+
};
79+
80+
setUrlQueryParams($page.url, [
81+
{ key: 'page', value: `${filter.pager.page}` },
82+
{ key: 'pageSize', value: `${filter.pager.size}` }
83+
], () => goToUrl(`${$page.url.pathname}${$page.url.search}`));
84+
6085
user = await myInfo();
6186
getPagedAgents();
6287
getAgentLabelOptions();
@@ -65,11 +90,20 @@
6590
if (event.name !== GlobalEvent.Search) return;
6691
6792
filter = {
68-
pager: initFilter.pager,
93+
pager: {
94+
...filter.pager,
95+
page: firstPage,
96+
count: 0
97+
},
6998
types: selectedAgentTypes?.length > 0 ? selectedAgentTypes : null,
7099
labels: selectedAgentLabels?.length > 0 ? selectedAgentLabels : null,
71100
similarName: event.payload || null
72101
};
102+
103+
setUrlQueryParams($page.url, [
104+
{ key: 'page', value: `${filter.pager.page}` }
105+
], () => () => goToUrl(`${$page.url.pathname}${$page.url.search}`));
106+
73107
getPagedAgents();
74108
});
75109
});
@@ -128,7 +162,7 @@
128162
129163
function refresh() {
130164
refreshAgents();
131-
refreshPager(agents.count, filter.pager.page, filter.pager.size);
165+
refreshPager(agents.count, filter.pager.page);
132166
}
133167
134168
function refreshAgents() {
@@ -139,10 +173,10 @@
139173
}
140174
141175
/** @param {number} totalItemsCount */
142-
function refreshPager(totalItemsCount, page = firstPage, pageCount = pageSize) {
176+
function refreshPager(totalItemsCount, page = firstPage) {
143177
pager = {
178+
...filter.pager,
144179
page: page,
145-
size: pageCount || 0,
146180
count: totalItemsCount || 0
147181
};
148182
}
@@ -161,6 +195,10 @@
161195
pager: pager
162196
};
163197
198+
setUrlQueryParams($page.url, [
199+
{ key: 'page', value: `${pageNum}` }
200+
], () => goToUrl(`${$page.url.pathname}${$page.url.search}`));
201+
164202
getPagedAgents();
165203
}
166204

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -439,6 +439,7 @@
439439
>
440440
<Markdown
441441
rawText
442+
scrollable
442443
containerClasses={'markdown-div'}
443444
containerStyles={`max-width: ${Math.floor(windowWidth*0.55)}px;`}
444445
text={description}

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

Lines changed: 42 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
<script>
22
import { onMount } from 'svelte';
3+
import { page } from '$app/stores';
34
import { _ } from 'svelte-i18n';
45
import Swal from 'sweetalert2';
56
import lodash from "lodash";
@@ -21,6 +22,11 @@
2122
import { getConversations, deleteConversation, getConversationStateSearchKeys } from '$lib/services/conversation-service.js';
2223
import { utcToLocal } from '$lib/helpers/datetime';
2324
import { ConversationChannel } from '$lib/helpers/enums';
25+
import {
26+
getPagingQueryParams,
27+
setUrlQueryParams,
28+
goToUrl
29+
} from '$lib/helpers/utils/common';
2430
2531
2632
const duration = 3000;
@@ -79,6 +85,25 @@
7985
];
8086
8187
onMount(async () => {
88+
const { pageNum, pageSizeNum } = getPagingQueryParams({
89+
page: $page.url.searchParams.get("page"),
90+
pageSize: $page.url.searchParams.get("pageSize")
91+
}, { defaultPageSize: pageSize });
92+
93+
filter = {
94+
...filter,
95+
pager: {
96+
...filter.pager,
97+
page: pageNum,
98+
size: pageSizeNum
99+
}
100+
};
101+
102+
setUrlQueryParams($page.url, [
103+
{ key: 'page', value: `${filter.pager.page}` },
104+
{ key: 'pageSize', value: `${filter.pager.size}` }
105+
], () => goToUrl(`${$page.url.pathname}${$page.url.search}`));
106+
82107
isLoading = true;
83108
Promise.all([
84109
loadAgentOptions(),
@@ -123,7 +148,7 @@
123148
124149
function refresh() {
125150
refreshConversations();
126-
refreshPager(conversations.count, filter.pager.page, filter.pager.size);
151+
refreshPager(conversations.count, filter.pager.page);
127152
}
128153
129154
function refreshConversations() {
@@ -134,10 +159,10 @@
134159
}
135160
136161
/** @param {number} totalItemsCount */
137-
function refreshPager(totalItemsCount, page = firstPage, pageCount = pageSize) {
162+
function refreshPager(totalItemsCount, page = firstPage) {
138163
pager = {
164+
...filter.pager,
139165
page: page,
140-
size: pageCount,
141166
count: totalItemsCount
142167
};
143168
}
@@ -154,6 +179,10 @@
154179
pager: pager
155180
};
156181
182+
setUrlQueryParams($page.url, [
183+
{ key: 'page', value: `${pageNum}` }
184+
], () => goToUrl(`${$page.url.pathname}${$page.url.search}`));
185+
157186
getPagedConversations();
158187
}
159188
@@ -209,8 +238,16 @@
209238
function initFilterPager() {
210239
filter = {
211240
...filter,
212-
pager: { page: firstPage, size: pageSize, count: 0 },
241+
pager: {
242+
...filter.pager,
243+
page: firstPage,
244+
count: 0
245+
}
213246
};
247+
248+
setUrlQueryParams($page.url, [
249+
{ key: 'page', value: `${filter.pager.page}` }
250+
], () => goToUrl(`${$page.url.pathname}${$page.url.search}`));
214251
}
215252
216253
/**
@@ -337,7 +374,7 @@
337374
query: query,
338375
keyLimit: 20,
339376
agentIds: searchOption.agentId ? [searchOption.agentId] : null
340-
}).then(res => {
377+
}).then((/** @type {any[]} */ res) => {
341378
resolve(res || []);
342379
}).catch(() => resolve([]));
343380
});

0 commit comments

Comments
 (0)