Skip to content

Instantly share code, notes, and snippets.

@hovsep

hovsep/Vue-component-example.vue

Created June 18, 2018 08:55
Show Gist options
  • Save hovsep/c034d7a71fbccd0d09def0efaa7060f5 to your computer and use it in GitHub Desktop.
Save hovsep/c034d7a71fbccd0d09def0efaa7060f5 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment