feat: display number/decimal value according to locale format (#8626)

* feat: display number/decimal value according to locale format

* fix: thousands separator text

---------

Co-authored-by: Raju Udava <86527202+dstala@users.noreply.github.com>

packages/nc-gui/components/cell/Decimal.vue

@@ -40,6 +40,8 @@ const displayValue = computed(() => {
 
   if (isNaN(Number(_vModel.value))) return null
 
+  if (meta.value.isLocaleString) return (+Number(_vModel.value).toFixed(meta.value.precision ?? 1)).toLocaleString()
+
   return Number(_vModel.value).toFixed(meta.value.precision ?? 1)
 })
 

packages/nc-gui/components/cell/Integer.vue

@@ -28,6 +28,8 @@ const isExpandedFormOpen = inject(IsExpandedFormOpenInj, ref(false))!
 
 const isForm = inject(IsFormInj)!
 
+const column = inject(ColumnInj, null)!
+
 const _vModel = useVModel(props, 'modelValue', emits)
 
 const displayValue = computed(() => {
@@ -35,6 +37,8 @@ const displayValue = computed(() => {
 
   if (isNaN(Number(_vModel.value))) return null
 
+  if (parseProp(column.value.meta).isLocaleString) return Number(_vModel.value).toLocaleString()
+
   return Number(_vModel.value)
 })
 

packages/nc-gui/components/smartsheet/column/DecimalOptions.vue

@@ -22,12 +22,12 @@ const precisionFormatsDisplay = {
 
 const vModel = useVModel(props, 'value', emit)
 
-onMounted(() => {
-  if (!vModel.value.meta?.precision) {
-    if (!vModel.value.meta) vModel.value.meta = {}
-    vModel.value.meta.precision = precisionFormats[0]
-  }
-})
+// set default value
+vModel.value.meta = {
+  precision: precisionFormats[0],
+  isLocaleString: false,
+  ...(vModel.value.meta || {}),
+}
 
 // update datatype precision when precision is less than the new value
 // avoid downgrading precision if the new value is less than the current precision
@@ -61,4 +61,12 @@ const onPrecisionChange = (value: number) => {
       </a-select-option>
     </a-select>
   </a-form-item>
+
+  <a-form-item>
+    <div class="flex items-center gap-1">
+      <NcSwitch v-if="vModel.meta" v-model:checked="vModel.meta.isLocaleString">
+        <div class="text-sm text-gray-800 select-none">{{ $t('labels.showThousandsSeparator') }}</div>
+      </NcSwitch>
+    </div>
+  </a-form-item>
 </template>

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

@@ -379,6 +379,7 @@ const submitBtnLabel = computed(() => {
         <LazySmartsheetColumnLookupOptions v-if="formState.uidt === UITypes.Lookup" v-model:value="formState" />
         <LazySmartsheetColumnDateOptions v-if="formState.uidt === UITypes.Date" v-model:value="formState" />
         <LazySmartsheetColumnTimeOptions v-if="formState.uidt === UITypes.Time" v-model:value="formState" />
+        <LazySmartsheetColumnNumberOptions v-if="formState.uidt === UITypes.Number" v-model:value="formState" />
         <LazySmartsheetColumnDecimalOptions v-if="formState.uidt === UITypes.Decimal" v-model:value="formState" />
         <LazySmartsheetColumnDateTimeOptions
           v-if="[UITypes.DateTime, UITypes.CreatedTime, UITypes.LastModifiedTime].includes(formState.uidt)"

packages/nc-gui/components/smartsheet/column/NumberOptions.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+const props = defineProps<{
+  value: any
+}>()
+
+const emit = defineEmits(['update:value'])
+
+const vModel = useVModel(props, 'value', emit)
+
+// set default value
+vModel.value.meta = {
+  isLocaleString: false,
+  ...(vModel.value.meta || {}),
+}
+</script>
+
+<template>
+  <a-form-item>
+    <div class="flex items-center gap-1">
+      <NcSwitch v-if="vModel.meta" v-model:checked="vModel.meta.isLocaleString">
+        <div class="text-sm text-gray-800 select-none">{{ $t('labels.showThousandsSeparator') }}</div>
+      </NcSwitch>
+    </div>
+  </a-form-item>
+</template>

packages/nc-gui/lang/en.json

@@ -774,6 +774,7 @@
     "clearSelection": "Clear selection",
     "displayAsProgress": "Display as progress",
     "relationType": "Relation type",
+    "showThousandsSeparator":"Show thousands separator",
     "signUpForFree": "Sign up for free"
   },
   "activity": {