refine dropdown

Author: Jicheng Lu

src/lib/common/MultiSelect.svelte

@@ -8,7 +8,7 @@
     /** @type {string} */
     export let tag;
 
-    /** @type {{key: string, value: string}[]} */
+    /** @type {import('$commonTypes').LabelValuePair[]} */
     export let options = [];
 
     /** @type {boolean} */
@@ -24,7 +24,7 @@
     export let selectedText = '';
 
     /** @type {string[]} */
-    export let selectedKeys;
+    export let selectedLabels;
 
     /** @type {string} */
     export let containerClasses = "";
@@ -51,10 +51,10 @@
     /** @type {boolean} */
     let showOptionList = false;
 
-    /** @type {{key: string, value: string, checked: boolean}[]} */
+    /** @type {{label: string, value: string, checked: boolean}[]} */
     let innerOptions = [];
 
-    /** @type {{key: string, value: string, checked: boolean}[]} */
+    /** @type {{label: string, value: string, checked: boolean}[]} */
     let refOptions = [];
 
     /** @type {string} */
@@ -66,15 +66,15 @@
     onMount(() => {
         innerOptions = options.map(x => {
             return {
-                key: x.key,
+                label: x.label,
                 value: x.value,
                 checked: false
             }
         });
 
         refOptions = options.map(x => {
             return {
-                key: x.key,
+                label: x.label,
                 value: x.value,
                 checked: false
             }
@@ -83,22 +83,22 @@
 
     $: {
         innerOptions = innerOptions.map(x => {
-            x.checked = !!selectedKeys?.includes(x.key);
+            x.checked = !!selectedLabels?.includes(x.label);
             return {...x};
         });
         refOptions = refOptions.map(x => {
-            x.checked = !!selectedKeys?.includes(x.key);
+            x.checked = !!selectedLabels?.includes(x.label);
             return {...x};
         });
         changeDisplayText();
     }
 
     $: {
         if (options.length > refOptions.length) {
-            const curKeys = refOptions.map(x => x.key);
-            const newOptions = options.filter(x => !curKeys.includes(x.key)).map(x => {
+            const curKeys = refOptions.map(x => x.label);
+            const newOptions = options.filter(x => !curKeys.includes(x.label)).map(x => {
                 return {
-                    key: x.key,
+                    label: x.label,
                     value: x.value,
                     checked: false
                 };
@@ -147,14 +147,14 @@
 	 */
     function checkOption(e, option) {
         innerOptions = innerOptions.map(x => {
-            if (x.key == option.key) {
+            if (x.label == option.label) {
                 x.checked = e == null ? !x.checked : e.target.checked;
             }
             return { ...x };
         });
 
         refOptions = refOptions.map(x => {
-            if (x.key == option.key) {
+            if (x.label == option.label) {
                 x.checked = e == null ? !x.checked : e.target.checked;
             }
             return { ...x };
@@ -178,9 +178,9 @@
 
     /** @param {boolean} checked */
     function syncChangesToRef(checked) {
-        const keys = innerOptions.map(x => x.key);
+        const keys = innerOptions.map(x => x.label);
         refOptions = refOptions.map(x => {
-            if (keys.includes(x.key)) {
+            if (keys.includes(x.label)) {
                 return {
                     ...x,
                     checked: checked
@@ -229,7 +229,7 @@
 
     function sendEvent() {
         svelteDispatch("select", {
-            selecteds: refOptions.filter(x => !!x.checked).map(x => ({ key: x.key, value: x.value }))
+            selecteds: refOptions.filter(x => !!x.checked).map(x => ({ label: x.label, value: x.value }))
         });
     }
 
@@ -343,7 +343,7 @@
                             />
                         </div>
                         <div class="line-align-center select-name">
-                            {option.value}
+                            {option.label}
                         </div>
                     </li>
                 {/each}

src/lib/helpers/types/commonTypes.js

@@ -17,6 +17,12 @@
  * @property {string} name - The name.
  */
 
+/**
+ * @typedef {Object} LabelValuePair
+ * @property {string} label - The label.
+ * @property {string} value - The value.
+ */
+
 /**
  * @template T
  * @typedef {Object} PagedItems<T>

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

@@ -43,11 +43,12 @@
 	/** @type {any} */
 	let unsubscriber;
 
+	/** @type {import('$commonTypes').LabelValuePair[]} */
 	const agentTypeOptions = Object.entries(AgentType).map(([k, v]) => (
-		{ key: v, value: v }
-	));
+		{ label: v, value: v }
+	)).sort((a, b) => a.label.localeCompare(b.label));
 
-	/** @type {{ key: string, value: string }[]} */
+	/** @type {import('$commonTypes').LabelValuePair[]} */
 	let agentLabelOptions = [];
 
 	/** @type {string[]} */
@@ -91,7 +92,7 @@
 
 	function getAgentLabelOptions() {
 		return getAgentLabels().then(res => {
-			agentLabelOptions = res?.map(x => ({ key: x, value: x })) || [];
+			agentLabelOptions = res?.map(x => ({ label: x, value: x })) || [];
 		}).catch(() => {
 			agentLabelOptions = [];
 		});
@@ -166,13 +167,13 @@
 	/** @param {any} e */
 	function selectAgentTypeOption(e) {
 		// @ts-ignore
-		selectedAgentTypes = e.detail.selecteds?.map(x => x.key) || [];
+		selectedAgentTypes = e.detail.selecteds?.map(x => x.label) || [];
 	}
 
 	/** @param {any} e */
 	function selectAgentLabelOption(e) {
 		// @ts-ignore
-		selectedAgentLabels = e.detail.selecteds?.map(x => x.key) || [];
+		selectedAgentLabels = e.detail.selecteds?.map(x => x.label) || [];
 	}
 
 	function search() {
@@ -221,15 +222,16 @@
 			placeholder={'Select labels'}
 			selectedText={'labels'}
 			searchMode
-			selectedKeys={selectedAgentLabels}
+			selectedLabels={selectedAgentLabels}
 			options={agentLabelOptions}
 			on:select={e => selectAgentLabelOption(e)}
 		/>
 		<MultiSelect
 			tag={'agent-type-select'}
 			placeholder={'Select types'}
 			selectedText={'types'}
-			selectedKeys={selectedAgentTypes}
+			searchMode
+			selectedLabels={selectedAgentTypes}
 			options={agentTypeOptions}
 			on:select={e => selectAgentTypeOption(e)}
 		/>

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

@@ -215,11 +215,11 @@
     }
 
     /**
-     * @param {any[]} options
+     * @param {string[]} options
 	 * @param {string} placeholder
 	 */
     function getUtilityOptions(options, placeholder = '') {
-        let list = options?.map(x => {
+        let list = options?.sort((a, b) => a.localeCompare(b))?.map(x => {
             return {
                 label: x,
                 value: x
@@ -234,7 +234,7 @@
     }
 
     /** @param {number} uid */
-	function revertUtility(uid) {
+	function resetUtility(uid) {
 		const found = innerUtilities.find((_, index) => index === uid);
         if (!found) return;
 
@@ -338,8 +338,8 @@
                                                 class="mdi mdi-refresh clickable"
                                                 data-bs-toggle="tooltip"
                                                 data-bs-placement="top"
-                                                title="Revert"
-                                                on:click={() => revertUtility(uid)}
+                                                title="Reset"
+                                                on:click={() => resetUtility(uid)}
                                             />
                                         </div>
                                         {/if}