From 1e986cd7a09867d1f3530abb6aae9bb7d7d4007c Mon Sep 17 00:00:00 2001
From: Marek Fraczyk <mareksmakosz@gmail.com>
Date: Tue, 8 Jun 2021 16:54:13 +0300
Subject: [PATCH] Show tax % in invoice totals, Improve layout in the Team
 Modal

---
 src/components/invoices/InvoiceTotals.vue |   3 +-
 src/components/team/TeamFields.vue        |   2 +-
 src/components/team/TeamForm.vue          | 116 ++++++++++++----------
 src/components/team/TeamModal.vue         |   2 +-
 src/components/team/TeamTaxes.vue         |  14 ++-
 5 files changed, 73 insertions(+), 64 deletions(-)

diff --git a/src/components/invoices/InvoiceTotals.vue b/src/components/invoices/InvoiceTotals.vue
index eb02702..dfcf318 100644
--- a/src/components/invoices/InvoiceTotals.vue
+++ b/src/components/invoices/InvoiceTotals.vue
@@ -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>
diff --git a/src/components/team/TeamFields.vue b/src/components/team/TeamFields.vue
index 0659086..c3022dc 100644
--- a/src/components/team/TeamFields.vue
+++ b/src/components/team/TeamFields.vue
@@ -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)"/>
diff --git a/src/components/team/TeamForm.vue b/src/components/team/TeamForm.vue
index 010e380..74520f4 100644
--- a/src/components/team/TeamForm.vue
+++ b/src/components/team/TeamForm.vue
@@ -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>
diff --git a/src/components/team/TeamModal.vue b/src/components/team/TeamModal.vue
index d9f6ff2..ac5249d 100644
--- a/src/components/team/TeamModal.vue
+++ b/src/components/team/TeamModal.vue
@@ -4,7 +4,7 @@
             hide-footer
             hide-header
             content-class="bg-base dp--24">
-        <TeamForm @done="close()"/>
+        <TeamForm @done="close"/>
     </BModal>
 </template>
 
diff --git a/src/components/team/TeamTaxes.vue b/src/components/team/TeamTaxes.vue
index 059de78..02758bb 100644
--- a/src/components/team/TeamTaxes.vue
+++ b/src/components/team/TeamTaxes.vue
@@ -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>