LcShopBundle/ShopBundle/Resources/public/js/backend/script/vueapp.js

// Reference array sent to dynamic staticRenderFns
var staticRenderFns = [];

Vue.component('component-unit', {
    props: ['template', 'keyForm', 'taxRateValue'],
    data() {
        return {
            templateRender: null,
            unit: null,
            price: null,
            priceWithTax: null
        };
    },
    mounted: function() {
        this.unit = $('#value-unit-'+this.keyForm).val() ;
        this.price = parseFloat($('#value-price-'+this.keyForm).val()).toFixed(3) ;
        this.priceUpdate('priceWithTax') ;
    },
    methods: {
        getUnitReference: function () {
            if (this.unit == 'g') {
                return 'kg';
            } else if (this.unit == 'ml') {
                return 'L';
            } else {
                return this.unit;
            }
        },
        changeTaxRate: function() {
            this.$emit('tax-rate-change') ;
            this.changePriceWithTax() ;
        },
        changePrice: function() {
            this.priceUpdate('price') ;
        },
        changePriceWithTax: function() {
            this.priceUpdate('priceWithTax') ;
        },
        priceUpdate: function(priceType) {
            var taxRate = this.getTaxRate() ;
            if(priceType == 'priceWithTax') {
                this.price = parseFloat(this.price.replace(',','.')).toFixed(3) ;
                this.priceWithTax = getPriceWithTax(this.price, taxRate);
            }
            else {
                this.priceWithTax = parseFloat(this.priceWithTax.replace(',','.')).toFixed(2) ;
                this.price = getPrice(this.priceWithTax, taxRate) ;
            }
        },
        getTaxRate: function() {
            var taxRate = this.taxRateValue ;
            if(this.taxRateValue == -1) {
                var taxRate = $('#productfamily_taxRate').find('option:selected').data('tax-rate-value');
                if(typeof taxRate == 'undefined') {
                    taxRate = 0 ;
                }
            }

            return taxRate ;
        }
    },
    render(h) {
        if (!this.templateRender) {
            return h('div', 'loading...');
        } else { // If there is a template, I'll show it
            return this.templateRender();
        }
    },
    watch: {
        taxRateValue: function(newVal, oldVal) {
            this.changePriceWithTax() ;
        },
        // Every time the template prop changes, I recompile it to update the DOM
        template: {
            immediate: true, // makes the watcher fire on first render, too.
            handler() {
                if (this.template) {
                    var res = Vue.compile(this.template);

                    this.templateRender = res.render;

                    // staticRenderFns belong into $options,
                    // appearantly
                    this.$options.staticRenderFns = []

                    // clean the cache of static elements
                    // this is a cache with the results from the staticRenderFns
                    this._staticTrees = []

                    // Fill it with the new staticRenderFns
                    for (var i in res.staticRenderFns) {
                        //staticRenderFns.push(res.staticRenderFns[i]);
                        this.$options.staticRenderFns.push(res.staticRenderFns[i])
                    }
                }
            }
        }
    }
});


appProductFamily = new Vue({
    el: '#lc-product-family-edit',
    delimiters:  ['${', '}'],
    data: {
        indexFormProduct: 0,
        taxRateValue: -1,
        formProductArray: [],
        currentSection: 'general',
        sectionsArray: [
            {
                name: 'general',
                nameDisplay: 'Général'
            },
            {
                name: 'price',
                nameDisplay: 'Prix / stock'
            },
            {
                name: 'products',
                nameDisplay: 'Déclinaisons'
            }
        ]
    },
    methods: {
        changeSection: function (section) {
            this.currentSection = section.name;
        },
        setTaxRateValue: function()  {
            this.taxRateValue = $('#productfamily_taxRate').find('option:selected').data('tax-rate-value') ;
        },
        addFormProduct: function() {
            var collectionHolder = $('ul.products');
            var prototype = collectionHolder.data('prototype');
            var newForm = prototype;
            newForm = newForm.replace(/__name__/g, this.indexFormProduct);
            this.formProductArray.push(newForm) ;
            this.indexFormProduct ++ ;
        },
        deleteFormProduct: function(key) {
            this.formProductArray.splice(key, 1) ;
        }
    },
    mounted() {
    }
});