From 8d479e358d3f4fe6a5e94d93919e1c552e5cd1cb Mon Sep 17 00:00:00 2001
From: Sabe Jones <sabe@habitica.com>
Date: Fri, 17 May 2024 20:29:14 -0500
Subject: [PATCH] WIP(shops): more fixes

---
 website/client/src/assets/scss/item.scss      |   1 +
 .../components/inventory/equipment/index.vue  |   1 +
 .../src/components/inventory/stable/index.vue | 150 ++++++++----------
 .../shops/market/equipmentSection.vue         |   4 +-
 .../src/components/shops/market/index.vue     |   3 +-
 .../src/components/shops/seasonal/index.vue   |  20 +--
 .../components/shops/timeTravelers/index.vue  |  33 +---
 .../modal-controls/selectTranslatedArray.vue  |   1 +
 .../src/components/ui/filterDropdown.vue      |   5 +
 .../client/src/components/ui/selectList.vue   |  12 +-
 10 files changed, 94 insertions(+), 136 deletions(-)

diff --git a/website/client/src/assets/scss/item.scss b/website/client/src/assets/scss/item.scss
index d6e0f2b850..c9f0d65f7e 100644
--- a/website/client/src/assets/scss/item.scss
+++ b/website/client/src/assets/scss/item.scss
@@ -23,6 +23,7 @@
 
   &:hover {
     box-shadow: 0 3px 6px 0 rgba($black, 0.16), 0 3px 6px 0 rgba($black, 0.24);
+    border-radius: 4px;
   }
 }
 
diff --git a/website/client/src/components/inventory/equipment/index.vue b/website/client/src/components/inventory/equipment/index.vue
index 109322e713..fb921fbbe4 100644
--- a/website/client/src/components/inventory/equipment/index.vue
+++ b/website/client/src/components/inventory/equipment/index.vue
@@ -66,6 +66,7 @@
             :right="true"
             :hide-icon="false"
             :inline-dropdown="false"
+            :direct-select="true"
             @select="groupBy = $event"
           >
             <template #item="{ item }">
diff --git a/website/client/src/components/inventory/stable/index.vue b/website/client/src/components/inventory/stable/index.vue
index 2a237e39c9..c2165a405e 100644
--- a/website/client/src/components/inventory/stable/index.vue
+++ b/website/client/src/components/inventory/stable/index.vue
@@ -140,47 +140,47 @@
           {{ petGroup.label }}
         </h4>
         <!-- eslint-disable vue/no-use-v-if-with-v-for, max-len -->
-        <div
-          v-for="(group, key, index) in pets(petGroup, hideMissing, selectedSortBy, searchTextThrottled)"
-          v-if="index === 0 || $_openedItemRows_isToggled(petGroup.key)"
-          :key="key"
-          class="pet-row d-inline-flex"
-        >
-          <!-- eslint-enable vue/no-use-v-if-with-v-for -->
+        <div class="d-inline-flex flex-column">
           <div
-            v-for="item in group"
-            v-show="show('pet', item)"
-            :key="item.key"
-            v-drag.drop.food="item.key"
-            class="pet-group"
-            :class="{'last': item.isLastInRow}"
-            @itemDragOver="onDragOver($event, item)"
-            @itemDropped="onDrop($event, item)"
-            @itemDragLeave="onDragLeave()"
+            v-for="(group, key, index) in pets(petGroup, hideMissing, selectedSortBy, searchTextThrottled)"
+            v-if="index === 0 || $_openedItemRows_isToggled(petGroup.key)"
+            :key="key"
+            class="pet-row d-flex"
           >
-            <petItem
-              :item="item"
-              :popover-position="'top'"
-              :show-popover="currentDraggingFood == null"
-              :highlight-border="highlightPet == item.key"
-              @click="petClicked(item)"
+            <!-- eslint-enable vue/no-use-v-if-with-v-for -->
+            <div
+              v-for="item in group"
+              v-show="show('pet', item)"
+              :key="item.key"
+              v-drag.drop.food="item.key"
+              class="pet-group"
+              @itemDragOver="onDragOver($event, item)"
+              @itemDropped="onDrop($event, item)"
+              @itemDragLeave="onDragLeave()"
             >
-              <template
-                slot="itemBadge"
-                slot-scope="context"
+              <petItem
+                :item="item"
+                :popover-position="'top'"
+                :show-popover="currentDraggingFood == null"
+                :highlight-border="highlightPet == item.key"
+                @click="petClicked(item)"
               >
