settings modal

packages/web/src/commands/stdCommands.ts

@@ -4,6 +4,7 @@ import { derived, get } from 'svelte/store';
 import { ThemeDefinition } from 'dbgate-types';
 import ConnectionModal from '../modals/ConnectionModal.svelte';
 import AboutModal from '../modals/AboutModal.svelte';
+import SettingsModal from '../settings/SettingsModal.svelte';
 import ImportExportModal from '../modals/ImportExportModal.svelte';
 import SqlGeneratorModal from '../modals/SqlGeneratorModal.svelte';
 import { showModal } from '../modals/modalTools';
@@ -218,6 +219,14 @@ if (hasPermission('settings/change')) {
       });
     },
   });
+
+  registerCommand({
+    id: 'settings.show',
+    category: 'Settings',
+    name: 'Change',
+    toolbarName: 'Change settings',
+    onClick: () => showModal(SettingsModal),
+  });
 }
 
 export function registerFileCommands({

packages/web/src/datagrid/DataGrid.svelte

@@ -66,6 +66,7 @@
   import _ from 'lodash';
   import registerCommand from '../commands/registerCommand';
   import { registerMenu } from '../utility/contextMenu';
+  import { useSettings } from '../utility/metadataLoaders';
 
   export let config;
   export let setConfig;
@@ -97,7 +98,13 @@
   setContext('macroValues', macroValues);
 
   let managerSize;
-  let collapsedLeftColumnStore = writable(false);
+  let collapsedLeftColumnStore = writable(null);
+
+  const settings = useSettings();
+
+  $: if ($collapsedLeftColumnStore == null && $settings) {
+    $collapsedLeftColumnStore = !!$settings['dataGrid.hideLeftColumn'];
+  }
 
   $: isFormView = !!(formDisplay && formDisplay.config && formDisplay.config.isFormView);
   $: isJsonView = !!config?.isJsonView;

packages/web/src/datagrid/LoadingDataGridCore.svelte

@@ -1,5 +1,8 @@
 <script lang="ts">
+  import { getIntSettingsValue } from '../settings/settingsTools';
+
   import createRef from '../utility/createRef';
+  import { useSettings } from '../utility/metadataLoaders';
 
   import DataGridCore from './DataGridCore.svelte';
 
@@ -23,6 +26,7 @@
 
   const loadNextDataRef = createRef(false);
   const loadedTimeRef = createRef(null);
+  const settings = useSettings();
 
   export function resetLoadedAll() {
     isLoadedAll = false;
@@ -45,7 +49,11 @@
     loadedTimeRef.set(loadStart);
     // console.log('LOAD NEXT ROWS', loadedRows);
 
-    const nextRows = await loadDataPage($$props, loadedRows.length, 100);
+    const nextRows = await loadDataPage(
+      $$props,
+      loadedRows.length,
+      getIntSettingsValue($settings, 'dataGrid.pageSize', 100, 5, 1000)
+    );
     if (loadedTimeRef.get() !== loadStart) {
       // new load was dispatched
       return;

packages/web/src/settings/SettingsModal.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+  import FormButton from '../forms/FormButton.svelte';
+  import FormCheckboxField from '../forms/FormCheckboxField.svelte';
+
+  import FormProvider from '../forms/FormProvider.svelte';
+  import FormSubmit from '../forms/FormSubmit.svelte';
+  import FormTextField from '../forms/FormTextField.svelte';
+
+  import ModalBase from '../modals/ModalBase.svelte';
+  import { closeCurrentModal } from '../modals/modalTools';
+  import axiosInstance from '../utility/axiosInstance';
+  import { useSettings } from '../utility/metadataLoaders';
+
+  const settings = useSettings();
+
+  function handleOk(e) {
+    axiosInstance.post('config/update-settings', e.detail);
+    closeCurrentModal();
+  }
+</script>
+
+{#if $settings}
+  <FormProvider initialValues={$settings}>
+    <ModalBase {...$$restProps}>
+      <div slot="header">Settings</div>
+
+      <div class="heading">Data grid</div>
+      <FormCheckboxField name="dataGrid.hideLeftColumn" label="Hide left column by default" />
+      <FormTextField name="dataGrid.pageSize" label="Page size" defaultValue="100" />
+
+      <div slot="footer">
+        <FormSubmit value="OK" on:click={handleOk} />
+        <FormButton value="Cancel" on:click={closeCurrentModal} />
+      </div>
+    </ModalBase>
+  </FormProvider>
+{/if}
+
+<style>
+  .heading {
+    font-size: 20px;
+    margin: 5px;
+  }
+</style>

packages/web/src/settings/settingsTools.ts

@@ -0,0 +1,14 @@
+import _ from 'lodash';
+
+export function getIntSettingsValue(settings, name, defaultValue, min = null, max = null) {
+  const parsed = parseInt(settings[name]);
+  if (_.isNaN(parsed)) {
+    return defaultValue;
+  }
+  if (_.isNumber(parsed)) {
+    if (min != null && parsed < min) return min;
+    if (max != null && parsed > max) return max;
+    return parsed;
+  }
+  return defaultValue;
+}

packages/web/src/widgets/WidgetIconPanel.svelte

@@ -59,7 +59,7 @@
     const rect = domSettings.getBoundingClientRect();
     const left = rect.right;
     const top = rect.top;
-    const items = [{ command: 'settings.commands' }, { command: 'theme.changeTheme' }];
+    const items = [{ command: 'settings.commands' }, { command: 'theme.changeTheme' }, { command: 'settings.show' }];
     currentDropDownMenu.set({ left, top, items });
   }
 </script>