diff --git a/src/lib/scss/custom/pages/_agent.scss b/src/lib/scss/custom/pages/_agent.scss index f3b265c2..4172dee4 100644 --- a/src/lib/scss/custom/pages/_agent.scss +++ b/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; diff --git a/src/routes/page/agent/+page.svelte b/src/routes/page/agent/+page.svelte index 0207d057..3599e6f2 100644 --- a/src/routes/page/agent/+page.svelte +++ b/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,8 +307,9 @@ 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)} />