feat(gui-v2): add column fields properties and set proper alter value

Signed-off-by: Pranav C <pranavxc@gmail.com>

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

@@ -1,67 +1,97 @@
 <script setup lang="ts">
-import { UITypes } from 'nocodb-sdk'
 import { useColumnCreateStoreOrThrow } from '~/composables/useColumnCreateStore'
-import useProject from '~/composables/useProject'
 
-const { sqlUi } = useProject()
+const { formState, validateInfos, setAdditionalValidations, sqlUi, onDataTypeChange, onAlter } = useColumnCreateStoreOrThrow()
 
-const newColumn = reactive({ uidt: UITypes.SingleLineText })
+const dataTypes = computed(() => sqlUi?.value?.getDataTypeListForUiType(formState))
-const idType = null
-
-const dataTypes = computed(() => sqlUi?.value?.getDataTypeListForUiType(newColumn))
-
-const { formState, validateInfos, setAdditionalValidations } = useColumnCreateStoreOrThrow()
 
 // set additional validations
 setAdditionalValidations({})
 
 // to avoid type error with checkbox
-formState.value.nn = !!formState.value.nn
+formState.value.rqd = !!formState.value.rqd
 formState.value.pk = !!formState.value.pk
 formState.value.un = !!formState.value.un
 formState.value.ai = !!formState.value.ai
 formState.value.au = !!formState.value.au
-
 </script>
 
 <template>
   <div class="p-4 border-[2px] radius-1 border-grey w-full">
-
     <div class="flex justify-space-between">
       <a-form-item label="NN">
-        <a-checkbox v-model:checked="formState.nn" size="small" class="nc-column-name-input" />
+        <a-checkbox
+          v-model:checked="formState.rqd"
+          :disabled="formState.pk || !sqlUi.columnEditable(formState)"
+          size="small"
+          class="nc-column-name-input"
+          @change="onAlter"
+        />
       </a-form-item>
       <a-form-item label="PK">
-        <a-checkbox v-model:checked="formState.pk" size="small" class="nc-column-name-input" />
+        <a-checkbox
+          v-model:checked="formState.pk"
+          :disabled="!sqlUi.columnEditable(formState)"
+          size="small"
+          class="nc-column-name-input"
+          @change="onAlter"
+        />
       </a-form-item>
       <a-form-item label="AI">
-        <a-checkbox v-model:checked="formState.ai" size="small" class="nc-column-name-input" />
+        <a-checkbox
+          v-model:checked="formState.ai"
+          :disabled="sqlUi.colPropUNDisabled(formState) || !sqlUi.columnEditable(formState)"
+          size="small"
+          class="nc-column-name-input"
+          @change="onAlter"
+        />
       </a-form-item>
-      <a-form-item label="UN">
+      <a-form-item
+        label="UN"
+        :disabled="sqlUi.colPropUNDisabled(formState) || !sqlUi.columnEditable(formState)"
+        @change="onAlter"
+      >
         <a-checkbox v-model:checked="formState.un" size="small" class="nc-column-name-input" />
       </a-form-item>
-      <a-form-item label="AU">
+      <a-form-item
+        label="AU"
+        :disabled="sqlUi.colPropAuDisabled(formState) || !sqlUi.columnEditable(formState)"
+        @change="onAlter"
+      >
         <a-checkbox v-model:checked="formState.au" size="small" class="nc-column-name-input" />
       </a-form-item>
     </div>
     <a-form-item :label="$t('labels.databaseType')" v-bind="validateInfos.dt">
-      <a-select size="small" v-model:value="formState.dt">
+      <a-select v-model:value="formState.dt" size="small" @change="onDataTypeChange">
         <a-select-option v-for="type in dataTypes" :key="type" :value="type">
           {{ type }}
         </a-select-option>
       </a-select>
     </a-form-item>
-    <a-form-item
+    <a-form-item :label="$t('labels.lengthValue')">
-      :disabled="sqlUi.getDefaultLengthIsDisabled(newColumn.dt) || !sqlUi.columnEditable(newColumn)"
+      <a-input
-      :label="$t('labels.lengthValue')"
+        v-model:value="formState.dtxp"
-    >
+        :disabled="sqlUi.getDefaultLengthIsDisabled(formState.dt) || !sqlUi.columnEditable(formState)"
-      <a-input v-model="newColumn.dtxp" size="small" />
+        size="small"
+        @input="onAlter"
+      />
     </a-form-item>
