feat: expand confirm modal

packages/nc-gui/components/dlg/ExpandTable.vue

@@ -0,0 +1,107 @@
+<script setup lang="ts">
+import { onKeyDown } from '@vueuse/core'
+
+const props = defineProps<{
+  fields?: number
+  rows?: number
+  modelValue: boolean
+}>()
+
+const emit = defineEmits(['update:expand', 'cancel', 'update:modelValue'])
+
+const dialogShow = useVModel(props, 'modelValue', emit)
+
+const expand = ref(true)
+
+const updateExpand = () => {
+  emit('update:expand', expand.value)
+  dialogShow.value = false
+}
+
+onKeyDown('esc', () => {
+  dialogShow.value = false
+  emit('update:modelValue', false)
+})
+</script>
+
+<template>
+  <NcModal
+    v-model:visible="dialogShow"
+    :show-separator="false"
+    :header="$t('activity.createTable')"
+    size="medium"
+    @keydown.esc="dialogShow = false"
+  >
+    <template #header>
+      <div class="flex justify-between w-full items-center">
+        <div class="flex flex-row items-center gap-x-2 text-base font-semibold text-gray-800">
+          Do you want to expand this table?
+        </div>
+      </div>
+    </template>
+    <div class="flex flex-col mt-1">
+      <div class="mb-4">
+        To fit your pasted data into the table, we need to add
+
+        <span class="font-semibold text-gray-800"> {{ rows }} more records. </span>
+      </div>
+
+      <a-radio-group v-model:value="expand">
+        <a-radio
+          :style="{
+            display: 'flex',
+            height: '30px',
+            lineHeight: '30px',
+          }"
+          :value="true"
+        >
+          <div class="text-gray-700">
+            <span class="text-gray-800 font-semibold"> Expand the table </span>
+
+            so that all of the pasted cells will fit.
+          </div>
+        </a-radio>
+        <a-radio
+          :style="{
+            display: 'flex',
+            height: '30px',
+            lineHeight: '30px',
+          }"
+          :value="false"
+        >
+          <span class="text-gray-800 font-semibold"> Don’t expand the table. </span>
+
+          Values outside of the table will not be pasted.
+        </a-radio>
+      </a-radio-group>
+
+      <div class="flex flex-row justify-end gap-x-2">
+        <div class="flex gap-2 items-center">
+          <NcButton type="primary" size="small" @click="updateExpand">
+            {{ $t('labels.continue') }}
+          </NcButton>
+        </div>
+      </div>
+    </div>
+  </NcModal>
+</template>
+
+<style scoped lang="scss">
+.ant-form-item {
+  @apply mb-0;
+}
+
+.nc-input-text-area {
+  padding-block: 8px !important;
+}
+
+.nc-table-advanced-options {
+  max-height: 0;
+  transition: 0.3s max-height;
+  overflow: hidden;
+
+  &.active {
+    max-height: 100px;
+  }
+}
+</style>

packages/nc-gui/components/smartsheet/grid/Table.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import axios from 'axios'
-import { nextTick } from '@vue/runtime-core'
+import { nextTick, resolveComponent } from '@vue/runtime-core'
 import type { ColumnReqType, ColumnType, PaginatedType, TableType, ViewType } from 'nocodb-sdk'
 import {
   UITypes,
@@ -599,6 +599,7 @@ const {
   clearSelectedRangeOfCells,
   makeEditable,
   scrollToCell,
+  expandRows,
   async (e: KeyboardEvent) => {
     // ignore navigating if single/multi select options is open
     const activeDropdownEl = document.querySelector(
@@ -790,6 +791,45 @@ function scrollToRow(row?: number) {
   scrollToCell?.()
 }
 
+const isOpen = ref(false)
+
+async function expandRows({
+  expandedRows,
+  updatedRows,
+  propsToPaste,
+}: {
+  expandedRows?: Row[]
+  updatedRows: Row[]
+  propsToPaste: any
+}) {
+  async function closeDialog(expand: boolean) {
+    close()
+    if (expand) {
+      await bulkUpsertRows?.(expandedRows!, updatedRows, propsToPaste)
+    } else {
+      await bulkUpdateRows?.(updatedRows, propsToPaste)
+    }
+  }
+  if (expandedRows?.length) {
+    isOpen.value = true
+  } else {
+    await bulkUpsertRows?.(expandedRows!, updatedRows, propsToPaste)
+  }
+
+  const closeDlg = () => {
+    isOpen.value = false
+  }
+
+  const { close } = useDialog(resolveComponent('DlgExpandTable'), {
+    'modelValue': isOpen,
+    'rows': expandedRows!.length,
+    'onUpdate:expand': closeDialog,
+    'onUpdate:modelValue': closeDlg,
+  })
+
+  await until(() => isOpen.value).toBeTruthy()
+}
+
 async function saveEmptyRow(rowObj: Row) {
   await updateOrSaveRow?.(rowObj)
 }

packages/nc-gui/composables/useMultiSelect/index.ts

@@ -41,6 +41,7 @@ export function useMultiSelect(
   clearSelectedRangeOfCells: Function,
   makeEditable: Function,
   scrollToCell?: (row?: number | null, col?: number | null) => void,
+  expandRows: Function,
   keyEventHandler?: Function,
   syncCellData?: Function,
   bulkUpdateRows?: Function,
@@ -859,7 +860,7 @@ export function useMultiSelect(
               row: {},
               oldRow: {},
               rowMeta: {
-                isNew: true,
+                isExpandedData: true,
               },
             }),
           )
@@ -909,11 +910,15 @@ export function useMultiSelect(
           }
         }
 
-        await bulkUpsertRows?.(
-          rowsToPaste.filter((row) => row.rowMeta.isNew),
-          rowsToPaste.filter((row) => !row.rowMeta.isNew),
+        const expandedRows = rowsToPaste.filter((row) => row.rowMeta.isExpandedData)
+
+        const updatedRows = rowsToPaste.filter((row) => !row.rowMeta.isExpandedData)
+
+        await expandRows({
+          expandedRows,
+          updatedRows,
           propsToPaste,
-        )
+        })
 
         if (pastedRows > 0) {
           // highlight the pasted range

packages/nc-gui/lang/en.json

@@ -626,6 +626,7 @@
     "noConditionsAdded": "No conditions added"
   },
   "labels": {
+    "continue": "Continue",
     "modifiedOn": "Modified on",
     "configuration": "Configuration",
     "setup": "Setup",

packages/nc-gui/lib/types.ts

@@ -81,6 +81,10 @@ interface Row {
     saving?: boolean
     ltarState?: Record<string, Record<string, any> | Record<string, any>[] | null>
     fromExpandedForm?: boolean
+
+    //
+    isExpandedData?: boolean
+
     // use in datetime picker component
     isUpdatedFromCopyNPaste?: Record<string, boolean>
     // Used in Calendar view