fixed #403

src/components/Widgets/Store/Cart/components/step1/cartItem.vue

@@ -41,30 +41,10 @@
                 name="account_balance_wallet" />
       </div>
       <div class="cart-item__count-action">
-        <div class="cart-item__count-action-increase">
-          <q-btn outline
-                 color="primary"
-                 icon="add"
-                 :loading="basketItem.loading"
-                 @click="onIncrease" />
-        </div>
-        <div class="cart-item__count-action-count">
-          {{ basketItem.count }}
-        </div>
-        <div class="cart-item__count-action-decrease">
-          <q-btn v-if="basketItem.count > 1"
-                 outline
-                 color="red"
-                 icon="remove"
-                 :loading="basketItem.loading"
-                 @click="onDecrease" />
-          <q-btn v-else
-                 flat
-                 color="red"
-                 icon="delete_outline"
-                 :loading="basketItem.loading"
-                 @click="onRemove" />
-        </div>
+        <cart-count-action :basket-item="basketItem"
+                           @increase="onIncrease"
+                           @decrease="onDecrease"
+                           @remove="onRemove" />
       </div>
       <div class="cart-item__price">
         <div class="cart-item__price-base">
@@ -91,9 +71,11 @@
 <script>
 import { Product } from 'src/models/Product.js'
 import { BasketItem } from 'src/models/BasketItem.js'
