Separated client form into tabs. Fixed deleting client. Implemented custom fields for client and invoice client fields. Removed "hardcoded" client_reg_no and client_vat_no fields from client and invoice model - can be replaced with custom fields. Abstracted invoice-rows management to separate store namespace. Invoice client fields are prefilled from selected client.

src/assets/scss/_tabs.scss

@@ -0,0 +1,75 @@
+.nav-tabs {
+  overflow-x: auto;
+  overflow-y: hidden;
+  white-space: nowrap;
+
+  // scrollbar styles
+  scrollbar-color: var(--text-caption);
+  scrollbar-width: 6px;
+  scrollbar-gutter: always;
+
+  &::-webkit-scrollbar-track {
+    background: var(--shade);
+    border-radius: 6px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: var(--text-caption);
+    border-radius: 6px;
+
+    &:hover {
+      background: var(--text-secondary);
+    }
+  }
+
+  &::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+  }
+
+  > li {
+    display: inline-block;
+    float: none;
+    white-space: normal;
+  }
+
+  &--simple {
+    &.nav-tabs {
+      > li {
+        > a {
+          border-bottom: 1px solid transparent;
+
+          &.active {
+            background-color: transparent;
+            border-left-color: transparent;
+            border-top-color: transparent;
+            border-right-color: transparent;
+            border-bottom-color: var(--text-primary);
+            color: $nav-tabs-link-active-color;
+          }
+
+          &:hover, &:focus, &:active {
+            background-color: transparent;
+            border-left-color: transparent;
+            border-top-color: transparent;
+            border-right-color: transparent;
+          }
+        }
+      }
+
+      > li {
+        > a {
+          border-bottom-width: 2px;
+          min-width: 90px;
+          text-align: center;
+          font-weight: 500;
+          color: $nav-tabs-link-active-color;
+        }
+      }
+    }
+
+    .tab-content {
+      padding-top: 16px;
+    }
+  }
+}

src/assets/scss/app.scss

@@ -13,6 +13,7 @@
 @import "snackbars";
 @import "surfaces";
 @import "tables";
+@import "tabs";
 @import "transitions";
 @import "type";
 @import "utilities";

src/components/clients/ClientFields.vue

@@ -0,0 +1,70 @@
+<template>
+    <div>
+        <div v-for="field in client.fields" :key="field.id" class="col-sm-6">
+            <AppEditable :value="field.label"
+                         placeholder="Label"
+                         @change="updateFieldProp({ label: $event }, field)"/>
+            <i class="material-icons md-18 float-right pointer" @click="removeField(field)">close</i>
+            <AppInput :value="field.value" @change="updateFieldProp({ value: $event }, field)"
+                      :placeholder="field.label"/>
+        </div>
+        <div class="col-12">
+            <button class="btn btn-sm btn-secondary" @click="addNewField">
+                <i class="material-icons md-18">add</i>
+                Field
+            </button>
+        </div>
+    </div>
+</template>
+<script>
+import NotificationService from '@/services/notification.service';
+import AppInput from '@/components/form/AppInput';
+import AppEditable from '@/components/form/AppEditable';
+
+export default {
+  props: ['client'],
+  components: {
+    AppEditable,
+    AppInput,
+  },
+  computed: {
+    isNew() {
+      return this.client && this.client.$isNew;
+    },
+  },
+  methods: {
+    addNewField() {
+      this.$store.dispatch('clientFields/addNewField', this.client.id);
+    },
+    async removeField(field) {
+      const confirmed = await this.$bvModal.msgBoxConfirm(`Delete field ${field.label}?`, {
+        okTitle: 'Delete',
+        okVariant: 'danger',
+        cancelTitle: 'Dismiss',
+        cancelVariant: 'btn-link',
+        contentClass: 'bg-base dp--24',
+      });
+      if (confirmed) {
+        await this.$store.dispatch('clientFields/deleteClientField', field.id);
+        try {
+          NotificationService.success('Deleted');
+        } catch (err) {
+          NotificationService.error(err.message);
+        }
+      }
+    },
+    updateFieldProp(props, field) {
+      if (this.isNew) {
+        return this.$store.dispatch('clientFields/clientFieldProps', {
+          props,
+          fieldId: field.id,
+        });
+      }
+      this.$store.dispatch('clientFields/updateClientField', {
+        props,
+        fieldId: field.id,
+      });
+    },
+  },
+};
+</script>

