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

<template>
    <div class="row mt-3 mt-md-0">
        <div class="col">
            <div class="row">
                <div class="col">
                    <div class="row align-items-end m-b-10">
                        <div class="col">
                            <div class="font-heading all-caps fs-10">Supplier:</div>
                        </div>
                        <div class="col-auto">
                            <div class="font-heading fs-10">{{this.supplier.name}}</div>
                        </div>
                    </div>
                    <div class="row align-items-end m-b-5 text-info">
                        <div class="col">
                            <div class="font-heading all-caps fs-10">Order Total:</div>
                        </div>
                        <div class="col-auto text-right">
                            <div class="font-heading fs-11">{{currency.short_code}} {{(Math.round((this.total + Number.EPSILON) * 100) / 100).toFixed(2).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")}}</div>
                        </div>
                    </div>
                    <div class="row align-items-end m-b-5 text-info">
                        <div class="col">
                            <div class="font-heading all-caps fs-10">Rate:</div>
                        </div>
                        <div class="col-auto text-right">
                            <div class="font-heading fs-11">{{parameters.rate}}</div>
                        </div>
                    </div>
                    <div class="row align-items-end m-b-10 text-success">
                        <div class="col">
                            <div class="font-heading all-caps fs-10">Payment Total:</div>
                        </div>
                        <div class="col-auto text-right">
                            <div class="font-heading bold">MYR {{(Math.round((paymentTotal  + Number.EPSILON) * 100) / 100).toFixed(2).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")}}</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col">
                    <validation-wrapper-component :validator="$v.parameters.rate">
                        <label class="all-caps">Purchase Rate</label>
                        <input type="text" class="form-control" v-model.lazy="parameters.rate" v-money="exchangeRate">
                    </validation-wrapper-component>
                </div>
            </div>
            <div class="row" v-if="paymentTotal > 0">
                <div class="col">
                    <button class="btn btn-xs btn-success b-rad-none p-t-5 p-b-5 all-caps fs-10 btn-block" @click="submitForm()">Create Order</button>
                    <button class="btn btn-xs btn-complete b-rad-none p-t-5 p-b-5 all-caps fs-10 w-100" @click="generateMockWhiteForm()">Create Mock Up White Form</button>
                </div>
            </div>
            <modal-component size="small" id="">
                <div class="row">
                    <div class="col">
                        <div class="row">
                            <div class="col">
                                <div class="row">
                                    <div class="col">
                                        <div class="font-heading fs-10">Download Supplier Order Summary</div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col">
                                        <button class="btn btn-sm btn-success b-rad-none">Download</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col"></div>
                        </div>
                    </div>
                </div>
            </modal-component>
        </div>
    </div>
</template>

<script>
    import FormHandler from '../../../general/mixins/formHandler';
    import { required, minValue} from "vuelidate/lib/validators";
    import ModalComponent from "../../general/elements/ModalComponent";
    export default {
        components: {ModalComponent},
        props: {
            payments: {
                type: Array,
                required: true
            },
            currency: {
                type: Object,
                required: true
            },
            supplier: {
                type: Object,
                required: true
            }
        },
        data(){
            return {
                parameters: {
                    rate: 0
                }
            }
        },
        validations: {
            parameters: {
                rate: {
                    required
                }
            }
        },
        computed: {
            total(){
                return this.payments.reduce(function (total, currentValue) {
                    return total + currentValue.original_amount - currentValue.transaction_refunds.reduce(function (totalRefund, refundTransaction) {
                        if (refundTransaction.status === 2) {
                            return totalRefund + refundTransaction.original_amount;
                        }
                        return totalRefund;
                    }, 0);
                }, 0);

            },
            paymentTotal(){
                return (this.total && parseFloat(this.parameters.rate )) ? this.total * (1/this.parameters.rate) : 0;
            }
        },
        methods: {
            submitForm(){

                this.parameters = {
                    payments: this.payments,
                    rate: this.parameters.rate
                };

                this.submit(route('api.transaction.supplier.create', this.supplier.id), 'post', 'pendingOrdersSection', true, true)
            },
            successHandler(){
                this.updateList();
                this.parameters = {
                    payments: [],
                    rate: 0
                };
            },
            generateMockWhiteForm() {
                let paymentIds = this.payments.map(function(payment) {
                    return payment.id
                });

                window.open(this.route('whiteForm.mockUp', this.supplier.id)+'?rate='+this.parameters.rate+'&payments='+JSON.stringify(paymentIds), '_blank');
            }
        },
        mixins: [FormHandler]
    }
</script>