feat/fix: currency column (#1687)

* feat: currency column supporting multiple locales and units

Signed-off-by: mertmit <mertmit99@gmail.com>

* feat: add default currency locale and code

Signed-off-by: mertmit <mertmit99@gmail.com>

* feat: change default length and scale for currency

Signed-off-by: mertmit <mertmit99@gmail.com>

* feat: add proper validations for currency fields

Signed-off-by: mertmit <mertmit99@gmail.com>

* fix: use UITypes instead of raw uidt

Signed-off-by: mertmit <mertmit99@gmail.com>

* feat: dropdown for currency properties

Signed-off-by: mertmit <mertmit99@gmail.com>

* fix: add proper v2 migrations

Signed-off-by: mertmit <mertmit99@gmail.com>

* fix: add custom validators

Signed-off-by: Mert Ersoy <mertmit99@gmail.com>

* feat: handle currency data from meta column

Signed-off-by: mertmit <mertmit99@gmail.com>

* fix: move currency specific options out

Signed-off-by: mertmit <mertmit99@gmail.com>

* fix: pass colMeta by value instead of reference

Signed-off-by: mertmit <mertmit99@gmail.com>

packages/nc-gui/components/project/spreadsheet/components/Cell.vue

@@ -18,6 +18,7 @@
   <time-cell v-else-if="isTime" :value="value" />
   <boolean-cell v-else-if="isBoolean" :value="value" read-only />
   <rating-cell v-else-if="isRating" :value="value" read-only />
+  <currency-cell v-else-if="isCurrency" :value="value" :column="column" />
 
   <span v-else :class="{'long-text-cell' : isTextArea}" :title="title">{{ value }}</span>
 </template>
@@ -35,10 +36,11 @@ import EditableAttachmentCell from '~/components/project/spreadsheet/components/
 import BooleanCell from '~/components/project/spreadsheet/components/cell/BooleanCell'
 import EmailCell from '~/components/project/spreadsheet/components/cell/EmailCell'
 import RatingCell from '~/components/project/spreadsheet/components/editableCell/RatingCell'
+import CurrencyCell from '@/components/project/spreadsheet/components/cell/CurrencyCell'
 
 export default {
   name: 'TableCell',
-  components: { RatingCell, EmailCell, TimeCell, DateTimeCell, DateCell, JsonCell, UrlCell, EditableAttachmentCell, EnumCell, SetListCell, BooleanCell },
+  components: { RatingCell, EmailCell, TimeCell, DateTimeCell, DateCell, JsonCell, UrlCell, EditableAttachmentCell, EnumCell, SetListCell, BooleanCell, CurrencyCell },
   mixins: [cell],
   props: ['value', 'dbAlias', 'isLocked', 'selected', 'column'],
   computed: {

packages/nc-gui/components/project/spreadsheet/components/EditColumn.vue

@@ -166,6 +166,12 @@
                     :meta="meta"
                   />
                 </v-col>
+                <currency-options
+                  v-else-if="isCurrency"
+                  v-model="newColumn.meta"
+                  :column="newColumn"
+                  :meta="meta"
+                />
 
                 <v-col
                   v-if="accordion"
@@ -428,14 +434,7 @@
                                   @change="onDataTypeChange"
                                 />
                               </v-col>
-
+                              <v-col :cols="sqlUi.showScale(newColumn) && !isSelect ? 6 : 12">
-                              <v-col
-                                :cols="
-                                  sqlUi.showScale(newColumn) && !isSelect
-                                    ? 6
-                                    : 12
-                                "
-                              >
                                 <!--label="Length / Values"-->
                                 <v-text-field
                                   v-if="!isSelect"
@@ -572,6 +571,7 @@ import LinkedToAnotherOptions from '~/components/project/spreadsheet/components/
 import { validateColumnName } from '~/helpers'
 import RatingOptions from '~/components/project/spreadsheet/components/editColumn/RatingOptions'
 import CheckboxOptions from '~/components/project/spreadsheet/components/editColumn/CheckboxOptions'
+import CurrencyOptions from '@/components/project/spreadsheet/components/editColumn/CurrencyOptions'
 
 const columnToValidate = [UITypes.Email, UITypes.URL, UITypes.PhoneNumber]
 
@@ -586,7 +586,8 @@ export default {
     LinkedToAnotherOptions,
     DlgLabelSubmitCancel,
     RelationOptions,
-    CustomSelectOptions
+    CustomSelectOptions,
+    CurrencyOptions
   },
   props: {
     nodes: Object,
@@ -678,6 +679,9 @@ export default {
     },
     isVirtual() {
       return this.isLinkToAnotherRecord || this.isLookup || this.isRollup
+    },
+    isCurrency() {
+      return this.newColumn && this.newColumn.uidt === UITypes.Currency
     }
   },
   watch: {
@@ -803,6 +807,16 @@ export default {
         this.newColumn.dtxp = this.column.dtxp
       }
 
+      if (this.isCurrency) {
+        if (this.column?.uidt === UITypes.Currency) {
+          this.newColumn.dtxp = this.column.dtxp
+          this.newColumn.dtxs = this.column.dtxs
+        } else {
+          this.newColumn.dtxp = 19
+          this.newColumn.dtxs = 2
+        }
+      }
+
       // this.$set(this.newColumn, 'uidt', this.sqlUi.getUIType(this.newColumn));
 
       this.newColumn.altered = this.newColumn.altered || 2
@@ -843,6 +857,16 @@ export default {
         }
       }
 
+      if (this.isCurrency) {
+        if (this.column?.uidt === UITypes.Currency) {
+          this.newColumn.dtxp = this.column.dtxp
+          this.newColumn.dtxs = this.column.dtxs
+        } else {
+          this.newColumn.dtxp = 19
+          this.newColumn.dtxs = 2
+        }
+      }
+
       this.newColumn.altered = this.newColumn.altered || 2
     },
     focusInput() {

packages/nc-gui/components/project/spreadsheet/components/SpreadsheetNavDrawer.vue

@@ -678,7 +678,8 @@ export default {
         'URL',
         'DateTime',
         'CreateTime',
-        'LastModifiedTime'
+        'LastModifiedTime',
+        'Currency'
       ].includes(col.uidt)
     },
     onPasswordProtectChange() {

packages/nc-gui/components/project/spreadsheet/components/cell/CurrencyCell.vue

@@ -0,0 +1,37 @@
+<template>
+  <a v-if="value">{{ currency }}</a>
+  <span v-else />
+</template>
+
+<script>
+export default {
+  name: 'CurrencyCell',
+  props: {
+    column: Object,
+    value: [String, Number]
+  },
+  computed: {
+    currency() {
+      try {
+        return new Intl.NumberFormat(this.currencyMeta.currency_locale || 'en-US',
+          { style: 'currency', currency: this.currencyMeta.currency_code || 'USD' }).format(this.value)
+      } catch (e) {
+        return this.value
+      }
+    },
+    currencyMeta() {
+      return {
+        currency_locale: 'en-US',
+        currency_code: 'USD',
+        ...(this.column && this.column.meta
+          ? this.column.meta
+          : {})
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

packages/nc-gui/components/project/spreadsheet/components/editColumn/CurrencyOptions.vue

@@ -0,0 +1,73 @@
+<template>
+  <v-row class="currency-wrapper">
+    <v-col cols="6">
+      <!--label="Format Locale"-->
+      <v-autocomplete
+        v-model="colMeta.currency_locale"
+        dense
+        class="caption"
+        label="Currency Locale"
+        :rules="[isValidCurrencyLocale]"
+        :items="currencyLocaleList"
+        outlined
+        hide-details
+      />
+    </v-col>
+    <v-col cols="6">
+      <!--label="Currency Code"-->
+      <v-autocomplete
+        v-model="colMeta.currency_code"
+        dense
+        class="caption"
+        label="Currency Code"
+        :rules="[isValidCurrencyCode]"
+        :items="currencyList"
+        outlined
+        hide-details
+      />
+    </v-col>
+  </v-row>
+</template>
+
+<script>
+import { currencyCodes, currencyLocales, validateCurrencyCode, validateCurrencyLocale } from '~/helpers/currencyHelper'
+
+export default {
+  name: 'CurrencyOptions',
+  props: ['column', 'meta', 'value'],
+  data: () => ({
+    colMeta: {
+      currency_locale: 'en-US',
+      currency_code: 'USD'
+    },
+    currencyList: currencyCodes,
+    currencyLocaleList: currencyLocales(),
+    isValidCurrencyLocale: (value) => {
+      return validateCurrencyLocale(value) || 'Invalid locale'
+    },
+    isValidCurrencyCode: (value) => {
+      return validateCurrencyCode(value) || 'Invalid Currency Code'
+    }
+  }),
+  watch: {
+    value() {
+      this.colMeta = this.value || {}
+    },
+    colMeta(v) {
+      this.$emit('input', v)
+    }
+  },
+  created() {
+    this.colMeta = { ...this.value } || { ...this.colMeta }
+  }
+}
+</script>
+
+<style scoped>
+.currency-wrapper {
+  margin: 0;
+}
+/deep/ .v-input__append-inner {
+  margin-top: 4px !important;
+}
+</style>

packages/nc-gui/components/project/spreadsheet/mixins/cell.js

@@ -66,7 +66,7 @@ export default {
       return this.uiDatatype === UITypes.Rating
     },
     isCurrency() {
-      return this.column.uidt == 'Currency'
+      return this.uiDatatype === 'Currency'
     }
 
   }

packages/nc-gui/components/project/spreadsheet/views/GridView.vue

@@ -571,7 +571,8 @@ export default {
         'URL',
         'DateTime',
         'CreateTime',
-        'LastModifiedTime'
+        'LastModifiedTime',
+        'Currency'
       ].includes(col.uidt)
     },
     async xcAuditModelCommentsCount() {

packages/nc-gui/helpers/currencyHelper.js

@@ -0,0 +1,82 @@
+import locale from 'locale-codes'
+
+export const currencyCodes = [
+  'AED', 'AFN', 'ALL', 'AMD', 'ANG', 'AOA', 'ARS', 'AUD',
+  'AWG', 'AZN', 'BAM', 'BBD', 'BDT', 'BGN', 'BHD', 'BIF',
+  'BMD', 'BND', 'BOB', 'BOV', 'BRL', 'BSD', 'BTN', 'BWP',
+  'BYR', 'BZD', 'CAD', 'CDF', 'CHE', 'CHF', 'CHW', 'CLF',
+  'CLP', 'CNY', 'COP', 'COU', 'CRC', 'CUP', 'CVE', 'CYP',
+  'CZK', 'DJF', 'DKK', 'DOP', 'DZD', 'EEK', 'EGP', 'ERN',
+  'ETB', 'EUR', 'FJD', 'FKP', 'GBP', 'GEL', 'GHC', 'GIP',
+  'GMD', 'GNF', 'GTQ', 'GYD', 'HKD', 'HNL', 'HRK', 'HTG',
+  'HUF', 'IDR', 'ILS', 'INR', 'IQD', 'IRR', 'ISK', 'JMD',
+  'JOD', 'JPY', 'KES', 'KGS', 'KHR', 'KMF', 'KPW', 'KRW',
+  'KWD', 'KYD', 'KZT', 'LAK', 'LBP', 'LKR', 'LRD', 'LSL',
+  'LTL', 'LVL', 'LYD', 'MAD', 'MDL', 'MGA', 'MKD', 'MMK',
+  'MNT', 'MOP', 'MRO', 'MTL', 'MUR', 'MVR', 'MWK', 'MXN',
+  'MXV', 'MYR', 'MZN', 'NAD', 'NGN', 'NIO', 'NOK', 'NPR',
+  'NZD', 'OMR', 'PAB', 'PEN', 'PGK', 'PHP', 'PKR', 'PLN',
+  'PYG', 'QAR', 'ROL', 'RON', 'RSD', 'RUB', 'RWF', 'SAR',
+  'SBD', 'SCR', 'SDD', 'SEK', 'SGD', 'SHP', 'SIT', 'SKK',
+  'SLL', 'SOS', 'SRD', 'STD', 'SYP', 'SZL', 'THB', 'TJS',
+  'TMM', 'TND', 'TOP', 'TRY', 'TTD', 'TWD', 'TZS', 'UAH',
+  'UGX', 'USD', 'USN', 'USS', 'UYU', 'UZS', 'VEB', 'VND',
+  'VUV', 'WST', 'XAF', 'XAG', 'XAU', 'XBA', 'XBB', 'XBC',
+  'XBD', 'XCD', 'XDR', 'XFO', 'XFU', 'XOF', 'XPD', 'XPF',
+  'XPT', 'XTS', 'XXX', 'YER', 'ZAR', 'ZMK', 'ZWD'
+]
+
+export function validateCurrencyCode(v) {
+  return currencyCodes.includes(v)
+}
+
+export function currencyLocales() {
+  const localeList = locale.all
+    .filter((l) => {
+      try {
+        if (Intl.NumberFormat.supportedLocalesOf(l.tag).length > 0) {
+          return true
+        }
+        return false
+      } catch (e) {
+        return false
+      }
+    })
+    .map((l) => {
+      return {
+        text: l.name + ' (' + l.tag + ')',
+        value: l.tag
+      }
+    })
+  return localeList
+}
+
+export function validateCurrencyLocale(v) {
+  try {
+    return Intl.NumberFormat.supportedLocalesOf(v).length > 0
+  } catch (e) {
+    return false
+  }
+}
+
+/**
+ * @copyright Copyright (c) 2021, Xgene Cloud Ltd
+ *
+ * @author Mert Ersoy <mertmit99@gmail.com>
+ *
+ * @license GNU AGPL version 3 or any later version
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ *
+ */

packages/nc-gui/package.json

@@ -26,6 +26,7 @@
     "httpsnippet": "^2.0.0",
     "inflection": "^1.12.0",
     "jsep": "^1.3.6",
+    "locale-codes": "^1.3.1",
     "material-design-icons-iconfont": "^5.0.1",
     "monaco-editor": "^0.19.3",
     "monaco-themes": "^0.2.5",

packages/nocodb/src/lib/dataMapper/lib/sql/BaseModelSqlv2.ts

@@ -38,6 +38,7 @@ import {
   parseBody
 } from '../../../noco/meta/helpers/webhookHelpers';
 import Validator from 'validator';
+import { customValidators } from './customValidators';
 import { NcError } from '../../../noco/meta/helpers/catchError';
 import { customAlphabet } from 'nanoid';
 
@@ -1833,7 +1834,7 @@ class BaseModelSqlv2 {
       if (!validate) continue;
       const { func, msg } = validate;
       for (let j = 0; j < func.length; ++j) {
-        const fn = typeof func[j] === 'string' ? Validator[func[j]] : func[j];
+        const fn = typeof func[j] === 'string' ? (customValidators[func[j]] ? customValidators[func[j]] : Validator[func[j]]) : func[j];
         const arg =
           typeof func[j] === 'string' ? columns[cn] + '' : columns[cn];
         if (

packages/nocodb/src/lib/dataMapper/lib/sql/customValidators.ts

@@ -0,0 +1,5 @@
+import Validator from 'validator';
+
+export const customValidators = {
+  isCurrency: Validator['isFloat']
+}