diff --git a/frontend/composables/shopping-list-page/sub-composables/use-shopping-list-crud.ts b/frontend/composables/shopping-list-page/sub-composables/use-shopping-list-crud.ts index 3d99bebeb..d05415e11 100644 --- a/frontend/composables/shopping-list-page/sub-composables/use-shopping-list-crud.ts +++ b/frontend/composables/shopping-list-page/sub-composables/use-shopping-list-crud.ts @@ -97,13 +97,8 @@ export function useShoppingListCrud( .sort(sortCheckedItems); } - // Update the item if it's checked, otherwise updateUncheckedListItems will handle it - if (item.checked) { - shoppingListItemActions.updateItem(item); - } - + shoppingListItemActions.updateItem(item); updateListItemOrder(); - updateUncheckedListItems(); } function deleteListItem(item: ShoppingListItemOut) { diff --git a/frontend/composables/use-shopping-list-item-actions.ts b/frontend/composables/use-shopping-list-item-actions.ts index 314cce0fd..8f2db7a01 100644 --- a/frontend/composables/use-shopping-list-item-actions.ts +++ b/frontend/composables/use-shopping-list-item-actions.ts @@ -112,34 +112,46 @@ export function useShoppingListItemActions(shoppingListId: string) { async function getList() { const response = await api.shopping.lists.getOne(shoppingListId); - if (!isOnline.value && response.data) { + if (response.data) { + // Merge pending local changes (both online and offline) const createAndUpdateQueues = mergeListItemsByLatest(queue.update, queue.create); - response.data.listItems = mergeListItemsByLatest(response.data.listItems ?? [], createAndUpdateQueues); + const deleteQueueIds = new Set(queue.delete.map(item => item.id)); + + const filteredLocalChanges = createAndUpdateQueues.filter(item => !deleteQueueIds.has(item.id)); + let mergedItems = mergeListItemsByLatest(response.data.listItems ?? [], filteredLocalChanges); + mergedItems = mergedItems.filter(item => !deleteQueueIds.has(item.id)); + + response.data.listItems = mergedItems; } return response.data; } function createItem(item: ShoppingListItemOut) { removeFromQueue(queue.create, item); + removeFromQueue(queue.update, item); + removeFromQueue(queue.delete, item); + queue.create.push(item); } function updateItem(item: ShoppingListItemOut) { const removedFromCreate = removeFromQueue(queue.create, item); - if (removedFromCreate) { - // this item hasn't been created yet, so we don't need to update it - queue.create.push(item); - return; - } - removeFromQueue(queue.update, item); - queue.update.push(item); + removeFromQueue(queue.delete, item); + + if (removedFromCreate) { + // This item hasn't been created yet, so keep it in create queue with updated data + queue.create.push(item); + } + else { + queue.update.push(item); + } } function deleteItem(item: ShoppingListItemOut) { const removedFromCreate = removeFromQueue(queue.create, item); if (removedFromCreate) { - // this item hasn't been created yet, so we don't need to delete it + // This item hasn't been created yet, so we don't need to delete it return; } @@ -198,10 +210,12 @@ export function useShoppingListItemActions(shoppingListId: string) { try { const itemsToProcess = [...queueItems]; + const itemIdsToProcess = itemsToProcess.map(item => item.id); + await action(itemsToProcess) .then(() => { if (isOnline.value) { - clearQueueItems(itemQueueType, itemsToProcess.map(item => item.id)); + clearQueueItems(itemQueueType, itemIdsToProcess); } }); }