frontend/src/components/itemDetails.hbs

@@ -12,51 +12,5 @@
       <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,19 +101,28 @@ 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,
@@ -121,13 +130,6 @@ 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,13 +36,14 @@ export class ItemsService {
   }
 
   async getItemAncestors(item: ItemModel): Promise<Item[]> {
-    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,
+    const childItem = await this.itemRepository.findOneOrFail(
+      this.eans.toID(item.id),
+      {
+        relations: ['parent'],
+      },
     );
+    // TreeRepository.findAncestors()[-1] is always the child item itself
+    return (await this.treeRepository.findAncestors(childItem)).slice(0, -1);
   }
 
   async getItemChildren(item: ItemModel): Promise<Item[]> {
@@ -54,13 +55,14 @@ export class ItemsService {
   }
 
   async getItemDescendants(item: ItemModel): Promise<Item[]> {
-    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,
+    const parentItem = await this.itemRepository.findOneOrFail(
+      this.eans.toID(item.id),
+      {
+        relations: ['parent'],
+      },
     );
+    // TreeRepository.findDescendants()[0] is always the parent item
+    return (await this.treeRepository.findDescendants(parentItem)).slice(1);
   }
 
   async getItemList(cursor: number = 0): Promise<PaginatedItems> {