Merge pull request #15 from nikhilkuyya/main

release: bugfix of rounded off

package.json

@@ -25,6 +25,7 @@
     "localforage": "^1.9.0",
     "lodash": "^4.17.21",
     "register-service-worker": "^1.7.1",
+    "sass": "^1.83.0",
     "vue": "^2.6.10",
     "vue-autosuggest": "^2.2.0",
     "vue-multiselect": "^2.1.6",
@@ -43,7 +44,6 @@
     "babel-eslint": "^10.0.1",
     "eslint": "^5.16.0",
     "eslint-plugin-vue": "^5.0.0",
-    "node-sass": "^4.14.1",
     "sass-loader": "^7.1.0",
     "vue-template-compiler": "^2.5.21"
   }

src/components/invoices/InvoiceBankDetails.vue

@@ -68,4 +68,4 @@ export default {
 .heading {
   font-size: 1.1rem;
 }
-</style>
+</style>

src/components/invoices/InvoiceHeader.vue

@@ -55,23 +55,23 @@
   </div>
 </template>
 <script>
-import { BModal, VBModal } from "bootstrap-vue";
-import AppEditable from "@/components/form/AppEditable";
-import AppDatePicker from "@/components/form/AppDatePicker";
-import { formatDate } from "@/filters/date.filter";
-import { formatCurrency } from "@/filters/currency.filter";
-import { formatCurrencyWithDinero } from "@/filters/dineroCurrency.filter";
+import { BModal, VBModal } from 'bootstrap-vue';
+import AppEditable from '@/components/form/AppEditable';
+import AppDatePicker from '@/components/form/AppDatePicker';
+import { formatDate } from '@/filters/date.filter';
+import { formatCurrency } from '@/filters/currency.filter';
+import { formatCurrencyWithDinero } from '@/filters/dineroCurrency.filter';
 
 export default {
-  i18nOptions: { namespaces: "invoice-header" },
-  props: ["invoice", "errors"],
+  i18nOptions: { namespaces: 'invoice-header' },
+  props: ['invoice', 'errors'],
   components: {
     AppEditable,
     AppDatePicker,
     BModal,
   },
   directives: {
-    "b-modal": VBModal,
+    'b-modal': VBModal,
   },
   filters: {
     date: formatDate,
@@ -80,7 +80,7 @@ export default {
   },
   methods: {
     updateProp(props) {
-      this.$emit("update", props);
+      this.$emit('update', props);
     },
   },
 };

src/components/invoices/InvoiceRow.vue

@@ -81,14 +81,14 @@
 </template>
 
 <script>
-import { formatCurrency } from "../../filters/currency.filter";
-import { formatCurrencyWithDinero } from "../../filters/dineroCurrency.filter";
-import AppEditable from "../form/AppEditable";
+import { formatCurrency } from '../../filters/currency.filter';
+import { formatCurrencyWithDinero } from '../../filters/dineroCurrency.filter';
+import AppEditable from '../form/AppEditable';
 
 export default {
-  props: ["row", "errors", "index"],
-  name: "InvoiceRow",
-  i18nOptions: { namespaces: "invoice-row" },
+  props: ['row', 'errors', 'index'],
+  name: 'InvoiceRow',
+  i18nOptions: { namespaces: 'invoice-row' },
   components: {
     AppEditable,
   },
@@ -98,21 +98,21 @@ export default {
   },
   methods: {
     updateProp(props) {
-      this.$store.dispatch("invoiceRows/updateInvoiceRow", {
+      this.$store.dispatch('invoiceRows/updateInvoiceRow', {
         props,
         id: this.row.id,
         invoiceId: this.row.invoice_id,
       });
     },
     updateTaxProp(props, tax) {
-      this.$store.dispatch("invoiceRows/updateInvoiceRowTax", {
+      this.$store.dispatch('invoiceRows/updateInvoiceRowTax', {
         props,
         invoiceId: this.row.invoice_id,
         taxId: tax.id,
       });
     },
     async removeRow(row) {
-      await this.$store.dispatch("invoiceRows/removeRow", row.id);
+      await this.$store.dispatch('invoiceRows/removeRow', row.id);
       this.updateProp();
     },
   },

src/components/invoices/InvoiceTotals.vue

@@ -16,11 +16,17 @@
       </td>
       <td class="currency-readable">{{ taxTotal | dineroCurrency   }}</td>
     </tr>
+    <tr class="text-right" v-if="roundedOffAmount !== 0">
+      <td :colspan="colspan">
+        Rounded Off
+      </td>
+      <td class="currency-readable">{{ roundedOffAmount | dineroCurrency   }}</td>
+    </tr>
     <tr class="text-right" v-if="invoice.total">
         <th :colspan="colspan" >
             {{ $t('total') }}
         </th>
-        <th class="text-nowrap currency-readable">{{ invoice.total | dineroCurrency}}</th>
+        <th class="text-nowrap currency-readable">{{ roundedTotal | dineroCurrency}}</th>
     </tr>
     </tfoot>
 </template>
@@ -29,6 +35,7 @@ import { mapGetters } from 'vuex';
 import { formatDate } from '../../filters/date.filter';
 import { formatCurrency } from '../../filters/currency.filter';
 import { formatCurrencyWithDinero } from '../../filters/dineroCurrency.filter';
+import Dinero from 'dinero.js';
 
 
 export default {
@@ -47,12 +54,31 @@ export default {
     taxTotal() {
       return Object.values(this.invoice.taxes).reduce((taxTotal, taxObject) => taxTotal + taxObject.total, 0);
     },
+    roundedTotal() {
+      return this.getValue(this.invoice.total);
+    },
+    roundedOffAmount() {
+      const totalDinero = this.getDinero(this.invoice.total);
+      const roundedDinero = this.getDinero(this.roundedTotal);
+      return roundedDinero.subtract(totalDinero).toRoundedUnit(2);
+    },
     colspan() {
       // return 5 + this.taxes.length;
       return 7;
     },
   },
   methods: {
+    getDinero(value, factor = 10 ** 2) {
+      const amount = Number.parseFloat((Number.parseFloat(value).toFixed(2) * factor).toFixed(2));
+      const dineroObject = Dinero({ amount: amount, currency: 'INR' });
+      return dineroObject;
+    },
+    getValue(newValue, factor = 10 ** 2) {
+      const amount = Number.parseFloat((Number.parseFloat(newValue).toFixed(2) * factor).toFixed(2));
+      const dineroObject = Dinero({ amount: amount, currency: 'INR' });
+      const dineroAmount = dineroObject.toRoundedUnit(0, 'HALF_ODD');
+      return dineroAmount;
+    },
     updateProp(props) {
       this.$emit('update', props);
     },

src/components/invoices/InvoicesList.vue

@@ -47,15 +47,15 @@
   </div>
 </template>
 <script>
-import { mapGetters } from "vuex";
-import { formatDate } from "@/filters/date.filter";
-import EmptyState from "@/components/EmptyState";
-import { formatCurrency } from "@/filters/currency.filter";
-import dayjs from "dayjs";
-import { VBTooltip } from "bootstrap-vue";
+import { mapGetters } from 'vuex';
+import { formatDate } from '@/filters/date.filter';
+import EmptyState from '@/components/EmptyState';
+import { formatCurrency } from '@/filters/currency.filter';
+import dayjs from 'dayjs';
+import { VBTooltip } from 'bootstrap-vue';
 
 export default {
-  i18nOptions: { namespaces: ["invoices-list", "statuses"] },
+  i18nOptions: { namespaces: ['invoices-list', 'statuses'] },
   components: {
     EmptyState,
   },
@@ -64,26 +64,26 @@ export default {
     currency: formatCurrency,
   },
   directives: {
-    "b-tooltip": VBTooltip,
+    'b-tooltip': VBTooltip,
   },
   computed: {
     ...mapGetters({
-      invoices: "invoices/all",
+      invoices: 'invoices/all',
     }),
   },
   mounted() {
-    this.$store.dispatch("invoices/getInvoices");
+    this.$store.dispatch('invoices/getInvoices');
   },
   methods: {
     openInvoice(invoice) {
-      this.$store.commit("invoices/invoiceId", invoice.id);
+      this.$store.commit('invoices/invoiceId', invoice.id);
       this.$router.push({
-        name: "invoice",
+        name: 'invoice',
         params: { id: invoice.id },
       });
     },
     isOverDue(invoice) {
-      return invoice.status === "sent" && invoice.due_at < dayjs().format();
+      return invoice.status === 'sent' && invoice.due_at < dayjs().format();
     },
   },
 };

src/filters/dineroCurrency.filter.js

@@ -1,15 +1,15 @@
-import Dinero from "dinero.js";
+import Dinero from 'dinero.js';
 
 export function formatCurrencyWithDinero(value, factor = 10 ** 2) {
   const newValue = Number(value);
 
   if (Number.isNaN(newValue)) {
-    return "";
+    return '';
   }
 
 
   const amount = Number.parseFloat((Number.parseFloat(newValue).toFixed(2) * factor).toFixed(2));
-  const dineroObject = Dinero({ amount: amount, currency: "INR" });
+  const dineroObject = Dinero({ amount: amount, currency: 'INR' });
   const dineroAmount = dineroObject.toRoundedUnit(2);
-  return Intl.NumberFormat("en-IN", { currency: "INR", style: "currency" }).format(dineroAmount);
+  return Intl.NumberFormat('en-IN', { currency: 'INR', style: 'currency' }).format(dineroAmount);
 }