feat(gui-v2): add validators, locale & currency code dropdown

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

@@ -9,35 +9,51 @@ interface Option {
 
 const { formState, validateInfos, setAdditionalValidations, sqlUi, onDataTypeChange, onAlter } = useColumnCreateStoreOrThrow()
 
+const validators = computed(() => {
+  return {
+    '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) => {
+            console.log("currencyCode=" + currencyCode)
+            if (!validateCurrencyCode(currencyCode)) {
+              return reject(new Error('Invalid Currency Code'))
+            }
+            resolve()
+          })
+        },
+      },
+    ],
+  }
+})
+
 // set additional validations
 setAdditionalValidations({
-  'meta.currency_locale': [isValidCurrencyLocale],
+  ...validators.value,
-  'meta.currency_code': [isValidCurrencyCode],
 })
 
 const { isPg } = useProject()
 
-const colMeta = ref({
-  currency_locale: 'en-US',
-  currency_code: 'USD',
-})
-
 const currencyList = ref(currencyCodes)
 
 const currencyLocaleList = ref(currencyLocales())
 
-function isValidCurrencyLocale(locale: string) {
-  return validateCurrencyLocale(locale) || 'Invalid locale'
-}
-
-function isValidCurrencyCode(currencyCode: string) {
-  return validateCurrencyLocale(currencyCode) || 'Invalid Currency Code'
-}
-
 const isMoney = computed(() => formState.value.dt === 'money')
 
 const message = computed(() => {
-  if (isMoney && isPg) return "PostgreSQL 'money' type has own currency settings"
+  if (isMoney.value && isPg) return "PostgreSQL 'money' type has own currency settings"
   return ''
 })
 
@@ -53,27 +69,23 @@ function filterOption(input: string, option: Option) {
     </template>
     <a-row>
       <a-col :span="12">
-        <!--label="Currency Locale"-->
+        <a-form-item v-bind="validateInfos['meta.currency_locale']">
-        <a-form-item v-bind="validateInfos.meta.currency_locale">
           <a-select
             v-model:value="formState.meta.currency_locale"
             class="w-52"
             show-search
-            :options="currencyLocaleList"
+            :options="currencyLocaleList ?? []"
             :filter-option="filterOption"
           />
         </a-form-item>
       </a-col>
       <a-col :span="12">
-        <!--label="Currency Code"-->
+        <a-form-item v-bind="validateInfos['meta.currency_code']">
-        <a-form-item v-bind="validateInfos.meta.currency_code">
+          <a-select v-model:value="formState.meta.currency_code" class="w-52" show-search :filter-option="filterOption">
-          <a-select
+            <a-select-option v-for="(currencyCode, i) in currencyList ?? []" :key="i" :value="currencyCode">
-            v-model:value="formState.meta.currency_code"
+              {{ currencyCode }}
-            class="w-52"
+            </a-select-option>
-            show-search
+          </a-select>
-            :options="currencyList"
-            :filter-option="filterOption"
-          />
         </a-form-item>
       </a-col>
     </a-row>