Bug Report: Calculating values of a Repeat

[laowit]

Wappler Version : 4.9.1
Operating System : Windows 10
Server Model: NodeJS
Database Type: SQLite
Hosting Type: Local

Expected behavior

What do you think should happen?

Total sums should be calculated dynamically when the repeat items load from the database.

Actual behavior

What actually happens?

Total sums are not calculated dynamically when the repeat items load from the database.

I opened a backup dated 14 March 2022 and it works as intended, if ran with no project asset updates. Once updated the issue appears.

How to reproduce

Create a Repeat with required data inside a container, within a Modal.

Create calculations based on Repeat data.

Open in browser, open Modal and the calculated values are 0.00.

Optional: Execute a form .reset() via button to manually display calculations.

[laowit]

Hey,

After wanting to try the new Beta version of Wappler and noticing this was still an issue, I did some digging and I think I’ve found a solution.

I could see a lot of (re)work had been done to App Connect between v1.12.3 and v1.14.1 (Stable) so I compared the files looking for differences in the form-element portion.

I noticed the render function in v1.14.1 ended with this.updateData()

   render: function(t) {
            dmx.BaseComponent.prototype.render.call(this, t), this.$node.value = this.props.value || "", this.$node.disabled = this.props.disabled, this.$node.defaultValue = this.props.value || "", this.$node.addEventListener("input", this.updateData.bind(this)), this.$node.addEventListener("change", this.updateData.bind(this)), this.$node.addEventListener("invalid", this.updateData.bind(this)), this.$node.addEventListener("focus", this.updateData.bind(this)), this.$node.addEventListener("blur", this.updateData.bind(this)), this.updateData()
        },

Whereas v1.12.3 ends without this.updateData() and instead ends with this.set(“value”, this.props.value || “”), this.set(“disabled”, this.props.disabled)

 render: function(t) {
            dmx.BaseComponent.prototype.render.call(this, t), this.$node.value = this.props.value || "", this.$node.disabled = this.props.disabled, this.$node.defaultValue = this.props.value || "", this.$node.addEventListener("input", this.updateData.bind(this)), this.$node.addEventListener("change", this.updateData.bind(this)), this.$node.addEventListener("invalid", this.updateData.bind(this)), this.$node.addEventListener("focus", this.updateData.bind(this)), this.$node.addEventListener("blur", this.updateData.bind(this)), this.set("value", this.props.value || ""), this.set("disabled", this.props.disabled)
        },

After replacing this.updateData() with this.set(“value”, this.props.value || “”), this.set(“disabled”, this.props.disabled) in the v1.14.1 dmxAppConnect.js the issue seems to have been fixed.

I’m not sure if removing this.updateData() will affect anything else further down the line, but the team can hopefully push a proper fix for this with the above information.

Thanks.

[laowit]

Hi again,

My prior post fixed the dynamic sum of a repeat when grabbing data from the database, and I added this.updateData() to the end of the render function of the dmx.Component - form-element, as below, no problems.

render: function(t) {
            dmx.BaseComponent.prototype.render.call(this, t), this.$node.value = this.props.value || "", this.$node.disabled = this.props.disabled, this.$node.defaultValue = this.props.value || "", this.$node.addEventListener("input", this.updateData.bind(this)), this.$node.addEventListener("change", this.updateData.bind(this)), this.$node.addEventListener("invalid", this.updateData.bind(this)), this.$node.addEventListener("focus", this.updateData.bind(this)), this.$node.addEventListener("blur", this.updateData.bind(this)), this.set("value", this.props.value || ""), this.set("disabled", this.props.disabled), this.updateData()
        }

I've now stumbled upon an issue with the dynamic sum of the repeat when manually inputting data into a form. My form is a repeat within a repeat to achieve sub-Items.

With version 1.12.3 of dmxAppConnect I was able to type into an input and the calculations were performed as I typed. Notice the calculations are instantaneous, including the Overall Totals, which amount to 6 (ex. VAT).

In version 1.14.1 I have to un-focus the current input for just the sub items total to calculate, and then the overall totals seem to be one iteration behind. Totals showing 4 instead of 6 (ex. VAT).

Hopefully someone on the team can figure this out and implement a fix in due course.

Thanks

[patrick]

@laowit

After replacing this.updateData() with this.set(“value”, this.props.value || “”), this.set(“disabled”, this.props.disabled) in the v1.14.1 dmxAppConnect.js the issue seems to have been fixed.

Strange, the updateData() method also contains the code for setting value and disabled state, so it should do the same. I've done some testing but couldn't actually find an issue with it. I'm not sure what it fixed on your page, but if needed then I can put the set methods back there before the updateData method.

I've found out that the repeater doesn't detect any changes from components within him and it only triggers an update from himself as the repeat data was changed. Since the items property references the data from it's children it should also trigger an update when a child changes, made some changes that should trigger this update now.

We did a lot of optimizations so that we do smarter updates of only data that was changed. Before the optimization we just evaluated all expressions on the page to see if something needed updating. The problem with the items of the repeater is that it isn't actual data from the repeater but it just a reference to its children, that's why the repeater didn't see it as an update from itself and expressions using the repeat.items where not updated.

Here the updated App Connect with updated repeater component.
dmxAppConnect.zip (26.5 KB)

[laowit]

Hi Patrick,

Thank you for your detailed reply.

I’ve tested the updated App Connect and can confirm the repeater component is now working as desired! Many thanks for the fix.

I can also confirm my original issue is resolved with the updated App Connect. Maybe it was actually associated with the repeater and not the form-control as I assumed, and what I did was just a fluke?

Either way, much appreciated.

Thanks

[Teodor]

Fixed in Wappler 5.0.0 Beta 6