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

Abstract footer to separate component. Abstract logo to separate component. Be able to edit team in modal. Add custom fields to team. Removed vat and reg no from team (replaced by custom fields). Custom fields are also stored on the invoice. When creating invoice add team custom fields to invoice as well. Be able to set default invoice due date, late fee, vat rate and currency.

Browse Source
This commit is contained in:
HenriT
2021-04-13 12:07:08 +03:00
parent dce73b5603
commit 580fd9aa5a
19 changed files with 523 additions and 137 deletions
Download Patch File Download Diff File Expand all files Collapse all files

111
src/components/team/TeamForm.vue Normal file
View File

@ -0,0 +1,111 @@
<template>
<div>
<div class="row">
<div class="col-12 d-flex justify-content-between">
<h4>Team</h4>
<div v-if="team">
<button class="btn btn-sm btn-primary"
@click="$emit('done')">Done
</button>
</div>
</div>
</div>
<b-tabs v-if="team" nav-class="nav-tabs--simple mb-4" active-tab-class="active" class="row">
<b-tab title="General" class="col-12">
<div class="row">
<TeamLogo :errors="errors" class="col-sm-4"/>
</div>
<div class="row">
<AppInput :value="team.company_name" @change="updateProp({ company_name: $event })"
label="Company Name" field="company_name" :errors="errors" class="col-12"/>
<AppInput :value="team.contact_email" @change="updateProp({ contact_email: $event })"
label="Email" field="contact_email" :errors="errors" class="col-sm-7"/>
<AppInput :value="team.contact_phone" @change="updateProp({ contact_phone: $event })"
label="Phone" field="contact_phone" :errors="errors" class="col-sm-7"/>
<AppInput :value="team.website" @change="updateProp({ website: $event })"
label="Website" field="website" :errors="errors" class="col-sm-7"/>
</div>
<TeamFields class="row" :team="team"/>
</b-tab>
<b-tab title="Invoicing" class="col-12">
<div class="row">
<AppInput :value="team.vat_rate" @change="updateProp({ vat_rate: $event })" type="number"
label="VAT rate" field="vat_rate" :errors="errors" class="col-sm-4"/>
<AppInput :value="team.invoice_late_fee" @change="updateProp({ invoice_late_fee: $event })" type="number"
label="Late fee (%)" field="invoice_late_fee" :errors="errors" class="col-sm-4"/>
<AppInput :value="team.invoice_due_days" @change="updateProp({ invoice_due_days: $event })" type="number"
label="Payment terms, days" field="invoice_due_days" :errors="errors" class="col-sm-4"/>
<AppInput :value="team.currency" @change="updateProp({ currency: $event })"
label="Default currency" field="currency" :errors="errors" class="col-sm-4"/>
</div>
</b-tab>
<b-tab title="Address" class="col-12">
<div class="row">
<AppInput :value="team.company_address" @change="updateProp({ company_address: $event })"
label="Company Address" field="company_address" :errors="errors"
class="col-12"/>
<AppInput :value="team.company_postal_code"
@change="updateProp({ company_postal_code: $event })"
label="Postal code" field="company_postal_code" :errors="errors"
class="col-sm-5"/>
<AppInput :value="team.company_city" @change="updateProp({ company_city: $event })"
label="City" field="company_city" :errors="errors" class="col-sm-7"/>
<AppInput :value="team.company_county" @change="updateProp({ company_county: $event })"
label="County/State" field="company_county" :errors="errors" class="col-sm-6"/>
<AppInput :value="team.company_country" @change="updateProp({ company_country: $event })"
label="Country" field="company_country" :errors="errors" class="col-sm-6"/>
</div>
</b-tab>
</b-tabs>
<div v-if="!team">Loading</div>
</div>
</template>
<script>
import { mapGetters } from 'vuex';
import {
BTab, BTabs,
} from 'bootstrap-vue';
import NotificationService from '@/services/notification.service';
import AppInput from '@/components/form/AppInput';
import Errors from '@/utils/errors';
import TeamFields from '@/components/team/TeamFields';
import TeamLogo from '@/components/team/TeamLogo';
export default {
components: {
TeamLogo,
TeamFields,
AppInput,
BTab,
BTabs,
},
data() {
return {
errors: new Errors(),
loading: false,
};
},
computed: {
...mapGetters({
team: 'teams/team',
}),
},
methods: {
updateProp(props) {
this.errors.clear();
this.$store.dispatch('teams/updateTeam', props)
.then(() => {
NotificationService.success('Updated');
})
.catch(err => this.errors.set(err.errors));
},
},
};
</script>