salix/client/order/src/prices-popover/index.js

import ngModule from '../module';
import './style.scss';

class Controller {
    constructor($scope, $http, $element) {
        this.$ = $scope;
        this.$http = $http;
        this.$element = $element;
        this.totalBasquet = 0;
    }
    set prices(value) {
        this._prices = value;
        if (value && value[0].grouping)
            this.calculateTotal();
    }
    get prices() {
        return this._prices;
    }
    getTags() {
        let filter = {
            where: {itemFk: this.item.id,
                priority: {gte: 4}},
            order: 'priority ASC',
            include: {relation: 'tag'}
        };
        this.$http.get(`/item/api/ItemTags?filter=${JSON.stringify(filter)}`).then(response => {
            this.tags = response.data;
        });
    }
    show(event, item) {
        this.item = JSON.parse(JSON.stringify(item));
        this.prices = this.item.prices;
        this.getTags();
        this.$.popover.parent = event.target;
        this.$.popover.relocate();
        this.$.popover.show();
    }
    clear() {
        this.item = {};
        this.tags = {};
        this._prices = {};
        this.total = 0;
    }
    calculateMax() {
        this.max = this.item.available - this.total;
    }
    calculateTotal() {
        this.total = 0;

        this.prices.forEach(price => {
            if (!price.quantity) price.quantity = 0;
            this.total += price.quantity;
        });
        this.calculateMax();
    }

    addQuantity(price) {
        if (this.total + price.grouping <= this.max) {
            price.quantity += price.grouping;
        }
        this.validate();
    }

    validate() {
        setTimeout(() => {
            this.calculateTotal();
            let inputs = this.$element[0].querySelectorAll('vn-input-number[name="quantity"] div.infix:not(.validated)');

            inputs.forEach(input => {
                if (this.total > this.item.available)
                    input.classList.add('invalid');
                else
                    input.classList.remove('invalid');
            });
            let wrongInputs = this.$element[0].querySelectorAll('vn-input-number[name="quantity"] div.infix.invalid');

            if (wrongInputs.length > 0) {
                this.$element[0].querySelector('vn-vertical.prices').classList.add('invalid');
            } else {
                this.$element[0].querySelector('vn-vertical.prices').classList.remove('invalid');
            }
        });
    }

    focusFirstInput() {
        let inputs = document.querySelectorAll('input[name="quantity"]');
        inputs[inputs.length - 1].querySelector("input").focus();
        this.calculateTotals();
    }

    getFilledLines() {
        let filledLines = [];
        this.prices.forEach(price => {
            if (price.quantity && price.quantity > 0)
                filledLines.push(price);
        });
        return filledLines;
    }

    submit() {
        this.calculateTotal();
        let filledLines = getFilledLines();

        if (filledLines.length <= 0) return;

        setTimeout(() => {
            let params = {
                orderFk: this.order.id,
                lines: filledLines,
                itemFk: this.item.id,
                landed: this.order.landed,
                addressFk: this.order.address_id,
                agencyFk: this.order.agency_id
            };

            this.$http.post(`/order/api/OrderRows/new`, params).then(res => {
                console.log(res.data);
                this.tags = res.data;
            });
        });
    }
}

Controller.$inject = ['$scope', '$http', '$element'];

ngModule.component('vnOrderPricesPopover', {
    template: require('./index.html'),
    controller: Controller,
    bindings: {
        order: '<'
    }
});