#172

packages/web/src/appobj/AppObjectList.svelte

@@ -1,5 +1,6 @@
 <script>
   import _ from 'lodash';
+  import { asyncFilter } from '../utility/common';
   import AppObjectGroup from './AppObjectGroup.svelte';
 
   import AppObjectListItem from './AppObjectListItem.svelte';
@@ -16,11 +17,27 @@
 
   export let groupFunc = undefined;
 
-  $: filtered = list.filter(data => {
-    const matcher = module.createMatcher && module.createMatcher(data);
-    if (matcher && !matcher(filter)) return false;
-    return true;
-  });
+  $: filtered = !groupFunc
+    ? list.filter(data => {
+        const matcher = module.createMatcher && module.createMatcher(data);
+        if (matcher && !matcher(filter)) return false;
+        return true;
+      })
+    : null;
+
+  // let filtered = [];
+
+  // $: {
+  //   if (!groupFunc) {
+  //     asyncFilter(list, async data => {
+  //       const matcher = module.createMatcher && module.createMatcher(data);
+  //       if (matcher && !(await matcher(filter))) return false;
+  //       return true;
+  //     }).then(res => {
+  //       filtered = res;
+  //     });
+  //   }
+  // }
 
   $: listGrouped = groupFunc
     ? _.compact(
@@ -34,7 +51,6 @@
     : null;
 
   $: groups = groupFunc ? _.groupBy(listGrouped, 'group') : null;
-
 </script>
 
 {#if groupFunc}

packages/web/src/appobj/ConnectionAppObject.svelte

@@ -1,12 +1,16 @@
 <script context="module">
   export const extractKey = data => data._id;
-  export const createMatcher = ({ displayName, server }) => filter => filterName(filter, displayName, server);
+  export const createMatcher = props => filter => {
+    const { _id, displayName, server } = props;
+    const databases = getLocalStorage(`database_list_${_id}`) || [];
+    return filterName(filter, displayName, server, ...databases.map(x => x.name));
+  };
 </script>
 
 <script lang="ts">
   import _ from 'lodash';
   import AppObjectCore from './AppObjectCore.svelte';
-  import { currentDatabase, extensions, getCurrentConfig, openedConnections } from '../stores';
+  import { currentDatabase, extensions, getCurrentConfig, getOpenedConnections, openedConnections } from '../stores';
   import axiosInstance from '../utility/axiosInstance';
   import { filterName } from 'dbgate-tools';
   import { showModal } from '../modals/modalTools';
@@ -17,6 +21,8 @@
   import { getDatabaseMenuItems } from './DatabaseAppObject.svelte';
   import getElectron from '../utility/getElectron';
   import getConnectionLabel from '../utility/getConnectionLabel';
+  import { getDatabaseList } from '../utility/metadataLoaders';
+  import { getLocalStorage } from '../utility/storageCache';
 
   export let data;
 

packages/web/src/stores.ts

@@ -156,3 +156,9 @@ extensions.subscribe(value => {
   extensionsValue = value;
 });
 export const getExtensions = () => extensionsValue;
+
+let openedConnectionsValue = null;
+openedConnections.subscribe(value => {
+  openedConnectionsValue = value;
+});
+export const getOpenedConnections = () => openedConnectionsValue;

packages/web/src/utility/common.ts

@@ -32,3 +32,9 @@ export function getObjectTypeFieldLabel(objectTypeField) {
   if (objectTypeField == 'matviews') return 'Materialized Views';
   return _.startCase(objectTypeField);
 }
+
+export async function asyncFilter(arr, predicate) {
+  const results = await Promise.all(arr.map(predicate));
+
+  return arr.filter((_v, index) => results[index]);
+}

packages/web/src/utility/metadataLoaders.ts

@@ -8,6 +8,7 @@ import getAsArray from './getAsArray';
 import { DatabaseInfo } from 'dbgate-types';
 import { derived } from 'svelte/store';
 import { extendDatabaseInfo } from 'dbgate-tools';
+import { setLocalStorage } from '../utility/storageCache';
 
 const databaseInfoLoader = ({ conid, database }) => ({
   url: 'database-connections/structure',
@@ -74,6 +75,9 @@ const databaseListLoader = ({ conid }) => ({
   url: 'server-connections/list-databases',
   params: { conid },
   reloadTrigger: `database-list-changed-${conid}`,
+  onLoaded: value => {
+    if (value?.length > 0) setLocalStorage(`database_list_${conid}`, value);
+  },
 });
 
 const serverVersionLoader = ({ conid }) => ({
@@ -135,7 +139,7 @@ const authTypesLoader = ({ engine }) => ({
 });
 
 async function getCore(loader, args) {
-  const { url, params, reloadTrigger, transform } = loader(args);
+  const { url, params, reloadTrigger, transform, onLoaded } = loader(args);
   const key = stableStringify({ url, ...params });
 
   async function doLoad() {
@@ -144,7 +148,9 @@ async function getCore(loader, args) {
       url,
       params,
     });
-    return (transform || (x => x))(resp.data);
+    const res = (transform || (x => x))(resp.data);
+    if (onLoaded) onLoaded(res);
+    return res;
   }
 
   const fromCache = cacheGet(key);
@@ -156,7 +162,7 @@ async function getCore(loader, args) {
 }
 
 function useCore(loader, args) {
-  const { url, params, reloadTrigger, transform } = loader(args);
+  const { url, params, reloadTrigger, transform, onLoaded } = loader(args);
   const cacheKey = stableStringify({ url, ...params });
 
   return {
@@ -168,7 +174,9 @@ function useCore(loader, args) {
             params,
             url,
           });
-          return (transform || (x => x))(resp.data);
+          const res = (transform || (x => x))(resp.data);
+          if (onLoaded) onLoaded(res);
+          return res;
         }
 
         if (cacheKey) {

packages/web/src/utility/storageCache.js

@@ -0,0 +1,22 @@
+const cache = {};
+
+export function getLocalStorage(key) {
+  if (key in cache) return cache[key];
+  const item = localStorage.getItem(key);
+  if (item) {
+    const res = JSON.parse(item);
+    cache[key] = res;
+    return res;
+  }
+  return undefined;
+}
+
+export function setLocalStorage(key, value) {
+  localStorage.setItem(key, JSON.stringify(value));
+  delete cache[key];
+}
+
+export function removeLocalStorage(key) {
+  localStorage.removeItem(key);
+  delete cache[key];
+}