#274 allow to create folder

packages/web/src/appobj/AppObjectList.svelte

@@ -1,5 +1,5 @@
 <script>
-  import _ from 'lodash';
+  import _, { sortBy } from 'lodash';
   import { asyncFilter } from '../utility/common';
   import AppObjectGroup from './AppObjectGroup.svelte';
   import { plusExpandIcon } from '../icons/expandIcons';
@@ -18,10 +18,12 @@
   export let passProps;
   export let getIsExpanded = null;
   export let setIsExpanded = null;
+  export let sortGroups = false;
 
   export let groupIconFunc = plusExpandIcon;
   export let groupFunc = undefined;
   export let onDropOnGroup = undefined;
+  export let emptyGroupNames = [];
 
   $: filtered = !groupFunc
     ? list.filter(data => {
@@ -64,11 +66,22 @@
       )
     : null;
 
-  $: groups = groupFunc ? _.groupBy(listGrouped, 'group') : null;
+  function extendGroups(base, emptyList) {
+    const res = {
+      ...base,
+    };
+    for (const item of emptyList) {
+      if (res[item]) continue;
+      res[item] = [];
+    }
+    return res;
+  }
+
+  $: groups = groupFunc ? extendGroups(_.groupBy(listGrouped, 'group'), emptyGroupNames) : null;
 </script>
 
 {#if groupFunc}
-  {#each _.keys(groups) as group}
+  {#each sortGroups ? _.sortBy(_.keys(groups)) : _.keys(groups) as group}
     <AppObjectGroup
       {group}
       {module}

packages/web/src/commands/stdCommands.ts

@@ -1,4 +1,12 @@
-import { currentDatabase, currentTheme, extensions, getExtensions, getVisibleToolbar, visibleToolbar } from '../stores';
+import {
+  currentDatabase,
+  currentTheme,
+  emptyConnectionGroupNames,
+  extensions,
+  getExtensions,
+  getVisibleToolbar,
+  visibleToolbar,
+} from '../stores';
 import registerCommand from './registerCommand';
 import { get } from 'svelte/store';
 import AboutModal from '../modals/AboutModal.svelte';
@@ -93,6 +101,31 @@ registerCommand({
   },
 });
 
+registerCommand({
+  id: 'new.connection.folder',
+  toolbar: true,
+  icon: 'icon add-folder',
+  toolbarName: 'Add connection folder',
+  category: 'New',
+  toolbarOrder: 1,
+  name: 'Connection',
+  testEnabled: () => !getCurrentConfig()?.runAsPortal,
+  onClick: () => {
+    showModal(InputTextModal, {
+      value: '',
+      label: 'New connection folder name',
+      header: 'Create connection folder',
+      onConfirm: async folder => {
+        emptyConnectionGroupNames.update(names => {
+          if (!folder) return names;
+          if (names.includes(folder)) return names;
+          return [...names, folder];
+        });
+      },
+    });
+  },
+});
+
 registerCommand({
   id: 'new.query',
   category: 'New',

packages/web/src/icons/FontIcon.svelte

@@ -29,6 +29,7 @@
     'icon arrange': 'mdi mdi-arrange-send-to-back',
     'icon app': 'mdi mdi-layers-triple',
     'icon open-in-new': 'mdi mdi-open-in-new',
+    'icon add-folder': 'mdi mdi-folder-plus-outline',
 
     'icon window-restore': 'mdi mdi-window-restore',
     'icon window-close': 'mdi mdi-window-close',

packages/web/src/stores.ts

@@ -50,6 +50,7 @@ function subscribeCssVariable(store, transform, cssVariable) {
 }
 
 export const selectedWidget = writableWithStorage('database', 'selectedWidget');
+export const emptyConnectionGroupNames = writableWithStorage([], 'emptyConnectionGroupNames');
 export const openedConnections = writable([]);
 export const openedSingleDatabaseConnections = writable([]);
 export const expandedConnections = writable([]);

packages/web/src/widgets/ConnectionList.svelte

@@ -9,14 +9,13 @@
   import * as connectionAppObject from '../appobj/ConnectionAppObject.svelte';
   import SubDatabaseList from '../appobj/SubDatabaseList.svelte';
   import {
-    commands,
     commandsCustomized,
     expandedConnections,
     openedConnections,
     openedSingleDatabaseConnections,
     openedTabs,
+    emptyConnectionGroupNames,
   } from '../stores';
-  import ToolbarButton from '../buttons/ToolbarButton.svelte';
   import runCommand from '../commands/runCommand';
   import getConnectionLabel from '../utility/getConnectionLabel';
   import { useConnectionColorFactory } from '../utility/useConnectionColor';
@@ -24,7 +23,6 @@
   import CloseSearchButton from '../buttons/CloseSearchButton.svelte';
   import { apiCall } from '../utility/api';
   import LargeButton from '../buttons/LargeButton.svelte';
-  import { matchingProps } from '../tabs/TableDataTab.svelte';
   import { plusExpandIcon, chevronExpandIcon } from '../icons/expandIcons';
   import { safeJsonParse } from 'dbgate-tools';
 
@@ -58,6 +56,9 @@
   const handleDropOnGroup = (data, group) => {
     const json = safeJsonParse(data);
     if (json?._id) {
+      if (json.parent) {
+        emptyConnectionGroupNames.update(x => x.filter(y => y != json.parent));
+      }
       apiCall('connections/update', {
         _id: json?._id,
         values: { parent: group },
@@ -75,6 +76,9 @@
     <InlineButton on:click={() => runCommand('new.connection')} title="Add new connection">
       <FontIcon icon="icon plus-thick" />
     </InlineButton>
+    <InlineButton on:click={() => runCommand('new.connection.folder')} title="Add new connection folder">
+      <FontIcon icon="icon add-folder" />
+    </InlineButton>
   {/if}
   <InlineButton on:click={handleRefreshConnections} title="Refresh connection list">
     <FontIcon icon="icon refresh" />
@@ -104,8 +108,10 @@
     groupFunc={data => data.parent}
     expandIconFunc={plusExpandIcon}
     onDropOnGroup={handleDropOnGroup}
+    emptyGroupNames={$emptyConnectionGroupNames}
+    sortGroups
   />
-  {#if connectionsWithParent?.length > 0 && connectionsWithoutParent?.length > 0}
+  {#if (connectionsWithParent?.length > 0 && connectionsWithoutParent?.length > 0) || ($emptyConnectionGroupNames.length > 0 && connectionsWithoutParent?.length > 0)}
     <div class="br" />
   {/if}
   <AppObjectList