toggle pin in buy-dialogs

HabitRPG · Sep 20, 2017 · 55b6d37 · 55b6d37
1 parent 4230a84
commit 55b6d37
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 6 deletions.
diff --git a/website/client/app.vue b/website/client/app.vue
@@ -10,7 +10,7 @@
         app-header
         buyModal(
           :item="selectedItemToBuy",
-          :withPin="false",
+          :withPin="true",
           @change="resetItemToBuy($event)",
           @buyPressed="customPurchase($event)",
           :genericPurchase="genericPurchase(selectedItemToBuy)",

diff --git a/website/client/components/shops/buyModal.vue b/website/client/components/shops/buyModal.vue
@@ -6,7 +6,7 @@
     @change="onChange($event)"
   )
     span.badge.badge-pill.badge-dialog(
-      :class="{'item-selected-badge': item.pinned}",
+      :class="{'item-selected-badge': isPinned}",
       v-if="withPin",
       @click.prevent.stop="togglePinned()"
     )
@@ -253,6 +253,8 @@
           pin: svgPin,
           clock: svgClock,
         }),
+
+        isPinned: false,
       };
     },
     computed: {
@@ -283,6 +285,11 @@
         return this.$t('limitedOffer', {date: moment(seasonalShopConfig.dateRange.end).format('LL')});
       },
     },
+    watch: {
+      item: function throttleSearch () {
+        this.isPinned = this.item.pinned;
+      },
+    },
     methods: {
       onChange ($event) {
         this.$emit('change', $event);
@@ -316,7 +323,9 @@
         this.$root.$emit('show::modal', 'buy-gems');
       },
       togglePinned () {
-        if (!this.$store.dispatch('user:togglePinnedItem', {type: this.item.pinType, path: this.item.path})) {
+        this.isPinned = this.$store.dispatch('user:togglePinnedItem', {type: this.item.pinType, path: this.item.path});
+
+        if (!this.isPinned) {
           this.text(this.$t('unpinnedItem', {item: this.item.text}));
         }
       },

diff --git a/website/client/components/shops/quests/buyQuestModal.vue b/website/client/components/shops/quests/buyQuestModal.vue
@@ -6,7 +6,7 @@
     @change="onChange($event)"
   )
     span.badge.badge-pill.badge-dialog(
-      :class="{'item-selected-badge': item.pinned}",
+      :class="{'item-selected-badge': isPinned}",
       v-if="withPin",
       @click.prevent.stop="togglePinned()"
     )
@@ -212,8 +212,15 @@
           pin: svgPin,
           experience: svgExperience,
         }),
+
+        isPinned: false,
       };
     },
+    watch: {
+      item: function throttleSearch () {
+        this.isPinned = this.item.pinned;
+      },
+    },
     computed: {
       ...mapState({
         content: 'content',
@@ -250,7 +257,11 @@
         this.hideDialog();
       },
       togglePinned () {
-        this.$emit('togglePinned', this.item);
+        this.isPinned = this.$store.dispatch('user:togglePinnedItem', {type: this.item.pinType, path: this.item.path});
+
+        if (!this.isPinned) {
+          this.text(this.$t('unpinnedItem', {item: this.item.text}));
+        }
       },
       hideDialog () {
         this.$root.$emit('hide::modal', 'buy-quest-modal');

diff --git a/website/client/components/shops/quests/index.vue b/website/client/components/shops/quests/index.vue
@@ -183,7 +183,6 @@
       :priceType="selectedItemToBuy ? selectedItemToBuy.currency : ''",
       :withPin="true",
       @change="resetItemToBuy($event)",
-      @togglePinned="togglePinned($event)"
     )
       template(slot="item", scope="ctx")
         item.flat(