From e2b0ffb7cdd9fcd4bb30662eca75b582f8150460 Mon Sep 17 00:00:00 2001
From: Lauren Liberda <laura@selfisekai.rocks>
Date: Sat, 31 Jul 2021 19:30:23 +0200
Subject: [PATCH] fe: displaying item ancestors and descendants

---
 frontend/src/components/itemDetails.hbs | 46 +++++++++++++++++++++++++
 frontend/src/main.ts                    | 24 ++++++-------
 2 files changed, 57 insertions(+), 13 deletions(-)

diff --git a/frontend/src/components/itemDetails.hbs b/frontend/src/components/itemDetails.hbs
index a80597c..ad8a96e 100644
--- a/frontend/src/components/itemDetails.hbs
+++ b/frontend/src/components/itemDetails.hbs
@@ -12,5 +12,51 @@
       <th>ean13</th>
       <td>{{ean13}}</td>
     </tr>
+    <tr>
+      <th>ancestors</th>
+      <td>
+        {{#if ancestors}}
+          <table class='table is-striped is-narrow is-fullwidth'>
+            {{#each ancestors}}
+              <tr>
+                <th>{{name}}</th>
+                <td>{{ean13}}</td>
+                <td>
+                  <button
+                    class='item-open-details button is-light is-small'
+                    data-id='{{ean13}}'
+                  >details</button>
+                </td>
+              </tr>
+            {{/each}}
+          </table>
+        {{else}}
+          none
+        {{/if}}
+      </td>
+    </tr>
+    <tr>
+      <th>descendants</th>
+      <td>
+        {{#if descendants}}
+          <table class='table is-striped is-narrow is-fullwidth'>
+            {{#each descendants}}
+              <tr>
+                <th>{{name}}</th>
+                <td>{{ean13}}</td>
+                <td>
+                  <button
+                    class='item-open-details button is-light is-small'
+                    data-id='{{ean13}}'
+                  >details</button>
+                </td>
+              </tr>
+            {{/each}}
+          </table>
+        {{else}}
+          none
+        {{/if}}
+      </td>
+    </tr>
   </tbody>
 </table>
\ No newline at end of file
diff --git a/frontend/src/main.ts b/frontend/src/main.ts
index 2b3ed11..eddc74c 100644
--- a/frontend/src/main.ts
+++ b/frontend/src/main.ts
@@ -101,28 +101,19 @@ async function showItemDetails(id: string) {
         ean13
         name
         notes
-        parent {
-          id
-          ean13
-          name
-        }
         ancestors {
-          id
-          ean13
-          name
-        }
-        children {
-          id
           ean13
           name
         }
         descendants {
-          id
           ean13
           name
+          parent {
+            ean13
+          }
         }
       }
-    }    
+    }
     `,
     {
       id,
@@ -130,6 +121,13 @@ async function showItemDetails(id: string) {
   );
   (document.querySelector('#modal-body') as HTMLDivElement).innerHTML =
     itemDetails(loaded.item!);
+  (
+    Array.from(
+      document.querySelectorAll('#modal .item-open-details'),
+    ) as HTMLButtonElement[]
+  ).forEach((butt) =>
+    butt.addEventListener('click', () => showItemDetails(butt.dataset.id!)),
+  );
 }
 
 window.addEventListener('load', () => {