Merge pull request #264 from iceljc/features/refine-chat-window

add plugin search

Author: iceljc

src/lib/helpers/types/pluginTypes.js

@@ -22,6 +22,7 @@
 /**
  * @typedef {Object} PluginFilter
  * @property {import('$commonTypes').Pagination} pager - Pagination
+ * @property {string[]} [names] - The plugin names
  */
 
 export default {};

src/lib/scss/custom/pages/_chat.scss

@@ -89,6 +89,7 @@
             flex: 0 0 fit-content;
             flex-direction: column;
             height: 100%;
+            gap: 5px;
 
             .chat-head-agent {
                 flex: 0.5;
@@ -108,6 +109,7 @@
                 display: flex;
                 gap: 5px;
                 width: fit-content;
+                font-size: 12px;
             }
         }
     }

src/lib/services/plugin-service.js

@@ -11,7 +11,8 @@ export async function getPlugins(filter) {
     let url = endpoints.pluginListUrl;
     const response = await axios.get(url, { params: filter,
         paramsSerializer: {
-            dots: true
+            dots: true,
+            indexes: null
         }
     });
     return response.data;

src/routes/VerticalLayout/Sidebar.svelte

@@ -201,8 +201,7 @@
 		return path?.startsWith('/') ? path.substring(1) : path;
 	};
 
-	/** @param {string} link */
-	const goToPage = (link) => {
+	const goToPage = () => {
 		globalEventStore.reset();
 	}
 </script>
@@ -231,19 +230,19 @@
 											</Link>
 											<ul class="sub-menu mm-collapse">
 												{#each subMenu.childItems as childItem}
-													<li><Link href={childItem.link} on:click={() => goToPage(childItem.link)}>{$_(childItem.label)}</Link></li>
+													<li><Link href={childItem.link} on:click={() => goToPage()}>{$_(childItem.label)}</Link></li>
 												{/each}
 											</ul>
 										</li>
 									{:else}
-										<li><Link href={subMenu.link} on:click={() => goToPage(subMenu.link)}>{$_(subMenu.label)}</Link></li>
+										<li><Link href={subMenu.link} on:click={() => goToPage()}>{$_(subMenu.label)}</Link></li>
 									{/if}
 								{/each}
 							</ul>
 						</li>
 					{:else}
 						<li>
-							<Link class="waves-effect" href={item.link} on:click={() => goToPage(item.link)} >
+							<Link class="waves-effect" href={item.link} on:click={() => goToPage()} >
 								<i class={item.icon} /> <span>{$_(item.label)}</span>
 							</Link>
 						</li>

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

@@ -2,11 +2,13 @@
 	import Breadcrumb from '$lib/common/Breadcrumb.svelte';
 	import HeadTitle from '$lib/common/HeadTitle.svelte';
 	import Plugins from './plugin-list.svelte';
-    import { onMount } from 'svelte';
+    import { onDestroy, onMount } from 'svelte';
     import { getPlugins } from '$lib/services/plugin-service';
 	import { PUBLIC_PLUGIN_DEFAULT_ICON } from '$env/static/public';
 	import PlainPagination from '$lib/common/PlainPagination.svelte';
 	import { _ } from 'svelte-i18n';
+	import { globalEventStore } from '$lib/helpers/store';
+	import { GlobalEvent } from '$lib/helpers/enums';
 
 	const firstPage = 1;
 	const pageSize = 12;
@@ -25,10 +27,28 @@
 	/** @type {import('$commonTypes').Pagination} */
 	let pager = filter.pager;
 
+	/** @type {any} */
+	let unsubscriber;
+
     onMount(async () => {
 		await getPagedPlugins();
+
+		unsubscriber = globalEventStore.subscribe((/** @type {import('$commonTypes').GlobalEvent} */ event) => {
+			if (event.name !== GlobalEvent.Search) return;
+
+			const names = event.payload ? [event.payload] : undefined;
+			filter = {
+				pager: { page: firstPage, size: pageSize, count: 0 },
+				names: names
+			};
+			getPagedPlugins();
+		});
     });
 
+	onDestroy(() => {
+		unsubscriber?.();
+	});
+
 	async function getPagedPlugins() {
 		plugins = await getPlugins(filter);
 		refresh();