fe: displaying item ancestors and descendants
This commit is contained in:
parent
0665a79dd5
commit
e2b0ffb7cd
|
@ -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>
|
|
@ -101,25 +101,16 @@ 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
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -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', () => {
|
||||
|
|
Loading…
Reference in a new issue