query designer

packages/web/src/datagrid/DataFilterControl.svelte

@@ -131,7 +131,7 @@
   const handleKeyDown = ev => {
     if (isReadOnly) return;
     if (ev.keyCode == keycodes.enter) {
-      setFilter(value);
+      applyFilter();
     }
     if (ev.keyCode == keycodes.escape) {
       setFilter('');
@@ -146,6 +146,22 @@
     // }
   };
 
+  function handlePaste(event) {
+    var pastedText = undefined;
+    // @ts-ignore
+    if (window.clipboardData && window.clipboardData.getData) {
+      // IE
+      // @ts-ignore
+      pastedText = window.clipboardData.getData('Text');
+    } else if (event.clipboardData && event.clipboardData.getData) {
+      pastedText = event.clipboardData.getData('text/plain');
+    }
+    if (pastedText && pastedText.includes('\n')) {
+      event.preventDefault();
+      setFilter(createMultiLineFilter('is', pastedText));
+    }
+  }
+
   $: value = filter;
 
   $: {
@@ -161,11 +177,25 @@
     }
   }
 
+  function applyFilter() {
+    setFilter(value);
+  }
+
   // $: if (value != filter) setFilter(value);
 </script>
 
 <div class="flex">
-  <input type="text" readOnly={isReadOnly} bind:value on:keydown={handleKeyDown} class:isError class:isOk />
+  <input
+    type="text"
+    autocomplete="off"
+    readOnly={isReadOnly}
+    bind:value
+    on:keydown={handleKeyDown}
+    on:blur={applyFilter}
+    on:paste={handlePaste}
+    class:isError
+    class:isOk
+  />
   <DropDownButton icon="icon filter" menu={createMenu} />
   {#if showResizeSplitter}
     <div class="horizontal-split-handle resizeHandleControl" use:splitterDrag={'clientX'} on:resizeSplitter />

packages/web/src/datagrid/DataGridCore.svelte

@@ -486,7 +486,12 @@
     if (domFocusField) domFocusField.focus();
     const cell = cellFromEvent(event);
 
-    if (event.button == 2 && cell && cellIsSelected(cell[0], cell[1], selectedCells)) return;
+    if (event.button == 2) {
+      if (cell && !cellIsSelected(cell[0], cell[1], selectedCells)) {
+        selectedCells = [cell];
+      }
+      return;
+    }
 
     const autofill = event.target.closest('div.autofillHandleMarker');
     if (autofill) {

packages/web/src/datagrid/JslDataGridCore.svelte

@@ -32,6 +32,8 @@
 
 <script lang="ts">
   import _ from 'lodash';
+  import ImportExportModal from '../modals/ImportExportModal.svelte';
+  import { showModal } from '../modals/modalTools';
 
   import axiosInstance from '../utility/axiosInstance';
   import socket from '../utility/socket';
@@ -69,12 +71,28 @@
   $: $effect;
 
   $: grider = new RowsArrayGrider(loadedRows);
+
+  function exportGrid() {
+    const initialValues = {} as any;
+    const archiveMatch = jslid.match(/^archive:\/\/([^/]+)\/(.*)$/);
+    if (archiveMatch) {
+      initialValues.sourceStorageType = 'archive';
+      initialValues.sourceArchiveFolder = archiveMatch[1];
+      initialValues.sourceList = [archiveMatch[2]];
+    } else {
+      initialValues.sourceStorageType = 'jsldata';
+      initialValues.sourceJslId = jslid;
+      initialValues.sourceList = ['query-data'];
+    }
+    showModal(ImportExportModal, { initialValues });
+  }
 </script>
 
 <LoadingDataGridCore
   bind:this={domGrid}
   {...$$props}
   bind:loadedRows
+  onExportGrid={exportGrid}
   {loadDataPage}
   {dataPageAvailable}
   {loadRowCount}

packages/web/src/tabs/QueryDesignTab.svelte

@@ -93,6 +93,8 @@
 
   $: generatePreview($modelState.value, engine);
 
+  $: if ($tabVisible) lastFocusedEditor = instance;
+
   export function canKill() {
     return !!sessionId;
   }