exchange-2.0/resources/assets/vue/components/bookings/forms/PurchaseOrderItemFormComponent.vue

<template>
    <div class="row  align-items-center">
        <div class="col-auto p-r-0" style="min-width: 40px;">
            <div class="font-heading all-caps fs-10">{{index + 1}}</div>
        </div>
        <div class="col p-r-5">
            <div v-if="!isEdit" class="font-heading all-caps fs-10">{{product.stockCode}}</div>
            <input v-if="isEdit" type="text" class="form-control fs-10 b-rad-none" placeholder="Stock Code" v-model="product.stockCode" />
        </div>
        <div class="col-4 p-r-5 p-l-5">
            <div v-if="!isEdit" class="font-heading all-caps fs-10">{{product.description}}</div>
            <textarea v-if="isEdit" class="form-control fs-10 b-rad-none" placeholder="Description" rows="1" @keyup="onlyEnglish($event)" v-model="product.description"></textarea>
        </div>
        <div class="col text-center p-r-5 p-l-5">
            <div v-if="!isEdit" class="font-heading all-caps fs-10">{{product.quantity}}</div>
            <input v-if="isEdit" type="text" class="form-control fs-10 b-rad-none text-center" placeholder="Quantity" v-model.lazy="product.quantity" v-mask="'#########'"/>
        </div>
        <div class="col text-center p-r-5 p-l-5">
            <div v-if="!isEdit" class="font-heading all-caps fs-10">{{product.unit_price}}</div>
            <input v-if="isEdit" type="text" class="form-control fs-10 b-rad-none text-center" placeholder="Unit Price" v-model.lazy="product.unit_price" v-money="productPrice" />
        </div>
        <div class="col-1 text-center p-r-5 p-l-5">
            <div class="font-heading all-caps fs-10">{{currency}}</div>
        </div>
        <div class="col-1 text-right p-r-5 p-l-5">
            <div class="font-heading all-caps fs-10">{{(Math.round((productTotal + Number.EPSILON) * 100) / 100).toFixed(2) }}</div>
        </div>
        <div class="col-auto">
            <button class="btn btn-xs btn-outline-danger b-rad-none" @click="$emit('remove')"><i class="fa fa-times"></i></button>
            <button v-if="!isEdit" class="btn btn-xs btn-outline-warning b-rad-none" @click="isEdit = !isEdit"><i class="fa fa-pencil"></i></button>
            <button v-if="isEdit" class="btn btn-xs btn-outline-success b-rad-none" @click="updateProduct()"><i class="fa fa-check"></i></button>
        </div>
    </div>
</template>
<script>
    import formHandler from '../../../general/mixins/formHandler';
    export default {
        props: {
            currency:{
                type: String,
                required: true
            },
            index:{
                type: Number,
                required: true
            }
        },
        data(){
            return {
                isEdit: false,
                product: {
                    stockCode: '',
                    description: '',
                    unit_price: 0,
                },
                products: []
            }
        },
        created() {
            this.product = this.data;
        },
        computed: {
            productTotal(){
                return this.product.quantity * parseFloat((this.product.unit_price).toString().replace(',', ''));
            },
        },
        methods: {
            updateProduct(){
                this.isEdit = !this.isEdit;

                this.$emit('change', {
                  stockCode: this.product.stockCode,
                  description: this.product.description,
                  quantity: this.product.quantity,
                  unit_price: this.product.unit_price,
                  total: this.productTotal
              }, this.index);
            },
            onlyEnglish(event){
                let value = event.target.value,
                    regex = /^[^~`!@#$%^&*()_+=[\]\{}|;':",.\/<>?a-zA-Z0-9-]+$/;

                event.preventDefault();

                if(regex.test(value)){
                    this.product.description = value.replace(regex, '');
                }
            },
        },
        mixins: [formHandler]
    }
</script>