TheCloneArmy/serverless-invoices
1
0
Fork 0
mirror of https://github.com/mokuappio/serverless-invoices.git synced 2025-10-28 00:11:08 -04:00
Code Issues Packages Projects Releases Wiki Activity

Init commit

Browse Source
This commit is contained in:
Marek Fraczyk
2021-02-16 16:24:22 +02:00
parent 056a817632
commit 79e9705b01
106 changed files with 18400 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

115
src/components/invoices/InvoiceForm.vue Normal file
View File

@ -0,0 +1,115 @@
<template>
<div class="card bg-base dp--02 invoice-box" v-if="invoice">
<div class="card-body">
<div class="row mb-5">
<div class="col-4">
<img v-if="team.logo_url"
:src="team.logo_url" style="width:100%; max-width:200px;">
<!-- TODO: logo url input -->
<AppError :errors="errors" field="team.logos"/>
</div>
<InvoiceHeader :invoice="invoice" :errors="errors" @update="updateProp"
class="col-8 text-right mb-2"/>
</div>
<div class="row">
<InvoiceClientDetails :invoice="invoice" :errors="errors" @update="updateProp"
class="col-6"/>
<InvoiceCompanyDetails :invoice="invoice" :errors="errors" @update="updateProp"
class="col-6 text-right"/>
</div>
<div class="row mt-3">
<AppEditable :value="invoice.notes"
class="col-12"
placeholder="Insert note"
@change="updateProp({ notes: $event })"/>
</div>
<div class="row">
<table class="table">
<thead>
<tr>
<th>Item</th>
<th>Quantity</th>
<th>Unit</th>
<th>Price</th>
<th class="text-right">Sum</th>
</tr>
</thead>
<tbody>
<InvoiceRow v-for="(row, index) in invoice.rows" :errors="errors"
:row="row" :index="index" :key="row.id"/>
<tr class="d-print-none">
<td colspan="5">
<button class="btn btn-sm" @click="addRow">
<i class="material-icons md-18 pointer">add</i>
</button>
<AppError :errors="errors" field="rows"/>
</td>
</tr>
</tbody>
<InvoiceTotals :invoice="invoice" :errors="errors" @update="updateProp"/>
</table>
</div>
<hr>
<div class="row">
<InvoiceBankDetails :invoice="invoice" :errors="errors" @update="updateProp"
class="col-8"/>
<InvoiceContactDetails :invoice="invoice" :errors="errors" @update="updateProp"
class="col-4 text-right"/>
</div>
</div>
</div>
</template>
<script>
import { mapGetters, mapState } from 'vuex';
import InvoiceRow from '@/components/invoices/InvoiceRow';
import InvoiceClientDetails from '@/components/invoices/InvoiceClientDetails';
import InvoiceCompanyDetails from '@/components/invoices/InvoiceCompanyDetails';
import InvoiceBankDetails from '@/components/invoices/InvoiceBankDetails';
import InvoiceContactDetails from '@/components/invoices/InvoiceContactDetails';
import InvoiceHeader from '@/components/invoices/InvoiceHeader';
import InvoiceTotals from '@/components/invoices/InvoiceTotals';
import AppEditable from '@/components/form/AppEditable';
import AppError from '@/components/form/AppError';
export default {
components: {
InvoiceTotals,
InvoiceHeader,
InvoiceContactDetails,
InvoiceBankDetails,
InvoiceCompanyDetails,
InvoiceRow,
InvoiceClientDetails,
AppEditable,
AppError,
},
computed: {
...mapState({
errors: state => state.invoices.errors,
}),
...mapGetters({
team: 'teams/team',
invoice: 'invoices/invoice',
}),
},
watch: {
'$route.params.id'() {
this.getInvoice();
},
},
created() {
this.getInvoice();
},
methods: {
getInvoice() {
this.$store.dispatch('invoices/getInvoice', this.$route.params.id);
},
updateProp(props) {
this.$store.dispatch('invoices/updateInvoice', props);
},
addRow() {
this.$store.dispatch('invoices/addRow');
},
},
};
</script>