From a193bd4b7a0be3441beed2522c815424bbc9af6a Mon Sep 17 00:00:00 2001
From: Vanathi G <vanathi18188@cse.ssn.edu.in>
Date: Wed, 8 Dec 2021 03:12:09 +0530
Subject: [PATCH] Fix show more button behaviour in Stable (#13655)

---
 .../src/components/inventory/stable/index.vue | 29 +++++++++++++++----
 1 file changed, 23 insertions(+), 6 deletions(-)

diff --git a/website/client/src/components/inventory/stable/index.vue b/website/client/src/components/inventory/stable/index.vue
index 0567073ca5..9e1cedc34c 100644
--- a/website/client/src/components/inventory/stable/index.vue
+++ b/website/client/src/components/inventory/stable/index.vue
@@ -179,7 +179,7 @@
           </div>
         </div>
         <show-more-button
-          v-if="petGroup.key !== 'specialPets' && !(petGroup.key === 'wackyPets' && selectedSortBy !== 'sortByColor')"
+          v-if="petRowCount[petGroup.key] > 1 && petGroup.key !== 'specialPets' && !(petGroup.key === 'wackyPets' && selectedSortBy !== 'sortByColor')"
           :show-all="$_openedItemRows_isToggled(petGroup.key)"
           class="show-more-button"
           @click="setShowMore(petGroup.key)"
@@ -238,7 +238,7 @@
           </div>
         </div>
         <show-more-button
-          v-if="mountGroup.key !== 'specialMounts'"
+          v-if="mountRowCount[mountGroup.key] > 1 && mountGroup.key !== 'specialMounts'"
           :show-all="$_openedItemRows_isToggled(mountGroup.key)"
           @click="setShowMore(mountGroup.key)"
         />
@@ -522,6 +522,9 @@ export default {
       currentDraggingFood: null,
 
       selectedDrawerTab: 0,
+
+      petRowCount: {},
+      mountRowCount: {},
     };
   },
   computed: {
@@ -774,8 +777,9 @@ export default {
     pets (animalGroup, hideMissing, sortBy, searchText) {
       const pets = this.listAnimals(animalGroup, 'pet', hideMissing, sortBy, searchText);
 
-      // Don't group special
+      // Don't group special, no 'show more' button either
       if (animalGroup.key === 'specialPets' || (animalGroup.key === 'wackyPets' && sortBy !== 'sortByColor')) {
+        this.petRowCount[animalGroup.key] = 1;
         return { none: pets };
       }
 
@@ -787,14 +791,22 @@ export default {
       } else if (sortBy === 'sortByHatchable') {
         groupKey = i => (i.isHatchable() ? 0 : 1);
       }
+      const groupedPets = groupBy(pets, groupKey);
 
-      return groupBy(pets, groupKey);
+      // Pets are rendered as grouped "rows". Count helps decide if show more button is necessary.
+      if (sortBy === 'AZ') {
+        this.petRowCount[animalGroup.key] = 1;
+      } else {
+        this.petRowCount[animalGroup.key] = Object.keys(groupedPets).length;
+      }
+      return groupedPets;
     },
     mounts (animalGroup, hideMissing, sortBy, searchText) {
       const mounts = this.listAnimals(animalGroup, 'mount', hideMissing, sortBy, searchText);
 
       // Don't group special
       if (animalGroup.key === 'specialMounts') {
+        this.mountRowCount[animalGroup.key] = 1;
         return { none: mounts };
       }
 
@@ -804,8 +816,13 @@ export default {
       } else if (sortBy === 'AZ') {
         groupKey = '';
       }
-
-      return groupBy(mounts, groupKey);
+      const groupedMounts = groupBy(mounts, groupKey);
+      if (sortBy === 'AZ') {
+        this.mountRowCount[animalGroup.key] = 1;
+      } else {
+        this.mountRowCount[animalGroup.key] = Object.keys(groupedMounts).length;
+      }
+      return groupedMounts;
     },
     // Actions
     updateHideMissing (newVal) {