Browse Source

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>
feat/0523-export-schema
mertmit 3 years ago committed by Raju Udava
parent
commit
1631594aaf
  1. 4
      packages/nc-gui/components/project/spreadsheet/components/Cell.vue
  2. 42
      packages/nc-gui/components/project/spreadsheet/components/EditColumn.vue
  3. 3
      packages/nc-gui/components/project/spreadsheet/components/SpreadsheetNavDrawer.vue
  4. 37
      packages/nc-gui/components/project/spreadsheet/components/cell/CurrencyCell.vue
  5. 73
      packages/nc-gui/components/project/spreadsheet/components/editColumn/CurrencyOptions.vue
  6. 2
      packages/nc-gui/components/project/spreadsheet/mixins/cell.js
  7. 3
      packages/nc-gui/components/project/spreadsheet/views/GridView.vue
  8. 82
      packages/nc-gui/helpers/currencyHelper.js
  9. 1
      packages/nc-gui/package.json
  10. 3
      packages/nocodb/src/lib/dataMapper/lib/sql/BaseModelSqlv2.ts
  11. 5
      packages/nocodb/src/lib/dataMapper/lib/sql/customValidators.ts

4
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: {

42
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() {

3
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() {

37
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>

73
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>

2
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'
}
}

3
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() {

82
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/>.
*
*/

1
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",

3
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 (

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

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