19.0 vanilla

odoo-bringout-oca-ocb-sale/sale/static/src/js/quantity_buttons/quantity_buttons.js

@@ -0,0 +1,42 @@
+
+import { Component } from '@odoo/owl';
+
+export class QuantityButtons extends Component {
+    static template = 'sale.QuantityButtons';
+    static props = {
+        quantity: Number,
+        setQuantity: Function,
+        isMinusButtonDisabled: { type: Boolean, optional: true },
+        isPlusButtonDisabled: { type: Boolean, optional: true },
+        btnClasses: { type: String, optional: true },
+    };
+
+    /**
+     * Increase the quantity.
+     */
+    increaseQuantity() {
+        this.props.setQuantity(this.props.quantity + 1);
+    }
+
+    /**
+     * Decrease the quantity.
+     */
+    decreaseQuantity() {
+        this.props.setQuantity(this.props.quantity - 1);
+    }
+
+    /**
+     * Set the quantity to a specified value.
+     *
+     * @param {Event} event The quantity input's `on change` event, containing the new quantity.
+     */
+    async setQuantity(event) {
+        const quantity = parseFloat(event.target.value);
+        const didUpdateQuantity = await this.props.setQuantity(isNaN(quantity) ? 0 : quantity);
+        // If the quantity wasn't updated, the component won't rerender, and the input will display
+        // a stale value. As a result, we need to manually rerender the input.
+        if (!didUpdateQuantity) {
+            this.render();
+        }
+    }
+}

odoo-bringout-oca-ocb-sale/sale/static/src/js/quantity_buttons/quantity_buttons.scss

@@ -0,0 +1,22 @@
+input[name="sale_quantity"] {
+    padding: 0;
+
+    @include media-breakpoint-down(md) {
+        max-width: 3rem;
+    }
+
+    @include media-breakpoint-up(md) {
+        max-width: 4rem;
+    }
+    
+    // removing input field=number arrows as their size might
+    // change depending on browser default styling and shift input's position
+    &::-webkit-outer-spin-button,
+    &::-webkit-inner-spin-button {
+        -webkit-appearance: none;
+        margin: 0;
+    }
+    &[type=number] {
+        -moz-appearance: textfield;
+    }
+}

odoo-bringout-oca-ocb-sale/sale/static/src/js/quantity_buttons/quantity_buttons.xml

@@ -0,0 +1,32 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates xml:space="preserve">
+    <t t-name="sale.QuantityButtons">
+        <div name="quantity_buttons_wrapper" class="input-group justify-content-end ">
+            <button
+                name="sale_quantity_button_minus"
+                t-attf-class="px-2 px-md-3 btn btn-secondary {{ props.btnClasses or 'd-md-inline-block' }}"
+                aria-label="Remove one"
+                t-att-disabled="props.isMinusButtonDisabled"
+                t-on-click="decreaseQuantity"
+            >
+                <i class="oi oi-minus"/>
+            </button>
+            <input
+                class="form-control quantity text-center"
+                name="sale_quantity"
+                type="number"
+                t-att-value="props.quantity"
+                t-on-change="setQuantity"
+            />
+            <button
+                t-attf-class="px-2 px-md-3 btn btn-secondary {{ props.btnClasses or 'd-md-inline-block' }}"
+                name="sale_quantity_button_plus"
+                aria-label="Add one"
+                t-att-disabled="props.isPlusButtonDisabled"
+                t-on-click="increaseQuantity"
+            >
+                <i class="oi oi-plus"/>
+            </button>
+        </div>
+    </t>
+</templates>