view table list in database widget

packages/web/src/appobj/AppObjectCore.svelte

@@ -1,18 +1,19 @@
 <script lang="ts">
   import FontIcon from '../icons/FontIcon.svelte';
 
-  export let isBold;
-  export let prefix;
   export let icon;
-  export let isBusy;
   export let title;
-  export let statusIcon;
-  export let statusTitle;
-  export let extInfo;
+
+  export let isBold = false;
+  export let prefix = '';
+  export let isBusy = false;
+  export let statusIcon = undefined;
+  export let statusTitle = undefined;
+  export let extInfo = undefined;
 </script>
 
 <div class="main" class:isBold draggable on:click>
-  {prefix || ''}
+  {prefix}
   {#if isBusy}
     <FontIcon icon="icon loading" />
   {:else}
@@ -41,7 +42,6 @@
   }
   .main:hover {
     background-color: var(--theme-bg-hover);
-
   }
   .isBold {
     font-weight: bold;

packages/web/src/appobj/AppObjectList.svelte

@@ -1,11 +1,14 @@
 <script lang="ts">
   import AppObjectListItem from './AppObjectListItem.svelte';
 
-  export let groupFunc;
   export let list;
   export let component;
+  export let subItemsComponent = undefined;
+  export let expandOnClick = false;
+
+  export let groupFunc = undefined;
 </script>
 
 {#each list as data}
-  <AppObjectListItem {component} {data} />
+  <AppObjectListItem {component} {subItemsComponent} {expandOnClick} {data} on:objectClick />
 {/each}

packages/web/src/appobj/AppObjectListItem.svelte

@@ -1,8 +1,20 @@
 <script lang="ts">
   export let component;
   export let data;
+  export let subItemsComponent;
+  export let expandOnClick;
 
   let isExpanded = false;
+
+  function handleExpand() {
+    if (subItemsComponent && expandOnClick) {
+      isExpanded = !isExpanded;
+    }
+  }
 </script>
 
-<svelte:component this={component} {data} />
+<svelte:component this={component} {data} on:click={handleExpand} />
+
+{#if isExpanded && subItemsComponent}
+  <svelte:component this={subItemsComponent} {data} />
+{/if}

packages/web/src/appobj/ConnectionAppObject.svelte

@@ -31,5 +31,6 @@
   isBold={_.get($currentDatabase, 'connection._id') == data._id}
   statusIcon={statusIcon}
   statusTitle={statusTitle}
+  on:click
   on:click={() => ($openedConnections = _.uniq([...$openedConnections, data._id]))}
 />

packages/web/src/appobj/DatabaseAppObject.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+  import _ from 'lodash';
+
+  import { currentDatabase } from '../stores';
+
+  import AppObjectCore from './AppObjectCore.svelte';
+
+  export let data;
+  export let commonProps;
+</script>
+
+<AppObjectCore
+  {...commonProps}
+  {data}
+  title={data.name}
+  icon="img database"
+  isBold={_.get($currentDatabase, 'connection._id') == _.get(data.connection, '_id') &&
+    _.get($currentDatabase, 'name') == data.name}
+  on:click={() => ($currentDatabase = data)}
+/>

packages/web/src/appobj/SubDatabaseList.svelte

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