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