add 'delete row' and 'duplicate row' buttons to edit overaly - WIP

packages/nc-gui/components/smartsheet/expanded-form/Header.vue

@@ -12,7 +12,7 @@ import {
 
 const props = defineProps<{ view?: ViewType }>()
 
-const emit = defineEmits(['cancel'])
+const emit = defineEmits(['cancel', 'duplicateRow'])
 
 const route = useRoute()
 
@@ -75,9 +75,14 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
   }
 })
 
-const { deleteRowById } = useViewData(meta, ref(props.view))
+const { deleteRowById, addEmptyRow } = useViewData(meta, ref(props.view))
 
-const duplicateRow = () => alert('duplicateRow')
+// const onDuplicateRowClick = async () => {
+//   // const newRow = duplicateRowById(primaryKey.value)
+//   // console.log('newRow', newRow)
+//   const newRow = await addEmptyRow()
+//   // expandForm(newRow)
+// }
 
 const showDeleteRowModal = ref(false)
 
@@ -172,7 +177,7 @@ const onConfirmDeleteRowClick = async () => {
       <template #overlay>
         <div class="bg-gray-50 py-2 shadow-lg !border">
           <div>
-            <div v-e="['a:actions:download-csv']" class="nc-menu-item" @click="duplicateRow">
+            <div v-e="['a:actions:download-csv']" class="nc-menu-item" @click="emit('duplicateRow')">
               <MdiContentCopy class="text-gray-500" />
               {{ $t('activity.duplicateRow') }}
             </div>

packages/nc-gui/components/smartsheet/expanded-form/MoreActions.vue

@@ -1,87 +0,0 @@
-<script lang="ts" setup>
-// import { ActiveViewInj, FieldsInj, IsPublicInj, MetaInj, inject, ref, useI18n, useNuxtApp, useProject } from '#imports'
-
-import type { TableType, ViewType } from 'nocodb-sdk'
-
-// const { t } = useI18n()
-
-// const sharedViewListDlg = ref(false)
-
-// const isPublicView = inject(IsPublicInj, ref(false))
-
-// const isView = false
-
-// const { project } = useProject()
-
-// const { $api } = useNuxtApp()
-
-// const meta = inject(MetaInj, ref())
-
-// const fields = inject(FieldsInj, ref([]))
-
-// const selectedView = inject(ActiveViewInj, ref())
-
-const { meta, view, primaryKey } = defineProps<{
-  meta: TableType
-  view: ViewType
-  primaryKey: string
-}>()
-
-const reloadTrigger = inject(ReloadRowDataHookInj, createEventHook())
-
-const { deleteRowById } = useViewData(ref(meta), ref(view))
-
-const duplicateRow = () => alert('duplicateRow')
-
-const onDeleteRowClick = async () => {
-  // alert('deleteRow')
-  await deleteRowById(primaryKey)
-  reloadTrigger.trigger()
-  // loadData()
-  // deleteRow
-}
-</script>
-
-<template>
-  <div>
-    <a-dropdown>
-      <a-button v-e="['c:actions']" class="nc-actions-menu-btn nc-toolbar-btn">
-        <div class="flex gap-1 items-center">
-          <MdiFlashOutline />
-
-          <!-- More -->
-          <span class="!text-sm font-weight-medium">{{ $t('general.more') }}</span>
-
-          <MdiMenuDown class="text-grey" />
-        </div>
-      </a-button>
-
-      <template #overlay>
-        <div class="bg-gray-50 py-2 shadow-lg !border">
-          <div>
-            <div v-e="['a:actions:download-csv']" class="nc-menu-item" @click="duplicateRow">
-              <MdiContentCopy class="text-gray-500" />
-              {{ $t('activity.duplicateRow') }}
-            </div>
-
-            <div v-e="['a:actions:download-excel']" class="nc-menu-item" @click="onDeleteRowClick">
-              <MdiDelete class="text-gray-500" />
-              {{ $t('activity.deleteRow') }}
-            </div>
-          </div>
-        </div>
-      </template>
-    </a-dropdown>
-
-    <!-- <a-modal
-      v-model:visible="sharedViewListDlg"
-      :class="{ active: sharedViewListDlg }"
-      :title="$t('activity.listSharedView')"
-      width="max(900px,60vw)"
-      :footer="null"
-      wrap-class-name="nc-modal-shared-view-list"
-    >
-      <LazySmartsheetToolbarSharedViewList v-if="sharedViewListDlg" />
-    </a-modal> -->
-  </div>
-</template>

packages/nc-gui/components/smartsheet/expanded-form/index.vue

@@ -59,6 +59,8 @@ provide(MetaInj, meta)
 
 const { commentsDrawer, changedColumns, state: rowState, isNew, loadRow } = useProvideExpandedFormStore(meta, row)
 
+const duplicatingRowInProgress = ref(false)
+
 if (props.loadRow) {
   await loadRow()
 }
@@ -100,6 +102,27 @@ const onClose = () => {
   isExpanded.value = false
 }
 
+const onDuplicateRow = () => {
+  // isExpanded.value = false
+  duplicatingRowInProgress.value = true
+  const previousRow = Object.assign({}, row.value)
+  row.value = { row: {}, oldRow: {}, rowMeta: { new: true } }
+  setTimeout(async () => {
+    // await nextTick()
+    row.value = previousRow
+    // row.value = {
+    //   ...row.value,
+    //   rowMeta: {
+    //     ...row.value.rowMeta,
+    //     new: true,
+    //   },
+    // }
+    isExpanded.value = true
+    duplicatingRowInProgress.value = false
+    message.success('Prepared duplicated row (not saved yet)')
+  }, 500)
+}
+
 const reloadParentRowHook = inject(ReloadRowDataHookInj, createEventHook())
 
 // override reload trigger and use it to reload grid and the form itself
@@ -147,13 +170,15 @@ export default {
     class="nc-drawer-expanded-form"
     :class="{ active: isExpanded }"
   >
-    <SmartsheetExpandedFormHeader :view="props.view" @cancel="onClose" />
+    <SmartsheetExpandedFormHeader :view="props.view" @cancel="onClose" @duplicateRow="onDuplicateRow" />
 
     <div class="!bg-gray-100 rounded flex-1">
       <div class="flex h-full nc-form-wrapper items-stretch min-h-[max(70vh,100%)]">
         <div class="flex-1 overflow-auto scrollbar-thin-dull nc-form-fields-container">
           <div class="w-[500px] mx-auto">
+            <a-spin v-if="duplicatingRowInProgress" class="!flex items-center" />
             <div
+              v-if="!duplicatingRowInProgress"
               v-for="(col, i) of fields"
               v-show="!isVirtualCol(col) || !isNew || col.uidt === UITypes.LinkToAnotherRecord"
               :key="col.title"

packages/nc-gui/composables/useViewData.ts

@@ -100,6 +100,7 @@ export function useViewData(
   }))
 
   function addEmptyRow(addAfter = formattedData.value.length) {
+    debugger
     formattedData.value.splice(addAfter, 0, {
       row: {},
       oldRow: {},
@@ -109,6 +110,19 @@ export function useViewData(
     return formattedData.value[addAfter]
   }
 
+  // // function createNewRowWithDuplicatedValues()
+  // function duplicateRowById(rowId: string) {
+  //   debugger
+  //   const row = formattedData.value.find((row) => row.row.id === rowId)
+
+  //   if (row) {
+  //     const newRow = addEmptyRow(formattedData.value.indexOf(row) + 1)
+
+  //     newRow.row = { ...row.row }
+  //     return newRow
+  //   }
+  // }
+
   function removeLastEmptyRow() {
     const lastRow = formattedData.value[formattedData.value.length - 1]
 
@@ -528,6 +542,7 @@ export function useViewData(
     updateFormView,
     aggCommentCount,
     loadAggCommentsCount,
+    // duplicateRowById,
     removeLastEmptyRow,
     removeRowIfNew,
   }