fe: displaying item ancestors and descendants
This commit is contained in:
parent
0665a79dd5
commit
e2b0ffb7cd
|
@ -12,5 +12,51 @@
|
||||||
<th>ean13</th>
|
<th>ean13</th>
|
||||||
<td>{{ean13}}</td>
|
<td>{{ean13}}</td>
|
||||||
</tr>
|
</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>
|
</tbody>
|
||||||
</table>
|
</table>
|
|
@ -101,28 +101,19 @@ async function showItemDetails(id: string) {
|
||||||
ean13
|
ean13
|
||||||
name
|
name
|
||||||
notes
|
notes
|
||||||
parent {
|
|
||||||
id
|
|
||||||
ean13
|
|
||||||
name
|
|
||||||
}
|
|
||||||
ancestors {
|
ancestors {
|
||||||
id
|
|
||||||
ean13
|
|
||||||
name
|
|
||||||
}
|
|
||||||
children {
|
|
||||||
id
|
|
||||||
ean13
|
ean13
|
||||||
name
|
name
|
||||||
}
|
}
|
||||||
descendants {
|
descendants {
|
||||||
id
|
|
||||||
ean13
|
ean13
|
||||||
name
|
name
|
||||||
|
parent {
|
||||||
|
ean13
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
`,
|
`,
|
||||||
{
|
{
|
||||||
id,
|
id,
|
||||||
|
@ -130,6 +121,13 @@ async function showItemDetails(id: string) {
|
||||||
);
|
);
|
||||||
(document.querySelector('#modal-body') as HTMLDivElement).innerHTML =
|
(document.querySelector('#modal-body') as HTMLDivElement).innerHTML =
|
||||||
itemDetails(loaded.item!);
|
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', () => {
|
window.addEventListener('load', () => {
|
||||||
|
|
Loading…
Reference in a new issue