Sells page with VueJs 2

Readme.Md

ToDo

• Scan product barcodes and return product details
• Input barcodes manually and return product details
• Get subtotal of products based on their amount (real-time)
• Increase amount of product if same barcode scanned or input twice

AddSell.vue

<template>
    <div>
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span>Sells</span>
                <router-link to="/dashboard/sells" class="float-right">Back</router-link>
            </div>
            <el-form ref="form" :model="form" label-width="120px" enctype="multipart/form-data">

                <table class="table table-bordered table-striped table-hover">
                    <thead>
                        <tr>
                            <td><strong>Serial Number</strong></td>
                            <td><strong>Product</strong></td>
                            <td><strong>Amount</strong></td>
                            <td><strong>Price</strong></td>
                            <td width="50"></td>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(row, index) in serial_numbers" :key="index">
                            <td>
                                <el-input ref="barcoded" v-model="row.barcode_id"></el-input>
                            </td>
                            <td>
                                <el-input ref="product" v-model="row.product" readonly></el-input>
                            </td>
                            <td>
                                <el-input-number style="width: 100%;" ref="amount" @change="amoutChanged($event, index)" v-model="row.amount" :min="1"></el-input-number>
                            </td>
                            <td>
                                <el-input ref="price" v-model="row.price" readonly></el-input>
                            </td>
                            <td>
                                <el-link :underline="false" type="danger" v-on:click="removeElement(index);" style="cursor: pointer"><i class="fa-2x el-icon-remove"></i></el-link>
                            </td>
                        </tr>
                    </tbody>
                </table>
                <div>
                    <el-button type="primary" class="button btn-primary" round @click="addRow"><i class="el-icon-circle-plus"></i> Add row</el-button>
                </div>

                <el-row :gutter="10">
                    <el-col :span="8" :offset="16">
                        <table class="table table-bordered table-striped table-hover">
                            <tbody>
                                <tr>
                                    <th width="100"><strong>Total</strong></th>
                                    <td>
                                        {{subtotal}}
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </el-col>
                </el-row>

                <el-form-item class="float-right" style="margin-top:20px;">
                    <el-button type="primary" @click="onSubmit" native-type="submit">Sell</el-button>
                    <el-button type="success">Print</el-button>
                </el-form-item>
            </el-form>
        </el-card>
    </div>
</template>

<script>
    export default {
        props: ['user'],
        name: "SellsAdd",
        data() {
            return {
                loading: false,
                // subtotal: 0,
                serial_numbers: [{
                    barcode_id: '',
                    product: '',
                    amount: 0,
                    price: 0,
                    singlePrice: 0,
                }],
                form: {
                    user_id: '',
                    serials: []
                },
            }
        },
        computed: {
            subtotal(){        
                return parseInt(this.serial_numbers.reduce((a,v)=> a + v.price,0))
                // return this.serial_numbers.reduce((a,v)=> a + parseFloat(v.price),0)
            }
        },
        created() {
            let ui = JSON.parse(localStorage.getItem("user"))
            this.form.user_id = ui.id;
            //scanner
            const eventBus = this.$barcodeScanner.init(this.onBarcodeScanned, { eventBus: true })
            if (eventBus) {
                eventBus.$on('start', () => {
                    this.loading = true;
                    console.log('start')
                })
                eventBus.$on('finish', () => {
                    this.loading = false;
                    console.log('finished')
                })
            }
        },
        destroyed () {
            // Remove listener when component is destroyed
            this.$barcodeScanner.destroy()
        },
        methods: {
            focusInput() {
                this.$refs.barcode_id.focus();
            },
            addRow() {
                // var barcodes = document.createElement('tr');
                this.tableCare();
            },
            removeElement: function(index) {
                this.serial_numbers.splice(index, 1);
            },
            amoutChanged($event, index){
                let amount = $event;
                this.serial_numbers[index].amount = amount;
                this.serial_numbers[index].price = this.serial_numbers[index].singlePrice * amount;
            },
            tableCare() {
                var barcodes = document.createElement('tr');
                this.serial_numbers.push({
                    barcode_id: '',
                    product: '',
                    amount: 0,
                    price: 0,
                    singlePrice: 0,
                });

                const serial = this.serial_numbers[this.serial_numbers.length - 2]
                // get barcode details and push it to table view
                axios.get('/api/admin/sells/'+serial.barcode_id, {
                    headers: {
                        Authorization: localStorage.getItem('access_token')
                    }
                })
                .then(response => {
                    serial.barcoded =  response.data.data.serial_number;
                    serial.product = response.data.product.name;
                    serial.amount = 1;
                    serial.price = parseInt(response.data.product.price);
                    serial.singlePrice = parseInt(response.data.product.price);
                    this.loading = false
                })
                .catch(function (error) {
                    console.log('error', error);
                });

                this.$nextTick(function () {
                    const nbBarcodes = this.$refs.barcoded.length;
                    this.$refs.barcoded[nbBarcodes - 1].focus();
                });
            },
             // Create callback function to receive barcode when the scanner is already done
            onBarcodeScanned (barcode) {
                console.log('barcode', barcode);
                this.tableCare();
            },
            // Reset to the last barcode before hitting enter (whatever anything in the input box)
            resetBarcode () {
                let barcode = this.$barcodeScanner.getPreviousCode()
                console.log('cc', barcode)
                // do something...
            },
            onSubmit(e) {
                e.preventDefault();
                this.form.serials = this.serial_numbers;
                axios.post('/api/admin/sells/add', this.form, {
                        headers: {
                            Authorization: localStorage.getItem('access_token')
                        }
                    })
                    .then(res => {
                        if(res.status == '201') {
                            this.$notify.error({
                                title: 'Oops!',
                                message: res.data.message,
                                offset: 100,
                            });
                        } else {
                            this.$notify({
                                title: 'Hooray!',
                                message: res.data.message,
                                offset: 100,
                                type: 'success'
                            });
                        }

                        this.$router.push({name: 'adminSells'});
                        this.form = {
                            user_id: '',
                            serials: []
                        };
                    })
                    .catch(error => {
                        var errors = error.response.data;
                        let errorsHtml = '<ol>';
                        $.each(errors.errors,function (k,v) {
                            errorsHtml += '<li>'+ v + '</li>';
                        });
                        errorsHtml += '</ol>';

                        this.$notify.error({
                            title: 'Error',
                            dangerouslyUseHTMLString: true,
                            message: errorsHtml
                        });
                    })
            }
        },
        // check if user is loggedin
        beforeRouteEnter (to, from, next) {
            const token = localStorage.getItem('access_token')
            return token ? next() : next('/login')
        }
    }
</script>