fix: #5511, list item state doesn't change when offline (#5512)

Co-authored-by: Michael Genson <71845777+michael-genson@users.noreply.github.com>

frontend/composables/use-shopping-list-item-actions.ts

@@ -89,9 +89,31 @@ export function useShoppingListItemActions(shoppingListId: string) {
     return true;
   }
 
+  function mergeListItemsByLatest(
+    list1: ShoppingListItemOut[],
+    list2: ShoppingListItemOut[]
+  ) {
+    const mergedList = [...list1];
+    list2.forEach((list2Item) => {
+      const conflictingItem = mergedList.find((item) => item.id === list2Item.id)
+      if (conflictingItem &&
+        list2Item.updatedAt && conflictingItem.updatedAt &&
+        list2Item.updatedAt > conflictingItem.updatedAt) {
+        mergedList.splice(mergedList.indexOf(conflictingItem), 1, list2Item)
+      } else if (!conflictingItem) {
+        mergedList.push(list2Item)
+      }
+    })
+    return mergedList
+  }
+
   async function getList() {
     const response = await api.shopping.lists.getOne(shoppingListId);
-    return response.data;
+    if (window.$nuxt.isOffline && response.data) {
+      const createAndUpdateQueues = mergeListItemsByLatest(queue.update, queue.create);
+      response.data.listItems = mergeListItemsByLatest(response.data.listItems ?? [], createAndUpdateQueues);
+    }
+    return response.data
   }
 
   function createItem(item: ShoppingListItemOut) {
@@ -188,7 +210,7 @@ export function useShoppingListItemActions(shoppingListId: string) {
   }
 
   async function process() {
-    if(queueEmpty.value) {
+    if (queueEmpty.value) {
       queue.lastUpdate = Date.now();
       return;
     }

frontend/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mealie",
-"version": "2.8.0",
+  "version": "2.8.0",
   "private": true,
   "scripts": {
     "dev": "nuxt",

frontend/pages/shopping-lists/_id.vue

@@ -878,10 +878,9 @@ export default defineComponent({
 
         // make sure the item is at the end of the list with the other checked items
         item.position = shoppingList.value.listItems.length;
-
-        // set a temporary updatedAt timestamp prior to refresh so it appears at the top of the checked items
-        item.updatedAt = new Date().toISOString();
       }
+      // set a temporary updatedAt timestamp prior to refresh so it appears at the top of the checked items
+      item.updatedAt = new Date().toISOString();
 
       // make updates reflect immediately
       if (shoppingList.value.listItems) {