tabs panel

packages/web/public/dimensions.css

@@ -2,4 +2,6 @@
   --dim-widget-icon-size: 50px;
   --dim-statusbar-height: 20px;
   --dim-left-panel-width: 300px;
+  --dim-tabs-panel-height: 53px;
+  --dim-splitter-thickness: 3px;
 }

packages/web/src/Screen.svelte

@@ -2,6 +2,7 @@
   import WidgetContainer from './widgets/WidgetContainer.svelte';
   import WidgetIconPanel from './widgets/WidgetIconPanel.svelte';
   import { selectedWidget } from './stores';
+  import TabsPanel from './widgets/TabsPanel.svelte';
 </script>
 
 <div class="theme-light">
@@ -14,6 +15,9 @@
       <WidgetContainer />
     </div>
   {/if}
+  <div class="tabs">
+    <TabsPanel />
+  </div>
 </div>
 
 <style>
@@ -42,4 +46,19 @@
     background-color: var(--theme-bg-2);
     display: flex;
   }
+  .tabs {
+    display: flex;
+    position: fixed;
+    top: 0;
+    left: calc(var(--dim-widget-icon-size) + var(--dim-left-panel-width) + var(--dim-splitter-thickness));
+    height: var(--dim-tabs-panel-height);
+    right: 0;
+    background-color: var(--theme-bg-2);
+    border-top: 1px solid var(--theme-border);
+
+    overflow-x: auto;
+  }
+  .tabs::-webkit-scrollbar {
+    height: 7px;
+  }
 </style>

packages/web/src/appobj/DatabaseObjectAppObject.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+  import _ from 'lodash';
+  import AppObjectCore from './AppObjectCore.svelte';
+  import { currentDatabase, openedConnections } from '../stores';
+  import openNewTab from '../utility/openNewTab';
+
+  export let commonProps;
+  export let data;
+
+  const icons = {
+    tables: 'img table',
+    views: 'img view',
+    procedures: 'img procedure',
+    functions: 'img function',
+  };
+
+  function handleClick() {
+    const { schemaName, pureName, conid, database, objectTypeField } = data;
+    openNewTab({
+      title: data.pureName,
+      icon: 'icon table',
+      tabComponent: 'TableDataTab',
+      props: {
+        schemaName,
+        pureName,
+        conid,
+        database,
+        objectTypeField,
+      },
+    });
+  }
+</script>
+
+<AppObjectCore
+  {...commonProps}
+  {data}
+  title={data.schemaName ? `${data.schemaName}.${data.pureName}` : data.pureName}
+  icon={icons[data.objectTypeField]}
+  on:click={handleClick}
+/>

packages/web/src/stores.ts

@@ -3,5 +3,6 @@ import { writable } from 'svelte/store';
 export const selectedWidget = writable('database');
 export const openedConnections = writable([]);
 export const currentDatabase = writable(null);
+export const openedTabs = writable([]);
 
 // export const leftPanelWidth = writable(300);

packages/web/src/utility/openNewTab.ts

@@ -0,0 +1,15 @@
+import uuidv1 from 'uuid/v1';
+import { openedTabs } from '../stores';
+
+export default async function openNewTab(newTab, initialData = undefined, options = undefined) {
+  console.log('OPENING NEW TAB', newTab);
+  const tabid = uuidv1();
+  openedTabs.update(tabs => [
+    ...(tabs || []).map(x => ({ ...x, selected: false })),
+    {
+      tabid,
+      selected: true,
+      ...newTab,
+    },
+  ]);
+}

packages/web/src/widgets/DatabaseWidget.svelte

@@ -1,5 +1,6 @@
  <script lang="ts">
   import ConnectionList from './ConnectionList.svelte';
+import SqlObjectListWrapper from './SqlObjectListWrapper.svelte';
 
   import WidgetColumnBar from './WidgetColumnBar.svelte';
   import WidgetColumnBarItem from './WidgetColumnBarItem.svelte';
@@ -10,7 +11,6 @@
     <ConnectionList />
   </WidgetColumnBarItem>
   <WidgetColumnBarItem title="Tables, views, functions" name="dbObjects">
-    TABLES
+    <SqlObjectListWrapper /> 
-    <!-- <SqlObjectListWrapper /> -->
   </WidgetColumnBarItem>
 </WidgetColumnBar>

packages/web/src/widgets/SqlObjectList.svelte

@@ -4,6 +4,10 @@
   import WidgetsInnerContainer from './WidgetsInnerContainer.svelte';
   import { useDatabaseInfo, useDatabaseStatus } from '../utility/metadataLoaders';
   import SearchBoxWrapper from './SearchBoxWrapper.svelte';
+  import AppObjectList from '../appobj/AppObjectList.svelte';
+  import _ from 'lodash';
+  import DatabaseObjectAppObject from '../appobj/DatabaseObjectAppObject.svelte';
+  import { currentDatabase } from '../stores';
 
   export let conid;
   export let database;
@@ -11,11 +15,20 @@
   $: objects = useDatabaseInfo({ conid, database });
   $: status = useDatabaseStatus({ conid, database });
 