+import CartCountAction from 'src/components/cart/cartCountAction/cartCountAction.vue'
 
 export default {
   name: 'cartItem',
+  components: { CartCountAction },
   props: {
     basketItem: {
       type: BasketItem,
@@ -245,26 +227,7 @@ export default {
       position: absolute;
       right: 20px;
       top: 65px;
-      background: #FFFFFF;
-      border: 1px solid #DFE1EC;
-      border-radius: 8px;
-      padding: 12px 10px;
-      display: flex;
-      flex-flow: row;
-      justify-content: space-between;
-      align-items: center;
       width: 120px;
-      $btn-size: 24px;
-      .q-btn {
-        width: $btn-size;
-        height: $btn-size;
-        min-height: $btn-size;
-        padding: 0;
-      }
-      .cart-item__count-action-count {
-        color: $primary;
-        font-size: 16px;
-      }
     }
     .cart-item__price {
       position: absolute;

src/components/Widgets/Store/Shop/components/packageItem.vue

@@ -33,12 +33,18 @@
              outline>
         مشاهده جزییات
       </q-btn>
-      <q-btn class="package-item__actions-add-to-cart"
+      <q-btn v-if="!basketItem"
+             class="package-item__actions-add-to-cart"
              :loading="addToCartLoading"
              color="primary"
              @click="addToCart">
         افزودن به سبد
       </q-btn>
+      <cart-count-action v-else
+                         :basket-item="basketItem"
+                         @increase="onIncrease"
+                         @decrease="onDecrease"
+                         @remove="onRemove" />
     </div>
   </div>
 </template>
@@ -47,9 +53,11 @@
 import { Basket } from 'src/models/Basket.js'
 import { Package } from 'src/models/Package.js'
 import { APIGateway } from 'src/api/APIGateway.js'
+import CartCountAction from 'src/components/cart/cartCountAction/cartCountAction.vue'
 
 export default {
   name: 'PackageItem',
+  components: { CartCountAction },
   props: {
     packageItem: {
       type: Package,
@@ -61,7 +69,44 @@ export default {
       addToCartLoading: false
     }
   },
+  computed: {
+    basket () {
+      return this.$store.getters['Shop/basket']
+    },
+    basketItem () {
+      const target = this.basket.items_info.list.find(basketItem => basketItem.package === this.packageItem.id)
+      if (!target) {
+        return null
+      }
+
+      return target
+    }
+  },
   methods: {
+    onIncrease () {
+      this.addToCartLoading = true
+      APIGateway.basketItem.incrementPackage(this.basketItem.package)
+        .finally(() => {
+          this.checkoutReview()
+          this.addToCartLoading = false
+        })
+    },
+    onDecrease () {
+      this.addToCartLoading = true
+      APIGateway.basketItem.decrementPackage(this.basketItem.package)
+        .finally(() => {
+          this.checkoutReview()
+          this.addToCartLoading = false
+        })
+    },
+    onRemove () {
+      this.addToCartLoading = true
+      APIGateway.basketItem.remove(this.basketItem.id)
+        .finally(() => {
+          this.checkoutReview()
+          this.addToCartLoading = false
+        })
+    },
     addToCart () {
       this.addToCartLoading = true
       APIGateway.basketItem.addPackage(this.packageItem.id, 1)

src/components/Widgets/Store/Shop/components/productItem.vue

@@ -41,12 +41,18 @@
              outline>
         مشاهده جزییات
       </q-btn>
-      <q-btn class="product-item__actions-add-to-cart"
+      <q-btn v-if="!basketItem"
+             class="product-item__actions-add-to-cart"
              :loading="addToCartLoading"
              color="primary"
              @click="addToCart">
         افزودن به سبد
       </q-btn>
+      <cart-count-action v-else
+                         :basket-item="basketItem"
+                         @increase="onIncrease"
+                         @decrease="onDecrease"
+                         @remove="onRemove" />
     </div>
   </div>
 </template>
@@ -55,9 +61,11 @@
 import { Basket } from 'src/models/Basket.js'
 import { Product } from 'src/models/Product.js'
 import { APIGateway } from 'src/api/APIGateway.js'
+import CartCountAction from 'src/components/cart/cartCountAction/cartCountAction.vue'
 
 export default {
   name: 'ProductItem',
+  components: { CartCountAction },
   props: {
     product: {
       type: Product,
@@ -69,7 +77,44 @@ export default {
       addToCartLoading: false
     }
   },
+  computed: {
+    basket () {
+      return this.$store.getters['Shop/basket']
+    },
+    basketItem () {
+      const target = this.basket.items_info.list.find(basketItem => basketItem.product === this.product.id)
+      if (!target) {
+        return null
+      }
+
+      return target
+    }
+  },
   methods: {
+    onIncrease () {
+      this.addToCartLoading = true
+      APIGateway.basketItem.incrementProduct(this.basketItem.product)
+        .finally(() => {
+          this.checkoutReview()
+          this.addToCartLoading = false
+        })
+    },
+    onDecrease () {
+      this.addToCartLoading = true
+      APIGateway.basketItem.decrementProduct(this.basketItem.product)
+        .finally(() => {
+          this.checkoutReview()
+          this.addToCartLoading = false
+        })
+    },
+    onRemove () {
+      this.addToCartLoading = true
+      APIGateway.basketItem.remove(this.basketItem.id)
+        .finally(() => {
+          this.checkoutReview()
+          this.addToCartLoading = false
+        })
+    },
     addToCart () {
       this.addToCartLoading = true
       APIGateway.basketItem.addProduct(this.product.id, 1)

src/components/cart/cartCountAction/cartCountAction.vue

@@ -0,0 +1,78 @@
+<template>
+  <div class="cart-count-action">
+    <div class="cart-count-action-increase">
+      <q-btn outline
+             color="primary"
+             icon="add"
+             :loading="basketItem.loading"
+             @click="onIncrease" />
+    </div>
+    <div class="cart-count-action-count">
+      {{ basketItem.count }}
+    </div>
+    <div class="cart-count-action-decrease">
+      <q-btn v-if="basketItem.count > 1"
+             outline
+             color="red"
+             icon="remove"
+             :loading="basketItem.loading"
+             @click="onDecrease" />
+      <q-btn v-else
+             flat
+             color="red"
+             icon="delete_outline"
+             :loading="basketItem.loading"
+             @click="onRemove" />
+    </div>
+  </div>
+</template>
+
+<script>
+import { BasketItem } from 'src/models/BasketItem.js'
+
+export default {
+  name: 'cartCountAction',
+  props: {
+    basketItem: {
+      type: BasketItem,
+      default: new BasketItem()
+    }
+  },
+  emits: ['increase', 'decrease', 'remove'],
+  methods: {
+    onIncrease () {
+      this.$emit('increase')
+    },
+    onDecrease () {
+      this.$emit('decrease')
+    },
+    onRemove () {
+      this.$emit('remove')
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.cart-count-action {
+  background: #FFFFFF;
+  border: 1px solid #DFE1EC;
+  border-radius: 8px;
+  padding: 12px 10px;
+  display: flex;
+  flex-flow: row;
+  justify-content: space-between;
+  align-items: center;
+  $btn-size: 24px;
+  .q-btn {
+    width: $btn-size;
+    height: $btn-size;
+    min-height: $btn-size;
+    padding: 0;
+  }
+  .cart-count-action-count {
+    color: $primary;
+    font-size: 16px;
+  }
+}
+</style>