app object module methods, search in connection list

packages/web/src/appobj/AppObjectList.svelte

@@ -2,13 +2,20 @@
   import AppObjectListItem from './AppObjectListItem.svelte';
 
   export let list;
-  export let component;
+  export let module;
   export let subItemsComponent = undefined;
   export let expandOnClick = false;
+  export let filter;
 
   export let groupFunc = undefined;
+
+  $: filtered = list.filter(data => {
+    const matcher = module.createMatcher && module.createMatcher(data);
+    if (matcher && !matcher(filter)) return false;
+    return true;
+  });
 </script>
 
-{#each list as data}
-  <AppObjectListItem {component} {subItemsComponent} {expandOnClick} {data} on:objectClick />
+{#each filtered as data}
+  <AppObjectListItem {module} {subItemsComponent} {expandOnClick} {data} on:objectClick />
 {/each}

packages/web/src/appobj/AppObjectListItem.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  export let component;
+  export let module;
   export let data;
   export let subItemsComponent;
   export let expandOnClick;
@@ -13,7 +13,7 @@
   }
 </script>
 
-<svelte:component this={component} {data} on:click={handleExpand} />
+<svelte:component this={module.default} {data} on:click={handleExpand} />
 
 {#if isExpanded && subItemsComponent}
   <svelte:component this={subItemsComponent} {data} />

packages/web/src/appobj/ConnectionAppObject.svelte

@@ -26,6 +26,9 @@
       },
     ];
   };
+
+  export const extractKey = data => data._id;
+  export const createMatcher = ({ displayName, server }) => filter => filterName(filter, displayName, server);
 </script>
 
 <script lang="ts">
@@ -33,6 +36,7 @@
   import AppObjectCore from './AppObjectCore.svelte';
   import { currentDatabase, extensions, openedConnections } from '../stores';
   import axios from '../utility/axios';
+  import { filterName } from 'dbgate-datalib';
 
   export let commonProps;
   export let data;

packages/web/src/appobj/SubDatabaseList.svelte

@@ -1,11 +1,11 @@
 <script lang="ts">
   import { useDatabaseList } from '../utility/metadataLoaders';
   import AppObjectList from './AppObjectList.svelte';
-  import DatabaseAppObject from './DatabaseAppObject.svelte';
+  import * as databaseAppObject from './DatabaseAppObject.svelte';
 
   export let data;
 
   $: databases = useDatabaseList({ conid: data._id });
 </script>
 
-<AppObjectList list={($databases || []).map(db => ({ ...db, connection: data }))} component={DatabaseAppObject} />
+<AppObjectList list={($databases || []).map(db => ({ ...db, connection: data }))} module={databaseAppObject} />

packages/web/src/widgets/ConnectionList.svelte

@@ -6,12 +6,14 @@
   import { useConnectionList, useServerStatus } from '../utility/metadataLoaders';
   import SearchBoxWrapper from './SearchBoxWrapper.svelte';
   import AppObjectList from '../appobj/AppObjectList.svelte';
-  import ConnectionAppObject from '../appobj/ConnectionAppObject.svelte';
+  import * as connectionAppObject from '../appobj/ConnectionAppObject.svelte';
   import SubDatabaseList from '../appobj/SubDatabaseList.svelte';
 
   const connections = useConnectionList();
   const serverStatus = useServerStatus();
 
+  let filter = '';
+
   $: connectionsWithStatus =
     $connections && $serverStatus
       ? $connections.map(conn => ({ ...conn, status: $serverStatus[conn._id] }))
@@ -19,14 +21,15 @@
 </script>
 
 <SearchBoxWrapper>
-  <SearchInput placeholder="Search connection" />
+  <SearchInput placeholder="Search connection" bind:value={filter} />
   <InlineButton>Refresh</InlineButton>
 </SearchBoxWrapper>
 <WidgetsInnerContainer>
   <AppObjectList
     list={_.sortBy(connectionsWithStatus, ({ displayName, server }) => (displayName || server || '').toUpperCase())}
-    component={ConnectionAppObject}
+    module={connectionAppObject}
     subItemsComponent={SubDatabaseList}
     expandOnClick
+    {filter}
   />
 </WidgetsInnerContainer>

packages/web/src/widgets/SearchInput.svelte

@@ -1,8 +1,26 @@
 <script lang="ts">
+  import keycodes from '../utility/keycodes';
+
   export let placeholder;
+  export let value;
+
+  let domInput;
+
+  function handleKeyDown(e) {
+    if (e.keyCode == keycodes.escape) {
+      value = '';
+    }
+  }
 </script>
 
-<input type="text" {placeholder} />
+<input
+  type="text"
+  {placeholder}
+  bind:value
+  on:keydown={handleKeyDown}
+  bind:this={domInput}
+  on:focus={e => domInput.select()}
+/>
 
 <style>
   input {

packages/web/src/widgets/SqlObjectList.svelte

@@ -6,7 +6,7 @@
   import SearchBoxWrapper from './SearchBoxWrapper.svelte';
   import AppObjectList from '../appobj/AppObjectList.svelte';
   import _ from 'lodash';
-  import DatabaseObjectAppObject from '../appobj/DatabaseObjectAppObject.svelte';
+  import * as databaseObjectAppObject from '../appobj/DatabaseObjectAppObject.svelte';
   import { currentDatabase } from '../stores';
 
   export let conid;
@@ -30,5 +30,5 @@
   <InlineButton>Refresh</InlineButton>
 </SearchBoxWrapper>
 <WidgetsInnerContainer>
-  <AppObjectList list={objectList.map(x => ({ ...x, conid, database }))} component={DatabaseObjectAppObject} />
+  <AppObjectList list={objectList.map(x => ({ ...x, conid, database }))} module={databaseObjectAppObject} />
 </WidgetsInnerContainer>