dbgate/packages/web/src/perspectives/PerspectiveView.svelte

<script lang="ts">
  import { getTableChildPerspectiveNodes, PerspectiveTableColumnNode } from 'dbgate-datalib';

  import _ from 'lodash';

  import HorizontalSplitter from '../elements/HorizontalSplitter.svelte';
  import { useDatabaseInfo, useTableInfo, useViewInfo } from '../utility/metadataLoaders';

  import { getLocalStorage, setLocalStorage } from '../utility/storageCache';
  import WidgetColumnBar from '../widgets/WidgetColumnBar.svelte';
  import WidgetColumnBarItem from '../widgets/WidgetColumnBarItem.svelte';
  import PerspectiveTree from './PerspectiveTree.svelte';
  import PerspectiveCore from './PerspectiveCore.svelte';

  export let conid;
  export let database;
  export let schemaName;
  export let pureName;

  export let config;
  export let setConfig;

  let managerSize;

  $: if (managerSize) setLocalStorage('perspectiveManagerWidth', managerSize);

  function getInitialManagerSize() {
    const width = getLocalStorage('perspectiveManagerWidth');
    if (_.isNumber(width) && width > 30 && width < 500) {
      return `${width}px`;
    }
    return '300px';
  }

  const dbInfo = useDatabaseInfo({ conid, database });
  const tableInfo = useTableInfo({ conid, database, schemaName, pureName });
  const viewInfo = useViewInfo({ conid, database, schemaName, pureName });

  // $: console.log('tableInfo', $tableInfo);
  // $: console.log('viewInfo', $viewInfo);

  function getTableNodes(table, dbInfo, config, setConfig) {
    return getTableChildPerspectiveNodes(table, dbInfo, config, setConfig, null);
  }

  function getViewNodes(view, dbInfo, config, setConfig) {
    return [];
  }

  // $: console.log('CFG', config);

  $: nodes = $tableInfo
    ? getTableNodes($tableInfo, $dbInfo, config, setConfig)
    : $viewInfo
    ? getViewNodes($viewInfo, $dbInfo, config, setConfig)
    : null;
</script>

<HorizontalSplitter initialValue={getInitialManagerSize()} bind:size={managerSize}>
  <div class="left" slot="1">
    <WidgetColumnBar>
      <WidgetColumnBarItem title="Choose data" name="perspectiveTree" height="45%">
        {#if nodes}
          <PerspectiveTree {nodes} />
        {/if}
      </WidgetColumnBarItem>
    </WidgetColumnBar>
  </div>

  <svelte:fragment slot="2">
    <PerspectiveCore />
  </svelte:fragment>
</HorizontalSplitter>

<style>
  .left {
    display: flex;
    flex: 1;
    background-color: var(--theme-bg-0);
  }
</style>