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

Features/refine chat window

Author: iceljc

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

@@ -5,7 +5,7 @@
     gap: 15px;
     align-items: center;
 
-    @media (max-width: 576px) {
+    @media (max-width: 1024px) {
         flex-direction: column;
         justify-content: center;
         gap: 12px;
@@ -23,7 +23,7 @@
         gap: 10px;
         align-items: center;
 
-        @media (max-width: 576px) {
+        @media (max-width: 1024px) {
             width: 100%;
             flex-direction: column;
             gap: 8px;

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

@@ -61,10 +61,12 @@
 	/** @type {import('$commonTypes').LabelValuePair[]} */
 	let agentLabelOptions = [];
 
-	/** @type {string[]} */
-	let selectedAgentTypes = [];
-	/** @type {string[]} */
-	let selectedAgentLabels = [];
+	/** @type {{ name: string, types: string[], labels: string[] }} */
+	let searchItem = {
+		name: '',
+		types: [],
+		labels: []
+	};
 
 	onMount(async () => {
 		isPageMounted = true;
@@ -98,8 +100,8 @@
 					page: firstPage,
 					count: 0
 				},
-				types: selectedAgentTypes?.length > 0 ? selectedAgentTypes : null,
-				labels: selectedAgentLabels?.length > 0 ? selectedAgentLabels : null,
+				types: searchItem.types?.length > 0 ? searchItem.types : null,
+				labels: searchItem.labels?.length > 0 ? searchItem.labels : null,
 				similarName: event.payload?.trim() || null
 			};
 
@@ -221,17 +223,34 @@
 
 		getPagedAgents();
 	}
+
+	/** @param {any} e */
+	function changeSearchName(e) {
+		searchItem.name = e.target.value || '';
+		filter = {
+			...filter,
+			similarName: searchItem.name?.trim()
+		};
+	}
+
+	/** @param {any} e */
+	function searchKeyDown(e) {
+		if (e.key === 'Enter' && filter?.similarName) {
+			e.preventDefault();
+			search();
+		}
+	}
 	
 	/** @param {any} e */
 	function selectAgentTypeOption(e) {
 		// @ts-ignore
-		selectedAgentTypes = e.detail.selecteds?.map(x => x.label) || [];
+		searchItem.types = e.detail.selecteds?.map(x => x.label) || [];
 	}
 
 	/** @param {any} e */
 	function selectAgentLabelOption(e) {
 		// @ts-ignore
-		selectedAgentLabels = e.detail.selecteds?.map(x => x.label) || [];
+		searchItem.labels = e.detail.selecteds?.map(x => x.label) || [];
 	}
 
 	function search() {
@@ -241,8 +260,11 @@
 	}
 
 	function reset() {
-		selectedAgentTypes = [];
-		selectedAgentLabels = [];
+		searchItem = {
+			name: '',
+			types: [],
+			labels: []
+		};
 
 		filter = { ...initFilter };
 		getPagedAgents();
@@ -251,8 +273,8 @@
 	function refreshFilter() {
 		filter = {
 			...filter,
-			types: selectedAgentTypes?.length > 0 ? selectedAgentTypes : null,
-			labels: selectedAgentLabels?.length > 0 ? selectedAgentLabels : null,
+			types: searchItem.types?.length > 0 ? searchItem.types : null,
+			labels: searchItem.labels?.length > 0 ? searchItem.labels : null,
 			pager: initFilter.pager
 		};
 	}
@@ -285,16 +307,17 @@
 			type="text"
 			placeholder="Search by name"
 			style="width: fit-content;"
-			value={filter.similarName}
-			on:input={e => filter.similarName = e.target.value?.trim()}
+			value={searchItem.name}
+			on:input={e => changeSearchName(e)}
+			on:keydown={e => searchKeyDown(e)}
 		/>
 		<Select
 			tag={'agent-label-select'}
 			placeholder={'Select labels'}
 			selectedText={'labels'}
 			multiSelect
 			searchMode
-			selectedValues={selectedAgentLabels}
+			selectedValues={searchItem.labels}
 			options={agentLabelOptions}
 			on:select={e => selectAgentLabelOption(e)}
 		/>
@@ -304,7 +327,7 @@
 			selectedText={'types'}
 			multiSelect
 			searchMode
-			selectedValues={selectedAgentTypes}
+			selectedValues={searchItem.types}
 			options={agentTypeOptions}
 			on:select={e => selectAgentTypeOption(e)}
 		/>