I’m developing an order app for my small sandwich shop. On the page where customers can see the list of available sandwich options, I want them to be able to select the quantity for each sandwich using plus and minus icon buttons.
I’m displaying the sandwich options using a repeating group. However, I’m facing an issue with the workflow: every time a customer adds a sandwich to their order, the quantity updates for all items in the list instead of just the selected sandwich.
How can I set the workflow to update the quantity only for the current cell in the repeating group? Any guidance would be greatly appreciated.
Which data/state are you referencing for the quantities?
What does the workflow look like when you increase or decrease the quantities through the use of the buttons?
Ideally, your structure should be like a cart where you would have a line item data type wherein it has sandwich and quantity fields. When the plus or minus buttons are clicked, you would increase/decrease the line item’s quantity by referencing to the current cell’s line item and increasing/decreasing its quantity by 1
Data type sandwiches
Used to load and list the sandwich options (figure on the previous post).
Data type order detail:
Each time the customer clicks the plus button it will create a new thing filling out the following fields: order id, and sandwich type.
Each time the customer clicks the minus button it will delete the corresponding data thing line.
That’s needed because, in the next step, the customer will review the order and be able to add a topping or take out ingredients for each individual sandwich.
Quantity state inside repeating group element listing the sandwich options
Each time the customer clicks the plus button it adds 1 to the quantity custom state
It subtracts 1 if the customer clicks the minus button.
(Showing the quantity serves solely the purpose of allowing the client to keep track of their order quantity for each sandwich type)
Here is what I am getting wrong and need help with:
Since I created the custom state quantity inside the repeating group element, I expected the custom state to work separately for each cell. But apparently, it’s not what happens.
Through joining databases
I am hosting the database of my app on supabase, having two tables: order_details, sandwiches_options. Every time the user adds a new item to their cart, it creates a new row on order_details for that item. Next, I pass a query to Supabase, to summarize the order_details table, counting the number of sandwiches of each type and then right-joining it to the sandwiches_options table. Then I fetch this data and use it to populate the repeating group to show the options. The problem is that I do not want to perform all of this joining and retrieving the whole sandwich data every time the user makes and edit to their order. So below follows an alternative.
SQL query
SELECT s.sandwich_id, s.nome, s.preço_venda, s.custo, s.ingredientes, COALESCE(od.quantidade, 0) AS quantidade
FROM sandwiches s
LEFT JOIN (
SELECT sandwich_id, COUNT(*) AS quantidade
FROM order_details
WHERE order_id = $1
GROUP BY sandwich_id
) od
ON s.sandwich_id = od.sandwich_id
WHERE s.ativo = true
ORDER BY s.nome
LIMIT 200;
2. Encoding all data columns plus the quantity on just one field
It is a workaround to avoid retrieving unnecessary data as the solution above. I encoded on just one field all the columns, putting an underscore (_) between each field. I used this field to populate the repeating grouping. For the data inside the repeating group, I broke splitting by the underscore and used it accordingly. Each time the user made an edit I would use minus item and plus item list operators to update the quantity.
2_Da Roça Nova York_10.57_{"Pão Brioche","Hambúrguer de 150g",Bacon,"Queijo Mussarela","Molho Barbecue",Picles,"Cebola Rocha",Rúcula}_t_27_0
However, because both of the above options do not seem smart and efficient I redesign the app to not have the initial functionality.
