An app showing a list of building systems components with the ability to add a component. Database is Mongodb.
+page.js fetches the list, a defintition of the table + populates “lookup” lists (to display text instead of _id on the list), returning all these things in data
page.svelte uses svelte component <GenericListPage> passing in data.rows.components thus:
<div class="mt-2">
Components
<GenericListView
definition="{data.subAssetDefinition}"
data="{data.rows.components}"
table="true"
on:invalidate="{myInvalidate}"
/>
</div>
<GenericListView> builds a <table>, including a <TableRowTd> component:
{#each data as row}
<tr on:click="{rowClick (row)}">
{#each definition.tableFields as field}
<TableRowTd
{definition}
{field}
data="{row[field] || ''}"
/>
{/each}
</tr>
{/each}
Component <TableRowTd> has a $: function that takes the value in data (which is an _id) and searches through the appropriate list to match against the _id in the list and get the text.
$: {
displayValue = data;
let fieldDef = definition.schema.find (el => el.name == field);
if (fieldDef && fieldDef.listType) {
console.log (`<TableRowTd> looking up list for ${field} ${data} ${fieldDef.table}`)
try {
console.log (definition.lists)
let list = definition.lists.find ((el) => el.table === fieldDef.table);
if (list) {
console.log (`found the list`)
let row = list.data.find (el => el._id === data);
if (row) {
console.log (`found`)
displayValue = row.value;
}
}
} catch (err) {
console.log('error on %s: %s', fieldDef.table, err.toString())
}
}
}
All functions as desired on initial page load:
On adding an entry, the invalidate event is raised and passed up the stack – page.js' load function is called again.
However, now, in the $: function in <TableRowTd>, the let list = definition.lists.find ((el) => el.table === fieldDef.table); call now returns undefined, i.e. it does not find the item in the list, despite the item being present in the list:
Structure of the list:
Console log where we see the “match” failing:
Any thoughts on what’s going on here? Maybe I’m “overloading” array.find() somehow? Maybe there’s smart way to move this searching “up” to the <Generic ListPage> component?
