Browse Source

Merge pull request #2963 from nocodb/feat/gui-v2-currency-column

feat(gui-v2): currency column
pull/2982/head
աɨռɢӄաօռɢ 2 years ago committed by GitHub
parent
commit
02796b21da
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
  1. 3
      packages/nc-gui-v2/components/smartsheet-column/AdvancedOptions.vue
  2. 100
      packages/nc-gui-v2/components/smartsheet-column/CurrencyOptions.vue
  3. 2
      packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue
  4. 60
      packages/nc-gui-v2/package-lock.json
  5. 1
      packages/nc-gui-v2/package.json
  6. 220
      packages/nc-gui-v2/utils/currencyUtils.ts
  7. 1
      packages/nc-gui-v2/utils/index.ts

3
packages/nc-gui-v2/components/smartsheet-column/AdvancedOptions.vue

@ -5,9 +5,6 @@ const { formState, validateInfos, setAdditionalValidations, sqlUi, onDataTypeCha
const dataTypes = computed(() => sqlUi?.value?.getDataTypeListForUiType(formState))
// set additional validations
setAdditionalValidations({})
// to avoid type error with checkbox
formState.value.rqd = !!formState.value.rqd
formState.value.pk = !!formState.value.pk

100
packages/nc-gui-v2/components/smartsheet-column/CurrencyOptions.vue

@ -0,0 +1,100 @@
<script setup lang="ts">
import { useColumnCreateStoreOrThrow, useProject } from '#imports'
import { currencyCodes, currencyLocales, validateCurrencyCode, validateCurrencyLocale } from '@/utils'
interface Option {
label: string
value: string
}
const { formState, validateInfos, setAdditionalValidations, sqlUi, onDataTypeChange, onAlter } = useColumnCreateStoreOrThrow()
const validators = {
'meta.currency_locale': [
{
validator: (_: any, locale: any) => {
return new Promise<void>((resolve, reject) => {
if (!validateCurrencyLocale(locale)) {
return reject(new Error('Invalid locale'))
}
resolve()
})
},
},
],
'meta.currency_code': [
{
validator: (_: any, currencyCode: any) => {
return new Promise<void>((resolve, reject) => {
if (!validateCurrencyCode(currencyCode)) {
return reject(new Error('Invalid Currency Code'))
}
resolve()
})
},
},
],
}
// set additional validations
setAdditionalValidations({
...validators,
})
const { isPg } = useProject()
const currencyList = currencyCodes || []
const currencyLocaleList = currencyLocales() || []
const isMoney = computed(() => formState.value.dt === 'money')
const message = computed(() => {
if (isMoney.value && isPg) return "PostgreSQL 'money' type has own currency settings"
return ''
})
function filterOption(input: string, option: Option) {
return option.value.toUpperCase().includes(input.toUpperCase())
}
</script>
<template>
<a-row>
<a-col :span="12">
<a-form-item v-bind="validateInfos['meta.currency_locale']" label="Currency Locale">
<a-select
v-model:value="formState.meta.currency_locale"
size="small"
class="w-52"
show-search
:filter-option="filterOption"
:disabled="isMoney && isPg"
>
<a-select-option v-for="(currencyLocale, i) of currencyLocaleList" :key="i" :value="currencyLocale.value">
{{ currencyLocale.text }}
</a-select-option>
</a-select>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item v-bind="validateInfos['meta.currency_code']" label="Currency Code">
<a-select
v-model:value="formState.meta.currency_code"
class="w-52"
show-search
:filter-option="filterOption"
size="small"
:disabled="isMoney && isPg"
>
<a-select-option v-for="(currencyCode, i) of currencyList" :key="i" :value="currencyCode">
{{ currencyCode }}
</a-select-option>
</a-select>
</a-form-item>
</a-col>
<a-col v-if="isMoney && isPg">
<span class="text-[#FB8C00]">{{ message }}</span>
</a-col>
</a-row>
</template>

2
packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue

@ -87,6 +87,8 @@ watchEffect(() => {
</a-select>
</a-form-item>
<SmartsheetColumnCurrencyOptions v-if="formState.uidt === UITypes.Currency" />
<div>
<div
class="text-xs cursor-pointer text-grey nc-more-options my-2 flex align-center gap-1 justify-end"

60
packages/nc-gui-v2/package-lock.json generated

@ -11,6 +11,7 @@
"dayjs": "^1.11.3",
"file-saver": "^2.0.5",
"jwt-decode": "^3.1.2",
"locale-codes": "^1.3.1",
"monaco-editor": "^0.33.0",
"nocodb-sdk": "file:../nocodb-sdk",
"papaparse": "^5.3.2",
@ -8554,6 +8555,14 @@
"integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
"dev": true
},
"node_modules/iso639-codes": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/iso639-codes/-/iso639-codes-1.0.1.tgz",
"integrity": "sha512-jdTSv8yn6D7GODDrRtuWG7y3du3aoa+ki5H8h/Y48/NleNAd7Fw/M2niTTLXGH4QnqhJ98hg1JMQtP9csQ31Lg==",
"engines": {
"node": ">=8"
}
},
"node_modules/jest-worker": {
"version": "26.6.2",
"resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-26.6.2.tgz",
@ -8801,6 +8810,11 @@
"integrity": "sha512-lxpCM3HTvquGxKGzHeknB/sUjuVoUElLlfYnXZT73K8geR9jQbroGlSCFBax9/0mpGoD3kzcMLnOlGQPJJNyqQ==",
"dev": true
},
"node_modules/langs": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/langs/-/langs-2.0.0.tgz",
"integrity": "sha512-v4pxOBEQVN1WBTfB1crhTtxzNLZU9HPWgadlwzWKISJtt6Ku/CnpBrwVy+jFv8StjxsPfwPFzO0CMwdZLJ0/BA=="
},
"node_modules/lazystream": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/lazystream/-/lazystream-1.0.1.tgz",
@ -9001,6 +9015,19 @@
"url": "https://github.com/sponsors/antfu"
}
},
"node_modules/locale-codes": {
"version": "1.3.1",
"resolved": "https://registry.npmjs.org/locale-codes/-/locale-codes-1.3.1.tgz",
"integrity": "sha512-C7fxGkU4jAuHqavtKj4IhSD2yPEzChFMRfNHjzwIAz9JTbYHtBJDcQQgmJDezBogk9/vvgS7chKMhpVEKavk5A==",
"dependencies": {
"iso639-codes": "^1.0.1",
"langs": "^2.0.0",
"windows-locale": "^1.1.0"
},
"engines": {
"node": ">=8"
}
},
"node_modules/locate-path": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/locate-path/-/locate-path-2.0.0.tgz",
@ -14214,6 +14241,14 @@
"integrity": "sha512-sTitTPYnn23esFR3RlqYBWn4c45WGeLcsKzQiUpXJAyfcWkolvlYpV8FLo7JishK946oQwMFUCHXQ9AjGPKExw==",
"dev": true
},
"node_modules/windows-locale": {
"version": "1.1.3",
"resolved": "https://registry.npmjs.org/windows-locale/-/windows-locale-1.1.3.tgz",
"integrity": "sha512-0OlMOPNGj7GTB6C7WmqS3o4eydjnoYj0uwot2KJf7E0JUucwYwzkcvCWQwnuOV60WqDMeGJpSankgveNMj5r0g==",
"engines": {
"node": ">=v10.24.1"
}
},
"node_modules/wmf": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/wmf/-/wmf-1.0.2.tgz",
@ -20699,6 +20734,11 @@
"integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
"dev": true
},
"iso639-codes": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/iso639-codes/-/iso639-codes-1.0.1.tgz",
"integrity": "sha512-jdTSv8yn6D7GODDrRtuWG7y3du3aoa+ki5H8h/Y48/NleNAd7Fw/M2niTTLXGH4QnqhJ98hg1JMQtP9csQ31Lg=="
},
"jest-worker": {
"version": "26.6.2",
"resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-26.6.2.tgz",
@ -20893,6 +20933,11 @@
"integrity": "sha512-lxpCM3HTvquGxKGzHeknB/sUjuVoUElLlfYnXZT73K8geR9jQbroGlSCFBax9/0mpGoD3kzcMLnOlGQPJJNyqQ==",
"dev": true
},
"langs": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/langs/-/langs-2.0.0.tgz",
"integrity": "sha512-v4pxOBEQVN1WBTfB1crhTtxzNLZU9HPWgadlwzWKISJtt6Ku/CnpBrwVy+jFv8StjxsPfwPFzO0CMwdZLJ0/BA=="
},
"lazystream": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/lazystream/-/lazystream-1.0.1.tgz",
@ -21050,6 +21095,16 @@
"integrity": "sha512-lL87ytIGP2FU5PWwNDo0w3WhIo2gopIAxPg9RxDYF7m4rr5ahuZxP22xnJHIvaLTe4Z9P6uKKY2UHiwyB4pcrw==",
"dev": true
},
"locale-codes": {
"version": "1.3.1",
"resolved": "https://registry.npmjs.org/locale-codes/-/locale-codes-1.3.1.tgz",
"integrity": "sha512-C7fxGkU4jAuHqavtKj4IhSD2yPEzChFMRfNHjzwIAz9JTbYHtBJDcQQgmJDezBogk9/vvgS7chKMhpVEKavk5A==",
"requires": {
"iso639-codes": "^1.0.1",
"langs": "^2.0.0",
"windows-locale": "^1.1.0"
}
},
"locate-path": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/locate-path/-/locate-path-2.0.0.tgz",
@ -24944,6 +24999,11 @@
}
}
},
"windows-locale": {
"version": "1.1.3",
"resolved": "https://registry.npmjs.org/windows-locale/-/windows-locale-1.1.3.tgz",
"integrity": "sha512-0OlMOPNGj7GTB6C7WmqS3o4eydjnoYj0uwot2KJf7E0JUucwYwzkcvCWQwnuOV60WqDMeGJpSankgveNMj5r0g=="
},
"wmf": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/wmf/-/wmf-1.0.2.tgz",

