laudom
/
metropolis
2
0
Fork 0
Code Issues 4 Pull Requests Packages Projects Releases Wiki Activity

fe: displaying item ancestors and descendants

master
Lauren Liberda 2021-07-31 19:30:23 +02:00
parent 0665a79dd5
commit e2b0ffb7cd
2 changed files with 57 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
frontend/src/components/itemDetails.hbs
View File

@ -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>

24
frontend/src/main.ts
View File

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