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

Show tax % in invoice totals,

Browse Source 
Improve layout in the Team Modal
This commit is contained in:
Marek Fraczyk
2021-06-08 16:54:13 +03:00
parent 7adaaaad2d
commit 1e986cd7a0
5 changed files with 73 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/components/invoices/InvoiceTotals.vue
View File

@ -6,8 +6,7 @@
</tr>
<tr class="text-right" v-for="tax in invoice.taxes" :key="tax.label">
<td :colspan="colspan">
{{ tax.label }}
<!--({{ tax.rate | currency }}%)-->
{{ tax.label }} ({{ tax.rate }}%)
</td>
<td>{{ tax.total | currency }}</td>
</tr>

2
src/components/team/TeamFields.vue
View File

@ -1,6 +1,6 @@
<template>
<div>
<div v-for="field in team.fields" :key="field.id" class="col-sm-6">
<div v-for="field in team.fields" :key="field.id" class="col-12">
<AppEditable :value="field.label"
:placeholder="$t('label')"
@change="updateFieldProp({ label: $event }, field)"/>

116
src/components/team/TeamForm.vue
View File

@ -10,62 +10,74 @@
</div>
</div>
</div>
<div class="row">
<b-tabs v-if="team" nav-class="nav-tabs--simple mb-4 ml-n3" active-tab-class="active" class="col-12">
<b-tab :title="$t('tabs.general')">
<div class="row mb-2">
<div class="col-12">
<label>Logo</label>
<TeamLogo :errors="errors"/>
</div>
</div>
<div class="row">
<AppInput :value="team.company_name" @change="updateProp({ company_name: $event })"
:label="$t('general.company_name')" field="company_name" :errors="errors"
class="col-12"/>
<AppInput :value="team.contact_email" @change="updateProp({ contact_email: $event })"
:label="$t('general.contact_email')" field="contact_email" :errors="errors"
class="col-12"/>
<AppInput :value="team.contact_phone" @change="updateProp({ contact_phone: $event })"
:label="$t('general.contact_phone')" field="contact_phone" :errors="errors"
class="col-12"/>
<AppInput :value="team.website" @change="updateProp({ website: $event })"
:label="$t('general.website')" field="website" :errors="errors" class="col-12"/>
</div>
<b-tabs v-if="team" nav-class="nav-tabs--simple mb-4" active-tab-class="active" class="row">
<b-tab :title="$t('tabs.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="$t('general.company_name')" field="company_name" :errors="errors" class="col-12"/>
<AppInput :value="team.contact_email" @change="updateProp({ contact_email: $event })"
:label="$t('general.contact_email')" field="contact_email" :errors="errors" class="col-sm-7"/>
<AppInput :value="team.contact_phone" @change="updateProp({ contact_phone: $event })"
:label="$t('general.contact_phone')" field="contact_phone" :errors="errors" class="col-sm-7"/>
<AppInput :value="team.website" @change="updateProp({ website: $event })"
:label="$t('general.website')" field="website" :errors="errors" class="col-sm-7"/>
</div>
<TeamFields class="row" :team="team"/>
</b-tab>
<TeamFields class="row" :team="team"/>
</b-tab>
<b-tab :title="$t('tabs.invoicing')">
<div class="row">
<AppInput :value="team.invoice_late_fee" @change="updateProp({ invoice_late_fee: $event })"
type="number"
:label="$t('invoicing.invoice_late_fee')" field="invoice_late_fee" :errors="errors"
class="col-12"/>
<AppInput :value="team.invoice_due_days" @change="updateProp({ invoice_due_days: $event })"
type="number"
:label="$t('invoicing.invoice_due_days')" field="invoice_due_days" :errors="errors"
class="col-sm-7"/>
<AppInput :value="team.currency" @change="updateProp({ currency: $event })"
:label="$t('invoicing.currency')" field="currency" :errors="errors" class="col-sm-5"/>
</div>
</b-tab>
<b-tab :title="$t('tabs.invoicing')" class="col-12">
<div class="row">
<AppInput :value="team.invoice_late_fee" @change="updateProp({ invoice_late_fee: $event })"
type="number"
:label="$t('invoicing.invoice_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="$t('invoicing.invoice_due_days')" field="invoice_due_days" :errors="errors" class="col-sm-4"/>
<AppInput :value="team.currency" @change="updateProp({ currency: $event })"
:label="$t('invoicing.currency')" field="currency" :errors="errors" class="col-sm-4"/>
</div>
</b-tab>
<b-tab :title="$t('tabs.address')">
<div class="row">
<AppInput :value="team.company_address" @change="updateProp({ company_address: $event })"
:label="$t('address.company_address')" field="company_address" :errors="errors"
class="col-12"/>
<AppInput :value="team.company_postal_code"
@change="updateProp({ company_postal_code: $event })"
:label="$t('address.company_postal_code')" field="company_postal_code"
:errors="errors"
class="col-sm-5"/>
<AppInput :value="team.company_city" @change="updateProp({ company_city: $event })"
:label="$t('address.company_city')" field="company_city" :errors="errors"
class="col-sm-7"/>
<AppInput :value="team.company_county" @change="updateProp({ company_county: $event })"
:label="$t('address.company_county')" field="company_county" :errors="errors"
class="col-sm-6"/>
<AppInput :value="team.company_country" @change="updateProp({ company_country: $event })"
:label="$t('address.company_country')" field="company_country" :errors="errors"
class="col-sm-6"/>
</div>
</b-tab>
<b-tab :title="$t('tabs.address')" class="col-12">
<div class="row">
<AppInput :value="team.company_address" @change="updateProp({ company_address: $event })"
:label="$t('address.company_address')" field="company_address" :errors="errors"
class="col-12"/>
<AppInput :value="team.company_postal_code"
@change="updateProp({ company_postal_code: $event })"
:label="$t('address.company_postal_code')" field="company_postal_code" :errors="errors"
class="col-sm-5"/>
<AppInput :value="team.company_city" @change="updateProp({ company_city: $event })"
:label="$t('address.company_city')" field="company_city" :errors="errors" class="col-sm-7"/>
<AppInput :value="team.company_county" @change="updateProp({ company_county: $event })"
:label="$t('address.company_county')" field="company_county" :errors="errors" class="col-sm-6"/>
<AppInput :value="team.company_country" @change="updateProp({ company_country: $event })"
:label="$t('address.company_country')" field="company_country" :errors="errors" class="col-sm-6"/>
</div>
</b-tab>
<b-tab :title="$t('tabs.taxes')" class="col-12">
<TeamTaxes class="row" @changed="taxesChanged = true"/>
</b-tab>
</b-tabs>
<b-tab :title="$t('tabs.taxes')">
<TeamTaxes @changed="taxesChanged = true"/>
</b-tab>
</b-tabs>
</div>
<div v-if="!team">{{ $t('loading') }}</div>
</div>

2
src/components/team/TeamModal.vue
View File

@ -4,7 +4,7 @@
hide-footer
hide-header
content-class="bg-base dp--24">
<TeamForm @done="close()"/>
<TeamForm @done="close"/>
</BModal>
</template>

14
src/components/team/TeamTaxes.vue
View File

@ -1,19 +1,17 @@
<template>
<div>
<div v-for="tax in taxes" :key="tax.id" class="col-sm-6">
<div v-for="tax in taxes" :key="tax.id">
<AppEditable :value="tax.label"
:placeholder="$t('label')"
@change="updateTaxProp({ label: $event }, tax)"/>
<i class="material-icons md-18 float-right pointer" @click="removeTax(tax)">close</i>
<AppInput :value="tax.value" @change="updateTaxProp({ value: $event }, tax)"
:placeholder="tax.label"/>
</div>
<div class="col-12">
<button class="btn btn-sm btn-secondary " @click="addNewTax">
<i class="material-icons md-18">add</i>
{{ $t('tax') }}
</button>
:placeholder="tax.label" type="number"/>
</div>
<button type="button" class="btn btn-sm btn-secondary" @click="addNewTax">
<i class="material-icons md-18">add</i>
{{ $t('tax') }}
</button>
</div>
</template>
<script>