WIP(shops): more fixes

2025-12-19 15:48:04 +01:00 · 2024-05-17 20:29:14 -05:00
parent 3bb1cceed1
commit 8d479e358d
10 changed files with 94 additions and 136 deletions
--- 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;
  }
 }

--- 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 }">
--- 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;
--- 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',
--- 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: {
--- 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,
--- 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,
  },
--- 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 }">
--- 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 {
--- 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) {