1
packages/nc-gui-v2/package.json

@ -17,6 +17,7 @@
"dayjs": "^1.11.3",
"file-saver": "^2.0.5",
"jwt-decode": "^3.1.2",
"locale-codes": "^1.3.1",
"monaco-editor": "^0.33.0",
"nocodb-sdk": "file:../nocodb-sdk",
"papaparse": "^5.3.2",

220
packages/nc-gui-v2/utils/currencyUtils.ts

@ -0,0 +1,220 @@
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: string) {
return currencyCodes.includes(v)
}
export function currencyLocales() {
const localeList = locale.all
.filter((l: Record<string, any>) => {
try {
if (Intl.NumberFormat.supportedLocalesOf(l.tag).length > 0) {
return true
}
return false
} catch (e) {
return false
}
})
.map((l: Record<string, any>) => {
return {
text: `${l.name} (${l.tag})`,
value: l.tag,
}
})
return localeList
}
export function validateCurrencyLocale(v: string) {
try {
return Intl.NumberFormat.supportedLocalesOf(v).length > 0
} catch (e) {
return false
}
}

1
packages/nc-gui-v2/utils/index.ts

@ -10,3 +10,4 @@ export * from './projectCreateUtils'
export * from './urlUtils'
export * from './validation'
export * from './viewUtils'
export * from './currencyUtils'

Loading…
Cancel
Save