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

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

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { message } from 'ant-design-vue'
-import type { ViewType } from 'nocodb-sdk'
+import type { KanbanType, ViewType } from 'nocodb-sdk'
 import {
   ReloadRowDataHookInj,
   isMac,
@@ -42,6 +42,8 @@ const save = async () => {
   }
 }
 
+// const FOO: KanbanType
+
 // todo: accept as a prop / inject
 const iconColor = '#1890ff'
 
@@ -72,6 +74,26 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
     }
   }
 })
+
+const { deleteRowById } = useViewData(meta, props.view)
+
+const duplicateRow = () => alert('duplicateRow')
+
+const onDeleteRowClick = async () => {
+  // alert('deleteRow')
+  await deleteRowById(primaryKey.value)
+  reloadTrigger.trigger()
+  // loadData()
+  // deleteRow
+}
+
+// const { deleteRowById, loadData } = useViewData(meta, view)
+
+// const onClickDelete = async () => {
+//   await deleteRowById(primaryKey)
+//   loadData()
+// }
+
 </script>
 
 <template>
@@ -127,7 +149,37 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
       </div>
     </a-button>
 
-    <SmartsheetExpandedFormMoreActions :meta="meta" :view="view" :primaryKey="primaryKey" />
+    <!-- <SmartsheetExpandedFormMoreActions :meta="meta" :view="view" :primaryKey="primaryKey" /> -->
+
+    <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>
+    <!-- <SmartsheetExpandedFormMoreActions @onClickDelete="onClickDelete" /> -->
 
     <a-dropdown-button class="nc-expand-form-save-btn" type="primary" :disabled="!isUIAllowed('tableRowUpdate')" @click="save">
       <template #overlay>

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

@@ -1,8 +1,8 @@
 <script lang="ts" setup>
 // import { ActiveViewInj, FieldsInj, IsPublicInj, MetaInj, inject, ref, useI18n, useNuxtApp, useProject } from '#imports'
 
-import { TableType, ViewType } from "nocodb-sdk"
+import type { TableType, ViewType } from "nocodb-sdk"
-import { Ref } from "vue";
+
 
 // const { t } = useI18n()
 
@@ -29,13 +29,17 @@ const { meta, view, primaryKey } = defineProps<{
   primaryKey: string
 }>()
 
+const reloadTrigger = inject(ReloadRowDataHookInj, createEventHook())
+
 const { deleteRowById } = useViewData(ref(meta), ref(view))
 
 const duplicateRow = () => alert('duplicateRow')
 
-const onDeleteRowClick = () => {
+const onDeleteRowClick = async () => {
-  alert('deleteRow')
+  // alert('deleteRow')
-  deleteRowById(primaryKey)
+  await deleteRowById(primaryKey)
+  reloadTrigger.trigger()
+  // loadData()
   // deleteRow
 }
 </script>

packages/nc-gui/composables/useViewData.ts

@@ -33,6 +33,7 @@ const formatData = (list: Row[]) =>
 
 export function useViewData(
   meta: Ref<TableType | undefined> | ComputedRef<TableType | undefined>,
+  // meta: Ref<Omit<TableType, 'table_name'> | undefined> | ComputedRef<Omit<TableType, 'table_name'> | undefined>,
   viewMeta: Ref<ViewType | undefined> | ComputedRef<(ViewType & { id: string }) | undefined>,
   where?: ComputedRef<string | undefined>,
 ) {
@@ -340,6 +341,28 @@ export function useViewData(
     $e('a:grid:pagination')
   }
 
+
+  // async function deleteRow(row: Row) {
+  //   try {
+  //     if (!row.rowMeta.new) {
+  //       const id = (meta?.value?.columns as ColumnType[])
+  //         ?.filter((c) => c.pk)
+  //         .map((c) => row.row[c.title!])
+  //         .join('___')
+
+  //       const deleted = await deleteRowById(id as string)
+  //       if (!deleted) {
+  //         return
+  //       }
+  //     }
+
+  //     // remove deleted row from state
+  //     removeRowFromTargetStack(row)
+  //   } catch (e: any) {
+  //     message.error(`${t('msg.error.deleteRowFailed')}: ${await extractSdkResponseErrorMsg(e)}`)
+  //   }
+  // }
+
   async function deleteRowById(id: string) {
     if (!id) {
       throw new Error("Delete not allowed for table which doesn't have primary Key")