Opendistrib/backend/web/js/vuejs/distribution-index.js

var app = new Vue({
    el: '#app-distribution-index',
    data: {
        baseUrl: $('meta[name=baseurl]').attr('content'),
        date: null,
        dateFormat: null,
        loading: true,
        distribution: {
            active: false,
        },
        producer: null,
        oneDistributionWeekActive: false,
        products: [],
        countActiveProducts: 0,
        pointsSale: [],
        idActivePointSale: 0,
        idDefaultPointSale: 0,
        countActivePointsSale: 0,
        countOrdersByPointSale: [],
        orders: [],
        ordersUpdate: [],
        countOrders: 0,
        users: [],
        showModalProducts: false,
        showModalPointsSale: false,
        
        showModalFormOrderCreate: false,
        orderCreate: null,
        
        showModalFormOrderUpdate: false,
        idOrderUpdate: 0,
        
        showViewProduct: false,
        idOrderView: 0,
        
        showModalPayment: false,
        idOrderPayment: 0,
        
        showLoading: false,
        calendar: {
            mode: 'single',
            attrs: [],
            themeStyles: {
                wrapper: {
                    background: '#F7F7F7',
                    color: '#333',
                    border: 'solid 1px #e0e0e0'
                },
                header: {
                    padding: '10px 10px',
                },
                headerHorizontalDivider: {
                    borderTop: 'solid rgba(255, 255, 255, 0.2) 1px',
                    width: '80%',
                },
                weekdays: {
                    color: '#e0e0e0', 
                    fontWeight: '600', 
                    padding: '10px 10px',
                    fontSize: '2rem'
                },
                weeks: {
                    padding: '0 15px 15px 15px',
                },
                dayContent: function(object) {
                    var style = {
                        fontSize: '2rem',
                        padding: '16px',
                    };
                    
                    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() ;
        this.loading = false ;
    },
    
    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 ;
        },
        init: function(idActivePointSale) {
            var app = this ;
            this.showLoading = true ; 
            
            axios.get("ajax-infos",{params: {date : this.getDate()}})
                .then(function(response) {
                    app.distribution = response.data.distribution ;
                    app.producer = response.data.producer ;
                    app.products = response.data.products ;
                    app.initCountActiveProducts() ;
                    
                    app.oneDistributionWeekActive = response.data.one_distribution_week_active ;
                    
                    app.countOrders = 0 ;
                    if(response.data.orders) {
                        app.orders = JSON.parse(JSON.stringify(response.data.orders)) ;
                        app.ordersUpdate = JSON.parse(JSON.stringify(response.data.orders)) ;

                        for(i=0 ; i < app.orders.length ; i++) {
                            if(!app.orders[i].date_delete) {
                                app.countOrders ++ ;
                            }
                        }        
                    }
                    else {
                        app.orders = [] ;
                    }
                    
                    if(response.data.order_create) {
                        app.orderCreate = response.data.order_create ;
                        app.idDefaultPointSale = app.orderCreate.id_point_sale ;
                    }
                    
                    if(response.data.points_sale) {
                        app.pointsSale = response.data.points_sale ;
                        app.initPointsSale(idActivePointSale) ;
                    }
                    else {
                        app.pointsSale = [] ;
                    }
                    
                    if(response.data.users) {
                        app.users = response.data.users ;
                    }
                    
                    app.calendar.attrs = [] ;
                    var distributions = response.data.distributions ;
                    if(distributions.length) {
                        for(var i= 0; i < distributions.length; i++) {
                             app.calendar.attrs.push({
                                highlight: {
                                    backgroundColor: '#5cb85c',
                                },
                                contentStyle: {
                                    color: 'white',
                                },
                                dates: distributions[i].date,
                            }) ;
                        }
                    }
                    
                    app.showLoading = false ; 
                }) ;
        },
        initCountActiveProducts: function() {
            this.countActiveProducts = 0 ;
            for(var i= 0; i < this.products.length; i++) {
                 if(this.products[i].productDistribution[0].active == 1) {
                     this.countActiveProducts ++ ;
                 }
            }  
        },
        initPointsSale: function(idActivePointSale) {
            this.countActivePointsSale = 0 ;
            this.setIdActivePointSale(0) ;
            for(var i= 0; i < this.pointsSale.length; i++) {
                 if(this.pointsSale[i].pointSaleDistribution[0].delivery == 1) {
                     this.countActivePointsSale ++ ;
                     this.setIdActivePointSale(this.pointsSale[i].id) ;
                 }
            }
            if(this.countActivePointsSale > 1) {
                this.setIdActivePointSale(0) ;
            }
            if(idActivePointSale) {
                this.setIdActivePointSale(idActivePointSale) ;
            }
                
            this.countOrdersByPointSale = [] ;
            for(var i = 0; i < this.pointsSale.length ; i++) {
                this.countOrdersByPointSale[this.pointsSale[i].id] = 0 ;
            }
            for(var i = 0; i < this.orders.length ; i++) {
                this.countOrdersByPointSale[this.orders[i].id_point_sale] ++ ;
            }
        },
        dayClicked: 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() ;
        },
        productQuantityMaxChange: function(event) {
            axios.get("ajax-process-product-quantity-max",{params: {
                    idDistribution: this.distribution.id,
                    idProduct: event.currentTarget.getAttribute('data-id-product'),
                    quantityMax: event.currentTarget.value
            }})
            .then(function(response) {

            }) ;
        },
        productActiveClick: function(event) {
            var idProduct = event.currentTarget.getAttribute('data-id-product') ;
            var activeProduct = event.currentTarget.getAttribute('data-active-product') ;
            axios.get("ajax-process-active-product",{params: {
                    idDistribution: this.distribution.id,
                    idProduct: idProduct,
                    active: activeProduct
            }})
            .then(function(response) {
                
            }) ;
    
            for(i = 0 ; i < this.products.length ; i++) {
                if(this.products[i].id == idProduct) {
                    this.products[i].productDistribution[0].active = activeProduct ;
                }
            }
            this.initCountActiveProducts() ;
            
        },
        pointSaleActiveClick: function(event) {
            var idPointSale = event.currentTarget.getAttribute('data-id-point-sale') ;
            var deliveryPointSale = event.currentTarget.getAttribute('data-delivery-point-sale') ;
            axios.get("ajax-process-active-point-sale",{params: {
                    idDistribution: this.distribution.id,
                    idPointSale: idPointSale,
                    delivery: deliveryPointSale
            }})
            .then(function(response) {
                
            }) ;
    
            for(i = 0 ; i < this.pointsSale.length ; i++) {
                if(this.pointsSale[i].id == idPointSale) {
                    this.pointsSale[i].pointSaleDistribution[0].delivery = deliveryPointSale ;
                }
            }
            
            this.initPointsSale() ;
        },
        activeDistribution: function(event) {
            var app = this ;
            axios.get("ajax-process-active-distribution",{params: {
                    idDistribution: this.distribution.id,
                    active: event.currentTarget.getAttribute('data-active')
            }})
            .then(function(response) {
                app.init() ;
            }) ;
        },
        activeWeekDistribution: function(event) {
            var app = this ;
            axios.get("ajax-process-active-week-distribution",{params: {
                    date: this.date.getFullYear() + '-'
                        + ('0' + (this.date.getMonth() +1)).slice(-2) + '-'
                        + ('0' + this.date.getDate()).slice(-2),
                    active: event.currentTarget.getAttribute('data-active')
            }})
            .then(function(response) {
                app.init() ;
            }) ;
        },
        pointSaleClick: function(event) {
            this.setIdActivePointSale(event.currentTarget.getAttribute('data-id-point-sale')) ;
        },
        setIdActivePointSale: function(id) {
            this.idActivePointSale = id ;
            if(!id) {
                this.orderCreate.id_point_sale = this.idDefaultPointSale ;
            }
            else {
                this.orderCreate.id_point_sale = id ;
            }
        },
        orderCreatedUpdated: function() {
            this.showModalFormOrderCreate = false ;
            this.showModalFormOrderUpdate = false ;
            this.init(this.idActivePointSale) ;
        },
        deleteOrderClick: function(event) {
            var app = this ;
            var idOrder = event.currentTarget.getAttribute('data-id-order') ;
            axios.get(UrlManager.getBaseUrlAbsolute()+"order/ajax-delete",{params: {
                idOrder: idOrder
            }})
            .then(function(response) {
                app.init(app.idActivePointSale) ;
            }) ;
        },
        updateOrderClick: function(event) {
            var idOrder = event.currentTarget.getAttribute('data-id-order') ;
            this.idOrderUpdate = idOrder ;
            this.showModalFormOrderUpdate = true ;
        },
        orderPaymentModalClick: function(event) {
            var idOrder = event.currentTarget.getAttribute('data-id-order') ;
            this.idOrderPayment = idOrder ;
            this.showModalPayment = true ;
        },
        orderPaymentClick: function(event) {
            var app = this ;
            var idOrder = event.currentTarget.getAttribute('data-id-order') ;
            if(!idOrder) {
                idOrder = this.idOrderPayment ;
            }
            axios.get(UrlManager.getBaseUrlAbsolute()+"order/ajax-payment",{params: {
                idOrder: idOrder,
                type: event.currentTarget.getAttribute('data-type'),
                amount: event.currentTarget.getAttribute('data-amount')
            }})
            .then(function(response) {
                app.init(app.idActivePointSale) ;
            }) ;
        },
        orderViewClick: function(event) {
            var currentIdOrderView = event.currentTarget.getAttribute('data-id-order') ;
            if(this.idOrderView == currentIdOrderView) {
                this.showViewProduct = !this.showViewProduct ;
            }
            else {
                this.showViewProduct = true ;
                this.idOrderView = currentIdOrderView ;
            }
            
        },
        closeModalProducts: function() {
            this.showModalProducts = false ;
            this.init(this.idActivePointSale) ;
        },
        cloneOrder: function(order) {
            var clone = Object.assign({}, order) ;
            
            clone.productOrder = {} ;
            for(var key in order.productOrder) {
                clone.productOrder[key] = order.productOrder[key] ;
            }

            return clone ;
        }
    },
});