src/components/clients/ClientForm.vue

@@ -1,94 +1,103 @@
 <template>
     <div>
         <div class="row">
-            <div class="col-12">
+            <div class="col-12 d-flex justify-content-between">
                 <h4>Client</h4>
-            </div>
+                <div v-if="client">
-        </div>
+                    <div v-if="!isNew">
-
+                        <b-dropdown variant="link" size="sm" no-caret right>
-        <div v-if="client" class="row">
+                            <template slot="button-content">
-            <div class="col-12">
+                                <i class="material-icons">more_vert</i>
-                <h5>General</h5>
+                            </template>
-            </div>
+                            <b-dropdown-item-button @click="deleteClient">Delete</b-dropdown-item-button>
-            <AppInput :value="client.company_name" @change="updateProp({ company_name: $event })"
+                        </b-dropdown>
-                      label="Company Name" field="company_name" :errors="errors" class="col-12"/>
+                        <button class="btn btn-sm btn-primary"
-            <AppInput :value="client.invoice_email" @change="updateProp({ invoice_email: $event })"
+                                @click="$emit('done')">Done
-                      label="Email" field="invoice_email" :errors="errors" class="col-sm-7"/>
+                        </button>
-            <AppInput :value="client.company_reg_no" @change="updateProp({ company_reg_no: $event })"
+                    </div>
-                      label="Company reg no" field="company_reg_no" :errors="errors" class="col-sm-5"/>
+                    <button v-else class="btn btn-primary ml-2"
-
+                            :disabled="loading"
-            <div class="col-12">
+                            @click="createClient">Create
-                <h5>Invoice Settings</h5>
-                <h6>Address</h6>
-            </div>
-            <AppInput :value="client.company_address" @change="updateProp({ company_address: $event })"
-                      label="Company Address" field="company_address" :errors="errors"
-                      class="col-12"/>
-            <AppInput :value="client.company_postal_code"
-                      @change="updateProp({ company_postal_code: $event })"
-                      label="Postal code" field="company_postal_code" :errors="errors"
-                      class="col-sm-5"/>
-            <AppInput :value="client.company_city" @change="updateProp({ company_city: $event })"
-                      label="City" field="company_city" :errors="errors" class="col-sm-7"/>
-            <AppInput :value="client.company_county" @change="updateProp({ company_county: $event })"
-                      label="County/State" field="company_county" :errors="errors" class="col-sm-6"/>
-            <AppInput :value="client.company_country" @change="updateProp({ company_country: $event })"
-                      label="Country" field="company_country" :errors="errors" class="col-sm-6"/>
-            <AppInput :value="client.currency" @change="updateProp({ currency: $event })"
-                      label="Currency" field="currency" :errors="errors" class="col-sm-4"/>
-            <AppInput :value="client.rate" @change="updateProp({ rate: $event })"
-                      label="Hourly rate" field="rate" :errors="errors" class="col-sm-4"/>
-
-            <div class="col-12">
-                <h6>VAT</h6>
-            </div>
-            <AppInput :value="client.company_vat_no" @change="updateProp({ company_vat_no: $event })"
-                      label="Company VAT no" field="company_vat_no" :errors="errors" class="col-sm-8"/>
-            <AppCheckbox :value="client.has_vat" @input="updateProp({ has_vat: $event })"
-                         label="Apply VAT" field="has_vat" :errors="errors" class="col-sm-4"/>
-
-            <div class="col-12">
-                <h6>Banking details</h6>
-            </div>
-            <AppSelect :value="client.bank_account"
-                       track-by="id"
-                       label="Bank account"
-                       label-field="bank_name"
-                       :options="bankAccounts || []"
-                       @input="bankAccountChanged"
-                       class="col-12"/>
-        </div>
-        <div v-if="!client">Loading</div>
-
-        <div class="row mt-3 text-right" v-if="client">
-            <div class="col-12">
-                <div v-if="!isNew">
-                    <button class="btn btn-outline-danger mr-2" @click="deleteClient(client.id)">Delete</button>
-                    <button class="btn btn-primary"
-                            @click="$emit('done')">Done
                     </button>
                 </div>
-                <button v-else class="btn btn-primary ml-2"
-                        :disabled="loading"
-                        @click="createClient">Create
-                </button>
             </div>
         </div>
