Merge pull request #5035 from humannocode/duplicate-and-delete-row-buttons

add delete and duplicate row buttons to expanded form and grid view

packages/nc-gui/components/smartsheet/Gallery.vue

@@ -51,6 +51,7 @@ const {
   galleryData,
   changePage,
   addEmptyRow,
+  deleteRow,
   navigateToSiblingRow,
 } = useViewData(meta, view)
 
@@ -85,6 +86,30 @@ const isRowEmpty = (record: any, col: any) => {
   return Array.isArray(val) && val.length === 0
 }
 
+const { isSqlView } = useSmartsheetStoreOrThrow()
+
+const { isUIAllowed } = useUIPermission()
+const hasEditPermission = $computed(() => isUIAllowed('xcDatatableEditable'))
+// TODO: extract this code (which is duplicated in grid and gallery) into a separate component
+const _contextMenu = ref(false)
+const contextMenu = computed({
+  get: () => _contextMenu.value,
+  set: (val) => {
+    if (hasEditPermission) {
+      _contextMenu.value = val
+    }
+  },
+})
+const contextMenuTarget = ref<{ row: number } | null>(null)
+
+const showContextMenu = (e: MouseEvent, target?: { row: number }) => {
+  if (isSqlView.value) return
+  e.preventDefault()
+  if (target) {
+    contextMenuTarget.value = target
+  }
+}
+
 const attachments = (record: any): Attachment[] => {
   try {
     if (coverImageColumn?.title && record.row[coverImageColumn.title]) {
@@ -175,113 +200,138 @@ watch(view, async (nextView) => {
 </script>
 
 <template>
-  <div class="flex flex-col h-full w-full overflow-auto nc-gallery" data-testid="nc-gallery-wrapper">
+  <a-dropdown
-    <div class="nc-gallery-container grid gap-2 my-4 px-3">
+    v-model:visible="contextMenu"
-      <div v-for="record in data" :key="`record-${record.row.id}`">
+    :trigger="isSqlView ? [] : ['contextmenu']"
-        <LazySmartsheetRow :row="record">
+    overlay-class-name="nc-dropdown-grid-context-menu"
-          <a-card
+  >
-            hoverable
+    <template #overlay>
-            class="!rounded-lg h-full overflow-hidden break-all max-w-[450px]"
+      <a-menu class="shadow !rounded !py-0" @click="contextMenu = false">
-            :data-testid="`nc-gallery-card-${record.row.id}`"
+        <a-menu-item v-if="contextMenuTarget" @click="deleteRow(contextMenuTarget.row)">
-            @click="expandFormClick($event, record)"
+          <div v-e="['a:row:delete']" class="nc-project-menu-item">
-          >
+            <!-- Delete Row -->
-            <template v-if="galleryData?.fk_cover_image_col_id" #cover>
+            {{ $t('activity.deleteRow') }}
-              <a-carousel v-if="!reloadAttachments && attachments(record).length" autoplay class="gallery-carousel" arrows>
+          </div>
-                <template #customPaging>
+        </a-menu-item>
-                  <a>
+
-                    <div class="pt-[12px]">
+        <a-menu-item v-if="contextMenuTarget" @click="openNewRecordFormHook.trigger()">
-                      <div></div>
+          <div v-e="['a:row:insert']" class="nc-project-menu-item">
+            <!-- Insert New Row -->
+            {{ $t('activity.insertRow') }}
+          </div>
+        </a-menu-item>
+      </a-menu>
+    </template>
+
+    <div class="flex flex-col h-full w-full overflow-auto nc-gallery" data-testid="nc-gallery-wrapper">
+      <div class="nc-gallery-container grid gap-2 my-4 px-3">
+        <div v-for="(record, rowIndex) in data" :key="`record-${record.row.id}`">
+          <LazySmartsheetRow :row="record">
+            <a-card
+              hoverable
+              class="!rounded-lg h-full overflow-hidden break-all max-w-[450px]"
+              :data-testid="`nc-gallery-card-${record.row.id}`"
+              @click="expandFormClick($event, record)"
+              @contextmenu="showContextMenu($event, { row: rowIndex })"
+            >
+              <template v-if="galleryData?.fk_cover_image_col_id" #cover>
+                <a-carousel v-if="!reloadAttachments && attachments(record).length" autoplay class="gallery-carousel" arrows>
+                  <template #customPaging>
+                    <a>
+                      <div class="pt-[12px]">
+                        <div></div>
+                      </div>
+                    </a>
+                  </template>
+
+                  <template #prevArrow>
+                    <div style="z-index: 1"></div>
+                  </template>
+
+                  <template #nextArrow>
+                    <div style="z-index: 1"></div>
+                  </template>
+
+                  <template v-for="(attachment, index) in attachments(record)">
+                    <LazyCellAttachmentImage
+                      v-if="isImage(attachment.title, attachment.mimetype ?? attachment.type)"
+                      :key="`carousel-${record.row.id}-${index}`"
+                      class="h-52 object-contain"
+                      :srcs="getPossibleAttachmentSrc(attachment)"
+                    />
+                  </template>
+                </a-carousel>
+
+                <MdiFileImageBox v-else class="w-full h-48 my-4 text-cool-gray-200" />
+              </template>
+
+              <div v-for="col in fieldsWithoutCover" :key="`record-${record.row.id}-${col.id}`">
+                <div
+                  v-if="!isRowEmpty(record, col) || isLTAR(col.uidt)"
+                  class="flex flex-col space-y-1 px-4 mb-6 bg-gray-50 rounded-lg w-full"
+                >
+                  <div class="flex flex-row w-full justify-start border-b-1 border-gray-100 py-2.5">
+                    <div class="w-full text-gray-600">
+                      <LazySmartsheetHeaderVirtualCell v-if="isVirtualCol(col)" :column="col" :hide-menu="true" />
+
+                      <LazySmartsheetHeaderCell v-else :column="col" :hide-menu="true" />
                     </div>
-                  </a>
-                </template>
-
-                <template #prevArrow>
-                  <div style="z-index: 1"></div>
-                </template>
-
-                <template #nextArrow>
-                  <div style="z-index: 1"></div>
-                </template>
-
-                <template v-for="(attachment, index) in attachments(record)">
-                  <LazyCellAttachmentImage
-                    v-if="isImage(attachment.title, attachment.mimetype ?? attachment.type)"
-                    :key="`carousel-${record.row.id}-${index}`"
-                    class="h-52 object-contain"
-                    :srcs="getPossibleAttachmentSrc(attachment)"
-                  />
-                </template>
-              </a-carousel>
-
-              <MdiFileImageBox v-else class="w-full h-48 my-4 text-cool-gray-200" />
-            </template>
-
-            <div v-for="col in fieldsWithoutCover" :key="`record-${record.row.id}-${col.id}`">
-              <div
-                v-if="!isRowEmpty(record, col) || isLTAR(col.uidt)"
-                class="flex flex-col space-y-1 px-4 mb-6 bg-gray-50 rounded-lg w-full"
-              >
-                <div class="flex flex-row w-full justify-start border-b-1 border-gray-100 py-2.5">
-                  <div class="w-full text-gray-600">
-                    <LazySmartsheetHeaderVirtualCell v-if="isVirtualCol(col)" :column="col" :hide-menu="true" />
-
-                    <LazySmartsheetHeaderCell v-else :column="col" :hide-menu="true" />
                   </div>
-                </div>
 
-                <div class="flex flex-row w-full pb-3 pt-2 pl-2 items-center justify-start">
+                  <div class="flex flex-row w-full pb-3 pt-2 pl-2 items-center justify-start">
-                  <LazySmartsheetVirtualCell
+                    <LazySmartsheetVirtualCell
-                    v-if="isVirtualCol(col)"
+                      v-if="isVirtualCol(col)"
-                    v-model="record.row[col.title]"
+                      v-model="record.row[col.title]"
-                    :column="col"
+                      :column="col"
-                    :row="record"
+                      :row="record"
-                  />
+                    />
-
+
-                  <LazySmartsheetCell
+                    <LazySmartsheetCell
-                    v-else
+                      v-else
-                    v-model="record.row[col.title]"
+                      v-model="record.row[col.title]"
-                    :column="col"
+                      :column="col"
-                    :edit-enabled="false"
+                      :edit-enabled="false"
-                    :read-only="true"
+                      :read-only="true"
-                  />
+                    />
+                  </div>
                 </div>
               </div>
-            </div>
+            </a-card>
-          </a-card>
+          </LazySmartsheetRow>
-        </LazySmartsheetRow>
+        </div>
       </div>
-    </div>
 
-    <div class="flex-1" />
+      <div class="flex-1" />
-
+
-    <LazySmartsheetPagination />
+      <LazySmartsheetPagination />
-
+    </div>
-    <Suspense>
+  </a-dropdown>
-      <LazySmartsheetExpandedForm
+
-        v-if="expandedFormRow && expandedFormDlg"
+  <Suspense>
-        v-model="expandedFormDlg"
+    <LazySmartsheetExpandedForm
-        :row="expandedFormRow"
+      v-if="expandedFormRow && expandedFormDlg"
-        :state="expandedFormRowState"
+      v-model="expandedFormDlg"
-        :meta="meta"
+      :row="expandedFormRow"
-        :view="view"
+      :state="expandedFormRowState"
-      />
+      :meta="meta"
-    </Suspense>
+      :view="view"
-
+    />
-    <Suspense>
+  </Suspense>
-      <LazySmartsheetExpandedForm
+
-        v-if="expandedFormOnRowIdDlg"
+  <Suspense>
-        :key="route.query.rowId"
+    <LazySmartsheetExpandedForm
-        v-model="expandedFormOnRowIdDlg"
+      v-if="expandedFormOnRowIdDlg"
-        :row="{ row: {}, oldRow: {}, rowMeta: {} }"
+      :key="route.query.rowId"
-        :meta="meta"
+      v-model="expandedFormOnRowIdDlg"
-        :row-id="route.query.rowId"
+      :row="{ row: {}, oldRow: {}, rowMeta: {} }"
-        :view="view"
+      :meta="meta"
-        show-next-prev-icons
+      :row-id="route.query.rowId"
-        @next="navigateToSiblingRow(NavigateDir.NEXT)"
+      :view="view"
-        @prev="navigateToSiblingRow(NavigateDir.PREV)"
+      show-next-prev-icons
-      />
+      @next="navigateToSiblingRow(NavigateDir.NEXT)"
-    </Suspense>
+      @prev="navigateToSiblingRow(NavigateDir.PREV)"
-  </div>
+    />
+  </Suspense>
 </template>
 
 <style scoped>

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()
 
@@ -72,6 +72,22 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
     }
   }
 })
+
+const showDeleteRowModal = ref(false)
+
+const { deleteRowById } = useViewData(meta, ref(props.view))
+
+const onDeleteRowClick = () => {
+  showDeleteRowModal.value = true
+}
+
+const onConfirmDeleteRowClick = async () => {
+  showDeleteRowModal.value = false
+  await deleteRowById(primaryKey.value)
+  reloadTrigger.trigger()
+  emit('cancel')
+  message.success('Row deleted')
+}
 </script>
 
 <template>
@@ -127,6 +143,47 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
       </div>
     </a-button>
 
+    <a-dropdown>
+      <a-button v-e="['c:actions']" class="nc-actions-menu-btn nc-toolbar-btn">
+        <div class="flex gap-1 items-center">
+          <!-- 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:duplicate-row']"
+              class="nc-menu-item"
+              :class="{ disabled: isNew }"
+              @click="!isNew && emit('duplicateRow')"
+            >
+              <MdiContentCopy class="text-gray-500" />
+              {{ $t('activity.duplicateRow') }}
+            </div>
+
+            <a-modal v-model:visible="showDeleteRowModal" title="Delete row?" @ok="onConfirmDeleteRowClick">
+              <p>Are you sure you want to delete this row?</p>
+            </a-modal>
+
+            <div
+              v-e="['a:actions:delete-row']"
+              class="nc-menu-item"
+              :class="{ disabled: isNew }"
+              @click="!isNew && onDeleteRowClick()"
+            >
+              <MdiDelete class="text-gray-500" />
+              {{ $t('activity.deleteRow') }}
+            </div>
+          </div>
+        </div>
+      </template>
+    </a-dropdown>
+
     <a-dropdown-button class="nc-expand-form-save-btn" type="primary" :disabled="!isUIAllowed('tableRowUpdate')" @click="save">
       <template #overlay>
         <a-menu class="nc-expand-form-save-dropdown-menu">

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

@@ -39,6 +39,8 @@ const props = defineProps<Props>()
 
 const emits = defineEmits(['update:modelValue', 'cancel', 'next', 'prev'])
 
+const { t } = useI18n()
+
 const row = ref(props.row)
 
 const state = toRef(props, 'state')
@@ -60,6 +62,8 @@ provide(MetaInj, meta)
 
 const { commentsDrawer, changedColumns, state: rowState, isNew, loadRow } = useProvideExpandedFormStore(meta, row)
 
+const duplicatingRowInProgress = ref(false)
+
 if (props.loadRow) {
   await loadRow()
 }
@@ -101,6 +105,23 @@ const onClose = () => {
   isExpanded.value = false
 }
 
+const onDuplicateRow = () => {
+  duplicatingRowInProgress.value = true
+  const newRow = Object.assign(
+    {},
+    {
+      row: row.value.row,
+      oldRow: {},
+      rowMeta: { new: true },
+    },
+  )
+  setTimeout(async () => {
+    row.value = newRow
+    duplicatingRowInProgress.value = false
+    message.success(t('msg.success.rowDuplicatedWithoutSavedYet'))
+  }, 500)
+}
+
 const reloadParentRowHook = inject(ReloadRowDataHookInj, createEventHook())
 
 // override reload trigger and use it to reload grid and the form itself
@@ -148,7 +169,7 @@ export default {
     class="nc-drawer-expanded-form"
     :class="{ active: isExpanded }"
   >
-    <SmartsheetExpandedFormHeader :view="props.view" @cancel="onClose" />
+    <SmartsheetExpandedFormHeader :view="props.view" @cancel="onClose" @duplicate-row="onDuplicateRow" />
 
     <div class="!bg-gray-100 rounded flex-1 relative">
       <template v-if="props.showNextPrevIcons">
@@ -169,8 +190,12 @@ export default {
       <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">
+            <div v-if="duplicatingRowInProgress" class="flex items-center justify-center h-[100px]">
+              <a-spin size="large" />
+            </div>
             <div
               v-for="(col, i) of fields"
+              v-else
               v-show="!isVirtualCol(col) || !isNew || col.uidt === UITypes.LinkToAnotherRecord"
               :key="col.title"
               class="mt-2 py-2"
@@ -237,9 +262,11 @@ export default {
 .nc-next-arrow {
   @apply absolute opacity-70 rounded-full transition-transform transition-background transition-opacity transform bg-white hover:(bg-gray-200) active:(scale-125 opacity-100) text-xl;
 }
+
 .nc-prev-arrow {
   @apply left-4 top-4;
 }
+
 .nc-next-arrow {
   @apply right-4 top-4;
 }

packages/nc-gui/composables/useViewData.ts

@@ -546,5 +546,6 @@ export function useViewData(
     removeLastEmptyRow,
     removeRowIfNew,
     navigateToSiblingRow,
+    deleteRowById,
   }
 }

packages/nc-gui/lang/en.json

@@ -387,6 +387,7 @@
     "saveAndStay": "Save & Stay",
     "insertRow": "Insert New Row",
     "deleteRow": "Delete Row",
+    "duplicateRow": "Duplicate Row",
     "deleteSelectedRow": "Delete Selected Rows",
     "importExcel": "Import Excel",
     "importCSV": "Import CSV",
@@ -716,6 +717,7 @@
     },
     "success": {
       "columnDuplicated": "Column duplicated successfully",
+      "rowDuplicatedWithoutSavedYet": "Row duplicated (not saved)",
       "updatedUIACL": "Updated UI ACL for tables successfully",
       "pluginUninstalled": "Plugin uninstalled successfully",
       "pluginSettingsSaved": "Plugin settings saved successfully",

tests/playwright/pages/Dashboard/ExpandedForm/index.ts

@@ -7,6 +7,7 @@ export class ExpandedFormPage extends BasePage {
   readonly addNewTableButton: Locator;
   readonly copyUrlButton: Locator;
   readonly toggleCommentsButton: Locator;
+  readonly moreOptionsButton: Locator;
 
   constructor(dashboard: DashboardPage) {
     super(dashboard.rootPage);
@@ -14,12 +15,44 @@ export class ExpandedFormPage extends BasePage {
     this.addNewTableButton = this.dashboard.get().locator('.nc-add-new-table');
     this.copyUrlButton = this.dashboard.get().locator('.nc-copy-row-url:visible');
     this.toggleCommentsButton = this.dashboard.get().locator('.nc-toggle-comments:visible');
+    this.moreOptionsButton = this.dashboard.get().locator('.nc-actions-menu-btn:visible').last();
   }
 
   get() {
     return this.dashboard.get().locator(`.nc-drawer-expanded-form`);
   }
 
+  async clickDuplicateRow() {
+    await this.moreOptionsButton.click();
+    // wait for the menu to appear
+    await this.rootPage.waitForTimeout(1000);
+    await this.rootPage.locator('.nc-menu-item:has-text("Duplicate Row")').click();
+
+    // wait for loader to disappear
+    // await this.dashboard.waitForLoaderToDisappear();
+    await this.rootPage.waitForTimeout(2000);
+  }
+
+  async clickDeleteRow() {
+    await this.moreOptionsButton.click();
+    // wait for the menu to appear
+    await this.rootPage.waitForTimeout(1000);
+    await this.rootPage.locator('.nc-menu-item:has-text("Delete Row")').click();
+    await this.rootPage.locator('.ant-btn-primary:has-text("OK")').click();
+  }
+
+  async isDisabledDuplicateRow() {
+    await this.moreOptionsButton.click();
+    const isDisabled = await this.rootPage.locator('.nc-menu-item.disabled:has-text("Duplicate Row")');
+    return await isDisabled.count();
+  }
+
+  async isDisabledDeleteRow() {
+    await this.moreOptionsButton.click();
+    const isDisabled = await this.rootPage.locator('.nc-menu-item.disabled:has-text("Delete Row")');
+    return await isDisabled.count();
+  }
+
   async getShareRowUrl() {
     await this.copyUrlButton.click();
     await this.verifyToast({ message: 'Copied to clipboard' });

tests/playwright/tests/expandedFormUrl.spec.ts

@@ -1,8 +1,9 @@
-import { test } from '@playwright/test';
+import { expect, test } from '@playwright/test';
 import { DashboardPage } from '../pages/Dashboard';
 import { GalleryPage } from '../pages/Dashboard/Gallery';
 import { GridPage } from '../pages/Dashboard/Grid';
 import setup from '../setup';
+import { ToolbarPage } from '../pages/Dashboard/common/Toolbar';
 
 test.describe('Expanded form URL', () => {
   let dashboard: DashboardPage;
@@ -132,3 +133,48 @@ test.describe('Expanded form URL', () => {
     await viewTestTestTable('gallery');
   });
 });
+
+test.describe('Expanded record duplicate & delete options', () => {
+  let dashboard: DashboardPage, toolbar: ToolbarPage;
+  let context: any;
+
+  test.beforeEach(async ({ page }) => {
+    context = await setup({ page });
+    dashboard = new DashboardPage(page, context.project);
+    toolbar = dashboard.grid.toolbar;
+  });
+
+  test('Grid', async () => {
+    await dashboard.closeTab({ title: 'Team & Auth' });
+    await dashboard.treeView.openTable({ title: 'Actor' });
+
+    // create filter to narrow down the number of records
+    await toolbar.clickFilter();
+    await toolbar.filter.add({
+      columnTitle: 'FirstName',
+      opType: 'is equal',
+      value: 'NICK',
+      isLocallySaved: false,
+    });
+    await toolbar.clickFilter();
+
+    await dashboard.grid.verifyRowCount({ count: 3 });
+
+    // expand row & duplicate
+    await dashboard.grid.openExpandedRow({ index: 0 });
+    await dashboard.expandedForm.clickDuplicateRow();
+    await dashboard.expandedForm.save();
+    await dashboard.grid.verifyRowCount({ count: 4 });
+
+    // expand row & delete
+    await dashboard.grid.openExpandedRow({ index: 3 });
+    await dashboard.expandedForm.clickDeleteRow();
+    await dashboard.grid.verifyRowCount({ count: 3 });
+
+    // expand row, duplicate & verify menu
+    await dashboard.grid.openExpandedRow({ index: 0 });
+    await dashboard.expandedForm.clickDuplicateRow();
+    expect(await dashboard.expandedForm.isDisabledDeleteRow()).toBe(1);
+    expect(await dashboard.expandedForm.isDisabledDuplicateRow()).toBe(1);
+  });
+});