-                <equip-badge
-                  :equipped="context.item.key === currentPet"
-                  :show="isOwned('pet', context.item)"
-                  @click="selectPet(context.item)"
-                />
-              </template>
-            </petItem>
+                <template
+                  slot="itemBadge"
+                  slot-scope="context"
+                >
+                  <equip-badge
+                    :equipped="context.item.key === currentPet"
+                    :show="isOwned('pet', context.item)"
+                    @click="selectPet(context.item)"
+                  />
+                </template>
+              </petItem>
+            </div>
           </div>
           <show-more-button
             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)"
           />
         </div>
@@ -202,46 +202,48 @@
           {{ mountGroup.label }}
         </h4>
         <!-- eslint-disable vue/no-use-v-if-with-v-for, max-len -->
-        <div
-          v-for="(group, key, index) in mounts(mountGroup, hideMissing, selectedSortBy, searchTextThrottled)"
-          v-if="index === 0 || $_openedItemRows_isToggled(mountGroup.key)"
-          :key="key"
-          class="pet-row d-flex"
-        >
-          <!-- eslint-enable vue/no-use-v-if-with-v-for -->
+        <div class="d-inline-flex flex-column">
           <div
-            v-for="item in group"
-            v-show="show('mount', item)"
-            :key="item.key"
-            class="pet-group"
+            v-for="(group, key, index) in mounts(mountGroup, hideMissing, selectedSortBy, searchTextThrottled)"
+            v-if="index === 0 || $_openedItemRows_isToggled(mountGroup.key)"
+            :key="key"
+            class="pet-row d-flex"
           >
-            <mountItem
+            <!-- eslint-enable vue/no-use-v-if-with-v-for -->
+            <div
+              v-for="item in group"
+              class="pet-group"
+              v-show="show('mount', item)"
               :key="item.key"
-              :item="item"
-              :popover-position="'top'"
-              :show-popover="true"
-              @click="selectMount(item)"
             >
-              <span slot="popoverContent">
-                <h4 class="popover-content-title">{{ item.name }}</h4>
-              </span>
-              <template
-                slot="itemBadge"
+              <mountItem
+                :key="item.key"
+                :item="item"
+                :popover-position="'top'"
+                :show-popover="true"
+                @click="selectMount(item)"
               >
-                <equip-badge
-                  :equipped="item.key === currentMount"
-                  :show="isOwned('mount', item)"
-                  @click="selectMount(item)"
-                />
-              </template>
-            </mountItem>
+                <span slot="popoverContent">
+                  <h4 class="popover-content-title">{{ item.name }}</h4>
+                </span>
+                <template
+                  slot="itemBadge"
+                >
+                  <equip-badge
+                    :equipped="item.key === currentMount"
+                    :show="isOwned('mount', item)"
+                    @click="selectMount(item)"
+                  />
+                </template>
+              </mountItem>
+            </div>
           </div>
+          <show-more-button
+            v-if="mountRowCount[mountGroup.key] > 1 && mountGroup.key !== 'specialMounts'"
+            :show-all="$_openedItemRows_isToggled(mountGroup.key)"
+            @click="setShowMore(mountGroup.key)"
+          />
         </div>
-        <show-more-button
-          v-if="mountRowCount[mountGroup.key] > 1 && mountGroup.key !== 'specialMounts'"
-          :show-all="$_openedItemRows_isToggled(mountGroup.key)"
-          @click="setShowMore(mountGroup.key)"
-        />
       </div>
       <inventoryDrawer>
         <template
@@ -322,10 +324,9 @@
   }
 
   .pet-row {
-    max-width: 100%;
     flex-wrap: wrap;
 
-    .item-wrapper {
+    .pet-group:not(:last-of-type) {
       margin-right: 24px;
     }
   }
@@ -343,24 +344,11 @@
   }
 
   .stable {
-
-    .standard-page {
-      padding-right:0;
-    }
-
-    .standard-page .clearfix .float-right {
-      margin-right: 24px;
-    }
-
     .svg-icon.inline.icon-16 {
       vertical-align: bottom;
     }
   }
 
