Client/negue multiplefixes6 (#9000)

* use store action to purchase gem by gold

* only show party members in header if enough width available / use overflow hidden

* fix featuredItems buyModals

* fix special items listing - open modal on special spells

* don't open the buymodal on locked items

* fix lint

website/client/app.vue

@@ -29,6 +29,10 @@
     margin-top: .5em;
     margin-bottom: .5em;
   }
+
+  .container-fluid {
+    overflow-x: hidden;
+  }
 </style>
 
 <style>

website/client/components/appHeader.vue

@@ -6,11 +6,15 @@
   .view-party(v-if="user.party && user.party._id && partyMembers && partyMembers.length > 1")
     // TODO button should open the party members modal
     button.btn.btn-primary(@click='openPartyModal()') {{ $t('viewParty') }}
-  .party-members.d-flex(v-if="partyMembers && partyMembers.length > 1")
+  .party-members.d-flex(
+    v-if="partyMembers && partyMembers.length > 1",
+    v-resize="1500",
+    @resized="setPartyMembersWidth($event)"
+  )
     member-details(
       v-for="(member, $index) in partyMembers",
       :key="member._id",
-      v-if="member._id !== user._id && $index < 10",
+      v-if="member._id !== user._id && $index < membersToShow",
       :member="member",
       condensed=true,
       @onHover="expandMember(member._id)",
@@ -88,8 +92,12 @@ import { mapGetters, mapActions } from 'client/libs/store';
 import MemberDetails from './memberDetails';
 import createPartyModal from './groups/createPartyModal';
 import membersModal from './groups/membersModal';
+import ResizeDirective from 'client/directives/resize.directive';
 
 export default {
+  directives: {
+    resize: ResizeDirective,
+  },
   components: {
     MemberDetails,
     createPartyModal,
@@ -98,6 +106,8 @@ export default {
   data () {
     return {
       expandedMember: null,
+
+      currentWidth: 0,
     };
   },
   computed: {
@@ -109,6 +119,9 @@ export default {
       if (this.$store.state.hideHeader) return false;
       return true;
     },
+    membersToShow () {
+      return Math.floor(this.currentWidth / 140) + 1;
+    },
   },
   methods: {
     ...mapActions({
@@ -131,6 +144,11 @@ export default {
       }
       this.$root.$emit('show::modal', 'create-party-modal');
     },
+    setPartyMembersWidth ($event) {
+      if (this.currentWidth !== $event.width) {
+        this.currentWidth = $event.width;
+      }
+    },
   },
   created () {
     if (this.user.party && this.user.party._id) this.getPartyMembers();

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

@@ -138,6 +138,13 @@
       div.potion-icon(:class="'Pet_HatchingPotion_'+currentDraggingPotion.key")
       div.popover
         div.popover-content {{ $t('clickOnEggToHatch', {potionName: currentDraggingPotion.text }) }}
+
+  selectMembersModal(
+    :item="selectedSpell",
+    :group="user.party",
+    @change="resetSpell($event)",
+    @memberSelected="memberSelected($event)",
+  )
 </template>
 
 <style lang="scss" scoped>
@@ -174,6 +181,7 @@ import Item from 'client/components/inventory/item';
 import ItemRows from 'client/components/ui/itemRows';
 import CountBadge from 'client/components/ui/countBadge';
 
+import SelectMembersModal from 'client/components/selectMembersModal';
 import HatchedPetDialog from '../stable/hatchedPetDialog';
 
 import createAnimal from 'client/libs/createAnimal';
@@ -212,6 +220,7 @@ export default {
     bDropdownItem,
     HatchedPetDialog,
     CountBadge,
+    SelectMembersModal,
   },
   directives: {
     drag: DragDropDirective,
@@ -227,6 +236,7 @@ export default {
       currentDraggingPotion: null,
       potionClickMode: false,
       hatchedPet: null,
+      selectedSpell: null,
     };
   },
   watch: {
@@ -250,7 +260,9 @@ export default {
         const contentItems = this.content[groupKey];
 
         each(this.user.items[groupKey], (itemQuantity, itemKey) => {
-          if (itemQuantity > 0 && (!group.allowedItems || group.allowedItems.indexOf(itemKey) !== -1)) {
+          let isAllowed = !group.allowedItems || group.allowedItems.indexOf(itemKey) !== -1;
+
+          if (itemQuantity > 0 && isAllowed) {
             const item = contentItems[itemKey];
 
             const isSearched = !searchText || item.text().toLowerCase().indexOf(searchText) !== -1;
@@ -277,7 +289,7 @@ export default {
         });
       });
 
-      let specialArray = [];
+      let specialArray = itemsByType.special;
 
       if (this.user.purchased.plan.mysteryItems.length) {
         specialArray.push({
@@ -297,10 +309,6 @@ export default {
         });
       }
 
-      if (specialArray.length > 0) {
-        itemsByType.special = specialArray;
-      }
-
       return itemsByType;
     },
   },
@@ -396,6 +404,8 @@ export default {
           let openedItem = result.data.data;
           let text = this.content.gear.flat[openedItem.key].text();
           this.drop(this.$t('messageDropMysteryItem', {dropText: text}), openedItem);
+        } else {
+          this.selectedSpell = item;
         }
       }
     },
@@ -408,6 +418,17 @@ export default {
         lastMouseMoveEvent = $event;
       }
     },
+
+    resetSpell ($event) {
+      if (!$event) {
+        this.selectedSpell = null;
+      }
+    },
+
+    memberSelected (member) {
+      this.$store.dispatch('user:castSpell', {key: this.selectedSpell.key, targetId: member.id});
+      this.selectedSpell = null;
+    },
   },
 };
 </script>

website/client/components/payments/buyGemsModal.vue

@@ -11,7 +11,7 @@ b-modal#buy-gems(title="Buy Gems", :hide-footer="true", size='lg')
           p {{ $t('subGemPop') }}
 
         .col-4
-          button.btn.btn-primary(@click='purchase({ params: {type: "gems", key: "gem"} })')
+          button.btn.btn-primary(@click='purchase({type: "gems", key: "gem"})')
             | Buy Gems for 20 Gold each
             span.Pet_Currency_Gem.inline-gems
              .badge.badge-success.stack-count {{planGemLimits.convCap + user.purchased.plan.consecutive.gemCapExtra - user.purchased.plan.gemsBought}}
@@ -78,7 +78,6 @@ b-modal#buy-gems(title="Buy Gems", :hide-footer="true", size='lg')
 import bModal from 'bootstrap-vue/lib/components/modal';
 import { mapState } from 'client/libs/store';
 import planGemLimits from '../../../common/script/libs/planGemLimits';
-import purchase from '../../../common/script/ops/purchase';
 
 export default {
   components: {
@@ -101,7 +100,7 @@ export default {
     },
     purchase (params) {
       try {
-        purchase(this.user, params);
+        this.$store.dispatch('shops:purchase', params);
       } catch (e) {
         alert(e.message);
       }

website/client/components/selectMembersModal.vue

@@ -3,7 +3,7 @@ div
   b-modal#select-member-modal(
     size='lg',
     :visible="true",
-    v-if="card != null",
+    v-if="item != null",
     :hideFooter="true",
     @change="onChange($event)"
   )
@@ -92,13 +92,13 @@ import bModal from 'bootstrap-vue/lib/components/modal';
 import bDropdown from 'bootstrap-vue/lib/components/dropdown';
 import bDropdownItem from 'bootstrap-vue/lib/components/dropdown-item';
 
-import MemberDetails from '../../memberDetails';
+import MemberDetails from './memberDetails';
 import removeIcon from 'assets/members/remove.svg';
 import messageIcon from 'assets/members/message.svg';
 import starIcon from 'assets/members/star.svg';
 
 export default {
-  props: ['group', 'hideBadge', 'card'],
+  props: ['group', 'hideBadge', 'item'],
   components: {
     bModal,
     bDropdown,

website/client/components/shops/market/index.vue

@@ -51,7 +51,7 @@
                 :itemContentClass="'shop_'+item.key",
                 :emptyItem="false",
                 :popoverPosition="'top'",
-                @click="gearSelected(item)"
+                @click="featuredItemSelected(item)"
               )
                 template(slot="itemBadge", scope="ctx")
                   span.badge.badge-pill.badge-item.badge-svg(
@@ -265,7 +265,7 @@
           )
 
       selectMembersModal(
-        :card="selectedCardToBuy",
+        :item="selectedCardToBuy",
         :group="user.party",
         @change="resetCardToBuy($event)",
         @memberSelected="memberSelected($event)",
@@ -410,7 +410,7 @@
   import SellModal from './sellModal.vue';
   import BuyModal from '../buyModal.vue';
   import EquipmentAttributesGrid from './equipmentAttributesGrid.vue';
-  import SelectMembersModal from './selectMembersModal.vue';
+  import SelectMembersModal from 'client/components/selectMembersModal.vue';
 
   import bPopover from 'bootstrap-vue/lib/components/popover';
   import bDropdown from 'bootstrap-vue/lib/components/dropdown';
@@ -799,6 +799,13 @@ export default {
           this.selectedItemToBuy = item;
         }
       },
+      featuredItemSelected (item) {
+        if (item.purchaseType === 'gear' && !item.locked) {
+          this.selectedGearToBuy = item;
+        } else {
+          this.itemSelected(item);
+        }
+      },
       gearSelected (item) {
         if (!item.locked) {
           this.selectedGearToBuy = item;

website/client/components/tasks/column.vue

@@ -322,7 +322,9 @@ export default {
       }
     },
     openBuyDialog (rewardItem) {
+      if (rewardItem.purchaseType !== 'gear' || !rewardItem.locked) {
         this.$emit('openBuyDialog', rewardItem);
+      }
     },
   },
 };

website/client/components/tasks/user.vue

@@ -107,7 +107,7 @@
         )
 
   selectMembersModal(
-    :card="selectedCardToBuy",
+    :item="selectedCardToBuy",
     :group="user.party",
     @change="resetCardToBuy($event)",
     @memberSelected="memberSelectedToSendCard($event)",
@@ -327,7 +327,7 @@ import BuyModal from 'client/components/shops/buyModal.vue';
 import Item from 'client/components/inventory/item.vue';
 import Avatar from 'client/components/avatar';
 import EquipmentAttributesGrid from 'client/components/shops/market/equipmentAttributesGrid.vue';
-import SelectMembersModal from 'client/components/shops/market/selectMembersModal.vue';
+import SelectMembersModal from 'client/components/selectMembersModal.vue';
 
 export default {
   components: {