feat(views/table): delete row from context menu (closes #6288)

apps/client/src/services/branches.ts

@@ -95,7 +95,15 @@ async function moveToParentNote(branchIdsToMove: string[], newParentBranchId: st
     }
 }
 
-async function deleteNotes(branchIdsToDelete: string[], forceDeleteAllClones = false) {
+/**
+ * Shows the delete confirmation screen
+ *
+ * @param branchIdsToDelete the list of branch IDs to delete.
+ * @param forceDeleteAllClones whether to check by default the "Delete also all clones" checkbox.
+ * @param moveToParent whether to automatically go to the parent note path after a succesful delete. Usually makes sense if deleting the active note(s).
+ * @returns promise that returns false if the operation was cancelled or there was nothing to delete, true if the operation succeeded.
+ */
+async function deleteNotes(branchIdsToDelete: string[], forceDeleteAllClones = false, moveToParent = true) {
     branchIdsToDelete = filterRootNote(branchIdsToDelete);
 
     if (branchIdsToDelete.length === 0) {
@@ -110,10 +118,12 @@ async function deleteNotes(branchIdsToDelete: string[], forceDeleteAllClones = f
         return false;
     }
 
-    try {
+    if (moveToParent) {
-        await activateParentNotePath();
+        try {
-    } catch (e) {
+            await activateParentNotePath();
-        console.error(e);
+        } catch (e) {
+            console.error(e);
+        }
     }
 
     const taskId = utils.randomString(10);

apps/client/src/translations/en/translation.json

@@ -1949,5 +1949,8 @@
   "book_properties_config": {
     "hide-weekends": "Hide weekends",
     "display-week-numbers": "Display week numbers"
+  },
+  "table_context_menu": {
+    "delete_row": "Delete row"
   }
 }

apps/client/src/widgets/view_widgets/table_view/context_menu.ts

@@ -0,0 +1,27 @@
+import { RowComponent, Tabulator } from "tabulator-tables";
+import contextMenu from "../../../menus/context_menu.js";
+import { TableData } from "./rows.js";
+import branches from "../../../services/branches.js";
+import { t } from "../../../services/i18n.js";
+
+export function setupContextMenu(tabulator: Tabulator) {
+    tabulator.on("rowContext", showRowContextMenu);
+}
+
+export function showRowContextMenu(_e: UIEvent, row: RowComponent) {
+    const e = _e as MouseEvent;
+    const rowData = row.getData() as TableData;
+    contextMenu.show({
+        items: [
+            {
+                title: t("table_context_menu.delete_row"),
+                uiIcon: "bx bx-trash",
+                handler: () => branches.deleteNotes([ rowData.branchId ], false, false)
+            }
+        ],
+        selectMenuItemHandler: () => {},
+        x: e.pageX,
+        y: e.pageY
+    });
+    e.preventDefault();
+}

apps/client/src/widgets/view_widgets/table_view/index.ts

@@ -13,6 +13,7 @@ import { canReorderRows, configureReorderingRows } from "./dragging.js";
 import buildFooter from "./footer.js";
 import getPromotedAttributeInformation, { buildRowDefinitions } from "./rows.js";
 import { buildColumnDefinitions } from "./columns.js";
+import { setupContextMenu } from "./context_menu.js";
 
 const TPL = /*html*/`
 <div class="table-view">
@@ -144,6 +145,7 @@ export default class TableView extends ViewMode<StateInfo> {
             persistenceReaderFunc: (_id, type: string) => this.persistentData?.[type],
         });
         configureReorderingRows(this.api);
+        setupContextMenu(this.api);
         this.setupEditing();
     }