From ba0a82d5e84cd8dcb02aca74394f51a8106ae946 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Thu, 18 Aug 2022 12:24:53 +0530
Subject: [PATCH] fix/Added creating a new record and opening expanded form
 when clicking on the Add new row button

---
 .../nc-gui-v2/components/smartsheet/Grid.vue  | 20 +++++++++++++------
 .../smartsheet/expanded-form/index.vue        |  9 +++++++--
 .../smartsheet/sidebar/toolbar/AddRow.vue     |  6 ++++--
 .../nc-gui-v2/components/tabs/Smartsheet.vue  |  3 +++
 packages/nc-gui-v2/composables/useViewData.ts |  9 +++++++++
 packages/nc-gui-v2/context/index.ts           |  1 +
 6 files changed, 38 insertions(+), 10 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet/Grid.vue b/packages/nc-gui-v2/components/smartsheet/Grid.vue
index a496f32207..a56ed469fb 100644
--- a/packages/nc-gui-v2/components/smartsheet/Grid.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Grid.vue
@@ -45,6 +45,7 @@ const readOnly = inject(ReadonlyInj, false)
 const isLocked = inject(IsLockedInj, false)
 
 const reloadViewDataHook = inject(ReloadViewDataHookInj)
+const openNewRecordFormHook = inject(OpenNewRecordFormHookInj)
 
 const { isUIAllowed } = useUIPermission()
 
@@ -87,6 +88,7 @@ const {
   deleteSelectedRows,
   selectedAllRecords,
   loadAggCommentsCount,
+  removeLastEmptyRow,
 } = useViewData(meta, view as any, xWhere)
 
 const { loadGridViewColumns, updateWidth, resizingColWidth, resizingCol } = useGridViewColumnWidth(view as any)
@@ -107,6 +109,17 @@ reloadViewDataHook?.on(async () => {
   loadAggCommentsCount()
 })
 
+const expandForm = (row: Row, state?: Record<string, any>) => {
+  expandedFormRow.value = row
+  expandedFormRowState.value = state
+  expandedFormDlg.value = true
+}
+
+openNewRecordFormHook?.on(async () => {
+  const newRow = await addEmptyRow()
+  expandForm(newRow)
+})
+
 const selectCell = (row: number, col: number) => {
   selected.row = row
   selected.col = col
@@ -293,12 +306,6 @@ const onNavigate = (dir: NavigateDir) => {
       break
   }
 }
-
-const expandForm = (row: Row, state: Record<string, any>) => {
-  expandedFormRow.value = row
-  expandedFormRowState.value = state
-  expandedFormDlg.value = true
-}
 </script>
 
 <template>
