Major grid changes and bugfixes

frontend/src/components/grid-items.svelte

@@ -6,8 +6,9 @@
   export let items = [];
   export let columns = [];
   export let key = '';
+  export let path = [];
   export let activeKey = '';
-  export let activeChildKey = '';
+  export let activePath = [];
   export let level = 0;
   export let striped = true;
 
@@ -33,8 +34,13 @@
 
   function select(itemKey) {
     activeKey = itemKey;
-    activeChildKey = '';
-    dispatch('select', itemKey);
+    if (level === 0) {
+      activePath = [ itemKey ];
+    }
+    else {
+      activePath = [ ...path, itemKey ];
+    }
+    dispatch('select', { level, itemKey });
   }
 
   function closeAll() {
@@ -42,12 +48,6 @@
     dispatch('closeAll');
   }
 
-  function selectChild(itemKey, childKey) {
-    select(itemKey);
-    activeChildKey = childKey;
-    dispatch('selectChild', childKey);
-  }
-
   function toggleChildren(itemKey, shift) {
     childrenOpen[itemKey] = !childrenOpen[itemKey];
     if (shift) {
@@ -57,7 +57,7 @@
 
   function doubleClick(itemKey) {
     toggleChildren(itemKey, false);
-    dispatch('trigger', itemKey);
+    dispatch('trigger', { level, itemKey });
   }
 
   function showContextMenu(evt, item) {
@@ -85,12 +85,12 @@
   }
 </script>
 
-{#each _items as item (item[key])}
+{#each _items as item}
   <tr
     on:click={() => select(item[key])}
     on:dblclick={() => doubleClick(item[key])}
     on:contextmenu|preventDefault={evt => showContextMenu(evt, item)}
-    class:selected={activeKey === item[key] && !activeChildKey}
+    class:selected={!activePath[level + 1] && activePath.every(k => path.includes(k) || k === item[key]) && (activePath[level] === item[key])}
     class:striped
   >
     <td class="has-toggle">
@@ -120,12 +120,13 @@
       {columns}
       {key}
       {striped}
-      bind:activeKey={activeChildKey}
-      showHeaders={false}
+      path={[ ...path, item[key] ]}
       items={item.children}
       level={level + 1}
-      on:select={e => selectChild(item[key], e.detail)}
+      bind:activePath
       on:closeAll={closeAll}
+      on:select
+      on:trigger
     />
   {/if}
 {/each}

frontend/src/components/grid.svelte

@@ -6,9 +6,7 @@
   export let items = [];
   export let actions = [];
   export let key = 'id';
-  export let activeKey = '';
-  export let activeChildKey = '';
-  export let showHeaders = true;
+  export let activePath = [];
   export let striped = true;
 </script>
 
@@ -25,19 +23,8 @@
   {/if}
 
   <table>
-    {#if showHeaders && columns.some(col => col.title)}
-      <thead>
-        <tr>
-          <th class="has-toggle"></th>
-          {#each columns as column}
-            <th scope="col">{column.title || ''}</th>
-          {/each}
-        </tr>
-      </thead>
-    {/if}
-
     <tbody>
-      <GridItems {items} {columns} {key} {striped} bind:activeKey bind:activeChildKey on:select on:selectChild on:trigger />
+      <GridItems {items} {columns} {key} {striped} bind:activePath on:select on:trigger />
     </tbody>
   </table>
 </div>
@@ -63,22 +50,4 @@
     width: 100%;
     background-color: #fff;
   }
-
-  table thead {
-    border-bottom: 2px solid #ccc;
-  }
-
-  th {
-    font-weight: 600;
-    text-align: left;
-  }
-
-  tr {
-    cursor: pointer;
-  }
-
-  th {
-    padding: 0.3rem;
-    text-overflow: ellipsis;
-  }
 </style>

frontend/src/components/icon.svelte

@@ -24,4 +24,6 @@
   <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-clipboard"><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path><rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect></svg>
 {:else if name === 'edit'}
   <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-edit-3"><path d="M12 20h9"></path><path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"></path></svg>
+{:else if name === 'check'}
+  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-check-circle"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline></svg>
 {/if}

frontend/src/components/objectgrid.svelte

@@ -3,8 +3,7 @@
 
   export let data = [];
   export let key = '_id';
-  export let showHeaders = false;
-  export let activeKey = '';
+  export let activePath = [];
 
   const columns = [
     { key: 'key', label: 'Key' },
@@ -20,10 +19,9 @@
     if (Array.isArray(data)) {
       for (const item of data) {
         const newItem = {};
-        newItem.key = key;
-        newItem.value = item[key];
+        newItem.key = item[key];
         newItem.type = getType(item[key]);
-        newItem.children = dissectObject(item, key);
+        newItem.children = dissectObject(item);
         newItem.menu = item.menu;
         items = [ ...items, newItem ];
       }
@@ -55,12 +53,12 @@
     }
   }
 
-  function dissectObject(object, exclude) {
+  function dissectObject(object) {
     const entries = [ ...Array.isArray(object) ? object.entries() : Object.entries(object) ];
-    return entries.filter(([ key ]) => key != exclude).map(([ key, value ]) => {
+    return entries.map(([ key, value ]) => {
       key = key + '';
       const type = getType(value);
-      const child = { key, value, type, menu: value.menu };
+      const child = { key, value, type, menu: value?.menu };
 
       if (type.startsWith('object') || type.startsWith('array')) {
         child.children = dissectObject(value);
@@ -74,10 +72,8 @@
 <Grid
   key="key"
   on:select
-  on:selectChild
   on:trigger
-  bind:activeKey
+  bind:activePath
   {columns}
   {items}
-  {showHeaders}
 />