From aeea29f61d6ece0b9962b45c67c9b7964ddf4cfb Mon Sep 17 00:00:00 2001
From: Jan Prochazka <jan.prochazka@gmail.com>
Date: Thu, 25 Nov 2021 09:42:19 +0100
Subject: [PATCH] View columns store on statusbar

---
 packages/web/src/datagrid/DataGrid.svelte        |  5 +++--
 packages/web/src/icons/FontIcon.svelte           |  3 +++
 packages/web/src/tabs/TableDataTab.svelte        | 12 ++++++++++++
 packages/web/src/tabs/ViewDataTab.svelte         | 13 +++++++++++++
 packages/web/src/widgets/StatusBarTabItem.svelte |  2 ++
 5 files changed, 33 insertions(+), 2 deletions(-)

diff --git a/packages/web/src/datagrid/DataGrid.svelte b/packages/web/src/datagrid/DataGrid.svelte
index 61ab5354d..d85c6672f 100644
--- a/packages/web/src/datagrid/DataGrid.svelte
+++ b/packages/web/src/datagrid/DataGrid.svelte
@@ -48,7 +48,7 @@
 </script>
 
 <script lang="ts">
-  import { setContext } from 'svelte';
+  import { getContext, setContext } from 'svelte';
   import { writable } from 'svelte/store';
 
   import HorizontalSplitter from '../elements/HorizontalSplitter.svelte';
@@ -98,7 +98,8 @@
   setContext('macroValues', macroValues);
 
   let managerSize;
-  const collapsedLeftColumnStore = writable(!getBoolSettingsValue('dataGrid.showLeftColumn', false));
+  const collapsedLeftColumnStore =
+    getContext('collapsedLeftColumnStore') || writable(!getBoolSettingsValue('dataGrid.showLeftColumn', false));
 
   $: isFormView = !!(formDisplay && formDisplay.config && formDisplay.config.isFormView);
   $: isJsonView = !!config?.isJsonView;
diff --git a/packages/web/src/icons/FontIcon.svelte b/packages/web/src/icons/FontIcon.svelte
index 6efbbbafc..53c645a08 100644
--- a/packages/web/src/icons/FontIcon.svelte
+++ b/packages/web/src/icons/FontIcon.svelte
@@ -21,6 +21,9 @@
     'icon settings': 'mdi mdi-cog',
     'icon version': 'mdi mdi-ticket-confirmation',
 
+    'icon columns': 'mdi mdi-view-column',
+    'icon columns-outline': 'mdi mdi-view-column-outline',
+
     'icon database': 'mdi mdi-database',
     'icon server': 'mdi mdi-server',
     'icon table': 'mdi mdi-table',
diff --git a/packages/web/src/tabs/TableDataTab.svelte b/packages/web/src/tabs/TableDataTab.svelte
index 118bae2ed..28dc575a2 100644
--- a/packages/web/src/tabs/TableDataTab.svelte
+++ b/packages/web/src/tabs/TableDataTab.svelte
@@ -51,6 +51,8 @@
   import { showSnackbarSuccess } from '../utility/snackbar';
   import StatusBarTabItem from '../widgets/StatusBarTabItem.svelte';
   import openNewTab from '../utility/openNewTab';
+  import { getBoolSettingsValue } from '../settings/settingsTools';
+  import { setContext } from 'svelte';
 
   export let tabid;
   export let conid;
@@ -115,6 +117,9 @@
   }
 
   registerMenu({ command: 'tableData.save', tag: 'save' });
+
+  const collapsedLeftColumnStore = writable(!getBoolSettingsValue('dataGrid.showLeftColumn', false));
+  setContext('collapsedLeftColumnStore', collapsedLeftColumnStore);
 </script>
 
 <TableDataGrid
@@ -148,3 +153,10 @@
     });
   }}
 />
+
+<StatusBarTabItem
+  text="View columns"
+  icon={$collapsedLeftColumnStore ? 'icon columns-outline' : 'icon columns'}
+  clickable
+  onClick={() => collapsedLeftColumnStore.update(x => !x)}
+/>
diff --git a/packages/web/src/tabs/ViewDataTab.svelte b/packages/web/src/tabs/ViewDataTab.svelte
index 8a1c8a46a..827b1a6b9 100644
--- a/packages/web/src/tabs/ViewDataTab.svelte
+++ b/packages/web/src/tabs/ViewDataTab.svelte
@@ -6,13 +6,16 @@
 <script lang="ts">
   import { createGridCache, ViewGridDisplay } from 'dbgate-datalib';
   import { findEngineDriver } from 'dbgate-tools';
+  import { setContext } from 'svelte';
   import { writable } from 'svelte/store';
 
   import DataGrid from '../datagrid/DataGrid.svelte';
   import SqlDataGridCore from '../datagrid/SqlDataGridCore.svelte';
+  import { getBoolSettingsValue } from '../settings/settingsTools';
   import { extensions } from '../stores';
   import { useConnectionInfo, useDatabaseServerVersion, useViewInfo } from '../utility/metadataLoaders';
   import useGridConfig from '../utility/useGridConfig';
+  import StatusBarTabItem from '../widgets/StatusBarTabItem.svelte';
 
   export let tabid;
   export let conid;
@@ -40,6 +43,9 @@
           $serverVersion
         )
       : null;
+
+  const collapsedLeftColumnStore = writable(!getBoolSettingsValue('dataGrid.showLeftColumn', false));
+  setContext('collapsedLeftColumnStore', collapsedLeftColumnStore);
 </script>
 
 {#if display}
@@ -54,3 +60,10 @@
     gridCoreComponent={SqlDataGridCore}
   />
 {/if}
+
+<StatusBarTabItem
+  text="View columns"
+  icon={$collapsedLeftColumnStore ? 'icon columns-outline' : 'icon columns'}
+  clickable
+  onClick={() => collapsedLeftColumnStore.update(x => !x)}
+/>
diff --git a/packages/web/src/widgets/StatusBarTabItem.svelte b/packages/web/src/widgets/StatusBarTabItem.svelte
index 60902f795..f813cb3b7 100644
--- a/packages/web/src/widgets/StatusBarTabItem.svelte
+++ b/packages/web/src/widgets/StatusBarTabItem.svelte
@@ -16,4 +16,6 @@
     updateStatuBarInfoItem(tabid, key, { text, icon, clickable, onClick });
   });
   onDestroy(() => updateStatuBarInfoItem(tabid, key, null));
+
+  $: updateStatuBarInfoItem(tabid, key, { text, icon, clickable, onClick });
 </script>