feat(gui-v2): add form buttons

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

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

@@ -45,11 +45,7 @@ const dataTypes = computed(() => sqlUi?.value?.getDataTypeListForUiType(newColum
     <a-form-item v-if="sqlUi.showScale(newColumn)" label="Scale">
       <a-input size="small" />
     </a-form-item>
-    <a-form-item
-      v-if="sqlUi.showScale(newColumn)"
-      :help="sqlUi.getDefaultValueForDatatype(newColumn.dt)"
-      :label="$t('placeholder.defaultValue')"
-    >
+    <a-form-item :help="sqlUi.getDefaultValueForDatatype(newColumn.dt)" :label="$t('placeholder.defaultValue')">
       <a-textarea size="small" auto-size />
     </a-form-item>
   </div>

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

@@ -1,11 +1,15 @@
 <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 Smartsheet from '~/components/tabs/Smartsheet.vue'
 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)
 
@@ -25,17 +29,41 @@ 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-[300px] min-w-[300px] max-h-[95vh] bg-white shadow p-4" @click.stop>
-    <a-form layout="vertical">
-      <a-form-item :label="$t('labels.columnName')">
-        <a-input size="small" class="nc-column-name-input" />
+  <div class="max-w-[450px] min-w-[350px] w-max max-h-[95vh] bg-white shadow p-4" @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 :label="$t('labels.columnType')">
+      <a-form-item v-model:value="formState.uidt" :label="$t('labels.columnType')">
         <a-select size="small" class="nc-column-name-input">
-          <a-select-option v-for="opt in uiTypesOptions" :key="opt.name" :value="opt.name">
+          <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" />
               {{ opt.name }}
@@ -56,6 +84,17 @@ const uiTypesOptions = computed<typeof uiTypes>(() => {
       <div class="overflow-hidden" :class="advancedOptions ? 'h-min' : 'h-0'">
         <SmartsheetColumnAdvancedOptions />
       </div>
+
+      <div class="flex justify-end gap-1 mt-4">
+        <a-button html-type="button" size="small">
+          <!-- Cancel -->
+          {{ $t('general.cancel') }}
+        </a-button>
+        <a-button html-type="submit" type="primary" size="small">
+          <!-- Save -->
+          {{ $t('general.save') }}
+        </a-button>
+      </div>
     </a-form>
   </div>
 </template>
@@ -80,4 +119,12 @@ const uiTypesOptions = computed<typeof uiTypes>(() => {
 :deep(.ant-select-selection-item) {
   @apply flex align-center;
 }
+
+:deep(.ant-form-item-explain-error) {
+  @apply !text-[10px];
+}
+
+:deep(.ant-form-item-explain) {
+  @apply !min-h-[15px];
+}
 </style>