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 isBold = false;
-  export let extInfo;
+  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} />

packages/web/src/widgets/ConnectionList.svelte

@@ -7,6 +7,7 @@
   import SearchBoxWrapper from './SearchBoxWrapper.svelte';
   import AppObjectList from '../appobj/AppObjectList.svelte';
   import ConnectionAppObject from '../appobj/ConnectionAppObject.svelte';
+  import SubDatabaseList from '../appobj/SubDatabaseList.svelte';
 
   const connections = useConnectionList();
   const serverStatus = useServerStatus();
@@ -25,5 +26,7 @@
   <AppObjectList
     list={_.sortBy(connectionsWithStatus, ({ displayName, server }) => (displayName || server || '').toUpperCase())}
     component={ConnectionAppObject}
+    subItemsComponent={SubDatabaseList}
+    expandOnClick
   />
 </WidgetsInnerContainer>

packages/web/src/widgets/InlineButton.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-  export let disabled;
+  export let disabled = false;
-  export let square;
+  export let square = false;
 </script>
 
 <div class="outer buttonLike" class:disabled class:square>