From a4f380e18759861fb23ae3280b0c4a517468789b Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Thu, 4 Aug 2022 19:14:56 +0530
Subject: [PATCH 01/10] refactor/gui v2 added Date column

---
 .../smartsheet-column/DateOptions.vue         | 25 +++++++++++++++++++
 .../smartsheet-column/EditOrAdd.vue           |  1 +
 packages/nc-gui-v2/utils/dateTimeUtils.ts     | 12 +++++++++
 3 files changed, 38 insertions(+)
 create mode 100644 packages/nc-gui-v2/components/smartsheet-column/DateOptions.vue

diff --git a/packages/nc-gui-v2/components/smartsheet-column/DateOptions.vue b/packages/nc-gui-v2/components/smartsheet-column/DateOptions.vue
new file mode 100644
index 0000000000..d8f3b9143c
--- /dev/null
+++ b/packages/nc-gui-v2/components/smartsheet-column/DateOptions.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { useColumnCreateStoreOrThrow } from '#imports'
+import { dateFormats } from '~/utils/dateTimeUtils'
+
+const { formState } = $(useColumnCreateStoreOrThrow())
+
+if (!formState.meta?.date_format) {
+  if (!formState.meta) formState.meta = {}
+  formState.meta.date_format = dateFormats[0]
+}
+</script>
+
+<template>
+  <a-form-item label="Date Format">
+    <a-select v-model:value="formState.meta.date_format" size="small">
+      <a-select-option v-for="(format, i) of dateFormats" :key="i" :value="format">
+        <div class="flex flex-row items-center">
+          <div class="text-xs">
+            {{ format }}
+          </div>
+        </div>
+      </a-select-option>
+    </a-select>
+  </a-form-item>
+</template>
diff --git a/packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue b/packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue
index 638d081e5f..4cd8369692 100644
--- a/packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue
+++ b/packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue
@@ -92,6 +92,7 @@ watchEffect(() => {
       <SmartsheetColumnRatingOptions v-if="formState.uidt === UITypes.Rating" />
       <SmartsheetColumnCheckboxOptions v-if="formState.uidt === UITypes.Checkbox" />
       <SmartsheetColumnLookupOptions v-if="formState.uidt === UITypes.Lookup" />
+      <SmartsheetColumnDateOptions v-if="formState.uidt === UITypes.Date" />
 
       <div>
         <div
diff --git a/packages/nc-gui-v2/utils/dateTimeUtils.ts b/packages/nc-gui-v2/utils/dateTimeUtils.ts
index 2becbb5bca..8184774d19 100644
--- a/packages/nc-gui-v2/utils/dateTimeUtils.ts
+++ b/packages/nc-gui-v2/utils/dateTimeUtils.ts
@@ -4,6 +4,18 @@ export const timeAgo = (date: any) => {
   return dayjs.utc(date).fromNow()
 }
 
+export const dateFormats = [
+  'DD-MM-YYYY',
+  'MM-DD-YYYY',
+  'YYYY-MM-DD',
+  'DD/MM/YYYY',
+  'MM/DD/YYYY',
+  'YYYY/MM/DD',
+  'DD MM YYYY',
+  'MM DD YYYY',
+  'YYYY MM DD',
+]
+
 export const handleTZ = (val: any) => {
   if (!val) {
     return

From be32e5a900465867daa6fa9089361abe4d5e6884 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Fri, 5 Aug 2022 10:59:51 +0530
Subject: [PATCH 02/10] chore/removed unnecassary import

---
 packages/nc-gui-v2/components/smartsheet-column/DateOptions.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nc-gui-v2/components/smartsheet-column/DateOptions.vue b/packages/nc-gui-v2/components/smartsheet-column/DateOptions.vue
index d8f3b9143c..65807ea64c 100644
--- a/packages/nc-gui-v2/components/smartsheet-column/DateOptions.vue
+++ b/packages/nc-gui-v2/components/smartsheet-column/DateOptions.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { useColumnCreateStoreOrThrow } from '#imports'
-import { dateFormats } from '~/utils/dateTimeUtils'
+import { dateFormats } from '~/utils'
 
 const { formState } = $(useColumnCreateStoreOrThrow())
 

From beed32a5a6222831269b196cdb15222acc37744f Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Wed, 3 Aug 2022 19:07:31 +0530
Subject: [PATCH 03/10] refactor/gui-v2-added-rollup-column

---
 .../smartsheet-column/EditOrAdd.vue           | 22 +++--
 .../smartsheet-column/RollupOptions.vue       | 94 +++++++++++++++++++
 2 files changed, 106 insertions(+), 10 deletions(-)
 create mode 100644 packages/nc-gui-v2/components/smartsheet-column/RollupOptions.vue

diff --git a/packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue b/packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue
index 4cd8369692..a0a30bb131 100644
--- a/packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue
+++ b/packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue
@@ -1,5 +1,6 @@
 <script lang="ts" setup>
-import { UITypes } from 'nocodb-sdk'
+import { UITypes, isVirtualCol } from 'nocodb-sdk'
+import RollupOptions from './RollupOptions.vue'
 import { computed, inject, useColumnCreateStoreOrThrow, useMetas, watchEffect } from '#imports'
 import { MetaInj } from '~/context'
 import { uiTypes } from '~/utils/columnUtils'
@@ -93,16 +94,17 @@ watchEffect(() => {
       <SmartsheetColumnCheckboxOptions v-if="formState.uidt === UITypes.Checkbox" />
       <SmartsheetColumnLookupOptions v-if="formState.uidt === UITypes.Lookup" />
       <SmartsheetColumnDateOptions v-if="formState.uidt === UITypes.Date" />
-
-      <div>
-        <div
-          class="text-xs cursor-pointer text-grey nc-more-options my-2 flex align-center gap-1 justify-end"
-          @click="advancedOptions = !advancedOptions"
-        >
-          {{ advancedOptions ? $t('general.hideAll') : $t('general.showMore') }}
-          <component :is="advancedOptions ? MdiMinusIcon : MdiPlusIcon" />
-        </div>
+      <RollupOptions v-if="formState.uidt === UITypes.Rollup" />
+
+      <div
+        v-if="!isVirtualCol(formState.uidt)"
+        class="text-xs cursor-pointer text-grey nc-more-options my-2 flex align-center gap-1 justify-end"
+        @click="advancedOptions = !advancedOptions"
+      >
+        {{ advancedOptions ? $t('general.hideAll') : $t('general.showMore') }}
+        <component :is="advancedOptions ? MdiMinusIcon : MdiPlusIcon" />
       </div>
+
       <div class="overflow-hidden" :class="advancedOptions ? 'h-min' : 'h-0'">
         <a-checkbox
           v-if="formState.meta && columnToValidate.includes(formState.uidt)"
diff --git a/packages/nc-gui-v2/components/smartsheet-column/RollupOptions.vue b/packages/nc-gui-v2/components/smartsheet-column/RollupOptions.vue
new file mode 100644
index 0000000000..45d0670b57
--- /dev/null
+++ b/packages/nc-gui-v2/components/smartsheet-column/RollupOptions.vue
@@ -0,0 +1,94 @@
+<script setup lang="ts">
+import { UITypes, isSystemColumn, isVirtualCol } from 'nocodb-sdk'
+import { useColumnCreateStoreOrThrow } from '#imports'
+import { MetaInj } from '~/context'
+
+const { formState, validateInfos, onDataTypeChange, setAdditionalValidations } = $(useColumnCreateStoreOrThrow())
+const { tables } = $(useProject())
+const meta = $(inject(MetaInj))
+const { metas } = $(useMetas())
+
+setAdditionalValidations({
+  fk_relation_column_id: [{ required: true, message: 'Required' }],
+  fk_rollup_column_id: [{ required: true, message: 'Required' }],
+  rollup_function: [{ required: true, message: 'Required' }],
+})
+
+const relationNames = {
+  mm: 'Many To Many',
+  hm: 'Has Many',
+}
+
+const aggrFunctionsList = [
+  { text: 'count', value: 'count' },
+  { text: 'min', value: 'min' },
+  { text: 'max', value: 'max' },
+  { text: 'avg', value: 'avg' },
+  { text: 'min', value: 'min' },
+  { text: 'sum', value: 'sum' },
+  { text: 'countDistinct', value: 'countDistinct' },
+  { text: 'sumDistinct', value: 'sumDistinct' },
+  { text: 'avgDistinct', value: 'avgDistinct' },
+]
+
+const refTables = $computed(() => {
+  if (!tables || !tables.length) {
+    return []
+  }
+
+  return meta.columns
+    .filter((c) => c.uidt === UITypes.LinkToAnotherRecord && c.colOptions.type !== 'bt' && !c.system)
+    .map((c) => ({
+      col: c.colOptions,
+      column: c,
+      ...tables.find((t) => t.id === c.colOptions.fk_related_model_id),
+    }))
+})
+
+const columns = $computed(() => {
+  const selectedTable = refTables.find((t) => t.column.id === formState.fk_relation_column_id)
+  if (!selectedTable?.id) {
+    return []
+  }
+
+  return metas[selectedTable.id].columns.filter((c) => !isVirtualCol(c.uidt) && !isSystemColumn(c))
+})
+</script>
+
+<template>
+  <div class="p-4 w-full flex flex-col border-2 mb-2 mt-4">
+    <div class="w-full flex flex-row space-x-2">
+      <a-form-item class="flex w-1/2 pb-2" :label="$t('labels.childTable')" v-bind="validateInfos.fk_relation_column_id">
+        <a-select v-model:value="formState.fk_relation_column_id" size="small" @change="onDataTypeChange">
+          <a-select-option v-for="(table, index) in refTables" :key="index" :value="table.col.fk_column_id">
+            <div class="flex flex-row items-center">
+              <div class="font-weight-bold text-xs">{{ table.column.title }}</div>
+              <div class="text-[0.5rem]">({{ relationNames[table.col.type] }} {{ table.title || table.table_name }})</div>
+            </div>
+          </a-select-option>
+        </a-select>
+      </a-form-item>
+      <a-form-item class="flex w-1/2" :label="$t('labels.childColumn')" v-bind="validateInfos.fk_rollup_column_id">
+        <a-select
+          v-model:value="formState.fk_rollup_column_id"
+          name="fk_rollup_column_id"
+          size="small"
+          @change="onDataTypeChange"
+        >
+          <a-select-option v-for="(column, index) in columns" :key="index" :value="column.id">
+            {{ column.title }}
+          </a-select-option>
+        </a-select>
+      </a-form-item>
+    </div>
+    <a-form-item label="Aggregate function" v-bind="validateInfos.rollup_function">
+      <a-select v-model:value="formState.rollup_function" size="small" @change="onDataTypeChange">
+        <a-select-option v-for="(func, index) in aggrFunctionsList" :key="index" :value="func.value">
+          {{ func.text }}
+        </a-select-option>
+      </a-select>
+    </a-form-item>
+  </div>
+</template>
+
+<style scoped></style>

From 6f448f06a8a061cf6be669ca483be9f5524d0c71 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Wed, 3 Aug 2022 19:13:43 +0530
Subject: [PATCH 04/10] fix/gui-v2-rollup-column-style-fix

---
 .../nc-gui-v2/components/smartsheet-column/RollupOptions.vue  | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet-column/RollupOptions.vue b/packages/nc-gui-v2/components/smartsheet-column/RollupOptions.vue
index 45d0670b57..86bd412256 100644
--- a/packages/nc-gui-v2/components/smartsheet-column/RollupOptions.vue
+++ b/packages/nc-gui-v2/components/smartsheet-column/RollupOptions.vue
@@ -61,9 +61,9 @@ const columns = $computed(() => {
       <a-form-item class="flex w-1/2 pb-2" :label="$t('labels.childTable')" v-bind="validateInfos.fk_relation_column_id">
         <a-select v-model:value="formState.fk_relation_column_id" size="small" @change="onDataTypeChange">
           <a-select-option v-for="(table, index) in refTables" :key="index" :value="table.col.fk_column_id">
-            <div class="flex flex-row items-center">
+            <div class="flex flex-row items-center space-x-0.5">
               <div class="font-weight-bold text-xs">{{ table.column.title }}</div>
-              <div class="text-[0.5rem]">({{ relationNames[table.col.type] }} {{ table.title || table.table_name }})</div>
+              <div class="text-[0.45rem]">({{ relationNames[table.col.type] }} {{ table.title || table.table_name }})</div>
             </div>
           </a-select-option>
         </a-select>

From 0daab21eec7db649c32983ab40a5bc7e8b6a61bd Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Thu, 4 Aug 2022 11:14:31 +0530
Subject: [PATCH 05/10] fix/fixed rollup column validation issue

---
 .../nc-gui-v2/components/smartsheet-column/RollupOptions.vue  | 4 ++++
 packages/nc-gui-v2/composables/useColumnCreateStore.ts        | 3 ++-
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/packages/nc-gui-v2/components/smartsheet-column/RollupOptions.vue b/packages/nc-gui-v2/components/smartsheet-column/RollupOptions.vue
index 86bd412256..e3fa65240d 100644
--- a/packages/nc-gui-v2/components/smartsheet-column/RollupOptions.vue
+++ b/packages/nc-gui-v2/components/smartsheet-column/RollupOptions.vue
@@ -31,6 +31,10 @@ const aggrFunctionsList = [
   { text: 'avgDistinct', value: 'avgDistinct' },
 ]
 
+if (!formState.fk_relation_column_id) formState.fk_relation_column_id = null
+if (!formState.fk_rollup_column_id) formState.fk_rollup_column_id = null
+if (!formState.rollup_function) formState.rollup_function = null
+
 const refTables = $computed(() => {
   if (!tables || !tables.length) {
     return []
diff --git a/packages/nc-gui-v2/composables/useColumnCreateStore.ts b/packages/nc-gui-v2/composables/useColumnCreateStore.ts
index 59c0b9dc37..f1d37686d1 100644
--- a/packages/nc-gui-v2/composables/useColumnCreateStore.ts
+++ b/packages/nc-gui-v2/composables/useColumnCreateStore.ts
@@ -198,7 +198,8 @@ const [useProvideColumnCreateStore, useColumnCreateStore] = createInjectionState
       }
       onSuccess()
     } catch (e: any) {
-      toast.error(await extractSdkResponseErrorMsg(e))
+      const error = await extractSdkResponseErrorMsg(e)
+      if (error) toast.error(await extractSdkResponseErrorMsg(e))
     }
   }
 

From 048c2d45fbdb037c15d7ad6a521d5655f40a270c Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Thu, 4 Aug 2022 11:26:31 +0530
Subject: [PATCH 06/10] chore/removed unnecassary rollup option import

---
 packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue b/packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue
index a0a30bb131..3f196a7af4 100644
--- a/packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue
+++ b/packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue
@@ -1,6 +1,5 @@
 <script lang="ts" setup>
 import { UITypes, isVirtualCol } from 'nocodb-sdk'
-import RollupOptions from './RollupOptions.vue'
 import { computed, inject, useColumnCreateStoreOrThrow, useMetas, watchEffect } from '#imports'
 import { MetaInj } from '~/context'
 import { uiTypes } from '~/utils/columnUtils'
@@ -94,7 +93,7 @@ watchEffect(() => {
       <SmartsheetColumnCheckboxOptions v-if="formState.uidt === UITypes.Checkbox" />
       <SmartsheetColumnLookupOptions v-if="formState.uidt === UITypes.Lookup" />
       <SmartsheetColumnDateOptions v-if="formState.uidt === UITypes.Date" />
-      <RollupOptions v-if="formState.uidt === UITypes.Rollup" />
+      <SmartsheetColumnRollupOptions v-if="formState.uidt === UITypes.Rollup" />
 
       <div
         v-if="!isVirtualCol(formState.uidt)"

From c9412aa80c5906d9ffc8f3d86e476322d4b8cdf1 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Thu, 4 Aug 2022 15:38:18 +0530
Subject: [PATCH 07/10] refactor/gui v2 added ltar column header

---
 packages/nc-gui-v2/components.d.ts            |   2 +
 .../smartsheet-column/EditOrAdd.vue           |   1 +
 .../LinkedToAnotherRecordOptions.vue          | 109 ++++++++++++++++++
 3 files changed, 112 insertions(+)
 create mode 100644 packages/nc-gui-v2/components/smartsheet-column/LinkedToAnotherRecordOptions.vue

diff --git a/packages/nc-gui-v2/components.d.ts b/packages/nc-gui-v2/components.d.ts
index 88ada17810..616a5615f8 100644
--- a/packages/nc-gui-v2/components.d.ts
+++ b/packages/nc-gui-v2/components.d.ts
@@ -40,6 +40,8 @@ declare module '@vue/runtime-core' {
     AModal: typeof import('ant-design-vue/es')['Modal']
     APagination: typeof import('ant-design-vue/es')['Pagination']
     APopconfirm: typeof import('ant-design-vue/es')['Popconfirm']
+    ARadio: typeof import('ant-design-vue/es')['Radio']
+    ARadioGroup: typeof import('ant-design-vue/es')['RadioGroup']
     ARate: typeof import('ant-design-vue/es')['Rate']
     ARow: typeof import('ant-design-vue/es')['Row']
     ASelect: typeof import('ant-design-vue/es')['Select']
diff --git a/packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue b/packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue
index 3f196a7af4..8d94bdf1eb 100644
--- a/packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue
+++ b/packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue
@@ -94,6 +94,7 @@ watchEffect(() => {
       <SmartsheetColumnLookupOptions v-if="formState.uidt === UITypes.Lookup" />
       <SmartsheetColumnDateOptions v-if="formState.uidt === UITypes.Date" />
       <SmartsheetColumnRollupOptions v-if="formState.uidt === UITypes.Rollup" />
+      <SmartsheetColumnLinkedToAnotherRecordOptions v-if="formState.uidt === UITypes.LinkToAnotherRecord" />
 
       <div
         v-if="!isVirtualCol(formState.uidt)"
diff --git a/packages/nc-gui-v2/components/smartsheet-column/LinkedToAnotherRecordOptions.vue b/packages/nc-gui-v2/components/smartsheet-column/LinkedToAnotherRecordOptions.vue
new file mode 100644
index 0000000000..6d4abf34d7
--- /dev/null
+++ b/packages/nc-gui-v2/components/smartsheet-column/LinkedToAnotherRecordOptions.vue
@@ -0,0 +1,109 @@
+<script setup lang="ts">
+import type { TableType } from 'nocodb-sdk'
+import { ModelTypes, MssqlUi, SqliteUi } from 'nocodb-sdk'
+import { useColumnCreateStoreOrThrow } from '#imports'
+import { MetaInj } from '~/context'
+import MdiPlusIcon from '~icons/mdi/plus-circle-outline'
+import MdiMinusIcon from '~icons/mdi/minus-circle-outline'
+
+const { formState, validateInfos, onDataTypeChange, setAdditionalValidations } = $(useColumnCreateStoreOrThrow())
+const { tables, sqlUi } = $(useProject())
+const meta: TableType = $(inject(MetaInj))
+
+console.log(tables)
+
+setAdditionalValidations({
+  childId: [{ required: true, message: 'Required' }],
+})
+
+const onUpdateDeleteOptions = sqlUi === MssqlUi ? ['NO ACTION'] : ['NO ACTION', 'CASCADE', 'RESTRICT', 'SET NULL', 'SET DEFAULT']
+
+if (!formState.parentId) formState.parentId = meta.id
+if (!formState.childId) formState.childId = null
+if (!formState.childColumn) formState.childColumn = `${meta.table_name}_id`
+if (!formState.childTable) formState.childTable = meta.table_name
+if (!formState.parentTable) formState.parentTable = formState.rtn || ''
+if (!formState.parentColumn) formState.parentColumn = formState.rcn || ''
+
+if (!formState.type) formState.type = 'hm'
+if (!formState.onUpdate) formState.onUpdate = onUpdateDeleteOptions[0]
+if (!formState.onDelete) formState.onDelete = onUpdateDeleteOptions[0]
+if (!formState.virtual) formState.virtual = sqlUi === SqliteUi
+if (!formState.alias) formState.alias = formState.column_name
+
+const advancedOptions = $(ref(false))
+
+const refTables = $computed(() => {
+  if (!tables || !tables.length) {
+    return []
+  }
+
+  return tables.filter((t) => t.type === ModelTypes.TABLE)
+})
+</script>
+
+<template>
+  <div class="w-full flex flex-col mb-2 mt-4">
+    <div class="border-2 p-4">
+      <a-form-item v-bind="validateInfos.type">
+        <a-radio-group v-model:value="formState.type" name="type" v-bind="validateInfos.type">
+          <a-radio value="hm">Has Many</a-radio>
+          <a-radio value="mm">Many To Many</a-radio>
+        </a-radio-group>
+      </a-form-item>
+      <a-form-item class="flex w-full pb-2 mt-4" :label="$t('labels.childTable')" v-bind="validateInfos.childId">
+        <a-select v-model:value="formState.childId" size="small" @change="onDataTypeChange">
+          <a-select-option v-for="(table, index) in refTables" :key="index" :value="table.id">
+            {{ table.title }}
+          </a-select-option>
+        </a-select>
+      </a-form-item>
+    </div>
+
+    <div
+      class="text-xs cursor-pointer text-grey nc-more-options my-2 flex align-center gap-1 justify-end"
+      @click="advancedOptions = !advancedOptions"
+    >
+      {{ advancedOptions ? $t('general.hideAll') : $t('general.showMore') }}
+      <component :is="advancedOptions ? MdiMinusIcon : MdiPlusIcon" />
+    </div>
+
+    <div v-if="advancedOptions" class="flex flex-col p-4 border-2 mt-2">
+      <div class="flex flex-row space-x-2">
+        <a-form-item class="flex w-1/2" :label="$t('labels.onUpdate')" v-bind="validateInfos.onUpdate">
+          <a-select
+            v-model:value="formState.onUpdate"
+            :disabled="formState.virtual"
+            name="onUpdate"
+            size="small"
+            @change="onDataTypeChange"
+          >
+            <a-select-option v-for="(option, index) in onUpdateDeleteOptions" :key="index" :value="option">
+              {{ option }}
+            </a-select-option>
+          </a-select>
+        </a-form-item>
+        <a-form-item class="flex w-1/2" :label="$t('labels.onDelete')" v-bind="validateInfos.onDelete">
+          <a-select
+            v-model:value="formState.onDelete"
+            :disabled="formState.virtual"
+            name="onDelete"
+            size="small"
+            @change="onDataTypeChange"
+          >
+            <a-select-option v-for="(option, index) in onUpdateDeleteOptions" :key="index" :value="option">
+              {{ option }}
+            </a-select-option>
+          </a-select>
+        </a-form-item>
+      </div>
+      <div class="flex flex-row">
+        <a-form-item v-bind="validateInfos.virtual">
+          <a-checkbox v-model:checked="formState.virtual" name="virtual" @change="onDataTypeChange">Virtual Relation</a-checkbox>
+        </a-form-item>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped></style>

From be5c44402a9a0c8257222b70d1baabc916889ece Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Thu, 4 Aug 2022 16:49:59 +0530
Subject: [PATCH 08/10] chore/removed console statements

---
 .../smartsheet-column/LinkedToAnotherRecordOptions.vue          | 2 --
 1 file changed, 2 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet-column/LinkedToAnotherRecordOptions.vue b/packages/nc-gui-v2/components/smartsheet-column/LinkedToAnotherRecordOptions.vue
index 6d4abf34d7..13ffb4f7b5 100644
--- a/packages/nc-gui-v2/components/smartsheet-column/LinkedToAnotherRecordOptions.vue
+++ b/packages/nc-gui-v2/components/smartsheet-column/LinkedToAnotherRecordOptions.vue
@@ -10,8 +10,6 @@ const { formState, validateInfos, onDataTypeChange, setAdditionalValidations } =
 const { tables, sqlUi } = $(useProject())
 const meta: TableType = $(inject(MetaInj))
 
-console.log(tables)
-
 setAdditionalValidations({
   childId: [{ required: true, message: 'Required' }],
 })

From 62150e5b801d12a04eb9401f63ba3d2fce926799 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Thu, 4 Aug 2022 17:57:46 +0530
Subject: [PATCH 09/10] chore/removed unnecassry validation binding

---
 .../smartsheet-column/LinkedToAnotherRecordOptions.vue      | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet-column/LinkedToAnotherRecordOptions.vue b/packages/nc-gui-v2/components/smartsheet-column/LinkedToAnotherRecordOptions.vue
index 13ffb4f7b5..620405f5b6 100644
--- a/packages/nc-gui-v2/components/smartsheet-column/LinkedToAnotherRecordOptions.vue
+++ b/packages/nc-gui-v2/components/smartsheet-column/LinkedToAnotherRecordOptions.vue
@@ -68,7 +68,7 @@ const refTables = $computed(() => {
 
     <div v-if="advancedOptions" class="flex flex-col p-4 border-2 mt-2">
       <div class="flex flex-row space-x-2">
-        <a-form-item class="flex w-1/2" :label="$t('labels.onUpdate')" v-bind="validateInfos.onUpdate">
+        <a-form-item class="flex w-1/2" :label="$t('labels.onUpdate')">
           <a-select
             v-model:value="formState.onUpdate"
             :disabled="formState.virtual"
@@ -81,7 +81,7 @@ const refTables = $computed(() => {
             </a-select-option>
           </a-select>
         </a-form-item>
-        <a-form-item class="flex w-1/2" :label="$t('labels.onDelete')" v-bind="validateInfos.onDelete">
+        <a-form-item class="flex w-1/2" :label="$t('labels.onDelete')">
           <a-select
             v-model:value="formState.onDelete"
             :disabled="formState.virtual"
@@ -96,7 +96,7 @@ const refTables = $computed(() => {
         </a-form-item>
       </div>
       <div class="flex flex-row">
-        <a-form-item v-bind="validateInfos.virtual">
+        <a-form-item>
           <a-checkbox v-model:checked="formState.virtual" name="virtual" @change="onDataTypeChange">Virtual Relation</a-checkbox>
         </a-form-item>
       </div>

From 0e6df780810a3fc6cbc0e6d84c5311a5df3b768f Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Thu, 4 Aug 2022 18:54:59 +0530
Subject: [PATCH 10/10] refactor/gui v2 added SpecificDBType  header

---
 packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue  | 1 +
 .../components/smartsheet-column/SpecificDBTypeOptions.vue     | 3 +++
 packages/nc-gui-v2/utils/columnUtils.ts                        | 3 ++-
 3 files changed, 6 insertions(+), 1 deletion(-)
 create mode 100644 packages/nc-gui-v2/components/smartsheet-column/SpecificDBTypeOptions.vue

diff --git a/packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue b/packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue
index 8d94bdf1eb..2ab00f6aae 100644
--- a/packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue
+++ b/packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue
@@ -95,6 +95,7 @@ watchEffect(() => {
       <SmartsheetColumnDateOptions v-if="formState.uidt === UITypes.Date" />
       <SmartsheetColumnRollupOptions v-if="formState.uidt === UITypes.Rollup" />
       <SmartsheetColumnLinkedToAnotherRecordOptions v-if="formState.uidt === UITypes.LinkToAnotherRecord" />
+      <SmartsheetColumnSpecificDBTypeOptions v-if="formState.uidt === UITypes.SpecificDBType" />
 
       <div
         v-if="!isVirtualCol(formState.uidt)"
diff --git a/packages/nc-gui-v2/components/smartsheet-column/SpecificDBTypeOptions.vue b/packages/nc-gui-v2/components/smartsheet-column/SpecificDBTypeOptions.vue
new file mode 100644
index 0000000000..0f86f417e5
--- /dev/null
+++ b/packages/nc-gui-v2/components/smartsheet-column/SpecificDBTypeOptions.vue
@@ -0,0 +1,3 @@
+<template>
+  <SmartsheetColumnAdvancedOptions class="mt-4" />
+</template>
diff --git a/packages/nc-gui-v2/utils/columnUtils.ts b/packages/nc-gui-v2/utils/columnUtils.ts
index 1020e60851..ecde6a4cfa 100644
--- a/packages/nc-gui-v2/utils/columnUtils.ts
+++ b/packages/nc-gui-v2/utils/columnUtils.ts
@@ -4,6 +4,7 @@ import TableColumnPlusBefore from '~icons/mdi/table-column-plus-before'
 import FormatColorText from '~icons/mdi/format-color-text'
 import TextSubject from '~icons/mdi/text-subject'
 import JSONIcon from '~icons/mdi/code-json'
+import SpecificDBTypeIcon from '~icons/mdi/database-settings'
 import Attachment from '~icons/mdi/attachment'
 import CheckboxMarkedOutline from '~icons/mdi/checkbox-marked-outline'
 import FormatListBulletedSquare from '~icons/mdi/format-list-bulleted-square'
@@ -140,7 +141,7 @@ const uiTypes = [
   },
   {
     name: UITypes.SpecificDBType,
-    icon: 'mdi-database-settings',
+    icon: SpecificDBTypeIcon,
   },
 ]