refine agent header reset

Author: Jicheng Lu

src/lib/helpers/utils/common.js

@@ -120,18 +120,19 @@ export function getPagingQueryParams(args, defaults = { defaultPageSize: 12, max
 /**
  * @param {URL} url
  * @param {import('$commonTypes').KeyValuePair[]} pairs
- * @param {() => void} [callback]
+ * @param {(args0: URL) => void} [callback]
  */
 export function setUrlQueryParams(url, pairs, callback) {
     if (!pairs?.length) {
         return;
     }
 
+    url.search = '';
     pairs?.map(p => {
         url.searchParams.set(p.key, p.value);
     });
 
-    callback?.();
+    callback?.(url);
 }
 
 /**

src/lib/scss/custom/pages/_agent.scss

@@ -1,10 +1,37 @@
 .agents-header-container {
     display: flex;
+    flex-wrap: wrap;
     justify-content: space-between;
+    gap: 15px;
+    align-items: center;
+
+    @media (max-width: 576px) {
+        flex-direction: column;
+        justify-content: center;
+        gap: 12px;
+
+        > div {
+            width: 100%;
+            display: flex;
+            justify-content: center;
+        }
+    }
 
     .agent-filter {
         display: flex;
-        gap: 10px
+        flex-wrap: wrap;
+        gap: 10px;
+        align-items: center;
+
+        @media (max-width: 576px) {
+            width: 100%;
+            flex-direction: column;
+            gap: 8px;
+
+            > * {
+                width: 100%;
+            }
+        }
     }
 }
 

src/routes/VerticalLayout/Sidebar.svelte

@@ -202,9 +202,15 @@
 
 	/** @param {string} url */
 	const goToPage = (url) => {
-		if (!url) return;
+		if (!url) {
+			return;
+		}
 
 		url = getCleanUrl(url);
+		if (url === getCleanUrl($page.url.pathname)) {
+			return;
+		}
+
 		globalEventStore.reset();
 		goto(url);
 	}

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

@@ -199,9 +199,9 @@
 			queryParams.push({ key: 'similarName', value: encodeURIComponent(filter.similarName) });
 		}
 
-		setUrlQueryParams($page.url, queryParams, () => {
+		setUrlQueryParams($page.url, queryParams, (url) => {
 			if (!isPageMounted) return;
-			goToUrl(`${$page.url.pathname}${$page.url.search}`)
+			goToUrl(`${url.pathname}${url.search}`)
 		});
 	}
 
@@ -243,6 +243,9 @@
 	function reset() {
 		selectedAgentTypes = [];
 		selectedAgentLabels = [];
+
+		filter = { ...initFilter };
+		getPagedAgents();
 	}
 
 	function refreshFilter() {
@@ -273,7 +276,7 @@
 	<div>
 		{#if !!user && (ADMIN_ROLES.includes(user.role || '') || !!user.permissions?.includes(UserPermission.CreateAgent))}
 		<Button color="primary" on:click={() => createNewAgent()}>
-			<i class="bx bx-copy" /> {$_('New Agent')}
+			<i class="mdi mdi-content-copy" /> {$_('New Agent')}
 		</Button>
 		{/if}
 	</div>
@@ -308,10 +311,10 @@
 			<i class="mdi mdi-magnify" />
 		</Button>
 		<Button
-			class="btn btn-light"
+			class="btn btn-warning"
 			data-bs-toggle="tooltip"
 			data-bs-placement="bottom"
-			title="Reset filters"
+			title="Reset"
 			on:click={(e) => reset()}
 		>
 			<i class="mdi mdi-restore" />

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

@@ -189,9 +189,9 @@
 		setUrlQueryParams($page.url, [
 			{ key: 'page', value: `${pager.page}` },
 			{ key: 'pageSize', value: `${pager.size}` }
-		], () => {
+		], (url) => {
 			if (!isPageMounted) return;
-			goToUrl(`${$page.url.pathname}${$page.url.search}`);
+			goToUrl(`${url.pathname}${url.search}`);
 		});
 	}
 

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

@@ -180,9 +180,9 @@
 		setUrlQueryParams($page.url, [
 			{ key: 'page', value: `${pager.page}` },
 			{ key: 'pageSize', value: `${pager.size}` }
-		], () => {
+		], (url) => {
 			if (!isPageMounted) return;
-			goToUrl(`${$page.url.pathname}${$page.url.search}`);
+			goToUrl(`${url.pathname}${url.search}`);
 		});
 	}
 

src/routes/page/plugin/+page.svelte

@@ -109,9 +109,9 @@
 		setUrlQueryParams($page.url, [
 			{ key: 'page', value: `${pager.page}` },
 			{ key: 'pageSize', value: `${pager.size}` }
-		], () => {
+		], (url) => {
 			if (!isPageMounted) return;
-			goToUrl(`${$page.url.pathname}${$page.url.search}`);
+			goToUrl(`${url.pathname}${url.search}`);
 		});
 	}
 

src/routes/page/users/+page.svelte

@@ -162,9 +162,9 @@
 		setUrlQueryParams($page.url, [
 			{ key: 'page', value: `${pager.page}` },
 			{ key: 'pageSize', value: `${pager.size}` }
-		], () => {
+		], (url) => {
 			if (!isPageMounted) return;
-			goToUrl(`${$page.url.pathname}${$page.url.search}`);
+			goToUrl(`${url.pathname}${url.search}`);
 		});
 	}