perspective - load hiearchic JSON

packages/web/src/perspectives/PerspectiveNodeRow.svelte

@@ -1,16 +1,20 @@
 <script lang="ts">
+  import { PerspectiveTreeNode } from 'dbgate-datalib';
+
   import ColumnLabel from '../elements/ColumnLabel.svelte';
   import { plusExpandIcon } from '../icons/expandIcons';
   import FontIcon from '../icons/FontIcon.svelte';
 
-  export let node;
+  export let node: PerspectiveTreeNode;
 </script>
 
 <div class="row">
   <span class="expandColumnIcon" style={`margin-right: ${5 + node.level * 10}px`}>
     <FontIcon
       icon={node.isExpandable ? plusExpandIcon(node.isExpanded) : 'icon invisible-box'}
-      on:click={() => node.toggleExpanded()}
+      on:click={() => {
+        node.toggleExpanded();
+      }}
     />
   </span>
 
@@ -24,9 +28,7 @@
       e.stopPropagation();
     }}
     on:change={() => {
-      const newValue = !node.isChecked;
-      // display.setColumnVisibility(column.uniquePath, newValue);
-      // dispatch('setvisibility', newValue);
+      node.toggleChecked();
     }}
   />
 

packages/web/src/perspectives/PerspectiveTable.svelte

@@ -0,0 +1,76 @@
+<script lang="ts">
+  import {
+    // groupPerspectiveLoadProps,
+    PerspectiveDataLoadProps,
+    PerspectiveDataLoadPropsWithNode,
+    PerspectiveTreeNode,
+  } from 'dbgate-datalib';
+  import _ from 'lodash';
+  import { onMount } from 'svelte';
+  import { prop_dev } from 'svelte/internal';
+
+  export let root: PerspectiveTreeNode;
+
+  async function loadLevelData(node: PerspectiveTreeNode, parentRows: any[]) {
+    // const loadProps: PerspectiveDataLoadPropsWithNode[] = [];
+    const loadChildNodes = [];
+    const loadChildRows = [];
+    const loadProps = node.getNodeLoadProps(parentRows);
+    console.log('LOADER', loadProps.pureName);
+    const rows = await node.loader(loadProps);
+    // console.log('ROWS', rows, node.isRoot);
+
+    if (node.isRoot) {
+      parentRows.push(...rows);
+      // console.log('PUSH PARENTROWS', parentRows);
+    } else {
+      for (const parentRow of parentRows) {
+        const childRows = rows.filter(row => node.matchChildRow(parentRow, row));
+        parentRow[node.codeName] = childRows;
+      }
+    }
+
+    for (const child of node.childNodes) {
+      if (child.isExpandable && child.isChecked) {
+        loadLevelData(child, rows);
+        // loadProps.push(child.getNodeLoadProps());
+      }
+    }
+
+    //   loadProps.push({
+    //     props: node.getNodeLoadProps(parentRows),
+    //     node,
+    //   });
+
+    // const grouped = groupPerspectiveLoadProps(...loadProps);
+    // for (const item of grouped) {
+    //   const rows = await item.node.loader(item.props);
+    //   if (item.node.isRoot) {
+    //     parentRows.push(...rows);
+    //   } else {
+    //     const childRows = rows.filter(row => node.matchChildRow(row));
+    //   }
+    // }
+  }
+
+  async function loadData(node: PerspectiveTreeNode) {
+    // console.log('LOADING', node);
+    if (!node) return;
+    const rows = [];
+    await loadLevelData(node, rows);
+    console.log('RESULT', rows);
+    // const rows = await node.loadLevelData();
+    // for (const child of node.childNodes) {
+    //   const loadProps = [];
+    //   if (child.isExpandable && child.isChecked) {
+    //     loadProps.push(child.getNodeLoadProps());
+    //   }
+    // }
+  }
+
+  $: loadData(root);
+</script>
+
+<table>
+  <tr><td>xxx</td></tr>
+</table>

packages/web/src/perspectives/PerspectiveTree.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import PerspectiveNodeRow from './PerspectiveNodeRow.svelte';
 
-  export let nodes = [];
+  export let root;
 
   function processFlatColumns(res, columns) {
     for (const col of columns) {
@@ -12,13 +12,13 @@
     }
   }
 
-  function getFlatColumns(columns) {
+  function getFlatColumns(root) {
     const res = [];
-    processFlatColumns(res, columns);
+    processFlatColumns(res, root?.childNodes || []);
     return res;
   }
 </script>
 
-{#each getFlatColumns(nodes) as node}
+{#each getFlatColumns(root) as node}
   <PerspectiveNodeRow {node} />
 {/each}

packages/web/src/perspectives/PerspectiveView.svelte

@@ -1,5 +1,10 @@
 <script lang="ts">
-  import { getTableChildPerspectiveNodes, PerspectiveTableColumnNode } from 'dbgate-datalib';
+  import {
+    getTableChildPerspectiveNodes,
+    PerspectiveDataLoadProps,
+    PerspectiveTableColumnNode,
+    PerspectiveTableNode,
+  } from 'dbgate-datalib';
 
   import _ from 'lodash';
 
@@ -10,7 +15,9 @@
   import WidgetColumnBar from '../widgets/WidgetColumnBar.svelte';
   import WidgetColumnBarItem from '../widgets/WidgetColumnBarItem.svelte';
   import PerspectiveTree from './PerspectiveTree.svelte';
-  import PerspectiveCore from './PerspectiveCore.svelte';
+  import PerspectiveTable from './PerspectiveTable.svelte';
+  import { apiCall } from '../utility/api';
+  import { Select } from 'dbgate-sqltree';
 
   export let conid;
   export let database;
@@ -39,36 +46,70 @@
   // $: console.log('tableInfo', $tableInfo);
   // $: console.log('viewInfo', $viewInfo);
 
-  function getTableNodes(table, dbInfo, config, setConfig) {
-    return getTableChildPerspectiveNodes(table, dbInfo, config, setConfig, null);
+  // 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;
+
+  async function loader(props: PerspectiveDataLoadProps) {
+    const { schemaName, pureName, bindingColumns, bindingValues } = props;
+    const select: Select = {
+      commandType: 'select',
+      from: {
+        name: { schemaName, pureName },
+      },
+      selectAll: true,
+    };
+    if (bindingColumns?.length == 1) {
+      select.where = {
+        conditionType: 'in',
+        expr: {
+          exprType: 'column',
+          columnName: bindingColumns[0],
+          source: {
+            name: { schemaName, pureName },
+          },
+        },
+        values: bindingValues,
+      };
+    }
+    const response = await apiCall('database-connections/sql-select', {
+      conid,
+      database,
+      select,
+    });
+
+    if (response.errorMessage) return response;
+    return response.rows;
   }
 
-  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;
+  $: root = $tableInfo ? new PerspectiveTableNode($tableInfo, $dbInfo, config, setConfig, loader as any, null) : 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 root}
+          <PerspectiveTree {root} />
         {/if}
       </WidgetColumnBarItem>
     </WidgetColumnBar>
   </div>
 
   <svelte:fragment slot="2">
-    <PerspectiveCore />
+    <PerspectiveTable {root} />
   </svelte:fragment>
 </HorizontalSplitter>