delete branch operation

packages/web/src/widgets/DbKeysSubTree.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+  import _ from 'lodash';
+
   import AppObjectCore from '../appobj/AppObjectCore.svelte';
   import LoadingInfo from '../elements/LoadingInfo.svelte';
   import { apiCall } from '../utility/api';
@@ -24,7 +26,9 @@
 {#await apiCall('database-connections/load-keys', { conid, database, root, reloadToken, reloadToken2 })}
   <LoadingInfo message="Loading key list" wrapper />
 {:then items}
-  {#each (items || []).slice(0, maxShowCount) as item}
+  {@const itemsSorted = _.sortBy(items || [], 'text')}
+
+  {#each itemsSorted.slice(0, maxShowCount) as item}
     <DbKeysTreeNode
       {conid}
       {database}
@@ -37,7 +41,7 @@
     />
   {/each}
 
-  {#if (items || []).length > maxShowCount}
+  {#if itemsSorted.length > maxShowCount}
     <AppObjectCore
       {indentLevel}
       title="Show more..."

packages/web/src/widgets/DbKeysTreeNode.svelte

@@ -48,12 +48,35 @@
           });
         },
       },
-      item.type == 'dir' && {
-        label: 'Reload',
-        onClick: () => {
-          reloadToken += 1;
+      item.type == 'dir' && [
+        {
+          label: 'Reload',
+          onClick: () => {
+            reloadToken += 1;
+          },
         },
-      },
+        {
+          label: 'Delete branch',
+          onClick: () => {
+            const branch = `${item.root}:*`;
+            showModal(ConfirmModal, {
+              message: `Really delete branch ${branch} with all keys?`,
+              onConfirm: async () => {
+                await apiCall('database-connections/call-method', {
+                  conid,
+                  database,
+                  method: 'mdel',
+                  args: [branch],
+                });
+
+                if (onRefreshParent) {
+                  onRefreshParent();
+                }
+              },
+            });
+          },
+        },
+      ],
     ];
   }
 </script>