From 905c154ca15bd008046de01f5280498ef1000187 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Thu, 28 Jul 2022 01:03:03 +0530
Subject: [PATCH] feat(gui-v2): close create column dialog on cancel

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../components/smartsheet-column/AdvancedOptions.vue  |  7 +------
 .../components/smartsheet-column/EditOrAdd.vue        | 10 +++-------
 .../nc-gui-v2/components/smartsheet-header/Menu.vue   |  2 +-
 packages/nc-gui-v2/components/smartsheet/Grid.vue     |  2 +-
 packages/nc-gui-v2/composables/useColumn.ts           |  2 --
 .../nc-gui-v2/composables/useColumnCreateStore.ts     | 11 ++++++++---
 6 files changed, 14 insertions(+), 20 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet-column/AdvancedOptions.vue b/packages/nc-gui-v2/components/smartsheet-column/AdvancedOptions.vue
index 88fac9c52a..b5e7b1fb30 100644
--- a/packages/nc-gui-v2/components/smartsheet-column/AdvancedOptions.vue
+++ b/packages/nc-gui-v2/components/smartsheet-column/AdvancedOptions.vue
@@ -77,12 +77,7 @@ formState.value.au = !!formState.value.au
       />
     </a-form-item>
     <a-form-item v-if="sqlUi.showScale(formState)" label="Scale">
-      <a-input
-        v-model="formState.dtxs"
-        :disabled="!sqlUi.columnEditable(formState)"
-        size="small"
-        @input="onAlter"
-      />
+      <a-input v-model="formState.dtxs" :disabled="!sqlUi.columnEditable(formState)" size="small" @input="onAlter" />
     </a-form-item>
     <a-form-item :label="$t('placeholder.defaultValue')">
       <a-textarea
diff --git a/packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue b/packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue
index 6a8ba92ded..b40a482d08 100644
--- a/packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue
+++ b/packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue
@@ -6,6 +6,7 @@ import { uiTypes } from '~/utils/columnUtils'
 import MdiPlusIcon from '~icons/mdi/plus-circle-outline'
 import MdiMinusIcon from '~icons/mdi/minus-circle-outline'
 
+const emit = defineEmits(['cancel'])
 const meta = inject(MetaInj)
 const advancedOptions = ref(false)
 
@@ -33,12 +34,7 @@ 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"
-          @input="onAlter(8)"
-        />
+        <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" @change="onUidtOrIdTypeChange">
@@ -65,7 +61,7 @@ const uiTypesOptions = computed<typeof uiTypes>(() => {
       </div>
 
       <div class="flex justify-end gap-1 mt-4">
-        <a-button html-type="button" size="small">
+        <a-button html-type="button" size="small" @click="emit('cancel')">
           <!-- Cancel -->
           {{ $t('general.cancel') }}
         </a-button>
diff --git a/packages/nc-gui-v2/components/smartsheet-header/Menu.vue b/packages/nc-gui-v2/components/smartsheet-header/Menu.vue
index a81ff30719..b56f9806f9 100644
--- a/packages/nc-gui-v2/components/smartsheet-header/Menu.vue
+++ b/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>
-      <SmartsheetColumnEditOrAdd @click.stop />
+      <SmartsheetColumnEditOrAdd @click.stop @cancel="editColumnDropdown = false" />
     </template>
   </a-dropdown>
   <a-dropdown :trigger="['hover']">
diff --git a/packages/nc-gui-v2/components/smartsheet/Grid.vue b/packages/nc-gui-v2/components/smartsheet/Grid.vue
index fbe45930c2..1d6bc7814b 100644
--- a/packages/nc-gui-v2/components/smartsheet/Grid.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Grid.vue
@@ -106,7 +106,7 @@ useProvideColumnCreateStore()
                   <MdiPlusIcon class="text-sm" />
                 </div>
                 <template #overlay>
-                  <SmartsheetColumnEditOrAdd @click.stop />
+                  <SmartsheetColumnEditOrAdd @click.stop @cancel="editColumnDropdown = false" />
                 </template>
               </a-dropdown>
             </th>
diff --git a/packages/nc-gui-v2/composables/useColumn.ts b/packages/nc-gui-v2/composables/useColumn.ts
index b2b5313001..9eb65f1195 100644
--- a/packages/nc-gui-v2/composables/useColumn.ts
+++ b/packages/nc-gui-v2/composables/useColumn.ts
@@ -2,8 +2,6 @@ import type { ColumnType } from 'nocodb-sdk'
 import { SqlUiFactory, UITypes, isVirtualCol } from 'nocodb-sdk'
 import { useProject } from '#imports'
 
-
-
 export default (column: ColumnType) => {
   const { project } = useProject()
 
diff --git a/packages/nc-gui-v2/composables/useColumnCreateStore.ts b/packages/nc-gui-v2/composables/useColumnCreateStore.ts
index a529915f21..d970a11d70 100644
--- a/packages/nc-gui-v2/composables/useColumnCreateStore.ts
+++ b/packages/nc-gui-v2/composables/useColumnCreateStore.ts
@@ -133,8 +133,12 @@ const [useProvideColumnCreateStore, useColumnCreateStore] = createInjectionState
 
   const onAlter = (val = 2, cdf = false) => {
     formState.value.altered = formState.value.altered || val
-    if (cdf)
-      formState.value.cdf = formState.value.cdf || null
+    if (cdf) formState.value.cdf = formState.value.cdf || null
+  }
+
+  const addOrUpdate = () => {
+    // todo
+    console.log('To be done')
   }
 
   const { resetFields, validate, validateInfos } = useForm(formState, validators)
@@ -148,7 +152,8 @@ const [useProvideColumnCreateStore, useColumnCreateStore] = createInjectionState
     onUidtOrIdTypeChange,
     sqlUi,
     onDataTypeChange,
-    onAlter
+    onAlter,
+    addOrUpdate,
   }
 })