Wappler Version : 6.0.0-beta.3
Operating System : MacOS
Server Model: NodeJS
Database Type: MySQL
Hosting Type: Docker
Expected behavior
What do you think should happen?
In a formRepeat, when a ProductID is selected, I want to remove/exclude the already selected ProductID from the array of ProductIDs. Similarly, if an already selected ProductID is removed, then that ProductID should become available for re-selection.
Actual behavior
What actually happens?
In v5.8.2, the code is working correctly, but in v6.0.0b3, the same code is not working. The setup includes a formRepeat, an array, a local variable within the formRepeat and a custom formatter. I have attached two videos.
- The first video is for the v5.8.2, showing the correct working of this setup.
- The second video is for the v6.0.0b3, showing the products that have already been selected, being removed from the repeat rows when a new product is selected. Similarly, when an already selected product is removed, the array values are not updated correctly.
v5.8.2
v6.0.0b3
How to reproduce
This is a copy of the code.
<dmx-array id="chosen_ids"></dmx-array> // This is the sourceArray with available ProductIDs
<div is="dmx-form-repeat" id="add_formRepeatProducts" min="1" sortable="true" animation="300" handle=".handle">
<dmx-value id="selected_id"></dmx-value> // Local variable to store value for the selected ProductID for each row
<div class="col d-flex flex-row align-items-center">
<div class="col-0">
<button class="btn btn-sm p-0 handle">
<i class="fa-solid fa-bars fs-5 fa-fw"></i>
</button>
</div>
<div class="col-9 flex-grow-1">
<div class="form-group">
<div class="col-12 p-1 form-floating">
<select type="text" class="form-select form-select-sm edit-input" id="addprd_ProductID" name="ProductID" placeholder="Product ID" required=""
dmx-bind:options="(sc_list_products_for_assignment.data.q_products_for_assignment.excludeFilterProductID(chosen_ids.items, selected_id.value))"
optiontext="ProductName" optionvalue="ProductID" dmx-bind:value="selected_id"
dmx-on:change="chosen_ids.remove(value.toNumber())"
dmx-on:updated="run([{run:{action:`selected_id.setValue(value.toNumber())`,outputType:'text'}},{wait:{delay:50}},{run:{action:`chosen_ids.addUniq(value.toNumber())`,outputType:'text'}}])">
<option value="">-- Select Product --</option>
</select>
<label class="small mb-0" for="addprd_ProductID">Product {{$index + 1}}</label>
</div>
</div>
</div>
<div class="col-2 text-center">
<button class="btn p-0 text-danger h-100" dmx-on:click="run([{run:{action:`chosen_ids.remove(selected_id.value)`,outputType:'text'}},{wait:{delay:50}},{run:{action:`add_formRepeatProducts.remove($index)`,outputType:'text'}}])">
<i class="fa-regular fa-trash-can fa-fw fs-5"></i></button>
</div>
</div>
</div>
Custom formatter code for the array data source. The function takes three parameters: sourceArray, excludedArray, and val. It filters the sourceArray based on the ProductID property of each element. If the ProductID is not in the excludedArray, or if it matches the val parameter, the element is included in the newArray. Otherwise, it is excluded. The function returns the newArray.
dmx.Formatter('array', 'excludeFilterProductID', function (sourceArray, excludedArray, val) {
console.log(this)
console.log(new Date().toString())
console.log('source array')
console.log(sourceArray)
console.log('val')
console.log(val)
console.log('excluded array')
console.log(excludedArray)
if (val) {
newArray = sourceArray.filter(x => !excludedArray.includes(x['ProductID']) || x['ProductID'] == val);
} else {
newArray = sourceArray.filter(x => !excludedArray.includes(x['ProductID']));
}
console.log('new array')
console.log(newArray)
return newArray;
});