From 250d52131c71e0409d7f40cc12fc043af7b24db8 Mon Sep 17 00:00:00 2001
From: Jan Prochazka <jan.prochazka@gmail.com>
Date: Thu, 30 Dec 2021 21:10:46 +0100
Subject: [PATCH] multiple column selection

---
 .../web/src/datagrid/ColumnManager.svelte     | 39 ++++++++++++++++++-
 .../web/src/datagrid/ColumnManagerRow.svelte  | 15 ++++++-
 packages/web/src/utility/keycodes.js          |  1 +
 3 files changed, 52 insertions(+), 3 deletions(-)

diff --git a/packages/web/src/datagrid/ColumnManager.svelte b/packages/web/src/datagrid/ColumnManager.svelte
index 13593627..ab42c3d6 100644
--- a/packages/web/src/datagrid/ColumnManager.svelte
+++ b/packages/web/src/datagrid/ColumnManager.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import _ from 'lodash';
+  import _, { indexOf } from 'lodash';
   import { GridDisplay } from 'dbgate-datalib';
   import { filterName } from 'dbgate-tools';
   import CloseSearchButton from '../elements/CloseSearchButton.svelte';
@@ -25,6 +25,7 @@
 
   let selectedColumns = [];
   let currentColumnUniqueName = null;
+  let dragStartColumnIndex = null;
 
   $: items = display?.getColumns(filter)?.filter(column => filterName(filter, column.columnName)) || [];
 
@@ -67,9 +68,19 @@
     else if (e.keyCode == keycodes.end) moveIndex(() => items.length - 1);
     else if (e.keyCode == keycodes.pageUp) moveIndex(i => i - 10);
     else if (e.keyCode == keycodes.pageDown) moveIndex(i => i + 10);
+    else if (e.keyCode == keycodes.space) {
+      let checked = null;
+      for (const name of selectedColumns) {
+        const column = items.find(x => x.uniqueName == name);
+        if (column) {
+          if (checked == null) checked = !column.isChecked;
+          display.setColumnVisibility(column.uniquePath, checked);
+        }
+      }
+    }
   }
   function copyToClipboard() {
-    copyTextToClipboard(selectedColumns.join('\r\r'));
+    copyTextToClipboard(selectedColumns.join('\r\n'));
   }
 </script>
 
@@ -117,6 +128,30 @@
         selectedColumns = [column.uniqueName];
         currentColumnUniqueName = column.uniqueName;
       }}
+      on:mousemove={e => {
+        if (e.buttons == 1 && !selectedColumns.includes(column.uniqueName)) {
+          selectedColumns = [...selectedColumns, column.uniqueName];
+          if (domFocusField) domFocusField.focus();
+          currentColumnUniqueName = column.uniqueName;
+          if (!isJsonView) {
+            display.focusColumn(column.uniqueName);
+          }
+        }
+      }}
+      on:mousedown={e => {
+        dragStartColumnIndex = _.findIndex(items, x => x.uniqueName == column.uniqueName);
+        selectedColumns = [column.uniqueName];
+        if (domFocusField) domFocusField.focus();
+        currentColumnUniqueName = column.uniqueName;
+      }}
+      on:setvisibility={e => {
+        for (const name of selectedColumns) {
+          const column = items.find(x => x.uniqueName == name);
+          if (column) {
+            display.setColumnVisibility(column.uniquePath, e.detail);
+          }
+        }
+      }}
     />
   {/each}
 </ManagerInnerContainer>
diff --git a/packages/web/src/datagrid/ColumnManagerRow.svelte b/packages/web/src/datagrid/ColumnManagerRow.svelte
index b72914e5..406d4feb 100644
--- a/packages/web/src/datagrid/ColumnManagerRow.svelte
+++ b/packages/web/src/datagrid/ColumnManagerRow.svelte
@@ -3,11 +3,14 @@
 
   import FontIcon from '../icons/FontIcon.svelte';
   import ColumnLabel from '../elements/ColumnLabel.svelte';
+  import { createEventDispatcher } from 'svelte';
 
   export let column;
   export let display;
   export let isJsonView = false;
   export let isSelected = false;
+
+  const dispatch = createEventDispatcher();
 </script>
 
 <div
@@ -20,6 +23,9 @@
   }}
   class:isSelected
   on:click
+  on:mousedown
+  on:mousemove
+  on:mouseup
 >
   <span class="expandColumnIcon" style={`margin-right: ${5 + (column.uniquePath.length - 1) * 10}px`}>
     <FontIcon
@@ -33,7 +39,14 @@
     <input
       type="checkbox"
       checked={column.isChecked}
-      on:change={() => display.setColumnVisibility(column.uniquePath, !column.isChecked)}
+      on:click={e => {
+        e.stopPropagation();
+      }}
+      on:change={() => {
+        const newValue = !column.isChecked;
+        display.setColumnVisibility(column.uniquePath, newValue);
+        dispatch('setvisibility', newValue);
+      }}
     />
   {/if}
   <ColumnLabel {...column} />
diff --git a/packages/web/src/utility/keycodes.js b/packages/web/src/utility/keycodes.js
index 30f93092..694c327c 100644
--- a/packages/web/src/utility/keycodes.js
+++ b/packages/web/src/utility/keycodes.js
@@ -8,6 +8,7 @@ export default {
   pauseBreak: 19,
   capsLock: 20,
   escape: 27,
+  space: 32,
   pageUp: 33,
   pageDown: 34,
   end: 35,