perspectives: render simple table

packages/datalib/src/PerspectiveDisplay.ts

@@ -0,0 +1,18 @@
+import { PerspectiveTableNode, PerspectiveTreeNode } from './PerspectiveTreeNode';
+
+export class PerspectiveDisplayColumn {
+  constructor(public label: string, public field: string) {}
+}
+
+export class PerspectiveDisplay {
+  columns: PerspectiveDisplayColumn[] = [];
+
+  constructor(public root: PerspectiveTreeNode, public rows: any[]) {
+    const children = root.childNodes;
+    for (const child of children) {
+      if (child.isChecked) {
+        this.columns.push(new PerspectiveDisplayColumn(child.title, child.codeName));
+      }
+    }
+  }
+}

packages/datalib/src/PerspectiveTreeNode.ts

@@ -7,6 +7,7 @@ import _cloneDeep from 'lodash/cloneDeep';
 export interface PerspectiveDataLoadProps {
   schemaName: string;
   pureName: string;
+  dataColumns: string[];
   bindingColumns?: string[];
   bindingValues?: any[][];
 }
@@ -128,6 +129,7 @@ export class PerspectiveTableColumnNode extends PerspectiveTreeNode {
       pureName: this.foreignKey.refTableName,
       bindingColumns: [this.foreignKey.columns[0].refColumnName],
       bindingValues: parentRows.map(row => row[this.foreignKey.columns[0].columnName]),
+      dataColumns: null,
     };
   }
 
@@ -178,6 +180,7 @@ export class PerspectiveTableNode extends PerspectiveTreeNode {
     return {
       schemaName: this.table.schemaName,
       pureName: this.table.pureName,
+      dataColumns: null,
     };
   }
 
@@ -227,6 +230,7 @@ export class PerspectiveTableReferenceNode extends PerspectiveTableNode {
       pureName: this.table.pureName,
       bindingColumns: [this.foreignKey.columns[0].columnName],
       bindingValues: parentRows.map(row => row[this.foreignKey.columns[0].refColumnName]),
+      dataColumns: null,
     };
   }
 }

packages/datalib/src/index.ts

@@ -14,3 +14,4 @@ export * from './FormViewDisplay';
 export * from './TableFormViewDisplay';
 export * from './CollectionGridDisplay';
 export * from './deleteCascade';
+export * from './PerspectiveDisplay';

packages/web/src/perspectives/PerspectiveTable.svelte

@@ -3,6 +3,7 @@
     // groupPerspectiveLoadProps,
     PerspectiveDataLoadProps,
     PerspectiveDataLoadPropsWithNode,
+    PerspectiveDisplay,
     PerspectiveTreeNode,
   } from 'dbgate-datalib';
   import _ from 'lodash';
@@ -10,13 +11,13 @@
   import { prop_dev } from 'svelte/internal';
 
   export let root: PerspectiveTreeNode;
+  let dataRows;
 
   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);
 
@@ -58,7 +59,8 @@
     if (!node) return;
     const rows = [];
     await loadLevelData(node, rows);
-    console.log('RESULT', rows);
+    dataRows = rows;
+    // console.log('RESULT', rows);
     // const rows = await node.loadLevelData();
     // for (const child of node.childNodes) {
     //   const loadProps = [];
@@ -69,8 +71,44 @@
   }
 
   $: loadData(root);
+  $: display = root && dataRows ? new PerspectiveDisplay(root, dataRows) : null;
 </script>
 
-<table>
+<div class="wrapper">
-  <tr><td>xxx</td></tr>
+  {#if display}
-</table>
+    <table>
+      <thead>
+        <tr>
+          {#each display.columns as column}
+            <th>{column.label}</th>
+          {/each}
+        </tr>
+      </thead>
+      <tbody>
+        {#each display.rows as row}
+          <tr>
+            {#each display.columns as column}
+              <td>{row[column.field]}</td>
+            {/each}
+          </tr>
+        {/each}
+      </tbody>
+    </table>
+  {/if}
+</div>
+
+<style>
+  .wrapper {
+    overflow: scroll;
+  }
+
+  table {
+    border: 1px solid;
+    border-collapse: collapse;
+  }
+
+  td,
+  th {
+    border: 1px solid;
+  }
+</style>

packages/web/src/perspectives/PerspectiveView.svelte

@@ -63,13 +63,20 @@
   //   : null;
 
   async function loader(props: PerspectiveDataLoadProps) {
-    const { schemaName, pureName, bindingColumns, bindingValues } = props;
+    const { schemaName, pureName, bindingColumns, bindingValues, dataColumns } = props;
     const select: Select = {
       commandType: 'select',
       from: {
         name: { schemaName, pureName },
       },
-      selectAll: true,
+      columns: dataColumns?.map(columnName => ({
+        exprType: 'column',
+        columnName,
+        source: {
+          name: { schemaName, pureName },
+        },
+      })),
+      selectAll: !dataColumns,
     };
     if (bindingColumns?.length == 1) {
       select.where = {