subcolumns in designer

packages/web/src/designer/ColumnLine.svelte

@@ -6,6 +6,7 @@
   import ColumnLabel from '../elements/ColumnLabel.svelte';
 
   import CheckboxField from '../forms/CheckboxField.svelte';
+  import { plusExpandIcon } from '../icons/expandIcons';
   import FontIcon from '../icons/FontIcon.svelte';
   import contextMenu from '../utility/contextMenu';
   import SortOrderIcon from './SortOrderIcon.svelte';
@@ -21,6 +22,11 @@
   export let onAddReferenceByColumn;
   export let onSelectColumn;
   export let settings;
+  export let nestingSupported = null;
+  export let isExpandable = false;
+  export let isExpanded = false;
+  export let expandLevel = 0;
+  export let toggleExpanded = null;
 
   $: designerColumn = (designer.columns || []).find(
     x => x.designerId == designerId && x.columnName == column.columnName
@@ -115,16 +121,27 @@
     })}
   use:contextMenu={settings?.canSelectColumns ? createMenu : '__no_menu'}
 >
+  {#if nestingSupported}
+    <span class="expandColumnIcon" style={`margin-right: ${5 + expandLevel * 10}px`}>
+      <FontIcon
+        icon={isExpandable ? plusExpandIcon(isExpanded) : 'icon invisible-box'}
+        on:click={() => {
+          toggleExpanded(!isExpanded);
+        }}
+      />
+    </span>
+  {/if}
+
   {#if settings?.allowColumnOperations}
     <CheckboxField
       checked={settings?.isColumnChecked
-        ? settings?.isColumnChecked(designerId, column.columnName)
+        ? settings?.isColumnChecked(designerId, column)
         : !!(designer.columns || []).find(
             x => x.designerId == designerId && x.columnName == column.columnName && x.isOutput
           )}
       on:change={e => {
         if (settings?.setColumnChecked) {
-          settings?.setColumnChecked(designerId, column.columnName, e.target.checked);
+          settings?.setColumnChecked(designerId, column, e.target.checked);
         } else {
           if (e.target.checked) {
             onChangeColumn(

packages/web/src/designer/DesignerTable.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { presetDarkPalettes, presetPalettes } from '@ant-design/colors';
-  import { computeDbDiffRows } from 'dbgate-tools';
+  import { filterName } from 'dbgate-tools';
 
   import { tick } from 'svelte';
   import { createDatabaseObjectMenu } from '../appobj/DatabaseObjectAppObject.svelte';
@@ -68,6 +68,27 @@
   $: specificDb = settings?.tableSpecificDb ? settings?.tableSpecificDb(designerId) : null;
   $: filterParentRows = settings?.hasFilterParentRowsFlag ? settings?.hasFilterParentRowsFlag(designerId) : false;
   $: isGrayed = settings?.isGrayedTable ? settings?.isGrayedTable(designerId) : false;
+  $: flatColumns = getFlatColumns(columns, '', 0);
+
+  function getFlatColumns(columns, filter, level) {
+    if (!columns) return [];
+    const res = [];
+    for (const col of columns) {
+      if (filterName(filter, col.columnName)) {
+        res.push({ ...col, expandLevel: level });
+        if (col.isExpanded) {
+          res.push(...getFlatColumns(col.getChildColumns ? col.getChildColumns() : null, filter, level + 1));
+        }
+      } else if (col.isExpanded) {
+        const children = getFlatColumns(col.getChildColumns ? col.getChildColumns() : null, filter, level + 1);
+        if (children.length > 0) {
+          res.push({ ...col, expandLevel: level });
+          res.push(...children);
+        }
+      }
+    }
+    return res;
+  }
 
   export function isSelected() {
     return table?.isSelectedTable;
@@ -214,7 +235,7 @@
     ];
   }
 
-  // $: console.log('COLUMNS', columns);
+  // $: console.log('COLUMNS', flatColumns);
 </script>
 
 <div
@@ -279,8 +300,13 @@
     {/if}
   </div>
   <div class="columns" on:scroll={() => tick().then(onMoveReferences)} class:scroll={settings?.allowScrollColumns}>
-    {#each columns || [] as column}
+    {#each flatColumns || [] as column}
       <ColumnLine
+        nestingSupported={!!columns.find(x => x.getChildColumns)}
+        isExpandable={!!column.getChildColumns}
+        isExpanded={column.isExpanded}
+        expandLevel={column.expandLevel}
+        toggleExpanded={column.toggleExpanded}
         {column}
         {table}
         {designer}

packages/web/src/perspectives/PerspectiveDesigner.svelte

@@ -1,6 +1,9 @@
 <script lang="ts">
   import {
+    ChangePerspectiveConfigFunc,
     createPerspectiveNodeConfig,
+    PerspectiveDataPatternColumn,
+    PerspectiveNodeConfig,
     perspectiveNodesHaveStructure,
     PerspectiveTreeNode,
     switchPerspectiveReferenceDirection,
@@ -28,6 +31,32 @@
 
   export let onClickTableHeader = null;
 
+  function mapDataPatternColumn(
+    column: PerspectiveDataPatternColumn,
+    node: PerspectiveNodeConfig,
+    codeNamePrefix: string
+  ) {
+    return {
+      columnName: column.name,
+      getChildColumns:
+        column.columns?.length > 0
+          ? () => column.columns.map(x => mapDataPatternColumn(x, node, codeNamePrefix + column.name + '::'))
+          : null,
+      isExpanded: node.expandedColumns.includes(codeNamePrefix + column.name),
+      codeName: codeNamePrefix + column.name,
+      toggleExpanded: value =>
+        setConfig(cfg => ({
+          ...cfg,
+          nodes: cfg.nodes.map(node => ({
+            ...node,
+            expandedColumns: value
+              ? [...(node.expandedColumns || []), codeNamePrefix + column.name]
+              : (node.expandedColumns || []).filter(x => x != codeNamePrefix + column.name),
+          })),
+        })),
+    };
+  }
+
   function createDesignerModel(
     config: PerspectiveConfig,
     dbInfos: MultipleDatabaseInfo,
@@ -49,10 +78,7 @@
             if (!pattern) return null;
             collection = {
               ...collection,
-              columns:
+              columns: pattern?.columns.map(x => mapDataPatternColumn(x, node, '')) || [],
-                pattern?.columns.map(x => ({
-                  columnName: x.name,
-                })) || [],
             };
           }
 
@@ -200,10 +226,10 @@
       ];
     },
     createReferenceText: reference => (reference.isAutoGenerated ? 'FK' : 'Custom'),
-    isColumnChecked: (designerId, columnName) => {
+    isColumnChecked: (designerId, column) => {
-      return config.nodes.find(x => x.designerId == designerId)?.checkedColumns?.includes(columnName);
+      return config.nodes.find(x => x.designerId == designerId)?.checkedColumns?.includes(column.codeName);
     },
-    setColumnChecked: (designerId, columnName, value) => {
+    setColumnChecked: (designerId, column, value) => {
       setConfig(cfg => ({
         ...cfg,
         nodes: cfg.nodes.map(node =>
@@ -211,8 +237,8 @@
             ? {
                 ...node,
                 checkedColumns: value
-                  ? [...(node.checkedColumns || []), columnName]
+                  ? [...(node.checkedColumns || []), column.codeName]
-                  : (node.checkedColumns || []).filter(x => x != columnName),
+                  : (node.checkedColumns || []).filter(x => x != column.codeName),
               }
             : node
         ),