Fix invoice totals in list. Don't store full client in invoices.

src/components/invoices/InvoiceTotals.vue

@@ -2,7 +2,7 @@
     <tfoot>
     <tr class="text-right">
         <td colspan="4">Subtotal</td>
-        <td>{{ subTotal | currency }}</td>
+        <td>{{ invoice.subTotal | currency }}</td>
     </tr>
     <tr class="text-right">
         <td colspan="4">
@@ -13,7 +13,7 @@
                           @change="updateProp({ vat_rate: $event })"/>)
             <AppError :errors="errors" field="vat_rate"/>
         </td>
-        <td>{{ totalVat | currency }}</td>
+        <td>{{ invoice.totalVat | currency }}</td>
     </tr>
     <tr class="text-right">
         <th colspan="4">
@@ -24,12 +24,11 @@
                          placeholder="Add currency"
                          @change="updateProp({ currency: $event })"/>
         </th>
-        <th class="text-nowrap">{{ total | currency }}</th>
+        <th class="text-nowrap">{{ invoice.total | currency }}</th>
     </tr>
     </tfoot>
 </template>
 <script>
-import { mapGetters } from 'vuex';
 import AppError from '@/components/form/AppError';
 import AppEditable from '../form/AppEditable';
 import { formatDate } from '../../filters/date.filter';
@@ -45,14 +44,6 @@ export default {
     date: formatDate,
     currency: formatCurrency,
   },
-  computed: {
-    ...mapGetters({
-      rows: 'invoices/rows',
-      subTotal: 'invoices/subTotal',
-      total: 'invoices/total',
-      totalVat: 'invoices/totalVat',
-    }),
-  },
   methods: {
     updateProp(props) {
       this.$emit('update', props);

src/services/invoice.service.js

@@ -43,6 +43,7 @@ class InvoiceService {
     delete invoice.$id;
     delete invoice.$isNew;
     delete invoice.$isDirty;
+    delete invoice.client;
 
     invoices.push(invoice);
     await storage.setItem('invoices', invoices);
@@ -62,6 +63,8 @@ class InvoiceService {
     if (Object.keys(res.errors).length > 0) {
       return Promise.reject(res);
     }
+    delete invoice.client;
+
     const invoices = await this.getInvoices();
     const index = invoices.findIndex(item => item.id === invoice.id);
     invoices[index] = invoice;

src/store/invoices.js

@@ -177,14 +177,5 @@ export default {
         .orderBy('number', 'desc')
         .get();
     },
-    subTotal(state, getters) {
-      return getters.invoice.rows.reduce((carr, row) => (row.quantity * row.price) + carr, 0);
-    },
-    total(state, getters) {
-      return getters.subTotal + getters.totalVat;
-    },
-    totalVat(state, getters) {
-      return (getters.invoice.vat_rate / 100) * getters.subTotal;
-    },
   },
 };

src/store/models/invoice.js

@@ -48,4 +48,25 @@ export default class Invoice extends Model {
       total: this.attr(null), // Only used in lists.
     };
   }
+
+  get subTotal() {
+    return this.rows.reduce((carr, row) => (row.quantity * row.price) + carr, 0);
+  }
+
+  // eslint-disable-next-line no-empty-function
+  set subTotal(val) {}
+
+  get total() {
+    return this.subTotal + this.totalVat;
+  }
+
+  // eslint-disable-next-line no-empty-function
+  set total(val) {}
+
+  get totalVat() {
+    return (this.vat_rate / 100) * this.subTotal;
+  }
+
+  // eslint-disable-next-line no-empty-function
+  set totalVat(val) {}
 }

src/utils/helpers.js

@@ -1,5 +1,5 @@
 /* eslint-disable */
-import dayjs from '../services/invoice.service';
+import dayjs from 'dayjs';
 
 export function uuidv4() {
   return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {