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.

src/components/invoices/InvoiceForm.vue

@@ -2,15 +2,7 @@
     <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"
-                         v-b-modal.team_logo_url
-                         :src="team.logo_url" style="width:100%; max-width:200px;">
-                    <button class="btn btn-sm" v-b-modal.team_logo_url v-else>
-                        <i class="material-icons material-icons-round md-36">file_upload</i>
-                    </button>
-                    <AppError :errors="errors" field="logo_url"/>
-                </div>
+                <TeamLogo class="col-sm-4" :errors="errors"/>
                 <InvoiceHeader :invoice="invoice" :errors="errors" @update="updateProp"
                                class="col-8 text-right mb-2"/>
             </div>
@@ -60,23 +52,6 @@
                                        class="col-4 text-right"/>
             </div>
         </div>
-        <BModal id="team_logo_url"
-                centered
-                title="Choose logo"
-                hide-footer
-                size="sm"
-                content-class="bg-base dp--24 text-center">
-            <AppFileInput accept="image/*" class="mb-4" @selected="logoSelected"
-                          button-text="Select from files" output-type="base64"/>
-            or
-            <AppInput :value="team.logo_url"
-                      class="mt-4"
-                      @change="updateTeam({ logo_url: $event })"
-                      label="Insert web url"
-                      field="logo_url"
-                      :errors="errors"
-                      type="url"/>
-        </BModal>
     </div>
 </template>
 <script>
@@ -90,16 +65,11 @@ import InvoiceHeader from '@/components/invoices/InvoiceHeader';
 import InvoiceTotals from '@/components/invoices/InvoiceTotals';
 import AppEditable from '@/components/form/AppEditable';
 import AppError from '@/components/form/AppError';
-import { BModal, VBModal } from 'bootstrap-vue';
-import AppInput from '@/components/form/AppInput';
-import AppFileInput from '@/components/form/AppFileInput';
+import TeamLogo from '@/components/team/TeamLogo';
 
 export default {
-  directives: {
-    'b-modal': VBModal,
-  },
   components: {
-    AppFileInput,
+    TeamLogo,
     InvoiceTotals,
     InvoiceHeader,
     InvoiceContactDetails,
@@ -109,15 +79,12 @@ export default {
     InvoiceClientDetails,
     AppEditable,
     AppError,
-    AppInput,
-    BModal,
   },
   computed: {
     ...mapState({
       errors: state => state.invoices.errors,
     }),
     ...mapGetters({
-      team: 'teams/team',
       invoice: 'invoices/invoice',
     }),
   },
@@ -139,16 +106,6 @@ export default {
     addRow() {
       this.$store.dispatch('invoiceRows/addRow', this.invoice.id);
     },
-    updateTeam(props) {
-      this.$store.dispatch('teams/updateTeam', props);
-    },
-    logoSelected(payload) {
-      this.errors.clear();
-      if (payload.size / 1000 > 512) {
-        return this.errors.set({ logo_url: ['Logo has to be under 512kb.'] });
-      }
-      this.updateTeam({ logo_url: payload.content });
-    },
   },
 };
 </script>