+
+        <b-tabs v-if="client" nav-class="nav-tabs--simple mb-4" active-tab-class="active" class="row">
+            <b-tab title="General" class="col-12">
+                <div class="row">
+                    <AppInput :value="client.company_name" @change="updateProp({ company_name: $event })"
+                              label="Company Name" field="company_name" :errors="errors" class="col-12"/>
+                    <AppInput :value="client.invoice_email" @change="updateProp({ invoice_email: $event })"
+                              label="Email" field="invoice_email" :errors="errors" class="col-sm-7"/>
+                </div>
+
+                <ClientFields class="row" :client="client"/>
+            </b-tab>
+
+            <b-tab title="Invoicing" class="col-12">
+                <div class="row">
+                    <AppInput :value="client.currency" @change="updateProp({ currency: $event })"
+                              label="Currency" field="currency" :errors="errors" class="col-sm-4"/>
+                    <AppInput :value="client.rate" @change="updateProp({ rate: $event })"
+                              label="Hourly rate" field="rate" :errors="errors" class="col-sm-4"/>
+                    <AppCheckbox :value="client.has_vat" @input="updateProp({ has_vat: $event })"
+                                 label="Apply VAT" field="has_vat" :errors="errors" class="col-sm-4"/>
+                    <AppSelect :value="client.bank_account"
+                               track-by="id"
+                               label="Bank account"
+                               label-field="bank_name"
+                               :options="bankAccounts || []"
+                               @input="bankAccountChanged"
+                               class="col-12"/>
+                </div>
+            </b-tab>
+
+            <b-tab title="Address" class="col-12">
+                <div class="row">
+                    <AppInput :value="client.company_address" @change="updateProp({ company_address: $event })"
+                              label="Company Address" field="company_address" :errors="errors"
+                              class="col-12"/>
+                    <AppInput :value="client.company_postal_code"
+                              @change="updateProp({ company_postal_code: $event })"
+                              label="Postal code" field="company_postal_code" :errors="errors"
+                              class="col-sm-5"/>
+                    <AppInput :value="client.company_city" @change="updateProp({ company_city: $event })"
+                              label="City" field="company_city" :errors="errors" class="col-sm-7"/>
+                    <AppInput :value="client.company_county" @change="updateProp({ company_county: $event })"
+                              label="County/State" field="company_county" :errors="errors" class="col-sm-6"/>
+                    <AppInput :value="client.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="!client">Loading</div>
     </div>
 </template>
 <script>
 import { mapGetters } from 'vuex';
+import {
+  BTab, BTabs, BDropdownItemButton, BDropdown,
+} from 'bootstrap-vue';
 import NotificationService from '@/services/notification.service';
 import AppInput from '@/components/form/AppInput';
 import AppSelect from '@/components/form/AppSelect';
 import Errors from '@/utils/errors';
 import AppCheckbox from '@/components/form/AppCheckbox';
