Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
151 lines (148 sloc) 5.53 KB
<template>
<div class="app-content">
<div class="box app-block">
<b-field label="Select a vendor" >
<b-select v-model="bill.vendorId" expanded>
<option v-for="vendor in vendors"
v-bind:value="vendor.companyId"
:key="vendor.companyId">{{vendor.name}} {{vendor.taxId}}</option>
</b-select>
</b-field>
</div>
<div class="box app-block">
<div class="columns">
<div class="column is-one-half">
<b-field label="Issue date">
<b-datepicker placeholder="Select a date" v-model="bill.issuedDate"></b-datepicker>
</b-field>
</div>
<div class="column is-one-half">
<b-field label="Due date">
<b-datepicker placeholder="Select a date" v-model="bill.dueDate"></b-datepicker>
</b-field>
</div>
</div>
</div>
<div class="box app-block">
<table class="table is-fullwidth is-striped">
<thead>
<tr>
<td>Position</td>
<td>Description</td>
<td>Rate</td>
<td>Quantity</td>
</tr>
</thead>
<tbody>
<tr v-for="item in bill.items" :key="item.position">
<td>{{item.position}}</td>
<td>
<b-field>
<b-input type="text" v-model="item.description"></b-input>
</b-field>
</td>
<td>
<b-field>
<b-input pattern="[0-9.]*" validation-message="Only number!" v-model="item.rate"></b-input>
</b-field>
</td>
<td>
<b-field>
<b-numberinput v-model="item.quantity"></b-numberinput>
</b-field>
</td>
</tr>
</tbody>
</table>
<div class="app-block">
<b-button type="is-fullwidth" v-on:click="addNewItem">Add item</b-button>
</div>
</div>
<div class="box app-block has-text-right">
<p>Subtotal: {{getSubtotal}}</p>
<p>Taxes: {{bill.tax}}</p>
<p class="is-size-4 has-text-primary">Total: {{getTotal}}</p>
</div>
<div class="app-block">
<b-button type="is-primary is-fullwidth" v-on:click="saveBill">Save bill</b-button>
</div>
</div>
</template>
<script>
import Dinero from 'dinero.js'
import moment from 'moment'
import {AxiosClient} from '@/http/AxiosClient.js'
import {getAuthConfig, getUserId} from '@/auth/AuthManager.js'
export default {
data() {
return {
bill: {
tax: 0.25,
dueDate: new Date(),
issuedDate: new Date(),
items: [
{position: 1, description: '', rate: 0, quantity: 1}
],
vendorId: ''
},
vendors: []
}
},
computed: {
getSubtotal() {
let subtotal = this.calculateSubtotal()
return subtotal.toFormat('$0,0.00')
},
getTotal() {
let total = this.calculateTotal()
return total.toFormat('$0,0.00')
}
},
methods: {
addNewItem(){
let position = this.bill.items.length + 1
this.bill.items.push({position: position, description: '', rate: 0, quantity: 1})
},
saveBill(){
this.bill.userId = getUserId()
this.bill.total = this.calculateTotal().toUnit()
this.bill.subtotal = this.calculateSubtotal().toUnit()
this.bill.issuedDate = moment(this.bill.issuedDate).unix()
this.bill.dueDate = moment(this.bill.dueDate).unix()
// let token = getToken()
// let config = {headers: token}
AxiosClient.post(`bills/`, this.bill, getAuthConfig()).then(res => {
this.$buefy.toast.open('Bill created sucessfully')
console.log(res.data)
}).catch(err => {
this.$buefy.toast.open({message: 'Unable to save bill!', type: 'is-danger'})
console.log(err)
})
},
calculateSubtotal(){
let subtotal = Dinero({amount: 0, currency: 'EUR'})
this.bill.items.forEach(item=>{
let rate = item.rate * 100
let value = Dinero({amount: rate, currency: 'EUR'}).multiply(item.quantity)
subtotal = subtotal.add(value)
})
return subtotal
},
calculateTotal(){
let subtotal = this.calculateSubtotal()
let tax = subtotal.multiply(this.bill.tax);
let total = tax.add(subtotal)
return total
},
getVendors() {
let url = 'companies/vendors/' + getUserId()
// let token = getToken()
// let config = {headers: token}
AxiosClient.get(`${url}`, getAuthConfig()).then(res => {this.vendors = res.data})
}
},
created() {
this.getVendors()
}
}
</script>
You can’t perform that action at this time.