Hi i have a select component for search functions and a table, i populated the select component with a query from a mysql db so when im typing on select component it search at the same time. After i found my item i click on it and it populates to the table correctly.
now im trying when i search a new item to keep the first item on table, then after i find the second item it should be added to my table and clear the select component and be ready to add N items. how is that possible?
right now its erasing the first item and replacing it
It seems like state1.value is the intended source for your table, but you are using a hard-coded object instead.
You also then do not need any of the table event triggers. Instead fire your Select's change event handler to add the item to your state1 like this: state1.value.length and do state1.setIn(state1.value.length, yourDataHere). You could also use a separate button to add the record so there are no negative effects to the user selecting the wrong item.
Then you have a button to save this back to your database or wherever, using state1.valeu as your bulk update input. You will probably have to use a array of objects rather than an object of arrays as you are showing in your table2.Data example right now.
The button is optional, you can certainly use the Select's change event as I mentioned and then have the user change the quantiles in the table. Or you can use the Select, a number input for the quantity and a button to add the record. You have options!
To save the order:
Blockquote
Then you have a button to save this back to your database or wherever, using state1.valueas your bulk update input. You will probably have to use a array of objects rather than an object of arrays as you are showing in your table2.Data example right now.
I would suggest that when you add new objects to state1, you make it ready to do the bulk update, so add something like this object each time you add a record:
What I'm kinda confused is , how when I select a item using Select component it adds a new row on table, I can't see that code or how to do that each time I select a item it should be added to the table as a new row
The simple answer is: You are not adding a row to the table in this situation. You are adding a row to the table's data source, which is whatever you put in the table's Data property.
The table just displays what you tell it to, state1.value in this case, if I am understanding your situation correctly.
You just need to add items to the array in state1.value using setIn() and the table will display them.
When the user edits the quantities in the table, things change and now the table holds your "truth" in table2.recordUpdates - it now contains a copy of state1.value with all of the changes. That is why you now use the table's data to update your database.
I honestly do not know what will happen if you add records after the user has changed quantities. You are after all getting a little cheeky with the table component - it was not really designed for this use case in mind.
A more direct, if less performant, way to accomplish the same thing is to have your table's data source be a query of your order items, add a new record to order items every time the user Selects something and refresh your order items query on every update. The user changes quantities and updates using a normal bulk update query. That would be a normal Retool pattern.
What alternative I have? To achieve this, basically is creating a stock transfer to move items from Warehouse A to Warehouse B and viceversa by selecting warehouse from and warehouse to then all the items required with quantities.
Im open to other alternatives to achieve this to make it the most easier possible to the end user who's in charge of inventory
It looks like you are on the right track according to your screenshots. You need to put {{ }} around the entire JS in your Value box.
Then just do standard debugging: See what values you are getting at various steps and figure out what is happening if you don't get the expected results. You can do some tricks like take the JS out of the event and putting it into its own JS query and use the JS debugger command to step into your code using Dev Tools to see what it is doing. I tend to not put much code directly in my handlers like this as it is harder to debug.
That's a bit advanced (but very worth learning!) You can also us the old console.log() standby to output values at various steps in your code to see what is happening.
I spend a lot of time debugging in Dev Tools to figure out why stuff ain't working right. No shortcuts!
As to alternatives, there is the one I suggested earlier using a more standard Retool pattern. You can also use ListView - that would look better, but be a little bit more work.
As Bradly mentioned I think you're on the right track here. When you're using setIn for your tempstate there's also a handy option you can use in the GUI!
