SYNC: search in columns - show filtered column in grid

packages/web/src/buttons/CloseSearchButton.svelte

@@ -5,13 +5,18 @@
 
   export let filter;
   export let showDisabled = false;
+  export let onClearFilter = null;
 </script>
 
 {#if filter || showDisabled}
   <InlineButton
     on:click
     on:click={() => {
-      filter = '';
+      if (onClearFilter) {
+        onClearFilter();
+      } else {
+        filter = '';
+      }
     }}
     title="Clear filter"
     disabled={!filter}

packages/web/src/datagrid/ColumnManager.svelte

@@ -28,7 +28,6 @@
   export let changeSetState: { value: ChangeSet } = null;
   export let dispatchChangeSet = null;
 
-  let filter;
   let domFocusField;
 
   let selectedColumns = [];
@@ -36,7 +35,9 @@
   let dragStartColumnIndex = null;
   let shiftOriginColumnIndex = null;
 
-  $: items = display?.getColumns(filter)?.filter(column => filterName(filter, column.columnName)) || [];
+  $: currentFilter = display?.config?.searchInColumns;
+
+  $: items = display?.getColumns(currentFilter)?.filter(column => filterName(currentFilter, column.columnName)) || [];
 
   function selectColumnIndexCore(index, e) {
     const uniqueName = items[index].uniqueName;
@@ -173,8 +174,12 @@
   </div>
 {/if}
 <SearchBoxWrapper>
-  <SearchInput placeholder="Search columns" bind:value={filter} />
-  <CloseSearchButton bind:filter />
+  <SearchInput
+    placeholder="Search columns"
+    value={currentFilter}
+    onChange={value => display.setSearchInColumns(value)}
+  />
+  <CloseSearchButton filter={currentFilter} onClearFilter={() => display.setSearchInColumns('')} />
   {#if isDynamicStructure && !isJsonView}
     <InlineButton
       on:click={() => {
@@ -235,7 +240,7 @@
       {columnIndex}
       {allowChangeChangeSetStructure}
       isSelected={selectedColumns.includes(column.uniqueName) || currentColumnUniqueName == column.uniqueName}
-      {filter}
+      filter={currentFilter}
       on:click={() => {
         if (domFocusField) domFocusField.focus();
         selectedColumns = [column.uniqueName];

packages/web/src/elements/SearchInput.svelte

@@ -8,12 +8,17 @@
   $: searchValue = value || '';
   export let isDebounced = false;
   export let onFocusFilteredList = null;
+  export let onChange = null;
 
   let domInput;
 
   function handleKeyDown(e) {
     if (e.keyCode == keycodes.escape) {
-      value = '';
+      if (onChange) {
+        onChange('');
+      } else {
+        value = '';
+      }
     }
     if (e.keyCode == keycodes.downArrow || e.keyCode == keycodes.pageDown || e.keyCode == keycodes.enter) {
       onFocusFilteredList?.();
@@ -27,7 +32,11 @@
     domInput.focus();
     if (text) {
       domInput.value = text;
-      value = text;
+      if (onChange) {
+        onChange(text);
+      } else {
+        value = text;
+      }
     }
   }
 </script>
@@ -37,8 +46,12 @@
   {placeholder}
   value={searchValue}
   on:input={e => {
-    if (isDebounced) debouncedSet(domInput.value);
-    else value = domInput.value;
+    if (onChange) {
+      onChange(domInput.value);
+    } else {
+      if (isDebounced) debouncedSet(domInput.value);
+      else value = domInput.value;
+    }
   }}
   on:keydown={handleKeyDown}
   bind:this={domInput}