feat(gui-v2): add store for column create, bind properties

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

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

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { UITypes } from 'nocodb-sdk'
+import { useColumnCreateStoreOrThrow } from '~/composables/useColumnCreateStore'
 import useProject from '~/composables/useProject'
 
 const { sqlUi } = useProject()
@@ -8,29 +9,43 @@ const newColumn = reactive({ uidt: UITypes.SingleLineText })
 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.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" :label-col="2">
+      <a-form-item label="NN">
-        <a-checkbox size="small" class="nc-column-name-input" />
+        <a-checkbox v-model:checked="formState.nn" size="small" class="nc-column-name-input" />
       </a-form-item>
       <a-form-item label="PK">
-        <a-checkbox size="small" class="nc-column-name-input" />
+        <a-checkbox v-model:checked="formState.pk" size="small" class="nc-column-name-input" />
       </a-form-item>
       <a-form-item label="AI">
-        <a-checkbox size="small" class="nc-column-name-input" />
+        <a-checkbox v-model:checked="formState.ai" size="small" class="nc-column-name-input" />
       </a-form-item>
       <a-form-item label="UN">
-        <a-checkbox size="small" class="nc-column-name-input" />
+        <a-checkbox v-model:checked="formState.un" size="small" class="nc-column-name-input" />
       </a-form-item>
       <a-form-item label="AU">
-        <a-checkbox size="small" class="nc-column-name-input" />
+        <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')">
+    <a-form-item :label="$t('labels.databaseType')" v-bind="validateInfos.dt">
-      <a-select size="small">
+      <a-select size="small" v-model:value="formState.dt">
         <a-select-option v-for="type in dataTypes" :key="type"  :value="type">
           {{ type }}
         </a-select-option>
@@ -40,13 +55,13 @@ const dataTypes = computed(() => sqlUi?.value?.getDataTypeListForUiType(newColum
       :disabled="sqlUi.getDefaultLengthIsDisabled(newColumn.dt) || !sqlUi.columnEditable(newColumn)"
       :label="$t('labels.lengthValue')"
     >
-      <a-input size="small" />
+      <a-input v-model="newColumn.dtxp" size="small" />
     </a-form-item>
     <a-form-item v-if="sqlUi.showScale(newColumn)" label="Scale">
-      <a-input size="small" />
+      <a-input v-model="newColumn.dtxs" size="small" />
     </a-form-item>
     <a-form-item :help="sqlUi.getDefaultValueForDatatype(newColumn.dt)" :label="$t('placeholder.defaultValue')">
-      <a-textarea size="small" auto-size />
+      <a-textarea v-model="newColumn.cdf" size="small" auto-size />
     </a-form-item>
   </div>
 </template>

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

@@ -1,18 +1,18 @@
 <script lang="ts" setup>
-import { Form } from 'ant-design-vue'
-import type { ColumnType } from 'nocodb-sdk'
-import { UITypes } from 'nocodb-sdk'
 import { computed, inject } from '#imports'
+import {
+  useColumnCreateStoreOrThrow,
+} from '~/composables/useColumnCreateStore'
 import { MetaInj } from '~/context'
 import { uiTypes } from '~/utils/columnUtils'
 import MdiPlusIcon from '~icons/mdi/plus-circle-outline'
 import MdiMinusIcon from '~icons/mdi/minus-circle-outline'
 
-const useForm = Form.useForm
-
 const meta = inject(MetaInj)
 const advancedOptions = ref(false)
 
+const { formState, resetFields, validate, validateInfos } = useColumnCreateStoreOrThrow()
+
 // todo: make as a prop
 const editColumn = null
 
@@ -29,40 +29,16 @@ const uiTypesOptions = computed<typeof uiTypes>(() => {
       : []),
   ]
 })
-
-const formState = $ref<Partial<ColumnType>>({
-  title: 'title',
-  uidt: UITypes.SingleLineText,
-})
-
-const validators = computed(() => {
-  return {
-    column_name: [
-      {
-        required: true,
-        message: 'Column name is required',
-      },
-    ],
-    uidt: [
-      {
-        required: true,
-        message: 'UI Datatype is required',
-      },
-    ],
-  }
-})
-
-const { resetFields, validate, validateInfos } = useForm(formState, validators)
 </script>
 
 <template>