@@ -504,6 +511,7 @@ const expandForm = (row: Row, state: Record<string, any>) => {
       :row="expandedFormRow"
       :state="expandedFormRowState"
       :meta="meta"
+      @remove-last-empty-row="removeLastEmptyRow"
     />
   </div>
 </template>
diff --git a/packages/nc-gui-v2/components/smartsheet/expanded-form/index.vue b/packages/nc-gui-v2/components/smartsheet/expanded-form/index.vue
index e3e1af89fd..076e250cf7 100644
--- a/packages/nc-gui-v2/components/smartsheet/expanded-form/index.vue
+++ b/packages/nc-gui-v2/components/smartsheet/expanded-form/index.vue
@@ -36,7 +36,7 @@ interface Props {
 
 const props = defineProps<Props>()
 
-const emits = defineEmits(['update:modelValue'])
+const emits = defineEmits(['update:modelValue', 'removeLastEmptyRow'])
 
 const row = toRef(props, 'row')
 
@@ -91,6 +91,11 @@ watch(
 const isExpanded = useVModel(props, 'modelValue', emits, {
   defaultValue: false,
 })
+
+const onClose = () => {
+  if (row.value?.rowMeta?.new) emits('removeLastEmptyRow')
+  isExpanded.value = false
+}
 </script>
 
 <script lang="ts">
@@ -101,7 +106,7 @@ export default {
 
 <template>
   <a-modal v-model:visible="isExpanded" :footer="null" width="min(90vw,1000px)" :body-style="{ padding: 0 }" :closable="false">
-    <Header @cancel="isExpanded = false" />
+    <Header @cancel="onClose" />
     <div class="!bg-gray-100 rounded">
       <div class="flex h-full nc-form-wrapper items-stretch min-h-[70vh]">
         <div class="flex-grow overflow-auto scrollbar-thin-primary">
diff --git a/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/AddRow.vue b/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/AddRow.vue
index 0c1f4959aa..4aed551e22 100644
--- a/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/AddRow.vue
+++ b/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/AddRow.vue
@@ -1,7 +1,9 @@
 <script setup lang="ts">
-const emits = defineEmits(['addRow'])
+import { OpenNewRecordFormHookInj, inject } from '#imports'
 const { isOpen } = useSidebar({ storageKey: 'nc-right-sidebar' })
 const isLocked = inject(IsLockedInj)
+
+const openNewRecordFormHook = inject(OpenNewRecordFormHookInj)!
 </script>
 
 <template>
@@ -13,7 +15,7 @@ const isLocked = inject(IsLockedInj)
     >
       <MdiPlusOutline
         :class="{ 'cursor-pointer group-hover:(!text-white)': !isLocked, 'disabled': isLocked }"
-        @click="!isLocked ? emits('addRow') : {}"
+        @click="!isLocked ? openNewRecordFormHook.trigger() : {}"
       />
     </div>
   </a-tooltip>
diff --git a/packages/nc-gui-v2/components/tabs/Smartsheet.vue b/packages/nc-gui-v2/components/tabs/Smartsheet.vue
index 39f6052082..eb7da18558 100644
--- a/packages/nc-gui-v2/components/tabs/Smartsheet.vue
+++ b/packages/nc-gui-v2/components/tabs/Smartsheet.vue
@@ -8,6 +8,7 @@ import {
   IsFormInj,
   IsLockedInj,
   MetaInj,
+  OpenNewRecordFormHookInj,
   ReloadViewDataHookInj,
   TabMetaInj,
   computed,
@@ -42,6 +43,7 @@ watchEffect(async () => {
 })
 
 const reloadEventHook = createEventHook<void>()
+const openNewRecordFormHook = createEventHook<void>()
 
 const { isGallery, isGrid, isForm, isLocked } = useProvideSmartsheetStore(activeView as Ref<TableType>, meta)
 
@@ -54,6 +56,7 @@ provide(TabMetaInj, tabMeta)
 provide(ActiveViewInj, activeView)
 provide(IsLockedInj, isLocked)
 provide(ReloadViewDataHookInj, reloadEventHook)
+provide(OpenNewRecordFormHookInj, openNewRecordFormHook)
 provide(FieldsInj, fields)
 provide(IsFormInj, isForm)
 
diff --git a/packages/nc-gui-v2/composables/useViewData.ts b/packages/nc-gui-v2/composables/useViewData.ts
index a05e3f8875..a0d3390b7a 100644
--- a/packages/nc-gui-v2/composables/useViewData.ts
+++ b/packages/nc-gui-v2/composables/useViewData.ts
@@ -214,6 +214,14 @@ export function useViewData(
       oldRow: {},
       rowMeta: { new: true },
     })
+    return formattedData.value[addAfter]
+  }
+
+  const removeLastEmptyRow = () => {
+    const lastRow = formattedData.value[formattedData.value.length - 1]
+    if (lastRow.rowMeta.new) {
+      formattedData.value.pop()
+    }
   }
 
   const deleteRowById = async (id: string) => {
@@ -356,5 +364,6 @@ export function useViewData(
     updateFormView,
     aggCommentCount,
     loadAggCommentsCount,
+    removeLastEmptyRow,
   }
 }
diff --git a/packages/nc-gui-v2/context/index.ts b/packages/nc-gui-v2/context/index.ts
index 1e984a4194..e00505b803 100644
--- a/packages/nc-gui-v2/context/index.ts
+++ b/packages/nc-gui-v2/context/index.ts
@@ -21,6 +21,7 @@ export const CellValueInj: InjectionKey<Ref<any>> = Symbol('cell-value-injection
 export const ActiveViewInj: InjectionKey<Ref<ViewType>> = Symbol('active-view-injection')
 export const ReadonlyInj: InjectionKey<boolean> = Symbol('readonly-injection')
 export const ReloadViewDataHookInj: InjectionKey<EventHook<void>> = Symbol('reload-view-data-injection')
+export const OpenNewRecordFormHookInj: InjectionKey<EventHook<void>> = Symbol('open-new-record-form-injection')
 export const FieldsInj: InjectionKey<Ref<any[]>> = Symbol('fields-injection')
 export const ViewListInj: InjectionKey<Ref<ViewType[]>> = Symbol('view-list-injection')
 export const EditModeInj: InjectionKey<Ref<boolean>> = Symbol('edit-mode-injection')