Is there a way to make the report button visible only after all the data has been loaded from the latest click of the budget button? Currently, when the budget button is clicked, it retrieves budgets and displays them in a Vue grid using Kendo Grid. To speed up data loading, the grid initially loads with some data before making additional API calls for two more columns of data. These subsequent API calls are processed 10 at a time in a loop due to potential delays. What's the simplest approach to show the button once all the data has finished loading?
I've shared my current method for retrieving budgets and the computed property that determines when the report button should appear. One issue I'm encountering is that even if I reset the estimateAmounts object array at the start of the getBudgets method, existing loops may still be running from previous calls and affecting the comparison with the data object in my computation. Any suggestions on how best to address this challenge would be greatly appreciated. Feel free to reach out if you need more information.
data() {
return {
budgets: [],
estimateAmounts: {},
}
},
methods: {
async getBudgets() {
this.isLoading = true;
this.budgets = []
this.estimateAmounts = {}
const data = await api.budget.getBudgetReport({
accountIds: this.accountIds.map(a => a.accountId),
salesRepIds: this.selectedSalesReps.map(sr => sr.userId),
startDate: this.startDate,
endDate: this.endDate
})
this.budgets = data.map(d => { return { ...d, startDate: new Date(d.startDate) } })
this.isLoading = false;
// group calculations in 10's to run concurrently and return results faster
let idSets = chunk(data.map(d => d.budgetId), 10)
for (const ids of idSets)
api.budget.calculateTotalsForBudgets(ids, this.user.userId)
.then(res => this.estimateAmounts = { ...this.estimateAmounts, ...res })
},
},
computed: {
setButtons() {
return Object.keys(this.estimateAmounts).length == this.budgets.length && this.budgets.length > 0
},
}