+import ClientFields from '@/components/clients/ClientFields';
 
 export default {
   components: {
+    ClientFields,
     AppCheckbox,
     AppInput,
     AppSelect,
+    BTab,
+    BTabs,
+    BDropdown,
+    BDropdownItemButton,
   },
   data() {
     return {
@@ -148,7 +157,7 @@ export default {
           this.loading = false;
         });
     },
-    async deleteClient(clientId) {
+    async deleteClient() {
       const confirmed = await this.$bvModal.msgBoxConfirm(`Delete client ${this.client.company_name}?`, {
         okTitle: 'Delete',
         okVariant: 'danger',
@@ -158,7 +167,7 @@ export default {
       });
       if (confirmed) {
         this.$emit('done');
-        await this.$store.dispatch('clients/deleteClient', clientId);
+        await this.$store.dispatch('clients/deleteClient', this.client.id);
         try {
           NotificationService.success('Deleted');
         } catch (err) {

src/components/invoices/InvoiceClientDetails.vue

@@ -31,20 +31,8 @@
         <AppError :errors="errors" field="client_county"/>
         <AppError :errors="errors" field="client_country"/>
 
-        <span :class="{'d-print-none': !invoice.client_reg_no }">Reg no: </span>
+        <InvoiceClientFields :invoice="invoice"/>
-        <AppEditable :value="invoice.client_reg_no"
+
-                     :errors="errors"
-                     field="client_reg_no"
-                     placeholder="Enter reg no"
-                     class="break-line"
-                     @change="updateProp({ client_reg_no: $event })"/>
-        <span :class="{'d-print-none': !invoice.client_vat_no }">VAT no: </span>
-        <AppEditable :value="invoice.client_vat_no"
-                     :errors="errors"
-                     field="client_vat_no"
-                     placeholder="Enter vat no"
-                     class="break-line"
-                     @change="updateProp({ client_vat_no: $event })"/>
         <AppEditable :value="invoice.client_email"
                      :errors="errors"
                      field="client_email"
@@ -58,6 +46,7 @@ import { mapGetters } from 'vuex';
 import AppError from '@/components/form/AppError';
 import AppEditable from '@/components/form/AppEditable';
 import ClientSelector from '@/components/clients/ClientSelector';
+import InvoiceClientFields from '@/components/invoices/InvoiceClientFields';
 
 export default {
   props: ['invoice', 'errors'],
@@ -65,6 +54,7 @@ export default {
     AppError,
     ClientSelector,
     AppEditable,
+    InvoiceClientFields,
   },
   computed: {
     ...mapGetters({
@@ -82,6 +72,8 @@ export default {
       this.prefillClient(client);
     },
     prefillClient(client) {
+      this.prefillClientFields(client);
+
       return this.updateProp({
         client_id: client.id,
         client_name: client.company_name,
@@ -90,8 +82,6 @@ export default {
         client_city: client.company_city,
         client_county: client.company_county,
         client_country: client.company_country,
-        client_reg_no: client.company_reg_no,
-        client_vat_no: client.company_vat_no,
         client_email: client.invoice_email,
         currency: client.currency || 'USD',
         vat_rate: client.has_vat ? this.team.vat_rate : 0,
@@ -99,6 +89,20 @@ export default {
         bank_account_no: client.bank_account ? client.bank_account.account_no : null,
       });
     },
+    prefillClientFields(client) {
+      this.$store.dispatch('invoiceClientFields/removeInvoiceClientFields', this.invoice.id);
+
+      client.fields.forEach((field) => {
+        this.$store.dispatch('invoiceClientFields/addInvoiceClientField', {
+          invoiceId: this.invoice.id,
+          props: {
+            label: field.label,
+            value: field.value,
+            client_field_id: field.id,
+          },
+        });
+      });
+    },
   },
 };
 </script>

src/components/invoices/InvoiceClientFields.vue

@@ -0,0 +1,29 @@
+<template>
+    <div>
+        <div v-for="field in invoice.client_fields">
+            <span :class="{'d-print-none': !field.value }">{{ field.label }}: </span>
+            <AppEditable :value="field.value"
+                         :placeholder="field.label"
+                         class="break-line"
+                         @change="updateProp({ value: $event }, field)"/>
+        </div>
+    </div>
+</template>
+<script>
+import AppEditable from '@/components/form/AppEditable';
+
+export default {
+  props: ['invoice'],
+  components: {
+    AppEditable,
+  },
+  methods: {
+    updateProp(props, field) {
+      this.$store.dispatch('invoiceClientFields/updateInvoiceClientField', {
+        props,
+        fieldId: field.id,
+      });
+    },
+  },
+};
+</script>

src/components/invoices/InvoiceForm.vue

@@ -137,7 +137,7 @@ export default {
       this.$store.dispatch('invoices/updateInvoice', props);
     },
     addRow() {
-      this.$store.dispatch('invoices/addRow');
+      this.$store.dispatch('invoiceRows/addRow', this.invoice.id);
     },
     updateTeam(props) {
       this.$store.dispatch('teams/updateTeam', props);

src/components/invoices/InvoiceRow.vue

@@ -52,13 +52,13 @@ export default {
   },
   methods: {
     updateProp(props) {
-      this.$store.dispatch('invoices/updateInvoiceRow', {
+      this.$store.dispatch('invoiceRows/updateInvoiceRow', {
         props,
         id: this.row.id,
       });
     },
     async removeRow(row) {
-      await this.$store.dispatch('invoices/removeRow', row);
+      await this.$store.dispatch('invoiceRows/removeRow', row.id);
       this.updateProp();
     },
   },

src/store/client-fields.js

@@ -0,0 +1,31 @@
+import ClientField from '@/store/models/client-field';
+
+export default {
+  namespaced: true,
+  state: {},
+  mutations: {},
+  actions: {
+    init() {},
+    terminate() {},
+    async clientFieldProps(store, payload) {
+      return ClientField.update({
+        where: payload.fieldId,
+        data: payload.props,
+      });
+    },
+    async updateClientField({ dispatch }, payload) {
+      await dispatch('clientFieldProps', payload);
+      return dispatch('clients/updateClient', null, { root: true }); // TODO: pass clientId to make generic
+    },
+    async addNewField(store, clientId) {
+      const field = await ClientField.createNew();
+      field.$update({
+        client_id: clientId,
+      });
+    },
+    async deleteClientField({ dispatch }, fieldId) {
+      await ClientField.delete(fieldId);
+      return dispatch('clients/updateClient', null, { root: true }); // TODO: pass clientId to make generic
+    },
+  },
+};

src/store/clients.js

@@ -47,11 +47,15 @@ export default {
       });
     },
     async updateClient({ getters, dispatch }, props) {
-      await dispatch('clientProps', props);
+      if (props) {
+        await dispatch('clientProps', props);
+      }
       return ClientService.updateClient(getters.client);
     },
     async updateClientById(store, payload) {
-      const client = Client.find(payload.clientId);
+      const client = Client.query()
+        .with('fields')
+        .find(payload.clientId);
       client.$update(payload.props);
       return ClientService.updateClient(client);
     },
@@ -60,24 +64,22 @@ export default {
       commit('clientId', client.id);
       commit('isModalOpen', true);
     },
-    async deleteClient(clientId) {
+    async deleteClient(store, clientId) {
       const res = await ClientService.deleteClient(clientId);
-      if ('client_id' in res) {
+      await Client.delete(clientId);
-        Client.delete(res.client_id);
-      }
       return res;
     },
   },
   getters: {
     client(state) {
       return Client.query()
-        .with(['bank_account'])
+        .with(['bank_account', 'fields'])
         .find(state.clientId);
     },
     all() {
       return Client.query()
         .where('$isNew', false)
-        .with(['bank_account'])
+        .with(['bank_account', 'fields'])
         .get();
     },
   },

src/store/invoice-client-fields.js

@@ -0,0 +1,34 @@
+import InvoiceClientField from '@/store/models/invoice-client-field';
+
+export default {
+  namespaced: true,
+  state: {},
+  mutations: {},
+  actions: {
+    init() {},
+    terminate() {},
+    invoiceClientFieldProps(store, payload) {
+      return InvoiceClientField.update({
+        where: payload.fieldId,
+        data: payload.props,
+      });
+    },
+    async updateInvoiceClientField({ dispatch }, payload) {
+      await dispatch('invoiceClientFieldProps', payload);
+      return dispatch('invoices/updateInvoice', null, { root: true });
+    },
+    async removeInvoiceClientFields(store, invoiceId) {
+      return InvoiceClientField.delete(field => field.invoice_id === invoiceId);
+    },
+    async addInvoiceClientField(store, payload) {
+      const field = await InvoiceClientField.createNew();
+      await field.$update({
+        ...payload.props,
+        invoice_id: payload.invoiceId,
+      });
+    },
+    async removeInvoiceClientField(store, fieldId) {
+      await InvoiceClientField.delete(fieldId);
+    },
+  },
+};

src/store/invoice-rows.js

@@ -0,0 +1,34 @@
+import InvoiceRow from '@/store/models/invoice-row';
+
+export default {
+  namespaced: true,
+  state: {
+  },
+  mutations: {
+  },
+  actions: {
+    init() {},
+    terminate() {},
+    invoiceRowProps(store, payload) {
+      return InvoiceRow.update({
+        where: payload.id,
+        data: payload.props,
+      });
+    },
+    async updateInvoiceRow({ dispatch }, payload) {
+      await dispatch('invoiceRowProps', payload);
+      return dispatch('invoices/updateInvoice', null, { root: true });
+    },
+    async addRow(store, invoiceId) {
+      const row = await InvoiceRow.createNew();
+      const rowCount = InvoiceRow.query().where('invoice_id', invoiceId).count();
+      row.$update({
+        invoice_id: invoiceId,
+        order: rowCount,
+      });
+    },
+    async removeRow(store, rowId) {
+      await InvoiceRow.delete(rowId);
+    },
+  },
+};

src/store/invoices.js

@@ -1,6 +1,5 @@
 import InvoiceService from '@/services/invoice.service';
 import Invoice from '@/store/models/invoice';
-import InvoiceRow from '@/store/models/invoice-row';
 import { pick } from '@/utils/helpers';
 import dayjs from 'dayjs';
 import Errors from '@/utils/errors';
@@ -55,16 +54,7 @@ export default {
         data: props,
       });
     },
-    invoiceRowProps(store, payload) {
+    async updateClient({ getters, dispatch }, props) {
-      return InvoiceRow.update({
-        where: payload.id,
-        data: payload.props,
-      });
-    },
-    async updateInvoice({ getters, dispatch, commit }, props) {
-      await dispatch('invoiceProps', props);
-
-      // Update client
       const clientProps = pick(props, {
         bank_account_id: 'bank_account_id',
         client_name: 'company_name',
@@ -73,8 +63,6 @@ export default {
         client_country: 'company_country',
         client_county: 'company_county',
         client_city: 'company_city',
-        client_reg_no: 'company_reg_no',
-        client_vat_no: 'company_vat_no',
         client_email: 'invoice_email',
         currency: 'currency',
       });
@@ -88,7 +76,8 @@ export default {
           clientId: getters.invoice.client_id,
         }, { root: true });
       }
-
+    },
+    async updateTeam({ getters, dispatch }, props) {
       const teamProps = pick(props, {
         late_fee: 'invoice_late_fee',
         from_name: 'company_name',
@@ -119,37 +108,23 @@ export default {
       if (Object.keys(teamProps).length > 0) {
         dispatch('teams/updateTeam', teamProps, { root: true });
       }
-
-      commit('clearErrors');
-
-      return InvoiceService.updateInvoice(getters.invoice)
-        .catch(err => commit('setErrors', err.errors));
     },
-    async updateInvoiceRow({ getters, dispatch, commit }, payload) {
+    async updateInvoice({ dispatch, commit, getters }, props) {
-      await dispatch('invoiceRowProps', payload);
+      if (props) {
+        await dispatch('invoiceProps', props);
+        await dispatch('updateClient', props);
+        await dispatch('updateTeam', props);
+      }
 
       commit('clearErrors');
-
       return InvoiceService.updateInvoice(getters.invoice)
         .catch(err => commit('setErrors', err.errors));
     },
     async deleteInvoice(store, invoice) {
       const res = await InvoiceService.deleteInvoice(invoice.id);
-      if ('invoice_id' in res) {
+      await Invoice.delete(invoice.id);
-        Invoice.delete(res.invoice_id);
-      }
       return res;
     },
-    async addRow({ state, getters }) {
-      const row = await InvoiceRow.createNew();
-      row.$update({
-        invoice_id: state.invoiceId,
-        order: getters.invoice.rows.length,
-      });
-    },
-    async removeRow(store, row) {
-      await InvoiceRow.delete(row.id);
-    },
     async bookInvoice({ getters, commit, dispatch }) {
       commit('clearErrors');
 
@@ -164,7 +139,7 @@ export default {
   getters: {
     invoice(state) {
       return Invoice.query()
-        .with(['client'])
+        .with(['client', 'client_fields'])
         .with('rows', query => query.orderBy('order', 'asc'))
         .find(state.invoiceId);
     },

src/store/models/client-field.js

@@ -0,0 +1,16 @@
+import { Model } from '@vuex-orm/core';
+import { uuidv4 } from '@/utils/helpers';
+
+export default class ClientField extends Model {
+  // This is the name used as module name of the Vuex Store.
+  static entity = 'client_fields';
+
+  static fields() {
+    return {
+      id: this.attr(() => uuidv4()),
+      client_id: this.attr(null),
+      label: this.attr(''),
+      value: this.attr(''),
+    };
+  }
+}

src/store/models/client.js

@@ -1,6 +1,7 @@
 import { Model } from '@vuex-orm/core';
 import { uuidv4 } from '@/utils/helpers';
 import BankAccount from '@/store/models/bank-account';
+import ClientField from '@/store/models/client-field';
 
 export default class Client extends Model {
   // This is the name used as module name of the Vuex Store.
@@ -15,14 +16,13 @@ export default class Client extends Model {
       company_country: this.attr(''),
       company_county: this.attr(''),
       company_city: this.attr(''),
-      company_reg_no: this.attr(''),
-      company_vat_no: this.attr(''),
       has_vat: this.attr(null),
       currency: this.attr(null),
       rate: this.attr(null),
       invoice_email: this.attr(''),
       bank_account_id: this.attr(null),
-      bank_account: this.belongsTo(BankAccount, 'bank_account_id', 'id'),
+      bank_account: this.belongsTo(BankAccount, 'bank_account_id'),
+      fields: this.hasMany(ClientField, 'client_id'),
       updated_at: this.attr(''),
       created_at: this.attr(''),
     };

src/store/models/invoice-client-field.js

@@ -0,0 +1,17 @@
+import { Model } from '@vuex-orm/core';
+import { uuidv4 } from '@/utils/helpers';
+
+export default class InvoiceClientField extends Model {
+  // This is the name used as module name of the Vuex Store.
+  static entity = 'invoice_client_fields';
+
+  static fields() {
+    return {
+      id: this.attr(() => uuidv4()),
+      invoice_id: this.attr(null),
+      client_field_id: this.attr(null),
+      label: this.attr(''),
+      value: this.attr(''),
+    };
+  }
+}

src/store/models/invoice.js

@@ -2,6 +2,7 @@ import { Model } from '@vuex-orm/core';
 import { uuidv4 } from '@/utils/helpers';
 import Client from '@/store/models/client';
 import InvoiceRow from '@/store/models/invoice-row';
+import InvoiceClientField from '@/store/models/invoice-client-field';
 
 export default class Invoice extends Model {
   // This is the name used as module name of the Vuex Store.
@@ -36,8 +37,6 @@ export default class Invoice extends Model {
       client_country: this.attr(''),
       client_county: this.attr(''),
       client_city: this.attr(''),
-      client_reg_no: this.attr(''),
-      client_vat_no: this.attr(''),
       client_email: this.attr(''),
       client_id: this.attr(null),
       client: this.belongsTo(Client, 'client_id'),
@@ -46,6 +45,7 @@ export default class Invoice extends Model {
       updated_at: this.attr(''),
       created_at: this.attr(''),
       total: this.attr(null), // Only used in lists.
+      client_fields: this.hasMany(InvoiceClientField, 'invoice_id'),
     };
   }
 

src/store/models/team-field.js

@@ -0,0 +1,16 @@
+import { Model } from '@vuex-orm/core';
+import { uuidv4 } from '@/utils/helpers';
+
+export default class TeamField extends Model {
+  // This is the name used as module name of the Vuex Store.
+  static entity = 'team_fields';
+
+  static fields() {
+    return {
+      id: this.attr(() => uuidv4()),
+      team_id: this.attr(null),
+      label: this.attr(''),
+      value: this.attr(''),
+    };
+  }
+}

src/store/models/team.js

@@ -1,5 +1,6 @@
 import { Model } from '@vuex-orm/core';
 import { uuidv4 } from '@/utils/helpers';
+import TeamField from '@/store/models/team-field';
 
 export default class Team extends Model {
   // This is the name used as module name of the Vuex Store.
@@ -22,6 +23,7 @@ export default class Team extends Model {
       vat_rate: this.attr(null),
       invoice_late_fee: this.attr(null),
       invoice_due_days: this.attr(null),
+      fields: this.hasMany(TeamField, 'team_id'),
       updated_at: this.attr(''),
       created_at: this.attr(''),
       logo_url: this.attr(''),

src/store/store.js

@@ -9,10 +9,16 @@ import InvoiceRow from '@/store/models/invoice-row';
 import Team from '@/store/models/team';
 import bankAccounts from '@/store/bank-accounts';
 import clients from '@/store/clients';
+import clientFields from '@/store/client-fields';
 import invoices from '@/store/invoices';
+import invoiceRows from '@/store/invoice-rows';
+import invoiceClientFields from '@/store/invoice-client-fields';
 import teams from '@/store/teams';
 import themes from '@/store/themes';
 import data from '@/store/data';
+import ClientField from '@/store/models/client-field';
+import TeamField from '@/store/models/team-field';
+import InvoiceClientField from '@/store/models/invoice-client-field';
 
 Vue.use(Vuex);
 
@@ -20,8 +26,11 @@ VuexORM.use(VuexORMisDirtyPlugin);
 const database = new VuexORM.Database();
 
 database.register(Team);
+database.register(TeamField);
 database.register(Client);
+database.register(ClientField);
 database.register(Invoice);
+database.register(InvoiceClientField);
 database.register(InvoiceRow);
 database.register(BankAccount);
 
@@ -30,7 +39,10 @@ export default new Vuex.Store({
   modules: {
     bankAccounts,
     clients,
+    clientFields,
     invoices,
+    invoiceRows,
+    invoiceClientFields,
     teams,
     themes,
     data,