Skip to content

Commit 2b11283

Browse files
author
Jicheng Lu
committed
refine paging
1 parent a61e1fb commit 2b11283

File tree

6 files changed

+218
-61
lines changed

6 files changed

+218
-61
lines changed

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

Lines changed: 27 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
};
@@ -84,6 +86,22 @@ export function removeDuplicates(arr, key) {
8486
export const classnames = (...args) => args.filter(Boolean).join(' ');
8587

8688

89+
/**
90+
* @param {{ page: number | string | null, pageSize: number | string | null }} 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);
95+
const pSize = Number(args.pageSize);
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+
87105
/**
88106
* @param {URL} url
89107
* @param {import('$commonTypes').KeyValuePair[]} pairs
@@ -99,4 +117,12 @@ export function setUrlQueryParams(url, pairs, callback) {
99117
});
100118

101119
callback?.();
102-
}
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: 31 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,11 @@
1616
import { ADMIN_ROLES } from '$lib/helpers/constants';
1717
import { globalEventStore } from '$lib/helpers/store';
1818
import CardAgent from './card-agent.svelte';
19-
import { setUrlQueryParams } from '$lib/helpers/utils/common';
19+
import {
20+
getPagingQueryParams,
21+
setUrlQueryParams,
22+
goToUrl
23+
} from '$lib/helpers/utils/common';
2024
2125
2226
const firstPage = 1;
@@ -59,12 +63,11 @@
5963
let selectedAgentLabels = [];
6064
6165
onMount(async () => {
62-
const { pageNum, pageSizeNum } = getQueryParams();
63-
setUrlQueryParams($page.url, [
64-
{ key: 'page', value: `${pageNum}` },
65-
{ key: 'pageSize', value: `${pageSizeNum}` }
66-
], () => replaceUrl());
67-
66+
const { pageNum, pageSizeNum } = getPagingQueryParams({
67+
page: $page.url.searchParams.get("page"),
68+
pageSize: $page.url.searchParams.get("pageSize")
69+
}, { defaultPageSize: pageSize });
70+
6871
filter = {
6972
...filter,
7073
pager: {
@@ -74,6 +77,11 @@
7477
}
7578
};
7679
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+
7785
user = await myInfo();
7886
getPagedAgents();
7987
getAgentLabelOptions();
@@ -82,15 +90,19 @@
8290
if (event.name !== GlobalEvent.Search) return;
8391
8492
filter = {
85-
pager: initFilter.pager,
93+
pager: {
94+
...filter.pager,
95+
page: firstPage,
96+
count: 0
97+
},
8698
types: selectedAgentTypes?.length > 0 ? selectedAgentTypes : null,
8799
labels: selectedAgentLabels?.length > 0 ? selectedAgentLabels : null,
88100
similarName: event.payload || null
89101
};
90102
91103
setUrlQueryParams($page.url, [
92104
{ key: 'page', value: `${filter.pager.page}` }
93-
], () => () => replaceUrl());
105+
], () => () => goToUrl(`${$page.url.pathname}${$page.url.search}`));
94106
95107
getPagedAgents();
96108
});
@@ -150,23 +162,7 @@
150162
151163
function refresh() {
152164
refreshAgents();
153-
refreshPager(agents.count, filter.pager.page, filter.pager.size);
154-
}
155-
156-
function getQueryParams() {
157-
const pNum = Number($page.url.searchParams.get('page'));
158-
const pSize = Number($page.url.searchParams.get('pageSize'));
159-
const pageNum = pNum > 0 ? pNum : firstPage;
160-
const pageSizeNum = pSize > 0 ? Math.min(pSize, 30) : pageSize;
161-
162-
return {
163-
pageNum,
164-
pageSizeNum
165-
};
166-
}
167-
168-
function replaceUrl() {
169-
goto(`${$page.url.pathname}${$page.url.search}`, { replaceState: true });
165+
refreshPager(agents.count, filter.pager.page);
170166
}
171167
172168
function refreshAgents() {
@@ -177,32 +173,32 @@
177173
}
178174
179175
/** @param {number} totalItemsCount */
180-
function refreshPager(totalItemsCount, page = firstPage, pageCount = pageSize) {
176+
function refreshPager(totalItemsCount, page = firstPage) {
181177
pager = {
178+
...filter.pager,
182179
page: page,
183-
size: pageCount || 0,
184180
count: totalItemsCount || 0
185181
};
186182
}
187183
188184
/**
189-
* @param {number} pn
185+
* @param {number} pageNum
190186
*/
191-
function pageTo(pn) {
192-
setUrlQueryParams($page.url, [
193-
{ key: 'page', value: `${pn}` }
194-
], () => replaceUrl());
195-
187+
function pageTo(pageNum) {
196188
pager = {
197189
...pager,
198-
page: pn
190+
page: pageNum
199191
};
200192
201193
filter = {
202194
...filter,
203195
pager: pager
204196
};
205197
198+
setUrlQueryParams($page.url, [
199+
{ key: 'page', value: `${pageNum}` }
200+
], () => goToUrl(`${$page.url.pathname}${$page.url.search}`));
201+
206202
getPagedAgents();
207203
}
208204

‎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
});

‎src/routes/page/instruction/log/+page.svelte‎

Lines changed: 35 additions & 9 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 util from "lodash";
56
import { Button, Card, CardBody, Col, Input, Row, Table } from '@sveltestrap/sveltestrap';
@@ -13,6 +14,11 @@
1314
import LogItem from './log-item.svelte';
1415
import { removeDuplicates } from '$lib/helpers/utils/common';
1516
import StateSearch from '$lib/common/StateSearch.svelte';
17+
import {
18+
getPagingQueryParams,
19+
setUrlQueryParams,
20+
goToUrl
21+
} from '$lib/helpers/utils/common';
1622
1723
const firstPage = 1;
1824
const pageSize = 15;
@@ -59,6 +65,22 @@
5965
];
6066
6167
onMount(async () => {
68+
const { pageNum, pageSizeNum } = getPagingQueryParams({
69+
page: $page.url.searchParams.get("page"),
70+
pageSize: $page.url.searchParams.get("pageSize")
71+
}, { defaultPageSize: pageSize });
72+
73+
filter = {
74+
...filter,
75+
page: pageNum,
76+
size: pageSizeNum
77+
};
78+
79+
setUrlQueryParams($page.url, [
80+
{ key: 'page', value: `${filter.page}` },
81+
{ key: 'pageSize', value: `${filter.size}` }
82+
], () => goToUrl(`${$page.url.pathname}${$page.url.search}`));
83+
6284
Promise.all([
6385
initAgentOptions(),
6486
initLlmConfigs(),
@@ -104,9 +126,6 @@
104126
}
105127
106128
function initLogs() {
107-
filter = {
108-
...initPager
109-
};
110129
return getPagedInstructionLogs();
111130
}
112131
@@ -126,7 +145,7 @@
126145
/** @param {import('$commonTypes').PagedItems<import('$instructTypes').InstructionLogModel>} logs */
127146
function refresh(logs) {
128147
refreshLogs(logs);
129-
refreshPager(logs.count, filter.page, filter.size);
148+
refreshPager(logs.count, filter.page);
130149
}
131150
132151
/** @param {import('$commonTypes').PagedItems<import('$instructTypes').InstructionLogModel>} logs */
@@ -135,15 +154,14 @@
135154
}
136155
137156
/** @param {number} totalItemsCount */
138-
function refreshPager(totalItemsCount, page = firstPage, pageCount = pageSize) {
157+
function refreshPager(totalItemsCount, page = firstPage) {
139158
pager = {
159+
...filter,
140160
page: page,
141-
size: pageCount,
142161
count: totalItemsCount
143162
};
144163
}
145164
146-
147165
/**
148166
* @param {any} e
149167
* @param {string} type
@@ -198,6 +216,10 @@
198216
templateNames: template ? [template] : [],
199217
states: states
200218
};
219+
220+
setUrlQueryParams($page.url, [
221+
{ key: 'page', value: `${firstPage}` }
222+
], () => goToUrl(`${$page.url.pathname}${$page.url.search}`));
201223
}
202224
203225
function getSearchStates() {
@@ -213,9 +235,13 @@
213235
function pageTo(pageNum) {
214236
filter = {
215237
...filter,
216-
page: pageNum,
217-
size: pageSize
238+
page: pageNum
218239
};
240+
241+
setUrlQueryParams($page.url, [
242+
{ key: 'page', value: `${pageNum}` }
243+
], () => goToUrl(`${$page.url.pathname}${$page.url.search}`));
244+
219245
getPagedInstructionLogs();
220246
}
221247

0 commit comments

Comments
 (0)