-    <a-form-item v-if="sqlUi.showScale(newColumn)" label="Scale">
+    <a-form-item v-if="sqlUi.showScale(formState)" label="Scale">
-      <a-input v-model="newColumn.dtxs" size="small" />
+      <a-input
+        v-model="formState.dtxs"
+        :disabled="!sqlUi.columnEditable(formState)"
+        size="small"
+        @input="onAlter"
+      />
     </a-form-item>
-    <a-form-item :help="sqlUi.getDefaultValueForDatatype(newColumn.dt)" :label="$t('placeholder.defaultValue')">
+    <a-form-item :label="$t('placeholder.defaultValue')">
-      <a-textarea v-model="newColumn.cdf" size="small" auto-size />
+      <a-textarea
+        v-model="formState.cdf"
+        :help="sqlUi.getDefaultValueForDatatype(formState.dt)"
+        size="small"
+        auto-size
+        @input="onAlter(2, true)"
+      />
     </a-form-item>
   </div>
 </template>

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

@@ -1,8 +1,6 @@
 <script lang="ts" setup>
 import { computed, inject } from '#imports'
-import {
+import { useColumnCreateStoreOrThrow } from '~/composables/useColumnCreateStore'
-  useColumnCreateStoreOrThrow,
-} from '~/composables/useColumnCreateStore'
 import { MetaInj } from '~/context'
 import { uiTypes } from '~/utils/columnUtils'
 import MdiPlusIcon from '~icons/mdi/plus-circle-outline'
@@ -11,7 +9,7 @@ import MdiMinusIcon from '~icons/mdi/minus-circle-outline'
 const meta = inject(MetaInj)
 const advancedOptions = ref(false)
 
-const { formState, resetFields, validate, validateInfos } = useColumnCreateStoreOrThrow()
+const { formState, resetFields, validate, validateInfos, onUidtOrIdTypeChange, onAlter } = useColumnCreateStoreOrThrow()
 
 // todo: make as a prop
 const editColumn = null
