Create invoice frontend enhancements

This commit is contained in:
Peter Papp
2021-05-04 07:42:40 +02:00
parent 8a784f4520
commit fbde515a40
2 changed files with 83 additions and 33 deletions

View File

@@ -56,7 +56,7 @@
"/chunks/oasis/invoices/client-detail.js": "/chunks/oasis/invoices/client-detail.js?id=d10dd00193bb29222ec7",
"/chunks/oasis/invoices/client-invoices.js": "/chunks/oasis/invoices/client-invoices.js?id=a95ccce067bd07bd73ac",
"/chunks/oasis/invoices/create-client.js": "/chunks/oasis/invoices/create-client.js?id=c092e8eebdde4a9a1aad",
"/chunks/oasis/invoices/create-invoice.js": "/chunks/oasis/invoices/create-invoice.js?id=e264237fc70a6ca79b94",
"/chunks/oasis/invoices/create-invoice.js": "/chunks/oasis/invoices/create-invoice.js?id=ca5e152139b5daf2c8fb",
"/chunks/oasis/invoices/list.js": "/chunks/oasis/invoices/list.js?id=a622e568efb24e955520",
"/chunks/oasis/invoices/profile.js": "/chunks/oasis/invoices/profile.js?id=94f783e4d95215ff00a1",
"/chunks/oasis/invoices~chunks/platform~chunks/shared.js": "/chunks/oasis/invoices~chunks/platform~chunks/shared.js?id=a53a01abf7a98a9c2d15",
@@ -463,5 +463,37 @@
"/chunks/oasis/invoices/create-invoice.1d1ce4a53ffbb6c810e6.hot-update.js": "/chunks/oasis/invoices/create-invoice.1d1ce4a53ffbb6c810e6.hot-update.js",
"/chunks/oasis/invoices/create-invoice.092613c9c8c9a92be2c4.hot-update.js": "/chunks/oasis/invoices/create-invoice.092613c9c8c9a92be2c4.hot-update.js",
"/chunks/oasis/invoices/create-invoice.94802f10381b6e75e16e.hot-update.js": "/chunks/oasis/invoices/create-invoice.94802f10381b6e75e16e.hot-update.js",
"/chunks/oasis/invoices/create-invoice.2b5ed34190ba7483775a.hot-update.js": "/chunks/oasis/invoices/create-invoice.2b5ed34190ba7483775a.hot-update.js"
"/chunks/oasis/invoices/create-invoice.2b5ed34190ba7483775a.hot-update.js": "/chunks/oasis/invoices/create-invoice.2b5ed34190ba7483775a.hot-update.js",
"/chunks/oasis/invoices/create-invoice.ee115ef9376b5890e560.hot-update.js": "/chunks/oasis/invoices/create-invoice.ee115ef9376b5890e560.hot-update.js",
"/chunks/oasis/invoices/create-invoice.5546c80c28d103076f8c.hot-update.js": "/chunks/oasis/invoices/create-invoice.5546c80c28d103076f8c.hot-update.js",
"/chunks/oasis/invoices/create-invoice.07f89cc4fd5ebcbb8bbc.hot-update.js": "/chunks/oasis/invoices/create-invoice.07f89cc4fd5ebcbb8bbc.hot-update.js",
"/chunks/oasis/invoices/create-invoice.704648b43e904fab2f2b.hot-update.js": "/chunks/oasis/invoices/create-invoice.704648b43e904fab2f2b.hot-update.js",
"/chunks/oasis/invoices/create-invoice.e9a8baf8f88b2d50bcb1.hot-update.js": "/chunks/oasis/invoices/create-invoice.e9a8baf8f88b2d50bcb1.hot-update.js",
"/chunks/oasis/invoices/create-invoice.e29ba16ecd4d2122a7aa.hot-update.js": "/chunks/oasis/invoices/create-invoice.e29ba16ecd4d2122a7aa.hot-update.js",
"/chunks/oasis/invoices/create-invoice.583b6821357e0b4e58a8.hot-update.js": "/chunks/oasis/invoices/create-invoice.583b6821357e0b4e58a8.hot-update.js",
"/chunks/oasis/invoices/create-invoice.47a2740067fb3a397a76.hot-update.js": "/chunks/oasis/invoices/create-invoice.47a2740067fb3a397a76.hot-update.js",
"/chunks/oasis/invoices/create-invoice.8029f36efc6565dc9cd0.hot-update.js": "/chunks/oasis/invoices/create-invoice.8029f36efc6565dc9cd0.hot-update.js",
"/chunks/oasis/invoices/create-invoice.6d344064376269b17315.hot-update.js": "/chunks/oasis/invoices/create-invoice.6d344064376269b17315.hot-update.js",
"/chunks/oasis/invoices/create-invoice.3fe477377b3ed0962a03.hot-update.js": "/chunks/oasis/invoices/create-invoice.3fe477377b3ed0962a03.hot-update.js",
"/chunks/oasis/invoices/create-invoice.c29ea6120d63d8c6e02d.hot-update.js": "/chunks/oasis/invoices/create-invoice.c29ea6120d63d8c6e02d.hot-update.js",
"/chunks/oasis/invoices/create-invoice.0b292cccf39754b95831.hot-update.js": "/chunks/oasis/invoices/create-invoice.0b292cccf39754b95831.hot-update.js",
"/chunks/oasis/invoices/create-invoice.00c36d1061f98c8c72d8.hot-update.js": "/chunks/oasis/invoices/create-invoice.00c36d1061f98c8c72d8.hot-update.js",
"/chunks/oasis/invoices/create-invoice.6ee57f631c5a82443af8.hot-update.js": "/chunks/oasis/invoices/create-invoice.6ee57f631c5a82443af8.hot-update.js",
"/chunks/oasis/invoices/create-invoice.d3e3d9ac768cfb80f280.hot-update.js": "/chunks/oasis/invoices/create-invoice.d3e3d9ac768cfb80f280.hot-update.js",
"/chunks/oasis/invoices/create-invoice.ef866cafd329a8932668.hot-update.js": "/chunks/oasis/invoices/create-invoice.ef866cafd329a8932668.hot-update.js",
"/chunks/oasis/invoices/create-invoice.c88258c2fd3e923683ef.hot-update.js": "/chunks/oasis/invoices/create-invoice.c88258c2fd3e923683ef.hot-update.js",
"/chunks/oasis/invoices/create-invoice.1ecfda9a5ed7c4815ea8.hot-update.js": "/chunks/oasis/invoices/create-invoice.1ecfda9a5ed7c4815ea8.hot-update.js",
"/chunks/oasis/invoices/create-invoice.c1f96a88a8e8591928e3.hot-update.js": "/chunks/oasis/invoices/create-invoice.c1f96a88a8e8591928e3.hot-update.js",
"/chunks/oasis/invoices/create-invoice.edef03ea1dbabbe3b2d2.hot-update.js": "/chunks/oasis/invoices/create-invoice.edef03ea1dbabbe3b2d2.hot-update.js",
"/chunks/oasis/invoices/create-invoice.cabe82ae1a4a05dd6864.hot-update.js": "/chunks/oasis/invoices/create-invoice.cabe82ae1a4a05dd6864.hot-update.js",
"/chunks/oasis/invoices/create-invoice.0e24f43a137a86e20791.hot-update.js": "/chunks/oasis/invoices/create-invoice.0e24f43a137a86e20791.hot-update.js",
"/chunks/oasis/invoices/create-invoice.b2d813e6c681a3dee835.hot-update.js": "/chunks/oasis/invoices/create-invoice.b2d813e6c681a3dee835.hot-update.js",
"/chunks/oasis/invoices/create-invoice.032a78fd644989544091.hot-update.js": "/chunks/oasis/invoices/create-invoice.032a78fd644989544091.hot-update.js",
"/chunks/oasis/invoices/create-invoice.62849c462e9b2b417975.hot-update.js": "/chunks/oasis/invoices/create-invoice.62849c462e9b2b417975.hot-update.js",
"/chunks/oasis/invoices/create-invoice.40bb7e8e3ad15dc64b67.hot-update.js": "/chunks/oasis/invoices/create-invoice.40bb7e8e3ad15dc64b67.hot-update.js",
"/chunks/oasis/invoices/create-invoice.deb8fdd0a27513d5e5e6.hot-update.js": "/chunks/oasis/invoices/create-invoice.deb8fdd0a27513d5e5e6.hot-update.js",
"/chunks/oasis/invoices/create-invoice.0c2495b5b62260edd2d1.hot-update.js": "/chunks/oasis/invoices/create-invoice.0c2495b5b62260edd2d1.hot-update.js",
"/chunks/oasis/invoices/create-invoice.5069ac6c590189d03fe3.hot-update.js": "/chunks/oasis/invoices/create-invoice.5069ac6c590189d03fe3.hot-update.js",
"/chunks/oasis/invoices/create-invoice.f56cb64b974b7d9e1e59.hot-update.js": "/chunks/oasis/invoices/create-invoice.f56cb64b974b7d9e1e59.hot-update.js",
"/chunks/oasis/invoices/create-invoice.fb4f8653f82c6dfa74fb.hot-update.js": "/chunks/oasis/invoices/create-invoice.fb4f8653f82c6dfa74fb.hot-update.js"
}

