Merge pull request #3225 from nocodb/fix/gui-v2-add-row-opens-expanded-row-form

Made `Add new row` button functional

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>
@@ -377,7 +384,7 @@ const expandForm = (row: Row, state: Record<string, any>) => {
                   <td key="row-index" class="caption nc-grid-cell pl-5 pr-1">
                     <div class="align-center flex gap-1 min-w-[55px]">
                       <div
-                        v-if="!readonly && !isLocked"
+                        v-if="!readOnly && !isLocked"
                         class="nc-row-no text-xs text-gray-500"
                         :class="{ hidden: row.rowMeta.selected }"
                       >
@@ -391,7 +398,7 @@ const expandForm = (row: Row, state: Record<string, any>) => {
                         <a-checkbox v-model:checked="row.rowMeta.selected" />
                       </div>
                       <span class="flex-1" />
-                      <div v-if="!readonly && !isLocked" class="nc-expand" :class="{ 'nc-comment': row.rowMeta?.commentCount }">
+                      <div v-if="!readOnly && !isLocked" class="nc-expand" :class="{ 'nc-comment': row.rowMeta?.commentCount }">
                         <span
                           v-if="row.rowMeta?.commentCount"
                           class="py-1 px-3 rounded-full text-xs cursor-pointer select-none transform hover:(scale-110)"
@@ -504,6 +511,7 @@ const expandForm = (row: Row, state: Record<string, any>) => {
       :row="expandedFormRow"
       :state="expandedFormRowState"
       :meta="meta"
+      @cancel="removeLastEmptyRow"
     />
   </div>
 </template>

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', 'cancel'])
 
 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('cancel')
+  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">

packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/AddRow.vue

@@ -1,7 +1,14 @@
 <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)!
+
+const onClick = () => {
+  if (!isLocked) openNewRecordFormHook.trigger()
+}
 </script>
 
 <template>
@@ -11,10 +18,7 @@ const isLocked = inject(IsLockedInj)
       :class="{ 'hover:after:bg-primary/75 group': !isLocked, 'disabled-ring': isLocked }"
       class="nc-sidebar-right-item nc-sidebar-add-row"
     >
-      <MdiPlusOutline
-        :class="{ 'cursor-pointer group-hover:(!text-white)': !isLocked, 'disabled': isLocked }"
-        @click="!isLocked ? emits('addRow') : {}"
-      />
+      <MdiPlusOutline :class="{ 'cursor-pointer group-hover:(!text-white)': !isLocked, 'disabled': isLocked }" @click="onClick" />
     </div>
   </a-tooltip>
 </template>

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)
 

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

@@ -214,6 +214,16 @@ 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 +366,6 @@ export function useViewData(
     updateFormView,
     aggCommentCount,
     loadAggCommentsCount,
+    removeLastEmptyRow,
   }
 }

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')