Store original quantities, to avoid reordering in Inventory Items screen (#12205)

* Store original quantities, to avoid reordering

Create a quantity snapshot when loading the screen.
Sort based on the snapshot after updates.

Fixes: 12040

* Avoid initial branching

Co-authored-by: Bart Enkelaar <benkelaar@gmail.com>

* Add comment

Co-authored-by: Bart Enkelaar <benkelaar@gmail.com>

website/client/src/components/inventory/items/index.vue

@@ -419,6 +419,11 @@ export default {
         cardType: '',
         messageOptions: 0,
       },
+      quantitySnapshot: {
+        eggs: null,
+        hatchingPotions: null,
+        food: null,
+      },
     };
   },
   computed: {
@@ -443,7 +448,9 @@ export default {
           if (itemQuantity > 0 && isAllowed) {
             const item = contentItems[itemKey];
 
-            const isSearched = !searchText || item.text().toLowerCase().indexOf(searchText) !== -1;
+            const isSearched = !searchText || item.text()
+              .toLowerCase()
+              .indexOf(searchText) !== -1;
             if (isSearched) {
               itemsArray.push({
                 ...item,
@@ -458,12 +465,16 @@ export default {
           }
         });
 
-        itemsArray.sort((a, b) => {
+        if (this.sortBy === 'quantity') {
-          if (this.sortBy === 'quantity') {
+          // Store original quantities, to avoid reordering when using items.
-            return b.quantity - a.quantity;
+          const quantitySnapshot = this.quantitySnapshot[groupKey] || Object.fromEntries(
-          } // AZ
+            itemsArray.map(item => [item.key, item.quantity]),
-          return a.text.localeCompare(b.text);
+          );
-        });
+          itemsArray.sort((a, b) => quantitySnapshot[b.key] - quantitySnapshot[a.key]);
+          this.quantitySnapshot[groupKey] = quantitySnapshot;
+        } else {
+          itemsArray.sort((a, b) => a.text.localeCompare(b.text));
+        }
       });
 
       const specialArray = itemsByType.special;