View File

@@ -28,7 +28,7 @@
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="variable_number" rules="required" v-slot="{ errors }">
<input v-model.number="invoice.variable_number" placeholder="" type="number" :class="{'is-error': errors[0]}" class="focus-border-theme" />
<small v-if="latestInvoiceNumber" class="input-help">
Recommendation based on your latest invoice number {{ latestInvoiceNumber }}
Recommendation based on your invoice number
</small>
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
</ValidationProvider>
@@ -55,20 +55,22 @@
</ValidationProvider>
</div>
<div v-if="isNewClient" class="block-wrapper">
<label>ICO:</label>
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="client_ico" rules="required" v-slot="{ errors }">
<input v-model="invoice.client_ico" placeholder="" type="text" :class="{'is-error': errors[0]}" class="focus-border-theme" />
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
</ValidationProvider>
</div>
<div v-if="isNewClient" class="wrapper-inline">
<div class="block-wrapper">
<label>ICO:</label>
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="client_ico" rules="required" v-slot="{ errors }">
<input v-model="invoice.client_ico" placeholder="" type="text" :class="{'is-error': errors[0]}" class="focus-border-theme" />
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
</ValidationProvider>
</div>
<div v-if="isNewClient" class="block-wrapper">
<label>DIC:</label>
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="client_dic" rules="required" v-slot="{ errors }">
<input v-model="invoice.client_dic" placeholder="" type="text" :class="{'is-error': errors[0]}" class="focus-border-theme" />
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
</ValidationProvider>
<div class="block-wrapper">
<label>DIC:</label>
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="client_dic" rules="required" v-slot="{ errors }">
<input v-model="invoice.client_dic" placeholder="" type="text" :class="{'is-error': errors[0]}" class="focus-border-theme" />
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
</ValidationProvider>
</div>
</div>
<div v-if="isNewClient" class="block-wrapper">
@@ -156,7 +158,7 @@
<div class="block-wrapper">
<label>Description:</label>
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="description" rules="required" v-slot="{ errors }">
<input v-model="item.description" placeholder="Type item description..." type="text" :class="{'is-error': errors[0]}" class="focus-border-theme" />
<input v-model="item.description" ref="duplicatorItemTitle" placeholder="Type item description..." type="text" :class="{'is-error': errors[0]}" class="focus-border-theme" />
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
</ValidationProvider>
</div>
@@ -266,17 +268,17 @@
<span>Discount</span>
</div>
<div class="cell">
<span>- {{ formatNumber(invoice.discount_rate) }} {{ invoice.discount_type === 'percent' ? '%' : ''}}</span>
<span>-{{ invoice.discount_type === 'percent' ? formatNumber(invoice.discount_rate) + '%' : formatCurrency(invoice.discount_rate) }}</span>
</div>
</div>
<div :class="{'is-offset': isDiscount && invoice.discount_rate > 0}">
<div v-for="(tax, i) in taxBased" :key="i" class="row small">
<div class="cell">
<span>Základ DPH {{ tax.rate }}%</span>
<span>VAT Base {{ tax.rate }}%</span>
</div>
<div class="cell">
<span>{{ formatNumber(tax.total) }}</span>
<span>{{ formatCurrency(tax.total) }}</span>
</div>
</div>
</div>
@@ -284,10 +286,10 @@
<div :class="{'is-offset': taxSummary.length > 1}">
<div v-for="(tax, i) in taxSummary" :key="i" class="row small">
<div class="cell">
<span>DPH {{ tax.rate }}%</span>
<span>VAT {{ tax.rate }}%</span>
</div>
<div class="cell">
<span>{{ formatNumber(tax.total) }}</span>
<span>{{ formatCurrency(tax.total) }}</span>
</div>
</div>
</div>
@@ -297,7 +299,7 @@
<b>Spolu</b>
</div>
<div class="cell">
<b>{{ formatNumber(total) }}</b>
<b>{{ formatCurrency(total) }}</b>
</div>
</div>
@@ -371,7 +373,7 @@
if (item.price && item.amount && item.tax_rate) {
if (! bag.find(bagItem => bagItem.rate === item.tax_rate)) {
if (!bag.find(bagItem => bagItem.rate === item.tax_rate)) {
bag.push({
rate: item.tax_rate,
@@ -414,7 +416,7 @@
if (item.price && item.amount && item.tax_rate) {
if (! bag.find(bagItem => bagItem.rate === item.tax_rate)) {
if (!bag.find(bagItem => bagItem.rate === item.tax_rate)) {
bag.push({
rate: item.tax_rate,
@@ -487,9 +489,12 @@
watch: {
isDiscount(val) {
if (!val) {
this.invoice.discount_rate = null
this.invoice.discount_type = null
this.invoice.discount_rate = 10
this.invoice.discount_type = 'percent'
}
},
'invoice.invoice_number': function (val) {
this.invoice.variable_number = val
}
},
data() {
@@ -533,8 +538,8 @@
},
invoice: {
invoice_type: 'regular-invoice',
invoice_number: '2120001',
variable_number: '2120001',
invoice_number: undefined,
variable_number: undefined,
delivery_at: '2021-04-09',
items: [
{
@@ -592,6 +597,14 @@
}
},
methods: {
formatCurrency(value) {
return new Intl
.NumberFormat('cs-CS', {
style: 'currency',
currency: 'CZK'
})
.format(value)
},
formatNumber(value) {
return (Math.round(value * 100) / 100).toFixed(2);
},
@@ -644,7 +657,8 @@
Object.keys(error.response.data.errors).forEach(key => {
let obj = {}; obj[key] = error.response.data.errors[key]
let obj = {};
obj[key] = error.response.data.errors[key]
this.$refs.createInvoice.setErrors(obj);
})
@@ -661,13 +675,18 @@
})
},
addRow() {
let lastTaxRate = this.invoice.items.slice(-1).pop()
this.invoice.items.push({
id: Math.floor(Math.random() * 10000000),
description: '',
amount: 1,
tax_rate: 12,
price: 10,
tax_rate: lastTaxRate?.tax_rate || 0,
price: 1,
})
this.$nextTick(() => this.$refs.duplicatorItemTitle.slice(-1).pop().focus())
},
removeRow(item) {
this.invoice.items = this.invoice.items.filter(obj => obj.id !== item.id)
@@ -687,7 +706,6 @@
})
this.invoice.invoice_number = response.data.recommendedInvoiceNumber
this.invoice.variable_number = response.data.recommendedInvoiceNumber
this.latestInvoiceNumber = response.data.latestInvoiceNumber
})
.finally(() => {