How can you action a calculation on query load?

UKRiggers · March 1, 2020, 12:42pm

I am using SPA pages.

I have a series of on-click event calculations, so in the example below on item “31 Tyre -run flat” when “3” is clicked the calculation ‘3 x 150’ is made and the result ‘450’ is set into the Cost field.

This is great when first accessing the page and the user goes through and clicks the various options, BUT my issue comes after the data is saved and then recalled. I can populate the options (as shown for items 29 and 30, but how do I trigger the calculation?

The total of the cost is not stored at this stage because there are other variables that come into play.

The code used in the on-click event…
specialist_total.setValue((specialist_radio.value * specialist_cost).formatNumber(2, ".", ""))

Teodor · March 1, 2020, 12:44pm

Why setting this value onclick and not using dynamic attributes > value for the cost field?

So it should be something like:

dmx-bind:value="(specialist_radio.value * specialist_cost).formatNumber(2, &quot;.&quot;, &quot;&quot;)"

UKRiggers · March 1, 2020, 1:06pm

Hi @Teodor, good question, I had to remind myself why I could not do it the way you suggest.

I have probably done things completely wrong but so far it works except your suggestion (which I had tried). I get a “Invalid Number” instead.

So rather than pulling the data from the cost input field I decided to push it to the cost input field from an on-click event, which worked.

This is my code for this section.

There is a repeat within a repeat and the cost field doesn’t seem to like the “specialist_radio.value”

	<div id="repeat2" is="dmx-repeat" dmx-bind:repeat="sc_specialist_q.data.sa_specialist_q">
	<div class="form-group row" id="row_specialist">
		<div class="input-group col-sm-6">
			<div class="input-group-prepend">
				<div class="input-group-text">{{specialist_id}} {{specialist_name}}</div>
			</div>
			<div class="btn-group btn-group-toggle d-flex flex-wrap flex-grow-1" is="dmx-repeat" data-toggle="buttons" dmx-bind:repeat="specialist_max+1">
				<label 
					class="btn btn-sm btn-outline-secondary" 
					dmx-bind:for="input_{{specialist_id}}_{{$index}}" 
					dmx-on:click="$index == 0 ? specialist_total.setValue('') : (specialist_total.setValue((specialist_radio.value * specialist_cost).formatNumber(2, &quot;.&quot;, &quot;&quot;))); $index == 0 ? specialist_data.delete({sd_id: specialist_id}) : specialist_data.upsert({sd_id: specialist_id},{name: specialist_data.data[0].name.concat(form_new_ad_report.repeat2[0].specialist_radio.value), value: specialist_data.data[0].value.concat(form_new_ad_report.repeat2[0].$index), sd_id: specialist_id, sd_name: specialist_name, sd_value: specialist_radio.value})" 
					dmx-class:active="sc_ad_job_q.data.sa_q_job_q[0].meth_specialist_ref.split(',').contains(specialist_id + '_' + $index) || specialist_data.data.values(`sd_value == 0 ? '' : sd_id + '_' + sd_value`).contains(specialist_id + '_' + $index)" 
				>
					<input 
						class="custom-control-input" 
						type="radio" 
						dmx-bind:id="input_{{specialist_id}}_{{$index}}" 
						dmx-bind:value="$index" 
						id="specialist_radio" 
						name="specialist_radio" 
						value="1"
						dmx-bind:name="{{specialist_name}}"
						dmx-bind:checked="sc_ad_job_q.data.sa_q_job_q[0].meth_specialist_ref.split(',').contains(specialist_id + '_' + $index) || specialist_data.data.values(`sd_value == 0 ? '' : sd_id + '_' + sd_value`).contains(specialist_id + '_' + $index)"
					>{{$index}}</label>
			</div>
		</div>
		<div class="input-group col-sm-3">
			<div class="input-group-prepend">
				<div class="input-group-text">Cost<i class="fas fa-pound-sign fa-fw fa-lg"></i></div>
			</div>
			<input 
				class="form-control text-right" 
				id="specialist_total" 
				name="specialist_total"
				dmx-bind:id="inp_costs_input_{{specialist_id}}" 
				dmx-bind:name="costs_input_{{specialist_id}}" 
				placeholder="Cost" 
				tabindex="-1" 
				dmx-bind:value="(specialist_radio.value * specialist_cost).formatNumber(2, &quot;.&quot;, &quot;&quot;)">
		</div>
	</div>
	</div>
</section>

Teodor · March 1, 2020, 1:35pm

Have you tried to convert the input (radio) value to number before making the calculations?

UKRiggers · March 1, 2020, 2:43pm

Sorry for the delay, had to walk the dog (puppy).

I have just tried dmx-bind:value="specialist_radio.value.toNumber()"> but that didn’t give any result.

UKRiggers · March 2, 2020, 9:05am

Good morning @Teodor, have you had any further thoughts on my problem?

Teodor · March 2, 2020, 9:48am

Your structure is not really good for this kind of calculations.
You are currently using a button group with a repeater applied to it, and then the text input is outside this repeat … so you can’t access the radio value like that.

You need to change this to a structure like:

radio group (just apply your button group class/styles to it) > repeat > radio

this way you will be able to access the radio group value (which will be the selected radio value) from outside of your repeat, which as i explained is not possible currently.

UKRiggers · March 2, 2020, 10:30am

Thank you for looking at this for me. I knew I had probably done something incorrectly but I couldn’t see what or why. I totally understand what you are saying and will do the small changes as you suggest.

Hopefully I can now move on. Cheers.

UKRiggers · March 2, 2020, 1:50pm

Hi @Teodor, I am nearly there but not quite.

As you can see from this screen shot, I can do the calculation ‘outside’ of the input field (to the right), but if I repeat the same code inside the input field, I don’t get any result. It stays as zero inside.

Here is the last bit of code I tried in the input field

dmx-bind:value="value.toNumber().default(0)"

Here is the code used to create the calculation to the right which worked

{{value}} x {{specialist_cost}} = {{value.default(0) * specialist_cost}}

Teodor · March 2, 2020, 1:52pm

What is the dynamic expression used in your text inputs?

UKRiggers · March 2, 2020, 1:56pm

Here is that lump of code from earlier, but changed as per your suggestion. The reason I am including it all again is that you may well say that I have not done exactly as you suggested.

<section dmx-show="(var_toggle_specialist.value == 0)">
	<div id="rpt_specialist" is="dmx-repeat" dmx-bind:repeat="sc_specialist_q.data.sa_specialist_q">
		<div class="form-group row" id="row_specialist" is="dmx-radio-group">
			<div class="input-group col-sm-6">
				<div class="input-group-prepend">
					<div class="input-group-text">{{specialist_id}} {{specialist_name}}</div>
				</div>
				<div class="btn-group btn-group-toggle d-flex flex-wrap flex-grow-1" is="dmx-repeat" data-toggle="buttons" dmx-bind:repeat="specialist_max+1" id="rpt_specialist_btns">
					<label class="btn btn-sm btn-outline-secondary" dmx-bind:for="input_{{specialist_id}}_{{$index}}" dmx-on:click="$index == 0 ? specialist_total.setValue('') : (specialist_total.setValue((specialist_radio.value * specialist_cost).formatNumber(2, &quot;.&quot;, &quot;&quot;))); $index == 0 ? specialist_data.delete({sd_id: specialist_id}) : specialist_data.upsert({sd_id: specialist_id},{name: specialist_data.data[0].name.concat(form_new_ad_report.rpt_specialist[0].specialist_radio.value), value: specialist_data.data[0].value.concat(form_new_ad_report.rpt_specialist[0].$index), sd_id: specialist_id, sd_name: specialist_name, sd_value: specialist_radio.value})" dmx-class:active="sc_ad_job_q.data.sa_q_job_q[0].meth_specialist_ref.split(',').contains(specialist_id + '_' + $index) || specialist_data.data.values(`sd_value == 0 ? '' : sd_id + '_' + sd_value`).contains(specialist_id + '_' + $index)">
						<input class="custom-control-input" type="radio" dmx-bind:id="input_{{specialist_id}}_{{$index}}" dmx-bind:value="$index" id="specialist_radio" name="specialist_radio" value="1" dmx-bind:name="{{specialist_name}}" dmx-bind:checked="sc_ad_job_q.data.sa_q_job_q[0].meth_specialist_ref.split(',').contains(specialist_id + '_' + $index) || specialist_data.data.values(`sd_value == 0 ? '' : sd_id + '_' + sd_value`).contains(specialist_id + '_' + $index)">{{$index}}</label>
				</div>
			</div>
			<div class="input-group col-sm-3">
				<div class="input-group-prepend">
					<div class="input-group-text">Cost<i class="fas fa-pound-sign fa-fw fa-lg"></i></div>
				</div>
<input class="form-control text-right" id="specialist_total" name="specialist_total" dmx-bind:id="inp_costs_input_{{specialist_id}}" dmx-bind:name="costs_input_{{specialist_id}}" placeholder="Cost" tabindex="-1" dmx-bind:value="value.toNumber().default(0)" value="0">
{{value}} x {{specialist_cost}} = {{value.default(0) * specialist_cost}}
			</div>
		</div>
	</div>
</section>

All your advice, as always, is much appreciated.

UKRiggers · March 2, 2020, 3:14pm

With a bit more playing around I seem to have got the required result

INPUT Value code…
(Manually added “row_specialist”)

dmx-bind:value="(row_specialist.value.default(0) * specialist_cost).formatNumber(2, &quot;.&quot;, &quot;&quot;)"

Code to the right of the INPUT…

{{value.default(0)}} x {{specialist_cost}} = {{value.default(0) * specialist_cost}}</div>