From 82c30f777241d377cce4294c6e50fd96b37a09cb Mon Sep 17 00:00:00 2001
From: Romein van Buren <romein@vburen.nl>
Date: Wed, 18 Jan 2023 14:15:54 +0100
Subject: [PATCH] Striped grid

---
 frontend/src/components/grid-items.svelte        | 16 +++++++++++-----
 frontend/src/components/grid.svelte              | 11 ++++-------
 frontend/src/components/objectgrid.svelte        | 10 ++++++----
 .../src/organisms/addressbar/hostmodal.svelte    |  1 +
 frontend/src/organisms/connection/dblist.svelte  |  1 +
 5 files changed, 23 insertions(+), 16 deletions(-)

diff --git a/frontend/src/components/grid-items.svelte b/frontend/src/components/grid-items.svelte
index 50656c9..330fb8e 100644
--- a/frontend/src/components/grid-items.svelte
+++ b/frontend/src/components/grid-items.svelte
@@ -9,6 +9,7 @@
   export let activeKey = '';
   export let activeChildKey = '';
   export let level = 0;
+  export let striped = true;
 
   const dispatch = createEventDispatcher();
   let childrenOpen = {};
@@ -90,6 +91,7 @@
     on:dblclick={() => doubleClick(item[key])}
     on:contextmenu|preventDefault={evt => showContextMenu(evt, item)}
     class:selected={activeKey === item[key] && !activeChildKey}
+    class:striped
   >
     <td class="has-toggle">
       {#if item.children?.length}
@@ -117,6 +119,7 @@
     <svelte:self
       {columns}
       {key}
+      {striped}
       bind:activeKey={activeChildKey}
       showHeaders={false}
       items={item.children}
@@ -128,6 +131,14 @@
 {/each}
 
 <style>
+  tr.striped:nth-of-type(even) td {
+    background-color: #eee;
+  }
+  tr.selected td {
+    background-color: #00008b !important;
+    color: #fff;
+  }
+
   td {
     padding: 0.3rem;
     text-overflow: ellipsis;
@@ -145,11 +156,6 @@
     max-width: 25em;
   }
 
-  tbody tr.selected td {
-    background-color: #00008b;
-    color: #fff;
-  }
-
   button.toggle {
     color: inherit;
     padding: 0;
diff --git a/frontend/src/components/grid.svelte b/frontend/src/components/grid.svelte
index b68d00c..53d14df 100644
--- a/frontend/src/components/grid.svelte
+++ b/frontend/src/components/grid.svelte
@@ -9,10 +9,10 @@
   export let activeKey = '';
   export let activeChildKey = '';
   export let showHeaders = true;
-  export let level = 0;
+  export let striped = true;
 </script>
 
-<div class:grid={level === 0} class:subgrid={level > 0}>
+<div class="grid">
   {#if actions?.length}
     <div class="actions">
       {#each actions as action}
@@ -37,7 +37,7 @@
     {/if}
 
     <tbody>
-      <GridItems {items} {columns} {key} bind:activeKey bind:activeChildKey on:select on:selectChild on:trigger />
+      <GridItems {items} {columns} {key} {striped} bind:activeKey bind:activeChildKey on:select on:selectChild on:trigger />
     </tbody>
   </table>
 </div>
@@ -48,9 +48,6 @@
     height: 100%;
     background-color: #fff;
   }
-  .subgrid {
-    width: 100%;
-  }
 
   .actions {
     margin-bottom: 0.5rem;
@@ -64,7 +61,7 @@
   table {
     border-collapse: collapse;
     width: 100%;
-    /* table-layout: fixed; */
+    background-color: #fff;
   }
 
   table thead {
diff --git a/frontend/src/components/objectgrid.svelte b/frontend/src/components/objectgrid.svelte
index 9d8d5b5..6fec75b 100644
--- a/frontend/src/components/objectgrid.svelte
+++ b/frontend/src/components/objectgrid.svelte
@@ -20,8 +20,10 @@
     if (Array.isArray(data)) {
       for (const item of data) {
         const newItem = {};
-        newItem.key = item[key];
-        newItem.children = dissectObject(item);
+        newItem.key = key;
+        newItem.value = item[key];
+        newItem.type = getType(item[key]);
+        newItem.children = dissectObject(item, key);
         newItem.menu = item.menu;
         items = [ ...items, newItem ];
       }
@@ -53,9 +55,9 @@
     }
   }
 
-  function dissectObject(object) {
+  function dissectObject(object, exclude) {
     const entries = [ ...Array.isArray(object) ? object.entries() : Object.entries(object) ];
-    return entries.map(([ key, value ]) => {
+    return entries.filter(([ key ]) => key != exclude).map(([ key, value ]) => {
       key = key + '';
       const type = getType(value);
       const child = { key, value, type, menu: value.menu };
diff --git a/frontend/src/organisms/addressbar/hostmodal.svelte b/frontend/src/organisms/addressbar/hostmodal.svelte
index 8f5d45e..ace8ae0 100644
--- a/frontend/src/organisms/addressbar/hostmodal.svelte
+++ b/frontend/src/organisms/addressbar/hostmodal.svelte
@@ -60,6 +60,7 @@
     border-radius: 0;
     background: #eee;
     color: inherit;
+    border: none;
     border-left: 1px solid #ccc;
   }
   .host button:hover {
diff --git a/frontend/src/organisms/connection/dblist.svelte b/frontend/src/organisms/connection/dblist.svelte
index 856f403..b5c456c 100644
--- a/frontend/src/organisms/connection/dblist.svelte
+++ b/frontend/src/organisms/connection/dblist.svelte
@@ -74,6 +74,7 @@
 
 {#if host && connection}
   <Grid
+    striped={false}
     columns={[ { key: 'id' }, { key: 'collCount', right: true } ]}
     items={Object.keys(connection.databases).map(dbKey => ({
       id: dbKey,