columns in tables list

packages/web/src/appobj/AppObjectCore.svelte

@@ -23,7 +23,7 @@
 
 <div class="main" class:isBold draggable on:click use:contextMenu={menu}>
   {#if expandIcon}
-    <span class="expand-icon" on:click={handleExpand}>
+    <span class="expand-icon" on:click|stopPropagation={handleExpand}>
       <FontIcon icon={expandIcon} />
     </span>
   {/if}

packages/web/src/appobj/AppObjectGroup.svelte

@@ -1,4 +1,8 @@
 <script>
+  import { plusExpandIcon } from '../icons/expandIcons';
+
+  import FontIcon from '../icons/FontIcon.svelte';
+
   import AppObjectListItem from './AppObjectListItem.svelte';
 
   export let group;
@@ -12,13 +16,17 @@
 </script>
 
 <div class="group" on:click={() => (isExpanded = !isExpanded)}>
+  <span class="expand-icon">
+    <FontIcon icon={plusExpandIcon(isExpanded)} />
+  </span>
+
   {group}
   {items && `(${countText})`}
 </div>
 
 {#if isExpanded}
   {#each filtered as item (module.extractKey(item.data))}
-    <AppObjectListItem {module} data={item.data} on:objectClick />
+    <AppObjectListItem {...$$restProps} {module} data={item.data} on:objectClick />
   {/each}
 {/if}
 
@@ -34,4 +42,7 @@
   .group:hover {
     background-color: var(--theme-bg-hover);
   }
+  .expand-icon {
+    margin-right: 3px;
+  }
 </style>

packages/web/src/appobj/AppObjectList.svelte

@@ -10,6 +10,7 @@
   export let expandOnClick = false;
   export let isExpandable = undefined;
   export let filter;
+  export let expandIconFunc = undefined;
 
   export let groupFunc = undefined;
 
@@ -35,10 +36,18 @@
 
 {#if groupFunc}
   {#each _.keys(groups) as group (group)}
-    <AppObjectGroup {group} {module} items={groups[group]} />
+    <AppObjectGroup {group} {module} items={groups[group]} {expandIconFunc} {isExpandable} {subItemsComponent} />
   {/each}
 {:else}
   {#each filtered as data (module.extractKey(data))}
-    <AppObjectListItem {module} {subItemsComponent} {expandOnClick} {data} {isExpandable} on:objectClick />
+    <AppObjectListItem
+      {module}
+      {subItemsComponent}
+      {expandOnClick}
+      {data}
+      {isExpandable}
+      on:objectClick
+      {expandIconFunc}
+    />
   {/each}
 {/if}

packages/web/src/appobj/AppObjectListItem.svelte

@@ -26,6 +26,10 @@
     }
   }
 
+  function handleExpandButton() {
+    isExpanded = !isExpanded;
+  }
+
   $: expandable = data && isExpandable && isExpandable(data);
 
   $: if (!expandable && isExpanded) isExpanded = false;
@@ -35,7 +39,7 @@
   this={module.default}
   {data}
   on:click={handleExpand}
-  on:expand={handleExpand}
+  on:expand={handleExpandButton}
   expandIcon={getExpandIcon(expandable, subItemsComponent, isExpanded, expandIconFunc)}
 />
 

packages/web/src/appobj/ColumnAppObject.svelte

@@ -0,0 +1,22 @@
+<script lang="ts" context="module">
+  export const extractKey = ({ columnName }) => columnName;
+</script>
+
+<script lang="ts">
+  import { getColumnIcon } from '../datagrid/ColumnLabel.svelte';
+
+  import AppObjectCore from './AppObjectCore.svelte';
+
+  export let data;
+
+  $: extInfo = data.foreignKey ? `${data.dataType} -> ${data.foreignKey.refTableName}` : data.dataType;
+</script>
+
+<AppObjectCore
+  {...$$restProps}
+  {data}
+  title={data.columnName}
+  {extInfo}
+  icon={getColumnIcon(data, true)}
+  disableHover
+/>

packages/web/src/appobj/DatabaseObjectAppObject.svelte

@@ -42,4 +42,5 @@
   title={data.schemaName ? `${data.schemaName}.${data.pureName}` : data.pureName}
   icon={icons[data.objectTypeField]}
   on:click={handleClick}
+  on:expand
 />

packages/web/src/appobj/SubColumnParamList.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import { findForeignKeyForColumn } from 'dbgate-tools';
+
+  import AppObjectList from './AppObjectList.svelte';
+  import * as columnAppObject from './ColumnAppObject.svelte';
+
+  export let data;
+</script>
+
+<AppObjectList
+  list={(data.columns || []).map(col => ({
+    ...col,
+    foreignKey: findForeignKeyForColumn(data, col),
+  }))}
+  module={columnAppObject}
+/>

packages/web/src/widgets/SqlObjectList.svelte

@@ -7,7 +7,8 @@
   import AppObjectList from '../appobj/AppObjectList.svelte';
   import _ from 'lodash';
   import * as databaseObjectAppObject from '../appobj/DatabaseObjectAppObject.svelte';
-  import { currentDatabase } from '../stores';
+  import SubColumnParamList from '../appobj/SubColumnParamList.svelte';
+  import { chevronExpandIcon } from '../icons/expandIcons';
 
   export let conid;
   export let database;
@@ -28,7 +29,7 @@
 </script>
 
 <SearchBoxWrapper>
-  <SearchInput placeholder="Search connection" bind:value={filter} />
+  <SearchInput placeholder="Search tables or objects" bind:value={filter} />
   <InlineButton>Refresh</InlineButton>
 </SearchBoxWrapper>
 <WidgetsInnerContainer>
@@ -36,6 +37,9 @@
     list={objectList.map(x => ({ ...x, conid, database }))}
     module={databaseObjectAppObject}
     groupFunc={data => _.startCase(data.objectTypeField)}
+    subItemsComponent={SubColumnParamList}
+    isExpandable={data => data.objectTypeField == 'tables' || data.objectTypeField == 'views'}
+    expandIconFunc={chevronExpandIcon}
     {filter}
   />
 </WidgetsInnerContainer>