@@ -35,10 +33,15 @@ const uiTypesOptions = computed<typeof uiTypes>(() => {
   <div class="max-w-[450px] min-w-[350px] w-max max-h-[95vh] bg-white shadow p-4 overflow-auto" @click.stop>
     <a-form v-model="formState" layout="vertical">
       <a-form-item :label="$t('labels.columnName')" v-bind="validateInfos.column_name">
-        <a-input v-model:value="formState.column_name" size="small" class="nc-column-name-input" />
+        <a-input
+          v-model:value="formState.column_name"
+          size="small"
+          class="nc-column-name-input"
+          @input="onAlter(8)"
+        />
       </a-form-item>
       <a-form-item :label="$t('labels.columnType')">
-        <a-select v-model:value="formState.uidt" size="small" class="nc-column-name-input">
+        <a-select v-model:value="formState.uidt" size="small" class="nc-column-name-input" @change="onUidtOrIdTypeChange">
           <a-select-option v-for="opt in uiTypesOptions" :key="opt.name" :value="opt.name" v-bind="validateInfos.uidt">
             <div class="flex gap-1 align-center text-xs">
               <component :is="opt.icon" class="text-grey" />

packages/nc-gui-v2/composables/useColumn.ts

@@ -2,6 +2,8 @@ import type { ColumnType } from 'nocodb-sdk'
 import { SqlUiFactory, UITypes, isVirtualCol } from 'nocodb-sdk'
 import { useProject } from '#imports'
 
+
+
 export default (column: ColumnType) => {
   const { project } = useProject()
 

packages/nc-gui-v2/composables/useColumnCreateStore.ts

@@ -3,13 +3,26 @@ import { Form } from 'ant-design-vue'
 import type { ColumnType } from 'nocodb-sdk'
 import { UITypes } from 'nocodb-sdk'
 import { computed } from '#imports'
+import useColumn from '~/composables/useColumn'
 
 const useForm = Form.useForm
 
+// enum ColumnAlterType {
+//   NEW=4,
+//   EDIT=2,
+//   RENAME=8,
+//   DELETE=0,
+// }
+
+const columnToValidate = [UITypes.Email, UITypes.URL, UITypes.PhoneNumber]
+
 const [useProvideColumnCreateStore, useColumnCreateStore] = createInjectionState((column?: ColumnType) => {
+  const { sqlUi } = useProject()
+  const idType = null
+
   // state
-  // todo: give proper type
+  // todo: give proper type - ColumnType
-  const formState = ref<Partial<ColumnType & Record<string, any>>>({
+  const formState = ref<Partial<Record<string, any>>>({
     title: 'title',
     uidt: UITypes.SingleLineText,
     ...(column || {}),
@@ -40,9 +53,103 @@ const [useProvideColumnCreateStore, useColumnCreateStore] = createInjectionState
     additionalValidations.value = validations
   }
 
+  const onUidtOrIdTypeChange = () => {
+    const { isCurrency } = useColumn(formState.value as ColumnType)
+
+    const colProp = sqlUi?.value.getDataTypeForUiType(formState?.value as any, idType as any)
+    formState.value = {
+      ...formState.value,
+      meta: null,
+      rqd: false,
+      pk: false,
+      ai: false,
+      cdf: null,
+      un: false,
+      dtx: 'specificType',
+      ...colProp,
+    }
+
+    formState.value.dtxp = sqlUi.value.getDefaultLengthForDatatype(formState.value.dt)
+    formState.value.dtxs = sqlUi.value.getDefaultScaleForDatatype(formState.value.dt)
+
+    const selectTypes = [UITypes.MultiSelect, UITypes.SingleSelect]
+    if (column && selectTypes.includes(formState.value.uidt) && selectTypes.includes(column.uidt as UITypes)) {
+      formState.value.dtxp = column.dtxp
+    }
+
+    if (columnToValidate.includes(formState.value.uidt)) {
+      formState.value.meta = {
+        validate: formState.value.meta && formState.value.meta.validate,
+      }
+    }
+
+    if (isCurrency) {
+      if (column?.uidt === UITypes.Currency) {
+        formState.value.dtxp = column.dtxp
+        formState.value.dtxs = column.dtxs
+      } else {
+        formState.value.dtxp = 19
+        formState.value.dtxs = 2
+      }
+    }
+
+    formState.value.altered = formState.value.altered || 2
+  }
+
+  const onDataTypeChange = () => {
+    const { isCurrency } = useColumn(formState.value as ColumnType)
+
+    formState.value.rqd = false
+    if (formState.value.uidt !== UITypes.ID) {
+      formState.value.primaryKey = false
+    }
+    formState.value.ai = false
+    formState.value.cdf = null
+    formState.value.un = false
+    formState.value.dtxp = sqlUi.value.getDefaultLengthForDatatype(formState.value.dt)
+    formState.value.dtxs = sqlUi.value.getDefaultScaleForDatatype(formState.value.dt)
+
+    formState.value.dtx = 'specificType'
+
+    const selectTypes = [UITypes.MultiSelect, UITypes.SingleSelect]
+    if (column && selectTypes.includes(formState.value.uidt) && selectTypes.includes(column.uidt as UITypes)) {
+      formState.value.dtxp = column.dtxp
+    }
+
+    if (isCurrency) {
+      if (column?.uidt === UITypes.Currency) {
+        formState.value.dtxp = column.dtxp
+        formState.value.dtxs = column.dtxs
+      } else {
+        formState.value.dtxp = 19
+        formState.value.dtxs = 2
+      }
+    }
+
+    // this.$set(formState.value, 'uidt', sqlUi.value.getUIType(formState.value));
+
+    formState.value.altered = formState.value.altered || 2
+  }
+
+  const onAlter = (val = 2, cdf = false) => {
+    formState.value.altered = formState.value.altered || val
+    if (cdf)
+      formState.value.cdf = formState.value.cdf || null
+  }
+
   const { resetFields, validate, validateInfos } = useForm(formState, validators)
 
-  return { formState, resetFields, validate, validateInfos, setAdditionalValidations }
+  return {
+    formState,
+    resetFields,
+    validate,
+    validateInfos,
+    setAdditionalValidations,
+    onUidtOrIdTypeChange,
+    sqlUi,
+    onDataTypeChange,
+    onAlter
+  }
 })
 
 export { useProvideColumnCreateStore, useColumnCreateStore }