keyboard settings saved to server

packages/web/src/commands/stdCommands.ts

@@ -15,6 +15,7 @@ import { openElectronFile } from '../utility/openElectronFile';
 import { getDefaultFileFormat } from '../plugins/fileformats';
 import { getCurrentConfig, getCurrentDatabase } from '../stores';
 import './recentDatabaseSwitch';
+import hasPermission from '../utility/hasPermission';
 
 const electron = getElectron();
 
@@ -203,19 +204,21 @@ registerCommand({
     }),
 });
 
-registerCommand({
-  id: 'settings.commands',
-  category: 'Settings',
-  name: 'Keyboard shortcuts',
-  onClick: () => {
-    openNewTab({
-      title: 'Keyboard Shortcuts',
-      icon: 'icon keyboard',
-      tabComponent: 'CommandListTab',
-      props: {},
-    });
-  },
-});
+if (hasPermission('settings/change')) {
+  registerCommand({
+    id: 'settings.commands',
+    category: 'Settings',
+    name: 'Keyboard shortcuts',
+    onClick: () => {
+      openNewTab({
+        title: 'Keyboard Shortcuts',
+        icon: 'icon keyboard',
+        tabComponent: 'CommandListTab',
+        props: {},
+      });
+    },
+  });
+}
 
 export function registerFileCommands({
   idPrefix,

packages/web/src/modals/CommandModal.svelte

@@ -10,7 +10,8 @@
   import FormSubmit from '../forms/FormSubmit.svelte';
   import FormTextField from '../forms/FormTextField.svelte';
   import FontIcon from '../icons/FontIcon.svelte';
-  import { customKeyboardShortcuts } from '../stores';
+  import { commandsSettings } from '../stores';
+  import axiosInstance from '../utility/axiosInstance';
   import KeyboardModal from './KeyboardModal.svelte';
   import ModalBase from './ModalBase.svelte';
   import { closeCurrentModal, showModal } from './modalTools';
@@ -41,13 +42,15 @@
         value="OK"
         on:click={e => {
           closeCurrentModal();
-          customKeyboardShortcuts.update(list => ({
-            ...list,
-            [command.id]: {
-              keyText: e.detail.keyText,
-              customKeyboardShortcut: true,
+          axiosInstance.post('config/update-settings', {
+            commands: {
+              ...$commandsSettings,
+              [command.id]: {
+                keyText: e.detail.keyText,
+                customKeyboardShortcut: true,
+              },
             },
-          }));
+          });
         }}
       />
       <FormStyledButton
@@ -55,7 +58,9 @@
         value="Reset"
         on:click={() => {
           closeCurrentModal();
-          customKeyboardShortcuts.update(list => _.omit(list, [command.id]));
+          axiosInstance.post('config/update-settings', {
+            commands: _.omit($commandsSettings, [command.id]),
+          });
         }}
       />
       <FormStyledButton type="button" value="Close" on:click={closeCurrentModal} />

packages/web/src/modals/DropDownMenu.svelte

@@ -30,9 +30,12 @@
       const command = commands[item.command];
       if (command) {
         return {
-          text: command.name,
+          text: command.menuName || command.toolbarName || command.name,
           keyText: command.keyText || command.keyTextFromGroup,
-          onClick: command.onClick,
+          onClick: () => {
+            if (command.getSubCommands) visibleCommandPalette.set(command);
+            else if (command.onClick) command.onClick();
+          },
           disabled: !command.enabled,
           hideDisabled: item.hideDisabled,
         };
@@ -48,7 +51,7 @@
   import clickOutside from '../utility/clickOutside';
   import { createEventDispatcher } from 'svelte';
   import { onMount } from 'svelte';
-  import { commands, commandsCustomized } from '../stores';
+  import { commandsCustomized, visibleCommandPalette } from '../stores';
   import { extractMenuItems } from '../utility/contextMenu';
 
   export let items;

packages/web/src/stores.ts

@@ -3,7 +3,7 @@ import { ExtensionsDirectory } from 'dbgate-types';
 import invalidateCommands from './commands/invalidateCommands';
 import getElectron from './utility/getElectron';
 import { GlobalCommand } from './commands/registerCommand';
-import { useConfig } from './utility/metadataLoaders';
+import { useConfig, useSettings } from './utility/metadataLoaders';
 import _ from 'lodash';
 
 interface TabDefinition {
@@ -41,15 +41,15 @@ export const currentTheme = writableWithStorage('theme-light', 'currentTheme');
 export const activeTabId = derived([openedTabs], ([$openedTabs]) => $openedTabs.find(x => x.selected)?.tabid);
 export const activeTab = derived([openedTabs], ([$openedTabs]) => $openedTabs.find(x => x.selected));
 export const recentDatabases = writableWithStorage([], 'recentDatabases');
-export const customKeyboardShortcuts = writableWithStorage({}, 'customKeyboardShortcuts');
+export const commandsSettings = derived(useSettings(), (config: any) => (config || {}).commands || {});
 export const allResultsInOneTabDefault = writableWithStorage(false, 'allResultsInOneTabDefault');
 export const commandsCustomized = derived(
-  [commands, customKeyboardShortcuts],
-  ([$commands, $customKeyboardShortcuts]) =>
+  [commands, commandsSettings],
+  ([$commands, $commandsSettings]) =>
     _.mapValues($commands, (v, k) => ({
       // @ts-ignore
       ...v,
-      ...$customKeyboardShortcuts[k],
+      ...$commandsSettings[k],
     }))
 );
 

packages/web/src/utility/metadataLoaders.ts

@@ -40,6 +40,12 @@ const configLoader = () => ({
   reloadTrigger: 'config-changed',
 });
 
+const settingsLoader = () => ({
+  url: 'config/get-settings',
+  params: {},
+  reloadTrigger: 'settings-changed',
+});
+
 const platformInfoLoader = () => ({
   url: 'config/platform-info',
   params: {},
@@ -333,6 +339,13 @@ export function useConfig() {
   return useCore(configLoader, {});
 }
 
+export function getSettings() {
+  return getCore(settingsLoader, {});
+}
+export function useSettings() {
+  return useCore(settingsLoader, {});
+}
+
 export function getPlatformInfo() {
   return getCore(platformInfoLoader, {});
 }

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' }];
+    const items = [{ command: 'settings.commands' }, { command: 'theme.changeTheme' }];
     currentDropDownMenu.set({ left, top, items });
   }
 </script>