Show tax % in invoice totals,

Improve layout in the Team Modal

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.label }} ({{ tax.rate }}%)
-            <!--({{ tax.rate | currency }}%)-->
         </td>
         <td>{{ tax.total | currency }}</td>
     </tr>

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)"/>

src/components/team/TeamForm.vue

@@ -10,62 +10,74 @@
                 </div>
             </div>
         </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"/>
+            <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"/>
+                                  :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"/>
+                                  :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-sm-7"/>
+                                  :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-sm-7"/>
+                                  :label="$t('general.website')" field="website" :errors="errors" class="col-12"/>
                     </div>
 
                     <TeamFields class="row" :team="team"/>
                 </b-tab>
 
-            <b-tab :title="$t('tabs.invoicing')" class="col-12">
+                <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-sm-4"/>
+                                  :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-4"/>
+                                  :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-4"/>
+                                  :label="$t('invoicing.currency')" field="currency" :errors="errors" class="col-sm-5"/>
                     </div>
                 </b-tab>
 
-            <b-tab :title="$t('tabs.address')" class="col-12">
+                <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"
+                                  :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"/>
+                                  :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"/>
+                                  :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"/>
+                                  :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">
+                <b-tab :title="$t('tabs.taxes')">
-                <TeamTaxes class="row" @changed="taxesChanged = true"/>
+                    <TeamTaxes @changed="taxesChanged = true"/>
                 </b-tab>
-
             </b-tabs>
+        </div>
 
         <div v-if="!team">{{ $t('loading') }}</div>
     </div>

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>
 

src/components/team/TeamTaxes.vue

@@ -1,20 +1,18 @@
 <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"/>
+                      :placeholder="tax.label" type="number"/>
         </div>
-        <div class="col-12">
+        <button type="button" class="btn btn-sm btn-secondary" @click="addNewTax">
-            <button class="btn btn-sm btn-secondary " @click="addNewTax">
             <i class="material-icons md-18">add</i>
             {{ $t('tax') }}
         </button>
     </div>
-    </div>
 </template>
 <script>
 import NotificationService from '@/services/notification.service';