NodeJs, Mac, Wappler 6.8.0, AC2 Stable
Due to some issues I am having with nesting form repeat components, which can be seen here
And due to the urgency of this particular job, I am having to make some work arounds to get this working, and it is indeed working, however I would like to ask any .js experts to please take a look at this code change i have made on the dmxFormRepeat.js file, and advise if they see anything glaringly problematic.
First off, what I am trying to achieve is the following, I have a hotel, with multiple rooms, each room has multiple Facilities / Extras / and bed arrangements.
To allow my customer to edit this data easily, i have opted to use nested form repeats, however after I got the UI to display perfectly, I noticed that the payload on form submit was not useable due to some strange naming coming from the form repeat component.
I changed the UI to rather use a parent Repeat Children, with a form repeat nested inside it, which still gave strange naming, so I figured that the only way around this was if i could somehow turn off the auto renaming behaviour of a form repeat component. Which is what I have done, and it seems to mostly work.
I changed this
attributes:{items:{type:[Array,Number],default:0},min:{type:Number,default:0},max:{type:Number,default:1/0},sortable:{type:Boolean,default:!1},handle:{type:String,default:null},animation:{type:Number,default:0}}
To
attributes:{items:{type:[Array,Number],default:0},min:{type:Number,default:0},max:{type:Number,default:1/0},sortable:{type:Boolean,default:!1},handle:{type:String,default:null},animation:{type:Number,default:0},autoNaming:{type:Boolean,default:!0}}
As this allows me to turn the default form repeat auto naming feature on or off on a per use case scenario.
The next change in the file was from
render(e){this._template=this._templateFromChildren(e);this._template.querySelectorAll("input[name], select[name], textarea[name]").forEach((e=>{const t=e.name.indexOf("[");t>0?e.setAttribute("dmx-bind:name",this.name+"[{{$formindex}}]["+e.name.slice(0,t)+"]"+e.name.slice(t)):e.setAttribute("dmx-bind:name",this.name+"[{{$formindex}}]["+e.name+"]")})),this.props.sortable&&(this._sortable=Sortable.create(e,{handle:this.props.handle,onEnd:e=>this._move(e.oldIndex,e.newIndex)})),this._render(),this._refresh()}
To
render(e){this._template=this._templateFromChildren(e);(this.props.autoNaming!==false)?(this._template.querySelectorAll("input[name], select[name], textarea[name]").forEach((e=>{const t=e.name.indexOf("[");t>0?e.setAttribute("dmx-bind:name",this.name+"[{{$formindex}}]["+e.name.slice(0,t)+"]"+e.name.slice(t)):e.setAttribute("dmx-bind:name",this.name+"[{{$formindex}}]["+e.name+"]")})),this.props.sortable&&(this._sortable=Sortable.create(e,{handle:this.props.handle,onEnd:e=>this._move(e.oldIndex,e.newIndex)})),this._render(),this._refresh()):(this.props.sortable&&(this._sortable=Sortable.create(e,{handle:this.props.handle,onEnd:e=>this._move(e.oldIndex,e.newIndex)})),this._render(),this._refresh())}
The only change on the HTML side is
<div is="dmx-form-repeat" id="formRepeat2" dmx-bind:items="myItems" min="1">
To
<div is="dmx-form-repeat" id="formRepeat2" dmx-bind:items="myItems" min="1" auto-naming="false">
As I say it does work, and although it is a pain to add all my own dmx-bind:id="" dmx-bind:name="" to everything, at least it does allow me to target the correct records in my server action.
The big question is, does the change I have made break something else, or can it be done in a better way?
Sorry for the long post, I am a long winded guy on the best of days. Here is a screenshot to help understand.
