From 6b5d2114bfeb9c8b6185ff3132d15b3b71a96a2f Mon Sep 17 00:00:00 2001
From: Jan Prochazka <jan.prochazka@gmail.com>
Date: Sat, 31 Dec 2022 10:05:09 +0100
Subject: [PATCH] designer - column filter

---
 packages/web/src/designer/Designer.svelte     | 35 ++++++++++++++++++-
 .../web/src/designer/DesignerTable.svelte     |  3 +-
 packages/web/src/designer/DomTableRef.ts      |  4 +--
 3 files changed, 38 insertions(+), 4 deletions(-)

diff --git a/packages/web/src/designer/Designer.svelte b/packages/web/src/designer/Designer.svelte
index 2dfabbda..1ab4740e 100644
--- a/packages/web/src/designer/Designer.svelte
+++ b/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;
diff --git a/packages/web/src/designer/DesignerTable.svelte b/packages/web/src/designer/DesignerTable.svelte
index 81363a6b..3294cd7c 100644
--- a/packages/web/src/designer/DesignerTable.svelte
+++ b/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 [];
diff --git a/packages/web/src/designer/DomTableRef.ts b/packages/web/src/designer/DomTableRef.ts
index a592e34c..03f295ed 100644
--- a/packages/web/src/designer/DomTableRef.ts
+++ b/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;