fixed #439

src/components/Widgets/Store/StoreProduct/StoreProductShow/StoreProductShow.vue

@@ -66,12 +66,20 @@
           {{ parseInt(product.sellable_price).toLocaleString('fa') }}
           ریال
         </div>
-        <q-btn label="افزودن به سبد"
-               outline
-               color="primary"
-               :loading="addToCartLoading"
-               class="product-show__summery-price-action"
-               @click="addToCart" />
+        <div class="product-show__summery-price-action">
+          <q-btn v-if="!basketItem"
+                 class="product-btn-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>
     </div>
     <div v-if="product.description"
@@ -97,10 +105,11 @@ import { APIGateway } from 'src/api/APIGateway.js'
 import MediasComponent from './components/Medias.vue'
 import DiscountBadge from './components/discountBadge.vue'
 import Breadcrumbs from 'src/components/Widgets/Breadcrumbs/Breadcrumbs.vue'
+import CartCountAction from 'src/components/cart/cartCountAction/cartCountAction.vue'
 
 export default {
   name: 'StoreProductShow',
-  components: { Breadcrumbs, MediasComponent, DiscountBadge },
+  components: { Breadcrumbs, MediasComponent, DiscountBadge, CartCountAction },
   mixins: [mixinWidget],
   data () {
     return {
@@ -111,6 +120,17 @@ export default {
   computed: {
     productId () {
       return this.$route.params.id
+    },
+    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
     }
   },
   mounted() {
@@ -126,14 +146,38 @@ export default {
           this.checkoutReview()
         })
     },
+    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
+        })
+    },
     checkoutReview () {
-      this.basket.loading = true
+      this.addToCartLoading = true
       APIGateway.basket.checkoutReview()
         .then((basket) => {
           this.$store.commit('Shop/updateBasket', new Basket(basket))
         })
         .finally(() => {
-          this.basket.loading = false
+          this.addToCartLoading = false
         })
     },
     getProduct () {
@@ -295,7 +339,9 @@ export default {
       }
       .product-show__summery-price-action {
         width: 100%;
-        background: white !important;
+        .product-btn-add-to-cart {
+          width: 100%;
+        }
       }
       @media screen and (max-width: 900px) {
         & {

src/components/Widgets/Store/StoreProduct/StoreRelatedProducts/StoreRelatedProducts.vue

@@ -13,6 +13,9 @@
                       :product="product"
                       :add-to-cart-loading="addToCartLoading"
                       class="product-item"
+                      @increase="onIncrease"
+                      @decrease="onDecrease"
+                      @remove="onRemove"
                       @add-to-cart="addToCart" />
       </div>
     </q-card>
@@ -63,14 +66,38 @@ export default {
           this.checkoutReview()
         })
     },
+    onIncrease (productId) {
+      this.addToCartLoading = true
+      APIGateway.basketItem.incrementProduct(productId)
+        .finally(() => {
+          this.checkoutReview()
+          this.addToCartLoading = false
+        })
+    },
+    onDecrease (productId) {
+      this.addToCartLoading = true
+      APIGateway.basketItem.decrementProduct(productId)
+        .finally(() => {
+          this.checkoutReview()
+          this.addToCartLoading = false
+        })
+    },
+    onRemove (basketItemId) {
+      this.addToCartLoading = true
+      APIGateway.basketItem.remove(basketItemId)
+        .finally(() => {
+          this.checkoutReview()
+          this.addToCartLoading = false
+        })
+    },
     checkoutReview () {
-      this.basket.loading = true
+      this.addToCartLoading = true
       APIGateway.basket.checkoutReview()
         .then((basket) => {
           this.$store.commit('Shop/updateBasket', new Basket(basket))
         })
         .finally(() => {
-          this.basket.loading = false
+          this.addToCartLoading = false
         })
     },
     getProduct () {

src/components/Widgets/Store/StoreProduct/StoreRelatedProducts/components/productItem.vue

@@ -46,21 +46,32 @@
           </div>
         </div>
       </div>
-      <q-btn color="primary"
-             class="product-item__price-action"
-             :loading="addToCartLoading"
-             @click="addToCart">
-        افزودن به سبد
-      </q-btn>
+      <div class="product-item__price-action">
+        <q-btn v-if="!basketItem"
+               class="product-btn-add-to-cart"
+               :loading="addToCartLoading"
+               color="primary"
+               @click="addToCart">
+          افزودن به سبد
+        </q-btn>
+        <cart-count-action v-else
+                           :basket-item="basketItem"
+                           :loading="addToCartLoading"
+                           @increase="onIncrease"
+                           @decrease="onDecrease"
+                           @remove="onRemove" />
+      </div>
     </div>
   </div>
 </template>
 
 <script>
 import { Product } from 'src/models/Product.js'
+import CartCountAction from 'src/components/cart/cartCountAction/cartCountAction.vue'
 
 export default {
   name: 'productItem',
+  components: { CartCountAction },
   props: {
     product: {
       type: Product,
@@ -71,13 +82,35 @@ export default {
       default: false
     }
   },
-  emits: ['add-to-cart'],
+  emits: ['add-to-cart', 'increase', 'decrease', 'remove'],
+  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: {
     goToProductPage () {
       this.$router.push({ name: 'Public.Product', params: { id: this.product.id } })
     },
     addToCart () {
       this.$emit('add-to-cart', this.product.id)
+    },
+    onIncrease () {
+      this.$emit('increase', this.product.id)
+    },
+    onDecrease () {
+      this.$emit('decrease', this.product.id)
+    },
+    onRemove () {
+      this.$emit('remove', this.basketItem.id)
     }
   }
 }
@@ -144,7 +177,7 @@ export default {
     flex-direction: column;
     gap: 29px;
     justify-content: center;
-    align-items: center;
+    align-items: flex-end;
     .product-item__price-info {
       display: flex;
       flex-flow: column;
@@ -182,6 +215,9 @@ export default {
     }
     .product-item__price-action {
       width: 252px;
+      .product-btn-add-to-cart {
+        width: 100%;
+      }
     }
   }
 }

src/components/cart/cartCountAction/cartCountAction.vue

@@ -15,13 +15,13 @@
              outline
              color="red"
              icon="remove"
-             :loading="basketItem.loading"
+             :loading="basketItem.loading || loading"
              @click="onDecrease" />
       <q-btn v-else
              flat
              color="red"
              icon="delete_outline"
-             :loading="basketItem.loading"
+             :loading="basketItem.loading || loading"
              @click="onRemove" />
     </div>
   </div>
@@ -36,6 +36,10 @@ export default {
     basketItem: {
       type: BasketItem,
       default: new BasketItem()
+    },
+    loading: {
+      type: Boolean,
+      default: false
     }
   },
   emits: ['increase', 'decrease', 'remove'],