quantity changer implemented

packages/Webkul/Velocity/src/Resources/assets/sass/components/UI.scss

@@ -93,3 +93,32 @@
         }
     }
 }
+
+.grid-container {
+    display: block;
+    width: 100%;
+}
+
+.filter-row-one {
+    display: inline-flex;
+    width: 100%;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 20px;
+
+    .dropdown-filters {
+        position: absolute;
+        right: 25px;
+    }
+
+    .per-page {
+        right: 250px;
+
+        .per-page-label {
+            position: absolute;
+            right: 120px;
+            width: 100%;
+            top: 8px;
+        }
+    }
+}

packages/Webkul/Velocity/src/Resources/views/checkout/cart/mini-cart.blade.php

@@ -53,7 +53,7 @@
 
                                             {!! view_render_event('bagisto.shop.checkout.cart-mini.item.quantity.before', ['item' => $item]) !!}
 
-                                            <input type="text" value="{{ $item->quantity }}" class="ml5" />
+                                            <input type="text" disabled value="{{ $item->quantity }}" class="ml5" />
 
                                             {!! view_render_event('bagisto.shop.checkout.cart-mini.item.quantity.after', ['item' => $item]) !!}
                                         </div>

packages/Webkul/Velocity/src/Resources/views/customers/account/orders/index.blade.php

@@ -18,18 +18,6 @@
     </div>
 
     {!! view_render_event('bagisto.shop.customers.account.orders.list.before') !!}
-        <div class="input-group col-2">
-            <input
-                class="form-control py-2 border-right-0 border fs16i"
-                type="search"
-                placeholder="Search Here..." />
-
-            <span class="input-group-append">
-                <button class="btn border-left-0 border disable-box-shadow" type="button">
-                    <i class="rango-search"></i>
-                </button>
-            </span>
-        </div>
 
         <div class="account-items-list">
             <div class="account-table-content">

packages/Webkul/Velocity/src/Resources/views/products/view.blade.php

@@ -141,6 +141,20 @@
         </form>
     </script>
 
+    <script type="text/x-template" id="quantity-changer-template">
+        <div class="quantity control-group" :class="[errors.has(controlName) ? 'has-error' : '']">
+            <label class="required">{{ __('shop::app.products.quantity') }}</label>
+
+            <button type="button" class="decrease" @click="decreaseQty()">-</button>
+
+            <input :name="controlName" class="control" :value="qty" :v-validate="validations" data-vv-as="&quot;{{ __('shop::app.products.quantity') }}&quot;" readonly>
+
+            <button type="button" class="increase" @click="increaseQty()">+</button>
+
+            <span class="control-error" v-if="errors.has(controlName)">@{{ errors.first(controlName) }}</span>
+        </div>
+    </script>
+
     <script type="text/javascript">
         Vue.component('product-view', {
 
@@ -176,6 +190,63 @@
             }
         });
 
+        Vue.component('quantity-changer', {
+            template: '#quantity-changer-template',
+
+            inject: ['$validator'],
+
+            props: {
+                controlName: {
+                    type: String,
+                    default: 'quantity'
+                },
+
+                quantity: {
+                    type: [Number, String],
+                    default: 1
+                },
+
+                minQuantity: {
+                    type: [Number, String],
+                    default: 1
+                },
+
+                validations: {
+                    type: String,
+                    default: 'required|numeric|min_value:1'
+                }
+            },
+
+            data: function() {
+                return {
+                    qty: this.quantity
+                }
+            },
+
+            watch: {
+                quantity: function (val) {
+                    this.qty = val;
+
+                    this.$emit('onQtyUpdated', this.qty)
+                }
+            },
+
+            methods: {
+                decreaseQty: function() {
+                    if (this.qty > this.minQuantity)
+                        this.qty = parseInt(this.qty) - 1;
+
+                    this.$emit('onQtyUpdated', this.qty)
+                },
+
+                increaseQty: function() {
+                    this.qty = parseInt(this.qty) + 1;
+
+                    this.$emit('onQtyUpdated', this.qty)
+                }
+            }
+        });
+
         $(document).ready(function() {
             var addTOButton = document.getElementsByClassName('add-to-buttons')[0];
             // document.getElementById('loader').style.display="none";