feat: allow custom thousands separator per team and apply in currency…

public/locales/bn/team-form.json

@@ -18,7 +18,8 @@
   "invoicing": {
     "invoice_late_fee": "জরিমানা (%)",
     "invoice_due_days": "পরিশোধের শর্ত, দিন",
-    "currency": "প্রচলিত মুদ্রা"
+    "currency": "প্রচলিত মুদ্রা",
+    "thousands_separator": "হাজারের বিভাজক"
   },
   "address": {
     "company_address": "কোম্পানীর ঠিকানা",

public/locales/de/team-form.json

@@ -18,7 +18,8 @@
   "invoicing": {
     "invoice_late_fee": "Verzugsgebühr (%)",
     "invoice_due_days": "Bezahlungsbedingungen, Tage",
-    "currency": "Standardwährung"
+    "currency": "Standardwährung",
+    "thousands_separator": "Tausendertrennzeichen"
   },
   "address": {
     "company_address": "Firmenadresse",

public/locales/en/team-form.json

@@ -18,7 +18,8 @@
   "invoicing": {
     "invoice_late_fee": "Late fee (%)",
     "invoice_due_days": "Payment terms, days",
-    "currency": "Default currency"
+    "currency": "Default currency",
+    "thousands_separator": "Thousands separator"
   },
   "address": {
     "company_address": "Company address",

public/locales/es/team-form.json

@@ -18,7 +18,8 @@
   "invoicing": {
     "invoice_late_fee": "Cargo por demora (%)",
     "invoice_due_days": "Condiciones de pago, días",
-    "currency": "Mondea predeterminada"
+    "currency": "Mondea predeterminada",
+    "thousands_separator": "Separador de miles"
   },
   "address": {
     "company_address": "Dirección de la compañía",

public/locales/et/team-form.json

@@ -18,7 +18,8 @@
   "invoicing": {
     "invoice_late_fee": "Viivis (%)",
     "invoice_due_days": "Makse tähtaeg, päevades",
-    "currency": "Vaikimisi valuuta"
+    "currency": "Vaikimisi valuuta",
+    "thousands_separator": "Tuhandikute eraldaja"
   },
   "address": {
     "company_address": "Firma aadress",

public/locales/fa/team-form.json

@@ -18,7 +18,8 @@
   "invoicing": {
     "invoice_late_fee": "هزینه دیرهنگام (%)",
     "invoice_due_days": "شرایط پرداخت ، روزها",
-    "currency": "ارز پیش فرض"
+    "currency": "ارز پیش فرض",
+    "thousands_separator": "جداکننده هزارگان"
   },
   "address": {
     "company_address": "آدرس شرکت",

public/locales/fr/team-form.json

@@ -18,7 +18,8 @@
     "invoicing": {
         "invoice_late_fee": "Intérêt de retard (%)",
         "invoice_due_days": "Conditions de paiements, jours",
-        "currency": "Devise par défaut"
+        "currency": "Devise par défaut",
+        "thousands_separator": "Separateur de milliers"
     },
     "address": {
         "company_address": "Address de la société",

public/locales/id/team-form.json

@@ -18,7 +18,8 @@
     "invoicing": {
         "invoice_late_fee": "Denda Keterlambatan (%)",
         "invoice_due_days": "Ketentuan pemabarayan, hari",
-        "currency": "Mata uang baku"
+        "currency": "Mata uang baku",
+        "thousands_separator": "Pemisah ribuan"
     },
     "address": {
         "company_address": "Alamat usaha",

public/locales/it/team-form.json

@@ -18,7 +18,8 @@
   "invoicing": {
     "invoice_late_fee": "Interessi (%)",
     "invoice_due_days": "Termini pagamento, giorni",
-    "currency": "Valuta predefinita"
+    "currency": "Valuta predefinita",
+    "thousands_separator": "Separatore migliaia"
   },
   "address": {
     "company_address": "Indirizzo Azienda",

public/locales/kr/team-form.json

@@ -18,7 +18,8 @@
   "invoicing": {
     "invoice_late_fee": "연착 요금 (%)",
     "invoice_due_days": "지불조건, 일",
-    "currency": "기본 통화"
+    "currency": "기본 통화",
+    "thousands_separator": "천 단위 구분 기호"
   },
   "address": {
     "company_address": "회사 주소",

public/locales/pt_br/team-form.json

@@ -18,7 +18,8 @@
   "invoicing": {
     "invoice_late_fee": "Taxa de atraso (%)",
     "invoice_due_days": "Termos de pagamento, dias",
-    "currency": "Moeda Padrão"
+    "currency": "Moeda Padrão",
+    "thousands_separator": "Separador de milhares"
   },
   "address": {
     "company_address": "Endereço da Empresa",

src/components/invoices/InvoiceHeader.vue

@@ -39,7 +39,7 @@
         </BModal>
         <span :class="{'d-print-none': !invoice.late_fee}">
             <br>{{ $t('late_fee') }}
-            <AppEditable :value="invoice.late_fee | currency"
+            <AppEditable :value="currency(invoice.late_fee)"
                          :errors="errors"
                          suffix="%"
                          field="late_fee"
@@ -54,6 +54,7 @@ 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 { mapGetters } from 'vuex';
 
 export default {
   i18nOptions: { namespaces: 'invoice-header' },
@@ -68,9 +69,19 @@ export default {
   },
   filters: {
     date: formatDate,
-    currency: formatCurrency,
+  },
+  computed: {
+    ...mapGetters({
+      team: 'teams/team',
+    }),
   },
   methods: {
+    currency(val, digits = 2) {
+      const separator = (this.team && this.team.thousands_separator !== undefined)
+        ? this.team.thousands_separator
+        : ',';
+      return formatCurrency(val, digits, separator);
+    },
     updateProp(props) {
       this.$emit('update', props);
     },

src/components/invoices/InvoiceRow.vue

@@ -22,22 +22,22 @@
                          @change="updateProp({ unit: $event })"/>
         </td>
         <td>
-            <AppEditable :value="row.price | currency"
+            <AppEditable :value="currency(row.price)"
                          :errors="errors"
                          :field="`rows.${index}.price`"
                          :placeholder="$t('enter_price')"
                          @change="updateProp({ price: $event })"/>
         </td>
         <td v-for="(tax, taxIndex) in row.taxes" :title="tax.label">
             <AppEditable v-if="tax.row_id"
-                         :value="tax.value | currency"
+                         :value="currency(tax.value)"
                          :errors="errors"
                          :field="`rows.${index}.taxes.${taxIndex}.value`"
                          :placeholder="$t('enter_tax')"
                          @change="updateTaxProp({ value: $event }, tax)"/>
         </td>
         <td class="text-right position-relative">
-            {{ (row.quantity * row.price) | currency }}
+            {{ currency(row.quantity * row.price) }}
             <button class="btn btn-sm d-print-none invoice__row-control"
                     @click="removeRow(row)">
                 <i class="material-icons md-18 pointer">remove</i>
@@ -47,6 +47,7 @@
 </template>
 
 <script>
+import { mapGetters } from 'vuex';
 import { formatCurrency } from '../../filters/currency.filter';
 import AppEditable from '../form/AppEditable';
 
@@ -57,10 +58,18 @@ export default {
   components: {
     AppEditable,
   },
-  filters: {
-    currency: formatCurrency,
+  computed: {
+    ...mapGetters({
+      team: 'teams/team',
+    }),
   },
   methods: {
+    currency(val, digits = 2) {
+      const separator = (this.team && this.team.thousands_separator !== undefined)
+        ? this.team.thousands_separator
+        : ',';
+      return formatCurrency(val, digits, separator);
+    },
     updateProp(props) {
       this.$store.dispatch('invoiceRows/updateInvoiceRow', {
         props,

src/components/invoices/InvoiceTotals.vue

@@ -2,13 +2,13 @@
     <tfoot>
     <tr class="text-right">
         <td :colspan="colspan">{{ $t('subtotal') }}</td>
-        <td>{{ invoice.subTotal | currency }}</td>
+        <td>{{ currency(invoice.subTotal) }}</td>
     </tr>
     <tr class="text-right" v-for="tax in invoice.taxes" :key="tax.label">
         <td :colspan="colspan">
             {{ tax.label }} ({{ tax.rate }}%)
         </td>
-        <td>{{ tax.total | currency }}</td>
+        <td>{{ currency(tax.total) }}</td>
     </tr>
     <tr class="text-right">
         <th :colspan="colspan">
@@ -19,7 +19,7 @@
                          :placeholder="$t('add_currency')"
                          @change="updateProp({ currency: $event })"/>
         </th>
-        <th class="text-nowrap">{{ invoice.total | currency }}</th>
+        <th class="text-nowrap">{{ currency(invoice.total) }}</th>
     </tr>
     </tfoot>
 </template>
@@ -37,17 +37,23 @@ export default {
   },
   filters: {
     date: formatDate,
-    currency: formatCurrency,
   },
   computed: {
     ...mapGetters({
       taxes: 'invoiceRows/taxes',
+      team: 'teams/team',
     }),
     colspan() {
       return 4 + this.taxes.length;
     },
   },
   methods: {
+    currency(val, digits = 2) {
+      const separator = (this.team && this.team.thousands_separator !== undefined)
+        ? this.team.thousands_separator
+        : ',';
+      return formatCurrency(val, digits, separator);
+    },
     updateProp(props) {
       this.$emit('update', props);
     },

src/components/invoices/InvoicesList.vue

@@ -20,8 +20,8 @@
                 <td>{{ invoice.client ? invoice.client.company_name : '' }}</td>
                 <td>{{ invoice.issued_at | date('D MMM YYYY', 'YYYY-MM-DD') }}</td>
                 <td>
-                    {{ invoice.subTotal | currency }}
-                    <small v-if="invoice.taxTotal"><br>({{ invoice.total | currency }})</small>
+                    {{ currency(invoice.subTotal) }}
+                    <small v-if="invoice.taxTotal"><br>({{ currency(invoice.total) }})</small>
                 </td>
                 <td class="text-right text-capitalize">
                     <i class="material-icons material-icons-round md-18 mr-2 text-warning"
@@ -52,20 +52,26 @@ export default {
   },
   filters: {
     date: formatDate,
-    currency: formatCurrency,
   },
   directives: {
     'b-tooltip': VBTooltip,
   },
   computed: {
     ...mapGetters({
       invoices: 'invoices/all',
+      team: 'teams/team',
     }),
   },
   mounted() {
     this.$store.dispatch('invoices/getInvoices');
   },
   methods: {
+    currency(val, digits = 2) {
+      const separator = (this.team && this.team.thousands_separator !== undefined)
+        ? this.team.thousands_separator
+        : ',';
+      return formatCurrency(val, digits, separator);
+    },
     openInvoice(invoice) {
       this.$store.commit('invoices/invoiceId', invoice.id);
       this.$router.push({

src/components/team/TeamForm.vue

@@ -41,7 +41,10 @@
                         <AppInput :value="team.invoice_late_fee" @change="updateProp({ invoice_late_fee: $event })"
                                   type="number"
                                   :label="$t('invoicing.invoice_late_fee')" field="invoice_late_fee" :errors="errors"
-                                  class="col-12"/>
+                                  class="col-sm-7"/>
+                        <AppInput :value="team.thousands_separator" @change="updateProp({ thousands_separator: $event })"
+                                  :label="$t('invoicing.thousands_separator')" field="thousands_separator" :errors="errors"
+                                  class="col-sm-5"/>
                         <AppInput :value="team.invoice_due_days" @change="updateProp({ invoice_due_days: $event })"
                                   type="number"
                                   :label="$t('invoicing.invoice_due_days')" field="invoice_due_days" :errors="errors"

src/filters/currency.filter.js

@@ -1,13 +1,13 @@
-export function formatCurrency(val, digits = 2) {
-  if (val !== null) {
-    let x = parseFloat(val);
-    if (Number.isNaN(x)) {
-      return '';
-    }
-    const decimalLimiter = 10 ** digits;
-    x = Math.round((x + Number.EPSILON) * decimalLimiter) / decimalLimiter;
-    const parts = x.toFixed(digits).split('.');
-    parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ' ');
-    return parts.join('.');
+export function formatCurrency(val, digits = 2, thousandsSeparator = ',') {
+  if (val === null || val === undefined || val === '') return '';
+
+  let x = parseFloat(val);
+  if (Number.isNaN(x)) {
+    return '';
   }
+  const decimalLimiter = 10 ** digits;
+  x = Math.round((x + Number.EPSILON) * decimalLimiter) / decimalLimiter;
+  const parts = x.toFixed(digits).split('.');
+  parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, thousandsSeparator);
+  return parts.join('.');
 }

src/store/invoices.js

@@ -100,6 +100,7 @@ export default {
         from_website: 'website',
         from_email: 'contact_email',
         from_phone: 'contact_phone',
+        thousands_separator: 'thousands_separator',
       });
       const invoice = getInvoice(payload.invoiceId);
 

src/store/models/team.js

@@ -33,6 +33,7 @@ export default class Team extends Model {
       currency: this.attr(null),
       invoice_late_fee: this.attr(null),
       invoice_due_days: this.attr(null),
+      thousands_separator: this.attr(','),
       fields: this.hasMany(TeamField, 'team_id'),
       updated_at: this.attr(''),
       created_at: this.attr(''),