-  .last {
-    margin-right: 0 !important;
-  }
-
   .no-focus:focus {
     background-color: inherit;
     color: inherit;
diff --git a/website/client/src/components/shops/market/equipmentSection.vue b/website/client/src/components/shops/market/equipmentSection.vue
index 5b85f24e9f..4bc28229c1 100644
--- a/website/client/src/components/shops/market/equipmentSection.vue
+++ b/website/client/src/components/shops/market/equipmentSection.vue
@@ -6,6 +6,7 @@
         :initial-item="selectedGearCategory"
         :items="marketGearCategories"
         :with-icon="true"
+        :direct-select="true"
         @selected="selectedGroupGearByClass = $event.id"
       >
         <span
@@ -23,6 +24,7 @@
         :label="$t('sortBy')"
         :initial-item="selectedSortGearBy"
         :items="sortGearBy"
+        :direct-select="true"
         @selected="selectedSortGearBy = $event"
       >
         <span
@@ -93,7 +95,7 @@ import pinUtils from '../../../mixins/pinUtils';
 const sortGearTypes = [
   'sortByType', 'sortByPrice', 'sortByCon',
   'sortByPer', 'sortByStr', 'sortByInt',
-].map(g => ({ id: g }));
+].map(g => ({ id: g, identifier: g }));
 
 const sortGearTypeMap = {
   sortByType: 'type',
diff --git a/website/client/src/components/shops/market/index.vue b/website/client/src/components/shops/market/index.vue
index 92f2b82daf..fa397a6afd 100644
--- a/website/client/src/components/shops/market/index.vue
+++ b/website/client/src/components/shops/market/index.vue
@@ -43,6 +43,7 @@
             :label="$t('sortBy')"
             :initial-item="selectedSortItemsBy"
             :items="sortItemsBy"
+            :direct-select="true"
             @selected="selectedSortItemsBy = $event"
           >
             <span
@@ -181,7 +182,7 @@ import inventoryUtils from '@/mixins/inventoryUtils';
 import pinUtils from '@/mixins/pinUtils';
 import { worldStateMixin } from '@/mixins/worldState';
 
-const sortItems = ['AZ', 'sortByNumber'].map(g => ({ id: g }));
+const sortItems = ['AZ', 'sortByNumber'].map(g => ({ id: g, identifier: g }));
 
 export default {
   components: {
diff --git a/website/client/src/components/shops/seasonal/index.vue b/website/client/src/components/shops/seasonal/index.vue
index dc9a2f7127..e42f776b2b 100644
--- a/website/client/src/components/shops/seasonal/index.vue
+++ b/website/client/src/components/shops/seasonal/index.vue
@@ -121,17 +121,6 @@
         <h2 class="float-left mb-3">
           {{ $t('classArmor') }}
         </h2>
-        <div class="float-right">
-          <span class="dropdown-label">{{ $t('sortBy') }}</span>
-          <select-translated-array
-            :right="true"
-            :value="selectedSortItemsBy"
-            :items="sortItemsBy"
-            :inline-dropdown="false"
-            class="inline"
-            @select="selectedSortItemsBy = $event"
-          />
-        </div>
       </div>
       <div
         v-for="(groupSets, categoryGroup) in getGroupedCategories(categories)"
@@ -160,7 +149,7 @@
             <div class="items">
               <!-- eslint-disable max-len -->
               <shopItem
-                v-for="item in seasonalItems(category, selectedSortItemsBy, searchTextThrottled, viewOptions, hidePinned)"
+                v-for="item in seasonalItems(category, 'AZ', searchTextThrottled, viewOptions, hidePinned)"
                 :key="item.key"
                 :item="item"
                 :price="item.value"
@@ -353,15 +342,11 @@ import svgWizard from '@/assets/svg/wizard.svg';
 import svgRogue from '@/assets/svg/rogue.svg';
 import svgHealer from '@/assets/svg/healer.svg';
 
-import SelectTranslatedArray from '@/components/tasks/modal-controls/selectTranslatedArray';
 import FilterSidebar from '@/components/ui/filterSidebar';
-import FilterGroup from '@/components/ui/filterGroup';
 import { worldStateMixin } from '@/mixins/worldState';
 
 export default {
   components: {
-    SelectTranslatedArray,
-    FilterGroup,
     FilterSidebar,
     Checkbox,
     PinBadge,
@@ -393,9 +378,6 @@ export default {
         eyewear: i18n.t('eyewear'),
       }),
 
-      sortItemsBy: ['AZ'],
-      selectedSortItemsBy: 'AZ',
-
       hidePinned: false,
       featuredGearBought: false,
       currentEvent: null,
diff --git a/website/client/src/components/shops/timeTravelers/index.vue b/website/client/src/components/shops/timeTravelers/index.vue
index 74561fed4a..ab6d829571 100644
--- a/website/client/src/components/shops/timeTravelers/index.vue
+++ b/website/client/src/components/shops/timeTravelers/index.vue
@@ -113,34 +113,7 @@
               :price-type="ctx.item.currency"
               :empty-item="false"
               @click="selectItemToBuy(ctx.item)"
-            >
-              <span
-                v-if="category !== 'quests'"
-                slot="popoverContent"
-                slot-scope="ctx"
-              ><div><h4 class="popover-content-title">{{ ctx.item.text }}</h4></div></span>
-              <span
-                v-if="category === 'quests'"
-                slot="popoverContent"
-              ><div class="questPopover">
-                <h4 class="popover-content-title">{{ item.text }}</h4>
-                <questInfo :quest="item" />
-              </div></span>
-              <template
-                slot="itemBadge"
-                slot-scope="ctx"
-              >
-                <span
-                  v-if="ctx.item.pinType !== 'IGNORE'"
-                  class="badge-top"
-                  @click.prevent.stop="togglePinned(ctx.item)"
-                >
-                  <pin-badge
-                    :pinned="ctx.item.pinned"
-                  />
-                </span>
-              </template>
-            </shopItem>
+            />
           </template>
         </itemRows>
       </div>
@@ -184,8 +157,6 @@ import { mapState } from '@/libs/store';
 import ShopItem from '../shopItem';
 import Item from '@/components/inventory/item';
 import ItemRows from '@/components/ui/itemRows';
-import QuestInfo from '../quests/questInfo.vue';
-import PinBadge from '@/components/ui/pinBadge';
 import toggleSwitch from '@/components/ui/toggleSwitch';
 
 import BuyQuestModal from '../quests/buyQuestModal.vue';
@@ -207,9 +178,7 @@ export default {
     ShopItem,
     Item,
     ItemRows,
-    PinBadge,
     toggleSwitch,
-    QuestInfo,
 
     BuyQuestModal,
   },
diff --git a/website/client/src/components/tasks/modal-controls/selectTranslatedArray.vue b/website/client/src/components/tasks/modal-controls/selectTranslatedArray.vue
index 8a15aaa6bc..68d4d690c4 100644
--- a/website/client/src/components/tasks/modal-controls/selectTranslatedArray.vue
+++ b/website/client/src/components/tasks/modal-controls/selectTranslatedArray.vue
@@ -10,6 +10,7 @@
       :hide-icon="false"
       :inline-dropdown="inlineDropdown"
       :placeholder="placeholder"
+      :direct-select="true"
       @select="selectItem($event)"
     >
       <template #item="{ item }">
diff --git a/website/client/src/components/ui/filterDropdown.vue b/website/client/src/components/ui/filterDropdown.vue
index 345b530824..75411467b3 100644
--- a/website/client/src/components/ui/filterDropdown.vue
+++ b/website/client/src/components/ui/filterDropdown.vue
@@ -8,6 +8,7 @@
       :right="true"
       :hide-icon="false"
       :inline-dropdown="false"
+      :direct-select="directSelect"
       @select="selectItem($event)"
     >
       <template #item="{ item }">
@@ -35,6 +36,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    directSelect: {
+      type: Boolean,
+      default: false,
+    },
   },
   data () {
     return {
diff --git a/website/client/src/components/ui/selectList.vue b/website/client/src/components/ui/selectList.vue
index 5e02c3c0a4..8d9c947e46 100644
--- a/website/client/src/components/ui/selectList.vue
+++ b/website/client/src/components/ui/selectList.vue
@@ -104,6 +104,10 @@ export default {
     activeKeyProp: {
       type: String,
     },
+    directSelect: {
+      type: Boolean,
+      default: false,
+    },
     disabledProp: {
       type: String,
     },
@@ -132,13 +136,17 @@ export default {
   },
   methods: {
     getKeyProp (item) {
-      return this.keyProp ? item[this.keyProp] : item.key;
+      return this.keyProp ? item[this.keyProp] : item.key || item.identifier;
     },
     isDisabled (item) {
       return typeof item[this.disabledProp] === 'undefined' ? false : item[this.disabledProp];
     },
     selectItem (item) {
-      this.selected = this.getKeyProp(item);
+      if (this.directSelect) {
+        this.selected = item;
+      } else {
+        this.selected = this.getKeyProp(item);
+      }
       this.$emit('select', item);
     },
     isSelected (item) {