Souke/producer/web/js/vuejs/order-order.js

var app = new Vue({
    el: '#app-order-order',
    data: {
        step: 'date',
        producer: null,
        date: null,
        dateFormat: null,
        distribution: null,
        pointsSale: [],
        pointSaleActive: null,
        codePointSale: '',
        products: [],
        comment: '',
        creditCheckbox: false,
        credit: 0,
        orderSuccess: false,
        
        calendar: {
            mode: 'single',
            attrs: [],
            themeStyles: {
                wrapper: {
                    background: '#BB8757',
                    color: '#fafafa',
                },
                header: {
                    padding: '10px 10px',
                },
                headerHorizontalDivider: {
                    borderTop: 'solid rgba(255, 255, 255, 0.2) 1px',
                    width: '80%',
                },
                weekdays: {
                    color: 'white', 
                    fontWeight: '600', 
                    padding: '10px 10px',
                    fontSize: '2rem'
                },
                weeks: {
                    padding: '0 15px 15px 15px',
                },
                dayContent: function(object) {
                    var style = {
                        fontSize: '2rem',
                        padding: '20px',
                    };
                    
                    if(object.isHovered || object.isFocus) {
                        style.backgroundColor = '#F39C12' ;
                    }
                    
                    return style ;
                },
            },
            formats: {
                dayPopover: 'DD/MM/YYYY'
            }
        },
    },
    mounted: function() {
        if($('#distribution-date').size()) {
            this.date = new Date($('#distribution-date').html()) ;
            this.dateFormat = ('0' + this.date.getDate()).slice(-2)+ '/'
            + ('0' + (this.date.getMonth() +1)).slice(-2) + '/'
            + this.date.getFullYear() ;
        }
        this.init() ;
    },
    methods: {
        getDate: function() {
            return this.formatDate(this.date) ;
        },
        formatDate: function(date) {
            if(date) {
                return date.getFullYear() + '-'
                    + ('0' + (date.getMonth() +1)).slice(-2) + '-'
                    + ('0' + date.getDate()).slice(-2) ;
            }
            return false ;
        },
        formatPrice: function(price) {
            var isNumberRegExp = new RegExp(/^[-+]?[0-9]+(\.[0-9]+)*$/);
            if(isNumberRegExp.test(price) && price > 0) {
                return Number(price).toFixed(2).replace('.',',')+' €' ;
            }
            return '--' ;
        },
        getPointSale: function(idPointSale) {
            for(var key in this.pointsSale) {
                if(this.pointsSale[key].id == idPointSale) {
                    return this.pointsSale[key] ;
                }
            }
        },
        init: function() {
            axios.get("ajax-infos",{params: {date : this.getDate()}})
                .then(response => {
                    this.producer = response.data.producer ;
                    this.credit = response.data.credit ;
                    
                    this.calendar.attrs = [] ;
                    var distributions = response.data.distributions ;
                    if(distributions.length) {
                        for(var i= 0; i < distributions.length; i++) {
                             this.calendar.attrs.push({
                                highlight: {
                                    backgroundColor: '#00A65A',
                                },
                                dates: distributions[i].date,
                            }) ;
                        }
                    }  
                    
                    if(response.data.distribution) {
                        this.distribution = response.data.distribution ;
                    }
                    
                    if(response.data.points_sale) {
                        this.pointsSale = response.data.points_sale ;
                    }
                    
                    if(response.data.products) {
                        this.products = response.data.products ;
                    }
            });
        },
        changeStep: function(step) {
            this.step = step ;
            if(step == 'point-sale') {
                this.init() ;
            }
        },
        dayClick: function(day) {
            this.date = day.date ;
            this.dateFormat = ('0' + this.date.getDate()).slice(-2)+ '/'
                    + ('0' + (this.date.getMonth() +1)).slice(-2) + '/'
                    + this.date.getFullYear() ;
            this.init() ;
            this.changeStep('point-sale') ;
        },
        pointSaleClick: function(event) {
            this.pointSaleActive = this.getPointSale(event.currentTarget.getAttribute('data-id-point-sale')) ;
            this.changeStep('products') ;
        },
        productQuantityClick: function(product, quantity) {
            if( this.products[product.index].quantity_form + quantity >= 0 && 
                (   !this.products[product.index].quantity_remaining ||
                    this.products[product.index].quantity_form + quantity <= this.products[product.index].quantity_remaining
                )) {
                this.products[product.index].quantity_form += quantity ;
            }
        },
        oneProductOrdered: function() {
            for(var key in this.products) {
                if(this.products[key].quantity_form > 0) {
                    return true ;
                }
            } 
            return false ;
        },
        countProductOrdered: function() {
            var count = 0 ;
            for(var key in this.products) {
                if(this.products[key].quantity_form > 0) {
                    count += this.products[key].quantity_form ;
                }
            }
            return count ;
        },
        priceTotal: function() {
            var price = 0 ;
            for(var key in this.products) {
                if(this.products[key].quantity_form > 0) {
                    price += this.products[key].quantity_form * this.products[key].price ;
                }
            }
            
            return this.formatPrice(price) ;
        },
        confirmClick: function() {
            var productsArray = {} ;
            for(var key in this.products) {
                if( this.products[key].quantity_form != null && 
                    this.products[key].quantity_form > 0) {
                    productsArray[this.products[key].id] = this.products[key].quantity_form ;
                }
            }
            
            axios.post('ajax-create', {
                Order: {
                    id_distribution : this.distribution.id,
                    id_point_sale: this.pointSaleActive.id,
                    comment: this.comment
                },
                code_point_sale: this.codePointSale,
                products: productsArray,
                use_credit: this.creditCheckbox
            }).then(response => {
                if(response.data.status == 'success') {
                    this.orderSuccess = true ;
                }
            });
        }
    }
});