feat(gui-v2): integrate with save or update api

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

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

@@ -1,6 +1,8 @@
 <script lang="ts" setup>
+import { useMeta } from '#head'
 import { computed, inject } from '#imports'
 import { useColumnCreateStoreOrThrow } from '~/composables/useColumnCreateStore'
+import useMetas from '~/composables/useMetas'
 import { MetaInj } from '~/context'
 import { uiTypes } from '~/utils/columnUtils'
 import MdiPlusIcon from '~icons/mdi/plus-circle-outline'
@@ -9,8 +11,10 @@ import MdiMinusIcon from '~icons/mdi/minus-circle-outline'
 const emit = defineEmits(['cancel'])
 const meta = inject(MetaInj)
 const advancedOptions = ref(false)
+const { getMeta } = useMetas()
 
-const { formState, resetFields, validate, validateInfos, onUidtOrIdTypeChange, onAlter } = useColumnCreateStoreOrThrow()
+const { formState, resetFields, validate, validateInfos, onUidtOrIdTypeChange, onAlter, addOrUpdate } =
+  useColumnCreateStoreOrThrow()
 
 // todo: make as a prop
 const editColumn = null
@@ -28,11 +32,16 @@ const uiTypesOptions = computed<typeof uiTypes>(() => {
       : []),
   ]
 })
+
+const reloadMeta = () => {
+  emit('cancel')
+  getMeta(meta?.value.id as string, true)
+}
 </script>
 
 <template>
   <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 v-model="formState" name="column-create-or-edit" 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-form-item>
@@ -59,17 +68,18 @@ const uiTypesOptions = computed<typeof uiTypes>(() => {
       <div class="overflow-hidden" :class="advancedOptions ? 'h-min' : 'h-0'">
         <SmartsheetColumnAdvancedOptions />
       </div>
-
+      <a-form-item>
-      <div class="flex justify-end gap-1 mt-4">
+        <div class="flex justify-end gap-1 mt-4">
-        <a-button html-type="button" size="small" @click="emit('cancel')">
+          <a-button html-type="button" size="small" @click="emit('cancel')">
-          <!-- Cancel -->
+            <!-- Cancel -->
-          {{ $t('general.cancel') }}
+            {{ $t('general.cancel') }}
-        </a-button>
+          </a-button>
-        <a-button html-type="submit" type="primary" size="small">
+          <a-button html-type="submit" type="primary" size="small" @click="addOrUpdate(reloadMeta)">
-          <!-- Save -->
+            <!-- Save -->
-          {{ $t('general.save') }}
+            {{ $t('general.save') }}
-        </a-button>
+          </a-button>
-      </div>
+        </div>
+      </a-form-item>
     </a-form>
   </div>
 </template>

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

@@ -1,13 +1,16 @@
 <script setup lang="ts">
-import type { ColumnType } from 'nocodb-sdk'
+import type { ColumnType, TableType } from 'nocodb-sdk'
-import { ColumnInj } from '../../context'
+import type { Ref } from 'vue'
+import { inject } from 'vue'
+import { ColumnInj, MetaInj } from '../../context'
 import { useProvideColumnCreateStore } from '~/composables/useColumnCreateStore'
 
 const { column } = defineProps<{ column: ColumnType & { meta: any } }>()
 provide(ColumnInj, column)
+const meta = inject(MetaInj)
 
 // instantiate column update store
-useProvideColumnCreateStore(column)
+useProvideColumnCreateStore(meta as Ref<TableType>, column)
 
 /*
 import { UITypes } from 'nocodb-sdk'

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

@@ -77,7 +77,9 @@ defineExpose({
 })
 
 // instantiate column create store
-useProvideColumnCreateStore()
+// watchEffect(() => {
+if (meta) useProvideColumnCreateStore(meta)
+// })
 </script>
 
 <template>
@@ -106,7 +108,7 @@ useProvideColumnCreateStore()
                   <MdiPlusIcon class="text-sm" />
                 </div>
                 <template #overlay>
-                  <SmartsheetColumnEditOrAdd @click.stop @cancel="editColumnDropdown = false" />
+                  <SmartsheetColumnEditOrAdd @click.stop @cancel="addColumnDropdown = false" />
                 </template>
               </a-dropdown>
             </th>

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

@@ -1,9 +1,13 @@
 import { createInjectionState } from '@vueuse/core'
 import { Form } from 'ant-design-vue'
-import type { ColumnType } from 'nocodb-sdk'
+import type { ColumnType, TableType } from 'nocodb-sdk'
 import { UITypes } from 'nocodb-sdk'
+import type { Ref } from 'vue'
+import { useToast } from 'vue-toastification'
 import { computed } from '#imports'
+import { useNuxtApp } from '#app'
 import useColumn from '~/composables/useColumn'
+import { extractSdkResponseErrorMsg } from '~/utils/errorUtils'
 
 const useForm = Form.useForm
 
@@ -16,8 +20,12 @@ const useForm = Form.useForm
 
 const columnToValidate = [UITypes.Email, UITypes.URL, UITypes.PhoneNumber]
 
-const [useProvideColumnCreateStore, useColumnCreateStore] = createInjectionState((column?: ColumnType) => {
+const [useProvideColumnCreateStore, useColumnCreateStore] = createInjectionState((meta: Ref<TableType>, column?: ColumnType) => {
   const { sqlUi } = useProject()
+  const { $api } = useNuxtApp()
+
+  const toast = useToast()
+
   const idType = null
 
   // state
@@ -48,6 +56,8 @@ const [useProvideColumnCreateStore, useColumnCreateStore] = createInjectionState
     }
   })
 
+  const { resetFields, validate, validateInfos } = useForm(formState, validators)
+
   // actions
   const setAdditionalValidations = (validations: Record<string, any>) => {
     additionalValidations.value = validations
@@ -136,12 +146,34 @@ const [useProvideColumnCreateStore, useColumnCreateStore] = createInjectionState
     if (cdf) formState.value.cdf = formState.value.cdf || null
   }
 
-  const addOrUpdate = () => {
+  const addOrUpdate = async (onSuccess: () => {}) => {
-    // todo
+    if (!(await validate())) return
-    console.log('To be done')
-  }
 
-  const { resetFields, validate, validateInfos } = useForm(formState, validators)
+    formState.value.table_name = meta.value.table_name
+    formState.value.title = formState.value.column_name
+    try {
+      if (column) {
+        await $api.dbTableColumn.update(column.id as string, formState.value)
+        toast.success('Column updated')
+      } else {
+        // todo : set additional meta for auto generated string id
+        if (formState.value.uidt === UITypes.ID) {
+          // based on id column type set autogenerated meta prop
+          // if (isAutoGenId) {
+          //   this.newColumn.meta = {
+          //     ag: 'nc',
+          //   };
+          // }
+        }
+        await $api.dbTableColumn.create(meta.value.id as string, formState.value)
+
+        toast.success('Column created')
+      }
+      onSuccess()
+    } catch (e) {
+      toast.error(await extractSdkResponseErrorMsg(e))
+    }
+  }
 
   return {
     formState,
@@ -157,7 +189,7 @@ const [useProvideColumnCreateStore, useColumnCreateStore] = createInjectionState
   }
 })
 
-export { useProvideColumnCreateStore, useColumnCreateStore }
+export { useProvideColumnCreateStore }
 
 export function useColumnCreateStoreOrThrow() {
   const columnCreateStore = useColumnCreateStore()