fix item ancestor/descendant lists

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>

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', () => {

src/items/items.service.ts

@@ -36,14 +36,13 @@ export class ItemsService {
   }
 
   async getItemAncestors(item: ItemModel): Promise<Item[]> {
-    const childItem = await this.itemRepository.findOneOrFail(
-      this.eans.toID(item.id),
-      {
-        relations: ['parent'],
-      },
+    const id = this.eans.toID(item.id);
+    const childItem = await this.itemRepository.findOneOrFail(id, {
+      relations: ['parent'],
+    });
+    return (await this.treeRepository.findAncestors(childItem)).filter(
+      (anc) => anc.id !== id,
     );
-    // TreeRepository.findAncestors()[-1] is always the child item itself
-    return (await this.treeRepository.findAncestors(childItem)).slice(0, -1);
   }
 
   async getItemChildren(item: ItemModel): Promise<Item[]> {
@@ -55,14 +54,13 @@ export class ItemsService {
   }
 
   async getItemDescendants(item: ItemModel): Promise<Item[]> {
-    const parentItem = await this.itemRepository.findOneOrFail(
-      this.eans.toID(item.id),
-      {
-        relations: ['parent'],
-      },
+    const id = this.eans.toID(item.id);
+    const parentItem = await this.itemRepository.findOneOrFail(id, {
+      relations: ['parent'],
+    });
+    return (await this.treeRepository.findDescendants(parentItem)).filter(
+      (des) => des.id !== id,
     );
-    // TreeRepository.findDescendants()[0] is always the parent item
-    return (await this.treeRepository.findDescendants(parentItem)).slice(1);
   }
 
   async getItemList(cursor: number = 0): Promise<PaginatedItems> {