-  $: console.log('objects', $objects);
+  $: objectList = _.flatten(
+    ['tables', 'views', 'procedures', 'functions'].map(objectTypeField =>
+      _.sortBy(
+        (($objects || {})[objectTypeField] || []).map(obj => ({ ...obj, objectTypeField })),
+        ['schemaName', 'pureName']
+      )
+    )
+  );
 </script>
 
 <SearchBoxWrapper>
   <SearchInput placeholder="Search connection" />
   <InlineButton>Refresh</InlineButton>
 </SearchBoxWrapper>
-<WidgetsInnerContainer>CONNECTIONS</WidgetsInnerContainer>
+<WidgetsInnerContainer>
+  <AppObjectList list={objectList.map(x => ({ ...x, conid, database }))} component={DatabaseObjectAppObject} />
+</WidgetsInnerContainer>

packages/web/src/widgets/SqlObjectListWrapper.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+  import _ from 'lodash';
+  import { currentDatabase } from '../stores';
+  import SqlObjectList from './SqlObjectList.svelte';
+  import WidgetsInnerContainer from './WidgetsInnerContainer.svelte';
+
+  $: conid = _.get($currentDatabase, 'connection._id');
+  $: database = _.get($currentDatabase, 'name');
+</script>
+
+{#if conid && database}
+  <SqlObjectList {conid} {database} />
+{:else}
+  <WidgetsInnerContainer>Database not selected</WidgetsInnerContainer>
+{/if}

packages/web/src/widgets/TabsPanel.svelte

@@ -0,0 +1,123 @@
+<script lang="ts" context="module">
+  function getTabDbName(tab) {
+    if (tab.props && tab.props.conid && tab.props.database) return tab.props.database;
+    if (tab.props && tab.props.archiveFolder) return tab.props.archiveFolder;
+    return '(no DB)';
+  }
+
+  function getTabDbKey(tab) {
+    if (tab.props && tab.props.conid && tab.props.database)
+      return `database://${tab.props.database}-${tab.props.conid}`;
+    if (tab.props && tab.props.archiveFolder) return `archive://${tab.props.archiveFolder}`;
+    return '_no';
+  }
+
+  function getDbIcon(key) {
+    if (key.startsWith('database://')) return 'icon database';
+    if (key.startsWith('archive://')) return 'icon archive';
+    return 'icon file';
+  }
+</script>
+
+<script lang="ts">
+  import _ from 'lodash';
+  import FontIcon from '../icons/FontIcon.svelte';
+
+  import { currentDatabase, openedTabs } from '../stores';
+
+  $: currentDbKey =
+    $currentDatabase && $currentDatabase.name && $currentDatabase.connection
+      ? `database://${$currentDatabase.name}-${$currentDatabase.connection._id}`
+      : '_no';
+
+  $: tabsWithDb = $openedTabs
+    .filter(x => !x.closedTime)
+    .map(tab => ({
+      ...tab,
+      tabDbName: getTabDbName(tab),
+      tabDbKey: getTabDbKey(tab),
+    }));
+
+  $: tabsByDb = _.groupBy(tabsWithDb, 'tabDbKey');
+  $: dbKeys = _.keys(tabsByDb).sort();
+</script>
+
+{#each dbKeys as dbKey}
+  <div class="db-wrapper">
+    <div class="db-name" class:selected={tabsByDb[dbKey][0].tabDbKey == currentDbKey}>
+      <FontIcon icon={getDbIcon(dbKey)} />
+      {tabsByDb[dbKey][0].tabDbName}
+    </div>
+    <div class="db-group">
+      {#each _.sortBy(tabsByDb[dbKey], ['title', 'tabid']) as tab}
+        <div class="file-tab-item" class:selected={tab.selected}>
+          <FontIcon icon={tab.busy ? 'icon loading' : tab.icon} />
+          <span class="file-name">
+            {tab.title}
+          </span>
+          <span class="close-button tabCloseButton">
+            <FontIcon icon="icon close" />
+          </span>
+        </div>
+      {/each}
+    </div>
+  </div>
+{/each}
+
+<style>
+  .db-group {
+    display: flex;
+    flex: 1;
+    align-content: stretch;
+  }
+  .db-wrapper {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+  }
+  .db-name {
+    text-align: center;
+    font-size: 8pt;
+    border-bottom: 1px solid var(--theme-border);
+    border-right: 1px solid var(--theme-border);
+    cursor: pointer;
+    user-select: none;
+    padding: 1px;
+    position: relative;
+    white-space: nowrap;
+
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .db-name:hover {
+    background-color: var(--theme-bg-3);
+  }
+  .db-name.selected {
+    background-color: var(--theme-bg-1);
+  }
+  .file-tab-item {
+    border-right: 1px solid var(--theme-border);
+    padding-left: 15px;
+    padding-right: 15px;
+    flex-shrink: 1;
+    flex-grow: 1;
+    min-width: 10px;
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+    user-select: none;
+  }
+  .file-tab-item.selected {
+    background-color: var(--theme-bg-1);
+  }
+  .file-name {
+    margin-left: 5px;
+  }
+  .close-button {
+    margin-left: 5px;
+    color: var(--theme-font-3);
+  }
+  .close-button:hover {
+    color: var(--theme-font-1);
+  }
+</style>