I wrote a working example of a real problem that I'm trying to solve
I created an object simulating the json return I have from the database
I need:
- list contracts and contract batchs
- when entering the function, mark the last batch of the contract as selected in the drop-down list
- when entering the function, display the invoices for the last
batchonly of the contract selected in theul-invoiceselement. - load and display the respective invoices when changing the batch
Problems:
- I cannot list invoices for the last batch of the selected contract
- Although there is a function for
onchange="getInvoices", I alwaysgetInvoices is not defined
Note:
- When entering the page, I already have the information of the selected contract, in the case of the example, I left the contract with
ID 1. - In the example I am using the
in-attendanceclass to define the selected contract - I am using
Revealing Patternand I want to keep this pattern
<html>
<label id="contracts"></label>
<ul id="ul-invoices"></ul>
<script>
let lblContract = document.querySelector('#contracts');
let UlInvoices = document.querySelector('#ul-invoices');
let contractInAttendance = 1;
const objectContract = {
id: 1,
nome: 'wagner',
contracts: [{
id: 1,
contract: '123456',
batches: [ {
id: 1,
contract_id: 1,
batch: '1',
invoices: [ {
value: 10,
batch_id: 1,
}]
},
{
id: 2,
contract_id: 1,
batch: '2',
invoices: [{
value: 10,
batch_id: 2,
}]
}]
},
{
id: 2,
contract: '246789',
batches: [ {
id: 3,
contract_id: 2,
batch: '1',
invoices: [ {
value: 20,
batch_id: 3,
}]
}]
}]
}
const revelling = (function() {
function privateInit() {
const contracts = objectContract.contracts;
let contractFilteredById = contracts.filter(contract => contract.id === contractInAttendance);
for (const contract of contracts) {
const selectedContract = contract.id === contractFilteredById[0].id ? 'in-attendance' : '';
//let batchFilteredById = contract.batches.filter(batch => batch.id === batchInAttendance);
let htmlForBatchsOptions = contract.batches.map(batch => `<option value=${batch.id}>${batch.batch}</option>`).join('');
lblContract.innerHTML +=
`<div class="contract-${selectedContract}" style="display: flex;">
<div id="contract-${contract.contract}" data-contract="${contract.id}" class="loren">
<span>${contract.contract}</span>
</div>
<div class="ipsulum" style="margin-left: 5px;">
<select class="sel-batch" onchange="getInvoices(this)">
${htmlForBatchsOptions}
</select>
</div>
</div>`;
const batchOption = document.querySelector('select.sel-batch');
batchOption.value = 2;
/!* create method for load invoices */
}
}
/!* Method fix for load invoices onchange sel-batch */
function getInvoices(selectObject) {
console.log('populate invoices element #ul-invoices');
}
return {
init: privateInit()
}
})();
revelling.init;
</script>
</html>
Top comments (0)