feat(gui-v2): context menu

Signed-off-by: Pranav C <pranavxc@gmail.com>

packages/nc-gui-v2/components/smartsheet/Grid.vue

@@ -39,6 +39,8 @@ const editEnabled = ref(false)
 const { sqlUi } = useProject()
 const { xWhere } = useSmartsheetStoreOrThrow()
 const addColumnDropdown = ref(false)
+const contextMenu = ref(false)
+const contextMenuTarget = ref(false)
 
 const visibleColLength = computed(() => {
   const cols = fields.value
@@ -51,8 +53,10 @@ const {
   formattedData: data,
   updateRowProperty,
   changePage,
-  addRow,
+  addEmptyRow,
   selectedRows,
+  deleteRow,
+  deleteSelectedRows,
 } = useViewData(meta, view as any, xWhere)
 const { loadGridViewColumns, updateWidth, resizingColWidth, resizingCol } = useGridViewColumnWidth(view)
 onMounted(loadGridViewColumns)
@@ -105,12 +109,16 @@ defineExpose({
 // watchEffect(() => {
 if (meta) useProvideColumnCreateStore(meta)
 // })
+
+// reset context menu target on hide
+watch(contextMenu, () => (contextMenuTarget.value = null))
 </script>
 
 <template>
   <div class="flex flex-col h-100 min-h-0 w-100">
+    <a-dropdown v-model:visible="contextMenu" :trigger="['contextmenu']">
       <div class="nc-grid-wrapper min-h-0 flex-1 scrollbar-thin-primary">
-      <table class="xc-row-table nc-grid backgroundColorDefault">
+        <table class="xc-row-table nc-grid backgroundColorDefault" @contextmenu.prevent="contextMenu = true">
           <thead>
             <tr>
               <th>#</th>
@@ -143,9 +151,12 @@ if (meta) useProvideColumnCreateStore(meta)
             <tr v-for="({ row, rowMeta }, rowIndex) in data" :key="rowIndex" class="nc-grid-row group">
               <td key="row-index" class="caption nc-grid-cell">
                 <div class="align-center flex w-[80px]">
-                <div class="group-hover:hidden" :class="{ hidden: rowMeta.checked }">{{ rowIndex + 1 }}</div>
-                <div :class="{ hidden: !rowMeta.checked, flex: rowMeta.checked }" class="group-hover:flex w-full align-center">
-                  <a-checkbox v-model:checked="rowMeta.checked" />
+                  <div class="group-hover:hidden" :class="{ hidden: rowMeta.selected }">{{ rowIndex + 1 }}</div>
+                  <div
+                    :class="{ hidden: !rowMeta.selected, flex: rowMeta.selected }"
+                    class="group-hover:flex w-full align-center"
+                  >
+                    <a-checkbox v-model:checked="rowMeta.selected" />
                     <span class="flex-1" />
                     <MdiArrowExpandIcon class="text-sm text-pink hidden group-hover:inline-block" />
                   </div>
@@ -156,13 +167,13 @@ if (meta) useProvideColumnCreateStore(meta)
                 :key="rowIndex + columnObj.title"
                 class="cell pointer nc-grid-cell"
                 :class="{
-                active: !isPublicView && selected.col === colIndex && selected.row === rowIndex
+                  active: !isPublicView && selected.col === colIndex && selected.row === rowIndex,
                 }"
                 :data-col="columnObj.id"
                 @click="selectCell(rowIndex, colIndex)"
                 @dblclick="editEnabled = true"
+                @contextmenu="contextMenuTarget = { row: rowIndex, col: colIndex }"
               >
-
                 <SmartsheetVirtualCell v-if="isVirtualCol(columnObj)" v-model="row[columnObj.title]" :column="columnObj" />
 
                 <SmartsheetCell
@@ -180,7 +191,7 @@ if (meta) useProvideColumnCreateStore(meta)
                 v-t="['c:row:add:grid-bottom']"
                 :colspan="visibleColLength + 1"
                 class="text-left pointer nc-grid-add-new-cell"
-              @click="addRow()"
+                @click="addEmptyRow()"
               >
                 <a-tooltip top left>
                   <div class="w-min flex align-center">
@@ -198,10 +209,16 @@ if (meta) useProvideColumnCreateStore(meta)
           </tbody>
         </table>
       </div>
-    <SmartsheetPagination />
-    <a-dropdown :trigger="['contextmenu']">
-<
+      <template #overlay>
+        <div class="bg-white shadow">
+          <div v-if="contextMenuTarget" class="nc-menu-item" @click="deleteRow(contextMenuTarget.row)">Delete row</div>
+          <div class="nc-menu-item" @click="deleteSelectedRows">Delete all selected rows</div>
+          <div v-if="contextMenuTarget" class="nc-menu-item">Clear cell</div>
+          <div v-if="contextMenuTarget" class="nc-menu-item" @click="addEmptyRow(contextMenuTarget.row + 1)">Insert new row</div>
+        </div>
+      </template>
     </a-dropdown>
+    <SmartsheetPagination />
   </div>
 </template>
 
@@ -222,6 +239,7 @@ if (meta) useProvideColumnCreateStore(meta)
     & > * {
       @apply flex align-center h-auto;
     }
+
     overflow: hidden;
   }
 

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

@@ -1,9 +1,9 @@
 import type { Api, PaginatedType, TableType, ViewType } from 'nocodb-sdk'
 import type { ComputedRef, Ref } from 'vue'
+import { notification } from 'ant-design-vue'
 import { useNuxtApp } from '#app'
 import { useProject } from '#imports'
 import { NOCO } from '~/lib'
-import { notification } from 'ant-design-vue'
 import { extractSdkResponseErrorMsg } from '~/utils'
 
 const formatData = (list: Record<string, any>[]) =>
@@ -13,13 +13,18 @@ const formatData = (list: Record<string, any>[]) =>
     rowMeta: {},
   }))
 
