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/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(''),