designer - column filter

packages/web/src/designer/Designer.svelte

@@ -48,6 +48,8 @@
   import ChooseColorModal from '../modals/ChooseColorModal.svelte';
   import { currentThemeDefinition } from '../stores';
   import { extendDatabaseInfoFromApps } from 'dbgate-tools';
+  import SearchInput from '../elements/SearchInput.svelte';
+  import CloseSearchButton from '../buttons/CloseSearchButton.svelte';
 
   export let value;
   export let onChange;
@@ -64,6 +66,7 @@
   let canvasHeight = 3000;
   let dragStartPoint = null;
   let dragCurrentPoint = null;
+  let columnFilter;
 
   const sourceDragColumn$ = writable(null);
   const targetDragColumn$ = writable(null);
@@ -80,7 +83,15 @@
 
   const tableRefs = {};
   const referenceRefs = {};
-  $: domTables = _.pickBy(_.mapValues(tableRefs, (tbl: any) => tbl?.getDomTable()));
+  let domTables;
+  $: {
+    tableRefs;
+    recomputeDomTables();
+  }
+
+  function recomputeDomTables() {
+    domTables = _.pickBy(_.mapValues(tableRefs, (tbl: any) => tbl?.getDomTable()));
+  }
 
   function fixPositions(tables) {
     const minLeft = _.min(tables.map(x => x.left));
@@ -835,6 +846,14 @@
       ],
     ];
   }
+
+  $: {
+    columnFilter;
+    tick().then(() => {
+      recomputeReferencePositions();
+      recomputeDomTables();
+    });
+  }
 </script>
 
 <div class="wrapper noselect" use:contextMenu={createMenu}>
@@ -896,6 +915,7 @@
         onAddAllReferences={handleAddTableReferences}
         onChangeTableColor={handleChangeTableColor}
         onMoveReferences={recomputeReferencePositions}
+        {columnFilter}
         {table}
         {conid}
         {database}
@@ -930,6 +950,12 @@
       </svg>
     {/if}
   </div>
+  {#if tables?.length > 0}
+    <div class="searchbox">
+      <SearchInput bind:value={columnFilter} placeholder="Filter columns" />
+      <CloseSearchButton bind:filter={columnFilter} />
+    </div>
+  {/if}
 </div>
 
 <style>
@@ -946,6 +972,13 @@
   .canvas {
     position: relative;
   }
+  .searchbox {
+    position: absolute;
+    right: 16px;
+    top: 0;
+    width: 200px;
+    display: flex;
+  }
 
   svg.drag-rect {
     visibility: hidden;

packages/web/src/designer/DesignerTable.svelte

@@ -51,6 +51,7 @@
   export let designer;
   export let onMoveReferences;
   export let settings;
+  export let columnFilter;
 
   let movingPosition = null;
   let domWrapper;
@@ -68,7 +69,7 @@
   $: 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);
+  $: flatColumns = getFlatColumns(columns, columnFilter, 0);
 
   function getFlatColumns(columns, filter, level) {
     if (!columns) return [];

packages/web/src/designer/DomTableRef.ts

@@ -37,10 +37,10 @@ export default class DomTableRef {
       columnName = this.settings?.getParentColumnName(columnName);
       col = this.domRefs[columnName];
     }
-    if (!col) return null;
+    const tableRect = this.getRect();
+    if (!col) return tableRect.top + 12;
     const rect = col.getBoundingClientRect();
     const wrap = this.domWrapper.getBoundingClientRect();
-    const tableRect = this.getRect();
     let res = (rect.top + rect.bottom) / 2 - wrap.top;
     if (res < tableRect.top) res = tableRect.top;
     if (res > tableRect.bottom) res = tableRect.bottom;