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/store/invoice-team-fields.js

@@ -0,0 +1,31 @@
+import InvoiceTeamField from '@/store/models/invoice-team-field';
+
+export default {
+  namespaced: true,
+  state: {},
+  mutations: {},
+  actions: {
+    init() {},
+    terminate() {},
+    invoiceTeamFieldProps(store, payload) {
+      return InvoiceTeamField.update({
+        where: payload.fieldId,
+        data: payload.props,
+      });
+    },
+    async updateInvoiceTeamField({ dispatch }, payload) {
+      await dispatch('invoiceTeamFieldProps', payload);
+      return dispatch('invoices/updateInvoice', null, { root: true });
+    },
+    async addInvoiceTeamField(store, payload) {
+      const field = await InvoiceTeamField.createNew();
+      await field.$update({
+        ...payload.props,
+        invoice_id: payload.invoiceId,
+      });
+    },
+    async removeInvoiceTeamField(store, fieldId) {
+      await InvoiceTeamField.delete(fieldId);
+    },
+  },
+};

src/store/invoices.js

@@ -86,8 +86,6 @@ export default {
         from_city: 'company_city',
         from_country: 'company_country',
         from_county: 'company_county',
-        from_reg_no: 'company_reg_no',
-        from_vat_no: 'company_vat_no',
         from_website: 'website',
         from_email: 'contact_email',
         from_phone: 'contact_phone',
@@ -139,7 +137,7 @@ export default {
   getters: {
     invoice(state) {
       return Invoice.query()
-        .with(['client', 'client_fields'])
+        .with(['client', 'client_fields', 'team_fields'])
         .with('rows', query => query.orderBy('order', 'asc'))
         .find(state.invoiceId);
     },

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

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

src/store/models/invoice.js

@@ -3,6 +3,7 @@ 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';
+import InvoiceTeamField from '@/store/models/invoice-team-field';
 
 export default class Invoice extends Model {
   // This is the name used as module name of the Vuex Store.
@@ -24,8 +25,6 @@ export default class Invoice extends Model {
       from_city: this.attr(''),
       from_country: this.attr(''),
       from_county: this.attr(''),
-      from_reg_no: this.attr(''),
-      from_vat_no: this.attr(''),
       from_website: this.attr(''),
       from_email: this.attr(''),
       from_phone: this.attr(''),
@@ -46,6 +45,7 @@ export default class Invoice extends Model {
       created_at: this.attr(''),
       total: this.attr(null), // Only used in lists.
       client_fields: this.hasMany(InvoiceClientField, 'invoice_id'),
+      team_fields: this.hasMany(InvoiceTeamField, 'invoice_id'),
     };
   }
 

src/store/models/team.js

@@ -15,12 +15,11 @@ export default class Team extends Model {
       company_country: this.attr(''),
       company_county: this.attr(''),
       company_city: this.attr(''),
-      company_reg_no: this.attr(''),
-      company_vat_no: this.attr(''),
       website: this.attr(''),
       contact_email: this.attr(''),
       contact_phone: this.attr(''),
       vat_rate: this.attr(null),
+      currency: this.attr(null),
       invoice_late_fee: this.attr(null),
       invoice_due_days: this.attr(null),
       fields: this.hasMany(TeamField, 'team_id'),

src/store/store.js

@@ -13,12 +13,15 @@ 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 invoiceTeamFields from '@/store/invoice-team-fields';
 import teams from '@/store/teams';
+import teamFields from '@/store/team-fields';
 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';
+import InvoiceTeamField from '@/store/models/invoice-team-field';
 
 Vue.use(Vuex);
 
@@ -31,6 +34,7 @@ database.register(Client);
 database.register(ClientField);
 database.register(Invoice);
 database.register(InvoiceClientField);
+database.register(InvoiceTeamField);
 database.register(InvoiceRow);
 database.register(BankAccount);
 
@@ -43,7 +47,9 @@ export default new Vuex.Store({
     invoices,
     invoiceRows,
     invoiceClientFields,
+    invoiceTeamFields,
     teams,
+    teamFields,
     themes,
     data,
   },

src/store/team-fields.js

@@ -0,0 +1,31 @@
+import TeamField from '@/store/models/team-field';
+
+export default {
+  namespaced: true,
+  state: {},
+  mutations: {},
+  actions: {
+    init() {},
+    terminate() {},
+    async teamFieldProps(store, payload) {
+      return TeamField.update({
+        where: payload.fieldId,
+        data: payload.props,
+      });
+    },
+    async updateTeamField({ dispatch }, payload) {
+      await dispatch('teamFieldProps', payload);
+      return dispatch('teams/updateTeam', null, { root: true });
+    },
+    async addNewField(store, teamId) {
+      const field = await TeamField.createNew();
+      field.$update({
+        team_id: teamId,
+      });
+    },
+    async deleteTeamField({ dispatch }, fieldId) {
+      await TeamField.delete(fieldId);
+      return dispatch('teams/updateTeam', null, { root: true });
+    },
+  },
+};

src/store/teams.js

@@ -3,8 +3,14 @@ import Team from '@/store/models/team';
 
 export default {
   namespaced: true,
-  state: {},
-  mutations: {},
+  state: {
+    isModalOpen: false,
+  },
+  mutations: {
+    isModalOpen(state, isOpen) {
+      state.isModalOpen = isOpen;
+    },
+  },
   actions: {
     async init({ dispatch }) {
       await Promise.all([
@@ -39,12 +45,7 @@ export default {
   },
   getters: {
     team() {
-      return Team.query().first();
-    },
-    all() {
-      return Team.query()
-        .where('$isNew', false)
-        .get();
+      return Team.query().with(['fields']).first();
     },
   },
 };