Update hosttree menus

frontend/src/components/grid.svelte

@@ -1,10 +1,10 @@
 <script>
   import GridItems from './grid-items.svelte';
-  import Icon from './icon.svelte';
+  // import Icon from './icon.svelte';
 
   export let columns = [];
   export let items = [];
-  export let actions = [];
+  // export let actions = [];
   export let key = 'id';
   export let activePath = [];
   export let striped = true;
@@ -13,7 +13,7 @@
 </script>
 
 <div class="grid">
-  {#if actions?.length}
+  <!-- {#if actions?.length}
     <div class="actions">
       {#each actions as action}
         <button class="btn" on:click={action.fn} disabled={action.disabled}>
@@ -22,7 +22,7 @@
         </button>
       {/each}
     </div>
-  {/if}
+  {/if} -->
 
   <table>
     {#if showHeaders && columns.some(col => col.title)}
@@ -59,14 +59,14 @@
     background-color: #fff;
   }
 
-  .actions {
+  /* .actions {
     margin-bottom: 0.5rem;
     padding: 0.5rem;
     border-bottom: 1px solid #ccc;
   }
   .actions button {
     margin-right: 0.2rem;
-  }
+  } */
 
   table {
     border-collapse: collapse;

frontend/src/organisms/connection/hosttree.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { busy, contextMenu, connections } from '../../stores';
+  import { busy, connections } from '../../stores';
   import { createEventDispatcher } from 'svelte';
   import { DropCollection, DropDatabase, OpenCollection, OpenConnection, OpenDatabase } from '../../../wailsjs/go/app/App';
   import Grid from '../../components/grid.svelte';
@@ -75,28 +75,6 @@
     await reload();
     busy.end();
   }
-
-  function buildMenu(hostKey, dbKey, collKey, context = [ 'new', 'edit', 'drop' ]) {
-    // context: n = new, d = drop
-    const menu = [];
-
-    if (context.includes('edit')) {
-      hostKey     && menu.push({ label: `Edit host ${hosts[hostKey].name}…`, fn: () => dispatch('editHost', hostKey) });
-      collKey     && menu.push({ label: `Rename collection ${collKey}…`, fn: () => dispatch('editCollection', collKey) });
-    }
-    if (context.includes('drop')) {
-      menu.length && menu.push({ separator: true });
-      dbKey       && menu.push({ label: `Drop database ${dbKey}…`, fn: () => dropDatabase(dbKey) });
-      collKey     && menu.push({ label: `Drop collection ${collKey}…`, fn: () => dropCollection(dbKey, collKey) });
-    }
-    if (context.includes('new')) {
-      menu.length && menu.push({ separator: true });
-      hostKey     && menu.push({ label: 'New database…', fn: () => dispatch('newDatabase') });
-      dbKey       && menu.push({ label: 'New collection…', fn: () => dispatch('newCollection') });
-    }
-
-    return menu;
-  }
 </script>
 
 <Grid
@@ -115,17 +93,25 @@
         id: collKey,
         name: collKey,
         icon: 'list',
-        menu: buildMenu(hostKey, dbKey, collKey),
+        menu: [
+          { label: `Rename ${collKey} collection…`, fn: () => dispatch('renameCollection', collKey) },
+          { label: `Drop ${collKey}…`, fn: () => dropCollection(dbKey, collKey) },
+          { separator: true },
+          { label: 'New collection…', fn: () => dispatch('newCollection') },
+        ],
       })) || [],
-      menu: buildMenu(hostKey, dbKey),
+      menu: [
+        { label: `Drop database ${dbKey}…`, fn: () => dropDatabase(dbKey) },
+        { separator: true },
+        { label: 'New database…', fn: () => dispatch('newDatabase') },
+      ],
     })),
+    menu: [
+      { label: 'New database…', fn: () => dispatch('newDatabase') },
+        { separator: true },
+      { label: `Edit host ${hosts[hostKey].name}…`, fn: () => dispatch('editHost', hostKey) },
+    ],
   }))}
-  actions={[
-    { icon: 'reload', fn: reload },
-    { icon: '+', fn: evt => contextMenu.show(evt, buildMenu(activeHostKey, activeDbKey, activeCollKey, 'new')) },
-    { icon: 'edit', fn: evt => contextMenu.show(evt, buildMenu(activeHostKey, activeDbKey, activeCollKey, 'edit')), disabled: !activeHostKey },
-    { icon: '-', fn: evt => contextMenu.show(evt, buildMenu(activeHostKey, activeDbKey, activeCollKey, 'drop')), disabled: !activeDbKey },
-  ]}
   bind:activePath={activeGridPath}
   on:select={e => {
     const key = e.detail.itemKey;
@@ -136,3 +122,12 @@
     }
   }}
 />
+
+<!--
+  actions={[
+    { icon: 'reload', fn: reload },
+    { icon: '+', fn: evt => contextMenu.show(evt, buildMenu(activeHostKey, activeDbKey, activeCollKey, 'new')) },
+    { icon: 'edit', fn: evt => contextMenu.show(evt, buildMenu(activeHostKey, activeDbKey, activeCollKey, 'edit')), disabled: !activeHostKey },
+    { icon: '-', fn: evt => contextMenu.show(evt, buildMenu(activeHostKey, activeDbKey, activeCollKey, 'drop')), disabled: !activeDbKey },
+  ]}
+-->

frontend/src/organisms/connection/index.svelte

@@ -75,6 +75,7 @@
   onMount(getHosts);
 </script>
 
+<div class="tree">
   <HostTree
     {hosts}
     bind:activeHostKey
@@ -85,8 +86,9 @@
     on:newDatabase={() => newDb = {}}
     on:newCollection={() => newColl = {}}
     on:editHost={e => editHost(e.detail)}
-  on:editCollection={e => openEditCollModal(e.detail)}
+    on:renameCollection={e => openEditCollModal(e.detail)}
   />
+</div>
 
 <CollectionDetail
   collection={$connections[activeHostKey]?.databases[activeDbKey]?.collections?.[activeCollKey]}
@@ -156,6 +158,11 @@
     justify-content: space-between;
   }
 
+  .tree {
+    padding: 0.5rem;
+    background-color: #fff;
+  }
+
   .rename {
     text-align: center;
     display: flex;