perspectives WIP

packages/web/src/perspectives/PerspectiveColumnRow.svelte

@@ -0,0 +1,50 @@
+<script lang="ts">
+  import ColumnLabel from '../elements/ColumnLabel.svelte';
+  import { plusExpandIcon } from '../icons/expandIcons';
+  import FontIcon from '../icons/FontIcon.svelte';
+
+  export let column;
+</script>
+
+<div class="row">
+  <span class="expandColumnIcon" style={`margin-right: ${5 + column.level * 10}px`}>
+    <FontIcon
+      icon={column.isExpandable ? plusExpandIcon(column.isExpanded) : 'icon invisible-box'}
+      on:click={() => column.togglExpanded()}
+    />
+  </span>
+
+  <input
+    type="checkbox"
+    checked={column.isChecked}
+    on:click={e => {
+      e.stopPropagation();
+    }}
+    on:mousedown={e => {
+      e.stopPropagation();
+    }}
+    on:change={() => {
+      const newValue = !column.isChecked;
+      // display.setColumnVisibility(column.uniquePath, newValue);
+      // dispatch('setvisibility', newValue);
+    }}
+  />
+
+  <ColumnLabel {...column.props} showDataType />
+</div>
+
+<style>
+  .row {
+    margin-left: 5px;
+    margin-right: 5px;
+    cursor: pointer;
+    white-space: nowrap;
+  }
+  .row:hover {
+    background: var(--theme-bg-hover);
+  }
+
+  .row.isSelected {
+    background: var(--theme-bg-selected);
+  }
+</style>

packages/web/src/perspectives/PerspectiveColumns.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+  import { each } from 'svelte/internal';
+  import ColumnLabel from '../elements/ColumnLabel.svelte';
+  import PerspectiveColumnRow from './PerspectiveColumnRow.svelte';
+
+  export let columns = [];
+</script>
+
+{#each columns as column}
+  <PerspectiveColumnRow {column} />
+{/each}

packages/web/src/perspectives/PerspectiveView.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+  import { PerspectiveTableColumnDefinition } from 'dbgate-datalib';
+
   import _ from 'lodash';
 
   import HorizontalSplitter from '../elements/HorizontalSplitter.svelte';
@@ -15,6 +17,9 @@
   export let schemaName;
   export let pureName;
 
+  export let config;
+  export let setConfig;
+
   let managerSize;
 
   $: if (managerSize) setLocalStorage('perspectiveManagerWidth', managerSize);
@@ -30,15 +35,31 @@
   const tableInfo = useTableInfo({ conid, database, schemaName, pureName });
   const viewInfo = useViewInfo({ conid, database, schemaName, pureName });
 
-  $: console.log('tableInfo', $tableInfo);
-  $: console.log('viewInfo', $viewInfo);
+  // $: console.log('tableInfo', $tableInfo);
+  // $: console.log('viewInfo', $viewInfo);
+
+  function getTableColumns(table, config, setConfig) {
+    return table.columns.map(col => new PerspectiveTableColumnDefinition(col, table, config, setConfig));
+  }
+
+  function getViewColumns(view, config, setConfig) {
+    return [];
+  }
+
+  $: columns = $tableInfo
+    ? getTableColumns($tableInfo, config, setConfig)
+    : $viewInfo
+    ? getViewColumns($viewInfo, config, setConfig)
+    : null;
 </script>
 
 <HorizontalSplitter initialValue={getInitialManagerSize()} bind:size={managerSize}>
   <div class="left" slot="1">
     <WidgetColumnBar>
       <WidgetColumnBarItem title="Columns" name="columns" height="45%">
-        <PerspectiveColumns />
+        {#if columns}
+          <PerspectiveColumns {columns} />
+        {/if}
       </WidgetColumnBarItem>
     </WidgetColumnBar>
   </div>