Hi guys i got the following use case
this is a modal to create purchase order for my inventory system, im using localStorage for this to add lines and delete from the table. When i click generate button it saves to 2 postgresql tables in the same db. That works good.
Now im looking to add a Edit purchase order modal so user may edit quantities of product or even add / remove products. But as im using localStorage not sure how to manage that, as im clearing localStorage after the purchase order is generated.
What you guys recommend me? maybe use a temporal table instead of localStorage?
thank you
Hey @agaitan026 
How are your users selecting which purchase order to edit?
I'm also curious if there's any particular reason you're going with localStorage - it might help give context here!
1 Like
I used localstorage for the add line part, when I select product and quantity and press add line, it shows in the table below like a cart and user can change quantity. Not sure if I can do this differently or you recommend another thing.
User in another windows in a table may select which order to edit, but I didn't create that yet
I see, you could also try using a temporary state which has a little more UI to work with than localStorage.
Once a purchase order is created and a user selects it, can you use a query to retrieve all the information from those two tables that you'd need to populate the product list?
1 Like
this is what i have
https://www.loom.com/share/fd46328d6538430e8695c0590c337599
when i click Add line button it run this js
//jsAdditem query
let items = localStorage.values.tableDataTS ?? [];
localStorage.setValue("tableDataTS", [...items, {id: Math.floor(Math.random() * 10000), Producto: producto.selectedLabel, Cantidad: cantidad.value, added_by: current_user.email}])
and when i click delete:
// jsRemoveItem query
let items = localStorage.values.tableDataTS ?? ;
localStorage.setValue("tableDataTS", items.filter(item => item.id !== table4.selectedRow.data.id))
you think in that case is better a temp state? i use localstorage as i can have 2 users generating differents orders, if you can give me another idea will be nice
this is my current laravel app https://www.loom.com/share/a589098e206c4457ae5ffc1e402ddf84 all that is working, im trying to copy that to retool (i didnt create the original laravel code) but im using the same postgresql db structure
Temporary states aren't shared between users either, the main difference between them and localStorage is that localStorage persists between apps. Temporary states do come with a super handy .setIn method which you can use to update your state with any changes made to the table:
I'm not sure this fixes the issue you're running into though 
can you let me know if it helps or if something is missing?
1 Like
you recommend temp state for editing the purchase order?
this form is not 100% ready, user may change qty inside tables, or add new products to it
i got this modal to edit the purchase order, how temp state will fit here? i mean when user click DELETE it should hide row from table then after i press a button named SAVE CHANGES it should go to a deletequery and delete from db the two entries
in the example i should erase rows with transaction_id = 52, i create one line per product
@agaitan026 yep! But localStorage can work too
If you're trying to delete rows you could have a separate state to keep track of the rows that are to be deleted, add each row to that state when you click the delete button. I've added a couple examples of how to do so!
One uses splice and the other uses the lodash functions differenceWith and isEqual.
deleted_rows_table.json moving_deleted_rows.json
1 Like
both are almost the same correct? any preference or which should i choose? or that up to me?
@Kabirdas getting this
deleteRow: data.splice is not a function
i set this
as my original data from a query
{"idOC":[50,105],"id":[40,41],"name":["MERCURSYS MW305R / ROUTER INALAMBRICO 300MBPS / 3X ANTENA","LINKSYS E4500"],"product_id":[40,41],"quantity":[10,3],"purchase_price":[0,0]}
Hey @agaitan026!
Splice only works on arrays so you can try doing something similar to what you did in this post and use {{ formatDataAsArray(lisaPurchaseLines.data) }}
1 Like
@Kabirdas hey me again, one question the delete solution works, but how you will manage if user add a new product? and save to a state and only when update purchase order is clicked then should update to real db
for example this case if user select a new product and press Add Line it should add to the temp table, and when i press Update purchase order, then should update real db
Hey again @agaitan026 
If you're using a tempstate you can add rows directly to it with an event handler or query similar to the one you used for local storage.
Option 1:
Note: You'll probably want to replace {{table1.newRow}} with something like {{ {id: Math.floor(Math.random() * 10000), Producto: producto.selectedLabel, Cantidad: cantidad.value, added_by: current_user.email} }}.
Option 2:
//jsAdditem query
let items = dataState.value ?? [];
dataState.setValue([...items, {id: Math.floor(Math.random() * 10000), Producto: producto.selectedLabel, Cantidad: cantidad.value, added_by: current_user.email}])
Do either of those work?
1 Like
with option 2, i currently have a additem queryJS should i then create a new one for Edit purchase order?
i got this
jsEdit_item: items is not iterable
@Kabirdas the thing in my case is
i already got an ID from the original table and when i click edit i have to edit only that specific ID
Hey @agaitan026!
Sorry, those were only rough approximations of what to do. I think the best solution is to pick the one you feel most comfortable changing/debugging and then go from there. Generally, would you rather use an event handler UI? Or some JavaScript?
1 Like
AwesomeScreenshot-12/16/2022,2:31:03PM this is the case so if i update Reference No. and click update purchase order button, it should update table #1. if i modify both, Ref. No. plus add or delete new products, it should then update table 1 (header) and table #2 (detail)
to delete products i had used the methods you told me in the last post
@agaitan026 yep! But localStorage can work too
If you're trying to delete rows you could have a separate state to keep track of the rows that are to be deleted, add each row to that state when you click the delete button. I've added a couple examples of how to do so!
One uses splice and the other uses the lodash functions differenceWith and isEqual.
deleted_rows_table.json moving_deleted_rows.json
note: i got one query for header and works, and another for when i delete products (a transformer then i pass that to the update query)
transformer
// trMakeBulkInsertArray
let newData = ;
let items = {{table3.recordUpdates}}
items.forEach(item => {
newData.push({
id: {{ table3.selectedRow.data.idOC }},
quantity: item.quantity
})
});
return newData
