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}