better search UX

This commit is contained in:
Jan Prochazka
2021-09-26 19:54:18 +02:00
parent 34fce0ef58
commit f85460cce8
3 changed files with 19 additions and 2 deletions

View File

@@ -25,6 +25,15 @@
}) })
: null; : null;
$: childrenMatched = !groupFunc
? list.filter(data => {
const matcher = module.createChildMatcher && module.createChildMatcher(data);
if (matcher && !matcher(filter)) return false;
return true;
})
: null;
// let filtered = []; // let filtered = [];
// $: { // $: {
@@ -82,6 +91,7 @@
{checkedObjectsStore} {checkedObjectsStore}
{disableContextMenu} {disableContextMenu}
{filter} {filter}
isExpandedBySearch={childrenMatched.includes(data)}
/> />
{/each} {/each}
{/if} {/if}

View File

@@ -20,6 +20,7 @@
export let expandIconFunc = plusExpandIcon; export let expandIconFunc = plusExpandIcon;
export let checkedObjectsStore = null; export let checkedObjectsStore = null;
export let disableContextMenu = false; export let disableContextMenu = false;
export let isExpandedBySearch = false;
let isExpanded = false; let isExpanded = false;
@@ -45,13 +46,13 @@
{data} {data}
on:click={handleExpand} on:click={handleExpand}
on:expand={handleExpandButton} on:expand={handleExpandButton}
expandIcon={getExpandIcon(expandable, subItemsComponent, isExpanded, expandIconFunc)} expandIcon={getExpandIcon(!isExpandedBySearch && expandable, subItemsComponent, isExpanded, expandIconFunc)}
{checkedObjectsStore} {checkedObjectsStore}
{module} {module}
{disableContextMenu} {disableContextMenu}
/> />
{#if isExpanded && subItemsComponent} {#if (isExpanded || isExpandedBySearch) && subItemsComponent}
<div class="subitems"> <div class="subitems">
<svelte:component this={subItemsComponent} {data} {filter} /> <svelte:component this={subItemsComponent} {data} {filter} />
</div> </div>

View File

@@ -5,6 +5,12 @@
const databases = getLocalStorage(`database_list_${_id}`) || []; const databases = getLocalStorage(`database_list_${_id}`) || [];
return filterName(filter, displayName, server, ...databases.map(x => x.name)); return filterName(filter, displayName, server, ...databases.map(x => x.name));
}; };
export const createChildMatcher = props => filter => {
if (!filter) return false;
const { _id } = props;
const databases = getLocalStorage(`database_list_${_id}`) || [];
return filterName(filter, ...databases.map(x => x.name));
};
</script> </script>
<script lang="ts"> <script lang="ts">