fix: avoid marking updated on select (#8741)

* fix: avoid marking updated on select

* fix: handle null/undefined meta

* fix: use local meta for field details

* fix: avoid creating options on update

* fix: improve readability

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

@@ -33,7 +33,7 @@ vModel.value.meta = {
     // allow all mime types by default
     supportedAttachmentMimeTypes: ['*'],
   }),
-  ...vModel.value.meta,
+  ...(vModel.value.meta || {}),
 }
 
 const expandedKeys = ref<(string | number)[]>([])

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { ColumnType, UITypes } from 'nocodb-sdk'
+import { type ColumnType, UITypes } from 'nocodb-sdk'
 import { AllowedColumnTypesForQrAndBarcodes, isVirtualCol } from 'nocodb-sdk'
 
 const props = defineProps<{
@@ -29,25 +29,11 @@ const columnsAllowedAsBarcodeValue = computed<ColumnType[]>(() => {
   )
 })
 
-const supportedBarcodeFormats = [
-  { value: 'CODE128', label: 'CODE128' },
-  { value: 'upc', label: 'UPC' },
-  { value: 'EAN13', label: 'EAN-13' },
-  { value: 'EAN8', label: 'EAN-8' },
-  { value: 'EAN5', label: 'EAN-5' },
-  { value: 'EAN2', label: 'EAN-2' },
-  { value: 'CODE39', label: 'CODE39' },
-  { value: 'ITF14', label: 'ITF-14' },
-  { value: 'MSI', label: 'MSI' },
-  { value: 'PHARMACODE', label: 'PHARMACODE' },
-  { value: 'CODABAR', label: 'CODABAR' },
-]
-
 onMounted(() => {
   // set default value
   vModel.value.meta = {
-    barcodeFormat: supportedBarcodeFormats[0].value,
-    ...vModel.value.meta,
+    ...columnDefaultMeta[UITypes.Barcode],
+    ...(vModel.value.meta || {}),
   }
   vModel.value.fk_barcode_value_column_id =
     (column?.value?.colOptions as Record<string, any>)?.fk_barcode_value_column_id || columnsAllowedAsBarcodeValue.value?.[0]?.id

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

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { UITypes } from 'nocodb-sdk'
+
 const props = defineProps<{
   value: any
 }>()
@@ -50,12 +52,8 @@ const isOpenColorPicker = ref(false)
 
 // set default value
 vModel.value.meta = {
-  icon: {
-    checked: 'mdi-check-bold',
-    unchecked: 'mdi-crop-square',
-  },
-  color: '#777',
-  ...vModel.value.meta,
+  ...columnDefaultMeta[UITypes.Checkbox],
+  ...(vModel.value.meta || {}),
 }
 
 // antdv doesn't support object as value

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

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { UITypes } from 'nocodb-sdk'
+
 interface Option {
   label: string
   value: string
@@ -64,9 +66,8 @@ function filterOption(input: string, option: Option) {
 
 // set default value
 vModel.value.meta = {
-  currency_locale: 'en-US',
-  currency_code: 'USD',
-  ...vModel.value.meta,
+  ...columnDefaultMeta[UITypes.Currency],
+  ...(vModel.value.meta || {}),
 }
 
 currencyLocales().then((locales) => {

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { dateFormats, dateMonthFormats } from 'nocodb-sdk'
+import { UITypes, dateFormats, dateMonthFormats } from 'nocodb-sdk'
 
 const props = defineProps<{
   value: any
@@ -9,9 +9,10 @@ const emit = defineEmits(['update:value'])
 
 const vModel = useVModel(props, 'value', emit)
 
-if (!vModel.value.meta?.date_format) {
-  if (!vModel.value.meta) vModel.value.meta = {}
-  vModel.value.meta.date_format = dateFormats[0]
+// set default value
+vModel.value.meta = {
+  ...columnDefaultMeta[UITypes.Date],
+  ...(vModel.value.meta || {}),
 }
 </script>
 

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { dateFormats, timeFormats } from 'nocodb-sdk'
+import { UITypes, dateFormats, timeFormats } from 'nocodb-sdk'
 
 const props = defineProps<{
   value: any
@@ -9,18 +9,10 @@ const emit = defineEmits(['update:value'])
 
 const vModel = useVModel(props, 'value', emit)
 
-if (!vModel.value.meta?.date_format) {
-  if (!vModel.value.meta) vModel.value.meta = {}
-  vModel.value.meta.date_format = dateFormats[0]
-}
-
-if (!vModel.value.meta?.time_format) {
-  if (!vModel.value.meta) vModel.value.meta = {}
-  vModel.value.meta.time_format = timeFormats[0]
-}
-if (vModel.value.meta?.is12hrFormat === undefined) {
-  if (!vModel.value.meta) vModel.value.meta = {}
-  vModel.value.meta.is12hrFormat = false
+// set default value
+vModel.value.meta = {
+  ...columnDefaultMeta[UITypes.DateTime],
+  ...(vModel.value.meta || {}),
 }
 </script>
 

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

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { UITypes } from 'nocodb-sdk'
+
 const props = defineProps<{
   value: any
 }>()
@@ -24,8 +26,7 @@ const vModel = useVModel(props, 'value', emit)
 
 // set default value
 vModel.value.meta = {
-  precision: precisionFormats[0],
-  isLocaleString: false,
+  ...columnDefaultMeta[UITypes.Decimal],
   ...(vModel.value.meta || {}),
 }
 

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

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { UITypes } from 'nocodb-sdk'
+
 const props = defineProps<{
   value: any
 }>()
@@ -16,8 +18,8 @@ const durationOptionList =
 
 // set default value
 vModel.value.meta = {
-  duration: 0,
-  ...vModel.value.meta,
+  ...columnDefaultMeta[UITypes.Duration],
+  ...(vModel.value.meta || {}),
 }
 </script>
 

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

@@ -44,7 +44,7 @@ setAdditionalValidations({
 vModel.value.meta = {
   singular: '',
   plural: '',
-  ...vModel.value.meta,
+  ...(vModel.value.meta || {}),
 }
 </script>
 

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

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { UITypes } from 'nocodb-sdk'
+
 const props = defineProps<{
   value: any
 }>()
@@ -9,7 +11,7 @@ const vModel = useVModel(props, 'value', emit)
 
 // set default value
 vModel.value.meta = {
-  isLocaleString: false,
+  ...columnDefaultMeta[UITypes.Number],
   ...(vModel.value.meta || {}),
 }
 </script>

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

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { UITypes } from 'nocodb-sdk'
+
 const props = defineProps<{
   value: any
   isEdit?: boolean
@@ -18,8 +20,8 @@ setAdditionalValidations({
 
 // set default value
 vModel.value.meta = {
-  is_progress: false,
-  ...vModel.value.meta,
+  ...columnDefaultMeta[UITypes.Percent],
+  ...(vModel.value.meta || {}),
 }
 </script>
 

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

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { UITypes } from 'nocodb-sdk'
+
 const props = defineProps<{
   value: any
 }>()
@@ -7,30 +9,6 @@ const emit = defineEmits(['update:value'])
 
 const vModel = useVModel(props, 'value', emit)
 
-// cater existing v1 cases
-const iconList = [
-  {
-    full: 'mdi-star',
-    empty: 'mdi-star-outline',
-  },
-  {
-    full: 'mdi-heart',
-    empty: 'mdi-heart-outline',
-  },
-  {
-    full: 'mdi-moon-full',
-    empty: 'mdi-moon-new',
-  },
-  {
-    full: 'mdi-thumb-up',
-    empty: 'mdi-thumb-up-outline',
-  },
-  {
-    full: 'mdi-flag',
-    empty: 'mdi-flag-outline',
-  },
-]
-
 const picked = computed({
   get: () => vModel.value.meta.color,
   set: (val) => {
@@ -42,14 +20,8 @@ const isOpenColorPicker = ref(false)
 
 // set default value
 vModel.value.meta = {
-  iconIdx: 0,
-  icon: {
-    full: 'mdi-star',
-    empty: 'mdi-star-outline',
-  },
-  color: '#fcb401',
-  max: 5,
-  ...vModel.value.meta,
+  ...columnDefaultMeta[UITypes.Rating],
+  ...(vModel.value.meta || {}),
 }
 
 // antdv doesn't support object as value

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

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { UITypes } from 'nocodb-sdk'
+
 const props = defineProps<{
   value: any
 }>()
@@ -9,7 +11,7 @@ const vModel = useVModel(props, 'value', emit)
 
 // set default value
 vModel.value.meta = {
-  is12hrFormat: false,
+  ...columnDefaultMeta[UITypes.Time],
   ...(vModel.value.meta ?? {}),
 }
 </script>

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

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { UITypes } from 'nocodb-sdk'
+
 const props = defineProps<{
   value: any
   isEdit: boolean
@@ -22,9 +24,8 @@ setAdditionalValidations({
 
 // set default value
 vModel.value.meta = {
-  is_multi: false,
-  notify: false,
-  ...vModel.value.meta,
+  ...columnDefaultMeta[UITypes.User],
+  ...(vModel.value.meta || {}),
 }
 
 onMounted(() => {

packages/nc-gui/components/smartsheet/details/Fields.vue

@@ -46,6 +46,8 @@ const isLocked = inject(IsLockedInj, ref(false))
 
 const { openedViewsTab } = storeToRefs(useViewsStore())
 
+const localMetaColumns = ref<ColumnType[] | undefined>([])
+
 const moveOps = ref<moveOp[]>([])
 
 const visibilityOps = ref<fieldsVisibilityOps[]>([])
@@ -99,7 +101,7 @@ const getFieldOrder = (field?: TableExplorerColumn) => {
 
 const fields = computed<TableExplorerColumn[]>({
   get: () => {
-    const x = ((meta.value?.columns as ColumnType[]) ?? [])
+    const x = ((localMetaColumns.value as ColumnType[]) ?? [])
       .filter((field) => !field.fk_column_id && !isSystemColumn(field))
       .concat(newFields.value)
       .map((field) => updateDefaultColumnValues(field))
@@ -109,7 +111,7 @@ const fields = computed<TableExplorerColumn[]>({
     return x
   },
   set: (val) => {
-    meta.value!.columns = meta.value?.columns?.map((col) => {
+    localMetaColumns.value = localMetaColumns.value?.map((col) => {
       const field = val.find((f) => compareCols(f, col))
       if (field) {
         return field
@@ -217,15 +219,15 @@ const addField = (field?: TableExplorerColumn, before = false) => {
 }
 
 const displayColumn = computed(() => {
-  if (!meta.value?.columns) return
-  return meta.value?.columns.find((col) => col.pv)
+  if (!localMetaColumns.value) return
+  return localMetaColumns.value.find((col) => col.pv)
 })
 
 const duplicateField = async (field: TableExplorerColumn) => {
-  if (!meta.value?.columns) return
+  if (!localMetaColumns.value) return
 
   // generate duplicate column name
-  const duplicateColumnName = getUniqueColumnName(`${field.title}_copy`, meta.value?.columns)
+  const duplicateColumnName = getUniqueColumnName(`${field.title}_copy`, localMetaColumns.value)
 
   let fieldPayload = {}
 
@@ -306,7 +308,12 @@ const onFieldUpdate = (state: TableExplorerColumn, skipLinkChecks = false) => {
     }
   }
 
-  const diffs = diff(col, state) as Partial<TableExplorerColumn>
+  const pdiffs: Record<string, any> = diff(col, state)
+
+  // remove undefined values
+  const diffs = Object.fromEntries(
+    Object.entries(pdiffs).filter(([_, value]) => value !== undefined),
+  ) as Partial<TableExplorerColumn>
 
   if (Object.keys(diffs).length === 0 || (Object.keys(diffs).length === 1 && 'altered' in diffs)) {
     ops.value = ops.value.filter((op) => op.op === 'add' || !compareCols(op.column, state))
@@ -604,6 +611,21 @@ const clearChanges = () => {
 
 const isColumnsValid = computed(() => fields.value.every((f) => isColumnValid(f)))
 
+const metaToLocal = () => {
+  localMetaColumns.value = meta.value?.columns?.map((c: ColumnType) => {
+    if (c.uidt && c.uidt in columnDefaultMeta) {
+      if (!c.meta) c.meta = {}
+      c.meta = {
+        ...columnDefaultMeta[c.uidt],
+        ...(c.meta || {}),
+      }
+    }
+    return {
+      ...c,
+    }
+  })
+}
+
 const saveChanges = async () => {
   if (!isColumnsValid.value) {
     message.error(t('msg.error.multiFieldSaveValidation'))
@@ -692,6 +714,9 @@ const saveChanges = async () => {
     }
 
     await getMeta(meta.value.id, true)
+
+    metaToLocal()
+
     columnsHash.value = (await $api.dbTableColumn.hash(meta.value?.id)).hash
 
     visibilityOps.value = []
@@ -841,6 +866,10 @@ onMounted(async () => {
   if (meta.value && meta.value.id) {
     columnsHash.value = (await $api.dbTableColumn.hash(meta.value.id)).hash
   }
+
+  await until(() => meta.value?.columns)
+
+  metaToLocal()
 })
 
 const onFieldOptionUpdate = () => {
@@ -874,7 +903,7 @@ watch(
     const defaultColumnName = generateUniqueColumnName({
       formState: oldField,
       tableExplorerColumns: fields.value || [],
-      metaColumns: meta.value?.columns || [],
+      metaColumns: localMetaColumns.value || [],
       newFieldTitles,
     })
 

packages/nc-gui/composables/useViewGroupBy.ts

@@ -532,6 +532,8 @@ const [useProvideViewGroupBy, useViewGroupBy] = useInjectionState(
               (c) => c.id === (nextCol?.colOptions as LookupType).fk_relation_column_id,
             )
 
+            if (!lookupRelation?.colOptions) break
+
             const relatedTableMeta = await getMeta(
               (lookupRelation?.colOptions as LinkToAnotherRecordType).fk_related_model_id as string,
             )

packages/nc-gui/helpers/columnDefaultMeta.ts

@@ -0,0 +1,119 @@
+import { UITypes, dateFormats, timeFormats } from 'nocodb-sdk'
+
+export const precisionFormats = [1, 2, 3, 4, 5, 6, 7, 8]
+
+export const iconList = [
+  {
+    full: 'mdi-star',
+    empty: 'mdi-star-outline',
+  },
+  {
+    full: 'mdi-heart',
+    empty: 'mdi-heart-outline',
+  },
+  {
+    full: 'mdi-moon-full',
+    empty: 'mdi-moon-new',
+  },
+  {
+    full: 'mdi-thumb-up',
+    empty: 'mdi-thumb-up-outline',
+  },
+  {
+    full: 'mdi-flag',
+    empty: 'mdi-flag-outline',
+  },
+]
+
+export const supportedBarcodeFormats = [
+  { value: 'CODE128', label: 'CODE128' },
+  { value: 'upc', label: 'UPC' },
+  { value: 'EAN13', label: 'EAN-13' },
+  { value: 'EAN8', label: 'EAN-8' },
+  { value: 'EAN5', label: 'EAN-5' },
+  { value: 'EAN2', label: 'EAN-2' },
+  { value: 'CODE39', label: 'CODE39' },
+  { value: 'ITF14', label: 'ITF-14' },
+  { value: 'MSI', label: 'MSI' },
+  { value: 'PHARMACODE', label: 'PHARMACODE' },
+  { value: 'CODABAR', label: 'CODABAR' },
+]
+
+const barcodeDefaultMeta = {
+  barcodeFormat: supportedBarcodeFormats[0].value,
+}
+
+const checkboxDefaultMeta = {
+  iconIdx: 0,
+  icon: {
+    checked: 'mdi-check-bold',
+    unchecked: 'mdi-crop-square',
+  },
+  color: '#777',
+}
+
+const currencyDefaultMeta = {
+  currency_locale: 'en-US',
+  currency_code: 'USD',
+}
+
+const dateDefaultMeta = {
+  date_format: dateFormats[0],
+}
+
+const dateTimeDefaultMeta = {
+  date_format: dateFormats[0],
+  time_format: timeFormats[0],
+  is12hrFormat: false,
+}
+
+const decimalDefaultMeta = {
+  precision: precisionFormats[0],
+  isLocaleString: false,
+}
+
+const durationDefaultMeta = {
+  duration: 0,
+}
+
+const numberDefaultMeta = {
+  isLocaleString: false,
+}
+
+const percentDefaultMeta = {
+  is_progress: false,
+}
+
+const ratingDefaultMeta = {
+  iconIdx: 0,
+  icon: {
+    full: 'mdi-star',
+    empty: 'mdi-star-outline',
+  },
+  color: '#fcb401',
+  max: 5,
+}
+
+const timeDefaultMeta = {
+  is12hrFormat: false,
+}
+
+const userDefaultMeta = {
+  is_multi: false,
+  notify: false,
+}
+
+export const columnDefaultMeta = {
+  [UITypes.Checkbox]: checkboxDefaultMeta,
+  [UITypes.Currency]: currencyDefaultMeta,
+  [UITypes.Date]: dateDefaultMeta,
+  [UITypes.DateTime]: dateTimeDefaultMeta,
+  [UITypes.Decimal]: decimalDefaultMeta,
+  [UITypes.Duration]: durationDefaultMeta,
+  [UITypes.Number]: numberDefaultMeta,
+  [UITypes.Percent]: percentDefaultMeta,
+  [UITypes.Rating]: ratingDefaultMeta,
+  [UITypes.Time]: timeDefaultMeta,
+  [UITypes.User]: userDefaultMeta,
+  [UITypes.Barcode]: barcodeDefaultMeta,
+}

packages/nocodb/src/services/columns.service.ts

@@ -542,7 +542,7 @@ export class ColumnsService {
             },
           );
 
-          if (data.length) {
+          if (data.length && column.uidt !== colBody.uidt) {
             const existingOptions = colBody.colOptions.options.map(
               (el) => el.title,
             );