Vue-component-example.vue

<template>
    <div>
        <h2 class="card-title text-center">
            {{ cargo.bids.length }} bids
        </h2>
        <div class="row">
            <div class="col-md-12">
                <div class="ribbon-wrapper card bg-light" v-for="b in cargo.bids" :id="'bid_' + b.id">
                    <div class="ribbon ribbon-bookmark"  v-bind:class="{'ribbon-info': b.state == 'auction', 'ribbon-primary': b.state == 'won', 'ribbon-warning': b.state == 'rejected' }">
                        <span class="font-bold">
                            $ {{ b.amount }}
                        </span>
                        <sup>
                            {{ b.state }}
                        </sup>
                    </div>
                    <div class="ribbon-content">
                        <div class="row">
                            <div class="col-md-3">
                                <blockquote class="bg-white">
                                    <p>{{ b.description }}</p>
                                    <small v-if="!_.isEmpty(b.owner)">
                                        by {{ b.owner.name }}<br>
                                        at {{ b.created_at }}
                                    </small>
                                </blockquote>
                            </div>
                            <div class="col-md-3">
                                <template v-if="b.services.length > 0">
                                    Services included:<br>
                                    <template v-for="s in b.services">
                                        <input type="checkbox" :id="'ser-' + s" class="filled-in" :value="s" checked readonly/>
                                        <label :for="'serv-' + s">
                                            {{ s }}
                                        </label>
                                    </template>
                                </template>
                            </div>
                            <div class="col-md-3">
                                <template v-if="!_.isEmpty(b.truck)">
                                    Suggested truck:<br>
                                    {{ b.truck.manufacturer }} {{ b.truck.model }} {{ b.truck.year }}
                                </template>
                            </div>
                            <div class="col-md-3">
                                <template v-if="!_.isEmpty(user) && (b.state == 'auction')">
                                    <template v-if="(user.id == cargo.owner_id) && (cargo.state == 'active')">
                                        <span class="pull-right">
                                            <button class="btn btn-danger waves-effect waves-light" @click.prevent="rejectBid(b)" v-bind:disabled="selectedBid == b" dusk="btn-reject-bid">
                                                Reject
                                            </button>
                                            <button class="btn btn-info waves-effect waves-light" @click.prevent="acceptBid(b)" v-bind:disabled="selectedBid == b" dusk="btn-accept-bid">
                                                Accept
                                            </button>
                                        </span>
                                    </template>
                                    <template v-if="user.id == b.owner_id">
                                        <button class="pull-right btn btn-danger waves-effect waves-light" @click.prevent="deleteBid(b)" dusk="btn-delete-bid">
                                            Delete
                                        </button>
                                    </template>
                                </template>
                            </div>
                        </div>
                        <bid-messages :preloaded-bid="b" :user="user" v-if="!_.isEmpty(user) && ((b.owner_id == user.id) || (cargo.owner_id == user.id))"></bid-messages>
                    </div>
                </div>
            </div>
        </div>
        <div class="row" v-if="showForm">
            <div class="col-md-12">
                <form class="form-horizontal form-material">
                    <div class="form-group" v-bind:class="{ 'has-danger': validationErrors.amount }">
                        <label>
                            Amount
                        </label>
                        <input type="text" v-model="newBid.amount" class="form-control form" dusk="new-bid-amount"/>
                        <div class="text-danger" v-if="validationErrors.amount">
                            {{ _.first(validationErrors.amount) }}
                        </div>
                    </div>

                    <div class="form-group" v-bind:class="{ 'has-danger': validationErrors.description }">
                        <label>
                            Details (optional)
                        </label>
                        <textarea rows="3" class="form-control" v-model="newBid.description" dusk="description"></textarea>
                        <div class="text-danger" v-if="validationErrors.description">
                            {{ _.first(validationErrors.description) }}
                        </div>
                    </div>

                    <div class="form-group" v-bind:class="{ 'has-danger': validationErrors.truck_id }">
                        <label>
                            Select truck (optional)
                        </label>
                        <select class="form-control" v-model="newBid.truck_id">
                            <option :value="t.id" v-for="t in user.trucks">
                                {{ t.manufacturer }} {{ t.model }}
                            </option>
                        </select>
                        <div class="text-danger" v-if="validationErrors.truck_id">
                            {{ _.first(validationErrors.truck_id) }}
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="col-md-12">
                            <div class="input-group demo-checkbox">
                                <template v-for="s in user.services">
                                    <input type="checkbox" :id="'service-' + s" class="filled-in" name="services[]" :value="s" v-model="newBid.services"/>
                                    <label :for="'service-' + s">
                                        {{ s }}
                                    </label>
                                </template>
                            </div>
                        </div>
                    </div>

                    <div class="alert alert-danger" v-if="validationErrors.general">
                        <i class="fa fa-exclamation-triangle"></i>
                        {{ validationErrors.general }}
                    </div>

                    <div class="form-group text-center">
                        <button class="btn btn-info waves-effect waves-light" @click.prevent="setBid" dusk="btn-set-bid">
                            <i class="mdi mdi-flash"></i>
                            Bid now
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        props: {
            preloadedCargo: {
                type: Object,
                required: true
            },

            //Logged in user
            user: {
                type: Object,
                required: false,
                default: function () {
                    return {};
                }
            }
        },

        computed: {
            showForm: function() {
                return (!_.isEmpty(this.user) && this.user.is_carrier && this.cargo.applies_bids && (this.cargo.owner_id != this.user.id));
            }
        },

        created: function() {
            var vm = this;
            bus.$on([
                'new-bid',
                'bid-rejected',
                'bid-won',
                'bid-deleted'
            ], function() {
                vm.loadCargo();
            });
        },

        data: function () {
            return {
                cargo: _.defaultTo(this.preloadedCargo, {}),
                newBid: {
                    amount: 0,
                    description: '',
                    services: [],
                    truck_id: null
                },
                selectedBid: {},//Rejected or accepted right now bid
                validationErrors: {
                    general: ''
                }
            };
        },

        methods: {
            setBid: function () {
                var vm = this;
                var data = vm.newBid;

                data.cargo_id = vm.cargo.id;

                axios.post('/bid', data)
                    .then(function (response) {
                        bus.$emit('new-bid');
                        Vue.set(vm, 'validationErrors', {});
                        if (response && response.data.msg) {
                            bus.$emit('app-message', response.data.msg);
                        }
                    }).catch(function (error) {
                    if (error.response && (error.response.status == 500) && error.response.data.error) {
                        Vue.set(vm.validationErrors, 'general', error.response.data.error);
                    }

                    if (error.response && (error.response.status == 422)) {
                        Vue.set(vm, 'validationErrors', error.response.data.errors);
                    }
                });
            },

            loadCargo: function() {
                var vm = this;
                axios.get('/cargo/' + vm.cargo.id)
                    .then(function(response) {
                        if (!_.isEmpty(response.data)) {
                            Vue.set(vm, 'cargo', response.data);
                        }
                    })
                    .catch(function(error) {
                        bus.$emit('app-error', 'Failed to load cargo');
                    });
            },

            rejectBid: function(bid) {
                var vm = this;

                vm.selectedBid = bid;
                axios.put('/bid/' + bid.id, {state: "rejected"})
                    .then(function (response) {
                        bus.$emit('bid-rejected');
                        Vue.set(vm, 'validationErrors', {});
                        if (response && response.data.msg) {
                            bus.$emit('app-message', response.data.msg);
                        }
                    }).catch(function (error) {
                    if (error.response && (error.response.status == 500) && error.response.data.error) {
                        bus.$emit('app-error', error.response.data.error);
                    }

                    if (error.response && (error.response.status == 422)) {
                        Vue.set(vm, 'validationErrors', error.response.data.errors);
                    }
                });
            },

            acceptBid: function(bid) {
                var vm = this;

                vm.selectedBid = bid;
                axios.put('/bid/' + bid.id, {state: "won"})
                    .then(function (response) {
                        bus.$emit('bid-won');
                        Vue.set(vm, 'validationErrors', {});
                        if (response && response.data.msg) {
                            bus.$emit('app-message', response.data.msg);
                        }
                    }).catch(function (error) {
                    if (error.response && (error.response.status == 500) && error.response.data.error) {
                        bus.$emit('app-error', error.response.data.error);
                    }

                    if (error.response && (error.response.status == 422)) {
                        Vue.set(vm, 'validationErrors', error.response.data.errors);
                    }
                });
            },

            deleteBid: function(bid) {
                var vm = this;

                axios.delete('/bid/' + bid.id)
                    .then(function (response) {
                        bus.$emit('bid-deleted');
                        Vue.set(vm, 'validationErrors', {});
                        if (response && response.data.msg) {
                            bus.$emit('app-message', response.data.msg);
                        }
                    }).catch(function (error) {
                    if (error.response && (error.response.status == 500) && error.response.data.error) {
                        bus.$emit('app-error', error.response.data.error);
                    }

                    if (error.response && (error.response.status == 422)) {
                        Vue.set(vm, 'validationErrors', error.response.data.errors);
                    }
                });
            }
        }
    }
</script>