diff --git a/src/lib/common/markdown/Markdown.svelte b/src/lib/common/markdown/Markdown.svelte index 70b16578..e3950a20 100644 --- a/src/lib/common/markdown/Markdown.svelte +++ b/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() { diff --git a/src/lib/helpers/utils/common.js b/src/lib/helpers/utils/common.js index 6ac0218d..5b27090e 100644 --- a/src/lib/helpers/utils/common.js +++ b/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(' '); \ No newline at end of file +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 }); +} diff --git a/src/routes/page/agent/+page.svelte b/src/routes/page/agent/+page.svelte index 5f2006f9..83efd7aa 100644 --- a/src/routes/page/agent/+page.svelte +++ b/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(); } diff --git a/src/routes/page/agent/[agentId]/agent-components/agent-utility.svelte b/src/routes/page/agent/[agentId]/agent-components/agent-utility.svelte index e76f2a79..ff05b55b 100644 --- a/src/routes/page/agent/[agentId]/agent-components/agent-utility.svelte +++ b/src/routes/page/agent/[agentId]/agent-components/agent-utility.svelte @@ -439,6 +439,7 @@ > 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([])); }); diff --git a/src/routes/page/instruction/log/+page.svelte b/src/routes/page/instruction/log/+page.svelte index 3e7145f8..b0efd88c 100644 --- a/src/routes/page/instruction/log/+page.svelte +++ b/src/routes/page/instruction/log/+page.svelte @@ -1,5 +1,6 @@