Vue.component('modal', {
    template: '#modal-template'
})

Vue.component('order-form',{
    props: ['date', 'pointsSale', 'users', 'products', 'order'],
    data: function() {
        return {
            errors: [],
            idPointSale: 0, 
            idUser: 0,
            username : '',
            comment: '',
        } ;
    },
    template: '#order-form-template',
    methods: {
        checkForm: function() {
            this.errors = [] ;
            
            var countProducts = 0 ;
            for(var key in this.order.productOrder) {
                if(this.order.productOrder[key] > 0) {
                    countProducts ++ ;
                }
            }
            
            if(this.order.id_point_sale
                && (this.order.id_user || (this.order.username && this.order.username.length)) 
                && countProducts > 0) {
                return true ;
            }
            
            if(!this.order.id_point_sale) {
                this.errors.push('Veuillez sélectionner un point de vente') ;
            }
            
            if(!this.order.id_user && !this.order.username) {
                this.errors.push('Veuillez sélectionner ou saisir un utilisateur') ;
            }
            
            if(!countProducts) {
                this.errors.push('Veuillez sélectionner au moins un produit') ;
            }
            
        },
        submitFormCreate: function(event) {
            var app = this ;
            if(this.checkForm()) {
                var processCredit = event.currentTarget.getAttribute('data-process-credit') ;
                axios.get(UrlManager.getBaseUrlAbsolute()+"order/ajax-create",{params: {
                    date: this.date.getFullYear() + '-'
                        + ('0' + (this.date.getMonth() +1)).slice(-2) + '-'
                        + ('0' + this.date.getDate()).slice(-2),
                    idPointSale: this.order.id_point_sale,
                    idUser: this.order.id_user,
                    username: this.order.username, 
                    products: JSON.stringify(this.order.productOrder),
                    comment: this.order.comment,
                    processCredit: processCredit
                }})
                .then(function(response) {
                    app.order.id_point_sale = 0 ;
                    app.order.id_user = 0 ;
                    app.order.username = '' ;
                    app.order.comment = '' ;
                    for(i=0 ; i<app.order.productOrder.length ; i++) {
                        app.order.productOrder[i] = 0 ;
                    }

                    app.$emit('ordercreatedupdated') ;
                }) ;
            }
        },
        submitFormUpdate: function(event) {
            var app = this ;
            if(this.checkForm()) {
                var processCredit = event.currentTarget.getAttribute('data-process-credit') ;
                axios.get(UrlManager.getBaseUrlAbsolute()+"order/ajax-update",{params: {
                    date: this.date.getFullYear() + '-'
                        + ('0' + (this.date.getMonth() +1)).slice(-2) + '-'
                        + ('0' + this.date.getDate()).slice(-2),
                    idOrder: this.order.id,
                    idPointSale: this.order.id_point_sale,
                    idUser: this.order.id_user,
                    username: ''+this.order.username,
                    products: JSON.stringify(this.order.productOrder),
                    comment: this.order.comment,
                    processCredit: processCredit 
                }})
                .then(function(response) {
                    app.$emit('ordercreatedupdated') ;
                }) ;
            }
        },
        productQuantityClick: function(id_product, quantity) {
            if(this.order.productOrder[id_product] + quantity >= 0) {
                var theQuantity = this.order.productOrder[id_product] + quantity ;
                Vue.set(this.order.productOrder, id_product, theQuantity);
            }
        }
    }
}) ;