item pinning (#8918)

* toggle pinned state of items server + client

* pin quests / add pin src

* add officially pinned items and api to get in app rewards

* update schema and get items deatils

* update pin actions to the new logic

* show countBadge only with a number

* extract getPinKey - pin seasonal items

* togglePinned in buy-dialogs

* add pinKey to shop items

* wip

* wip

* fix path

* togglePinnedItem as common.op / use in client

* fix linting

* pinning: getItemInfo and save in db path and type

* make api more consistent, fix bugs

* updates

* fix bugs

* update actions to current api

* marketGear

* change to pinType

* add mystery_set to getItemInfo

* fix isPinned

* ignore animals

* list shopItems (initial)

* shopItem now has default popoverconent, itemclass and price / currency - list pinned items as rewards - attributes to gear

* show buyModal for the rewards

* show mystery_set icon

* add info whether item is suggested

* write migration, fix style issues

* pin potion and armoire

* make potion, armoire not unpinnable

* show notes for armoire and potion, add default items for new users

* show unpin notification

* add/remove pinned gear on class-change

* remove pinned & add new gear on purchase - refactoring pinning methods - fixes

* always allow to purchase armoire

* highlight item if suggested

website/client/components/tasks/user.vue

@@ -74,7 +74,38 @@
         :isUser="true", :searchText="searchTextThrottled",
         :selectedTags="selectedTags",
         @editTask="editTask",
+        @openBuyDialog="openBuyDialog($event)"
       )
+
+  buyModal(
+    :item="selectedItemToBuy",
+    :priceType="selectedItemToBuy ? selectedItemToBuy.currency : ''",
+    @change="resetItemToBuy($event)",
+    @buyPressed="buyItem($event)",
+    @togglePinned="togglePinned($event)"
+  )
+      template(slot="item", scope="ctx")
+        div(v-if="ctx.item.purchaseType === 'gear'")
+          avatar.inline(
+            :member="user",
+            :avatarOnly="true",
+            :withBackground="true",
+            :overrideAvatarGear="memberOverrideAvatarGear(ctx.item)"
+          )
+
+        item.flat(
+          :item="ctx.item",
+          :itemContentClass="ctx.item.class",
+          :showPopover="false",
+          v-else
+        )
+
+      template(slot="additionalInfo", scope="ctx")
+        equipmentAttributesGrid.bordered(
+          :item="ctx.item",
+          v-if="ctx.item.purchaseType === 'gear'"
+        )
+
 </template>
 
 <style lang="scss">
@@ -246,12 +277,21 @@ import cloneDeep from 'lodash/cloneDeep';
 import { mapState, mapActions } from 'client/libs/store';
 import taskDefaults from 'common/script/libs/taskDefaults';
 
+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';
+
 export default {
   components: {
     TaskColumn,
     TaskModal,
     bDropdown,
     bDropdownItem,
+    BuyModal,
+    Item,
+    Avatar,
+    EquipmentAttributesGrid,
   },
   data () {
     return {
@@ -275,6 +315,8 @@ export default {
       newTag: null,
       editingTask: null,
       creatingTask: null,
+
+      selectedItemToBuy: null,
     };
   },
   computed: {
@@ -393,6 +435,26 @@ export default {
       if (this.temporarilySelectedTags.indexOf(tagId) !== -1) return true;
       return false;
     },
+    resetItemToBuy ($event) {
+      if (!$event) {
+        this.selectedItemToBuy = null;
+      }
+    },
+    memberOverrideAvatarGear (gear) {
+      return {
+        [gear.type]: gear.key,
+      };
+    },
+    buyItem (item) {
+      if (item.currency === 'gold') {
+        this.$store.dispatch('shops:buyItem', {key: item.key});
+      } else {
+        this.$store.dispatch('shops:purchase', {type: item.purchaseType, key: item.key});
+      }
+    },
+    openBuyDialog (rewardItem) {
+      this.selectedItemToBuy = rewardItem;
+    },
   },
 };
 </script>