+interface Row {
+  row: Record<string, any>
+  oldRow: Record<string, any>
+  rowMeta?: any
+}
+
 export function useViewData(
   meta: Ref<TableType> | ComputedRef<TableType> | undefined,
   viewMeta: Ref<ViewType & { id: string }> | ComputedRef<ViewType & { id: string }> | undefined,
   where?: ComputedRef<string | undefined>,
 ) {
-  const data = ref<Record<string, any>[]>()
-  const formattedData = ref<{ row: Record<string, any>; oldRow: Record<string, any>; rowMeta?: any }[]>([])
+  const formattedData = ref<Row[]>([])
   const paginationData = ref<PaginatedType>({ page: 1, pageSize: 25 })
   const selectedRows = reactive([])
 
@@ -32,7 +37,6 @@ export function useViewData(
       ...params,
       where: where?.value,
     })
-    data.value = response.list
     formattedData.value = formatData(response.list)
     paginationData.value = response.pageInfo
   }
@@ -74,11 +78,10 @@ export function useViewData(
               })
               .then(() => {})
           */
-    } catch (error) {
+    } catch (error: any) {
       notification.error({
         message: 'Row update failed',
-        description:
-          await extractSdkResponseErrorMsg(error),
+        description: await extractSdkResponseErrorMsg(error),
       })
     }
   }
@@ -104,11 +107,10 @@ export function useViewData(
         rowMeta: {},
         oldRow: { ...insertedData },
       })
-    } catch (error) {
+    } catch (error: any) {
       notification.error({
         message: 'Row insert failed',
-        description:
-          await extractSdkResponseErrorMsg(error),
+        description: await extractSdkResponseErrorMsg(error),
       })
     }
   }
@@ -118,23 +120,104 @@ export function useViewData(
     await loadData({ offset: (page - 1) * (paginationData.value.pageSize || 25), where: where?.value } as any)
   }
 
-  const addRow = () => {
-    formattedData.value.push({
+  const addEmptyRow = (addAfter = formattedData.value.length) => {
+    formattedData.value[addAfter] = {
       row: {},
       oldRow: {},
       rowMeta: { new: true },
+    }
+  }
+
+  const deleteRowById = async (id: string) => {
+    if (!id) {
+      throw new Error("Delete not allowed for table which doesn't have primary Key")
+    }
+
+    const res: any = await $api.dbViewRow.delete(
+      'noco',
+      project.value.id as string,
+      meta?.value.id as string,
+      viewMeta?.value.id as string,
+      id,
+    )
+
+    if (res.message) {
+      notification.info({
+        message: 'Row delete failed',
+        description: h('div', {
+          innerHTML: `<div style="padding:10px 4px">Unable to delete row with ID ${id} because of the following:
+                <br><br>${res.message.join('<br>')}<br><br>
+                Clear the data first & try again</div>`,
+        }),
+      })
+      return false
+    }
+
+    return true
+  }
+
+  const deleteRow = async (rowIndex: number) => {
+    try {
+      const row = formattedData.value[rowIndex]
+      if (row.rowMeta.new) {
+        const id = meta?.value?.columns
+          ?.filter((c) => c.pk)
+          .map((c) => row.row[c.title as any])
+          .join('___')
+
+        const deleted = await deleteRowById(id as string)
+        if (!deleted) {
+          return
+        }
+      }
+      formattedData.value.splice(rowIndex, 1)
+    } catch (e: any) {
+      notification.error({
+        message: 'Failed to delete row',
+        description: await extractSdkResponseErrorMsg(e),
       })
     }
+  }
+
+  const deleteSelectedRows = async () => {
+    let row = formattedData.value.length
+    while (row--) {
+      try {
+        const { row: rowObj, rowMeta } = formattedData.value[row]
+        if (!rowMeta.selected) {
+          continue
+        }
+        if (!rowMeta.new) {
+          const id = meta?.value?.columns
+            ?.filter((c) => c.pk)
+            .map((c) => rowObj[c.title as string])
+            .join('___')
+
+          const successfulDeletion = await deleteRowById(id as string)
+          if (!successfulDeletion) {
+            continue
+          }
+        }
+        formattedData.value.splice(row, 1)
+      } catch (e: any) {
+        return notification.error({
+          message: 'Failed to delete row',
+          description: await extractSdkResponseErrorMsg(e),
+        })
+      }
+    }
+  }
 
   return {
-    data,
     loadData,
     paginationData,
     formattedData,
     insertRow,
     updateRowProperty,
     changePage,
-    addRow,
+    addEmptyRow,
     selectedRows,
+    deleteRow,
+    deleteSelectedRows,
   }
 }