-  <div class="max-w-[450px] min-w-[350px] w-max max-h-[95vh] bg-white shadow p-4" @click.stop>
+  <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-form-item>
-      <a-form-item v-model:value="formState.uidt" :label="$t('labels.columnType')">
+      <a-form-item  :label="$t('labels.columnType')">
-        <a-select size="small" class="nc-column-name-input">
+        <a-select v-model:value="formState.uidt" size="small" class="nc-column-name-input">
           <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/components/smartsheet-header/Cell.vue

@@ -1,10 +1,14 @@
 <script setup lang="ts">
 import type { ColumnType } from 'nocodb-sdk'
 import { ColumnInj } from '../../context'
+import { useProvideColumnCreateStore } from '~/composables/useColumnCreateStore'
 
 const { column } = defineProps<{ column: ColumnType & { meta: any } }>()
 provide(ColumnInj, column)
 
+// instantiate column update store
+useProvideColumnCreateStore(column)
+
 /*
 import { UITypes } from 'nocodb-sdk'
 import cell from '@/components/project/spreadsheet/mixins/cell'

packages/nc-gui-v2/components/smartsheet-header/Menu.vue

@@ -11,7 +11,7 @@ const editColumnDropdown = $ref(false)
   <a-dropdown v-model:visible="editColumnDropdown" :trigger="['click']">
     <span />
     <template #overlay>
-      <SmartsheetColumnEdit @click.stop />
+      <SmartsheetColumnEditOrAdd @click.stop />
     </template>
   </a-dropdown>
   <a-dropdown :trigger="['hover']">

packages/nc-gui-v2/components/smartsheet/Grid.vue

@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import { isVirtualCol } from 'nocodb-sdk'
 import { inject, onKeyStroke, onMounted, provide } from '#imports'
+import { useProvideColumnCreateStore } from '~/composables/useColumnCreateStore'
 import useGridViewColumnWidth from '~/composables/useGridViewColumnWidth'
 import {
   ActiveViewInj,
@@ -74,6 +75,9 @@ const onXcResizing = (cn: string, event: any) => {
 defineExpose({
   loadData,
 })
+
+// instantiate column create store
+useProvideColumnCreateStore()
 </script>
 
 <template>
@@ -102,7 +106,7 @@ defineExpose({
                   <MdiPlusIcon class="text-sm" />
                 </div>
                 <template #overlay>
-                  <SmartsheetColumnEdit @click.stop />
+                  <SmartsheetColumnEditOrAdd @click.stop />
                 </template>
               </a-dropdown>
             </th>
@@ -237,6 +241,7 @@ defineExpose({
     position: relative;
     padding: 0 5px !important;
     min-width: 200px;
+
     & > * {
       @apply flex align-center h-auto;
     }

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

@@ -0,0 +1,54 @@
+import { createInjectionState } from '@vueuse/core'
+import { Form } from 'ant-design-vue'
+import type { ColumnType } from 'nocodb-sdk'
+import { UITypes } from 'nocodb-sdk'
+import { computed } from '#imports'
+
+const useForm = Form.useForm
+
+const [useProvideColumnCreateStore, useColumnCreateStore] = createInjectionState((column?: ColumnType) => {
+  // state
+  // todo: give proper type
+  const formState = ref<Partial<ColumnType & Record<string, any>>>({
+    title: 'title',
+    uidt: UITypes.SingleLineText,
+    ...(column || {}),
+  })
+
+  const additionalValidations = ref<Record<string, any>>({})
+
+  const validators = computed(() => {
+    return {
+      column_name: [
+        {
+          required: true,
+          message: 'Column name is required',
+        },
+      ],
+      uidt: [
+        {
+          required: true,
+          message: 'UI Datatype is required',
+        },
+      ],
+      ...(additionalValidations?.value || {}),
+    }
+  })
+
+  // actions
+  const setAdditionalValidations = (validations: Record<string, any>) => {
+    additionalValidations.value = validations
+  }
+
+  const { resetFields, validate, validateInfos } = useForm(formState, validators)
+
+  return { formState, resetFields, validate, validateInfos, setAdditionalValidations }
+})
+
+export { useProvideColumnCreateStore, useColumnCreateStore }
+
+export function useColumnCreateStoreOrThrow() {
+  const columnCreateStore = useColumnCreateStore()
+  if (columnCreateStore == null) throw new Error('Please call `useColumnCreateStore` on the appropriate parent component')
+  return columnCreateStore
+}