feat: confirm before deleting (#581)

Implement #579

app/renderer/ui/delete-confirm-view/delete-confirm-view.vue

@@ -1,27 +1,19 @@
 <script setup lang="ts">
 import { disposable } from "@/base/dispose";
+import { useCreateDeleteConfirmView } from "./useDeleteConfirmView.ts";
 
-// ======================
-// State
-// ======================
-const uiState = uiStateService.useState();
+const { onResolve, onReject } = useCreateDeleteConfirmView();
 
 // ======================
 // Event Handler
 // ======================
-const onClick = () => {
-  uiState.deleteConfirmShown = false;
-};
 
 const onCancel = () => {
-  onClick();
+  onReject();
 };
 
 const onConfirm = () => {
-  const deleteIds = JSON.parse(JSON.stringify(uiState.selectedIds));
-  uiState.selectedIndex = [];
-  onClick();
-  paperService.delete(deleteIds);
+  onResolve();
 };
 
 disposable(
@@ -36,7 +28,7 @@ disposable(shortcutService.register("Enter", onConfirm));
   <div
     id="modal-view"
     class="absolute w-full h-full top-0 left-0"
-    @click="onClick"
+    @click="onCancel"
   >
     <div
       class="fixed top-0 right-0 left-0 z-50 w-screen h-screen bg-neutral-800 bg-opacity-50 dark:bg-neutral-900 dark:bg-opacity-80 dark:text-neutral-300"

app/renderer/ui/delete-confirm-view/event-bus.ts

@@ -0,0 +1,7 @@
+import mitt from "mitt";
+
+const emitter = mitt();
+
+export function useEventBus() {
+  return emitter;
+}

app/renderer/ui/delete-confirm-view/useDeleteConfirmView.ts

@@ -0,0 +1,41 @@
+import { useEventBus } from "./event-bus.ts";
+
+const REJECT_EVENT = "reject_delete_confirm_view";
+
+const RESOLVE_EVENT = "resolve_delete_confirm_view";
+
+export function useCreateDeleteConfirmView() {
+  const eventBus = useEventBus();
+
+  function onReject() {
+    eventBus.emit(REJECT_EVENT);
+  }
+
+  function onResolve() {
+    eventBus.emit(RESOLVE_EVENT);
+  }
+
+  return { onReject, onResolve };
+}
+
+export function useDeleteConfirmView() {
+  const uiState = uiStateService.useState();
+  const eventBus = useEventBus();
+  function confirm() {
+    uiState.deleteConfirmShown = true;
+    return new Promise((resolve) => {
+      eventBus.on(RESOLVE_EVENT, () => {
+        resolve(true);
+        uiState.deleteConfirmShown = false;
+      });
+      eventBus.on(REJECT_EVENT, () => {
+        resolve(false);
+        uiState.deleteConfirmShown = false;
+      });
+    }).finally(() => {
+      eventBus.off(RESOLVE_EVENT);
+      eventBus.off(REJECT_EVENT);
+    });
+  }
+  return { confirm };
+}

app/renderer/ui/main-view/main-view.vue

@@ -20,6 +20,7 @@ import WindowMenuBar from "./menubar-view/window-menu-bar.vue";
 import { Process } from "@/base/process-id.ts";
 import { cmdOrCtrl, ShortcutEvent } from "@/common/utils.ts";
 import CandidateView from "./candidate-view/candidate-view.vue";
+import { useDeleteConfirmView } from "../delete-confirm-view/useDeleteConfirmView.ts";
 
 // ================================
 // State
@@ -43,6 +44,8 @@ const dataView: Ref<HTMLElement | null> = ref(null);
 
 let disposeCallbacks: (() => void)[] = [];
 
+const { confirm: openDeleteConfirmView } = useDeleteConfirmView();
+
 //Prevent space bar from scrolling page
 disposable(
   shortcutService.register(
@@ -358,9 +361,17 @@ const removeSelectedEntitiesFrom = (
   }
 };
 
+const deleteSelectedLibrary = async () => {
+  const isConfirmed = await openDeleteConfirmView();
+  if (!isConfirmed) return;
+  const deleteIds = JSON.parse(JSON.stringify(uiState.selectedIds));
+  uiState.selectedIndex = [];
+  await paperService.delete(deleteIds);
+};
+
 const deleteSelectedEntities = () => {
   if (uiState.contentType === "library") {
-    uiState.deleteConfirmShown = true;
+    deleteSelectedLibrary();
   }
 };
 

app/renderer/ui/sidebar-view/sidebar-feeds-view.vue

@@ -12,6 +12,9 @@ import { IFeedCollection } from "@/repositories/db-repository/feed-repository";
 import { disposable } from "@/base/dispose";
 import CollopseGroup from "./components/collopse-group.vue";
 import SectionItem from "./components/section-item.vue";
+import { useDeleteConfirmView } from "@/renderer/ui/delete-confirm-view/useDeleteConfirmView.ts";
+
+const { confirm: openDeleteConfirmView } = useDeleteConfirmView();
 
 const colorClass = (color?: string) => {
   switch (color) {
@@ -70,9 +73,11 @@ const onAddNewFeedClicked = () => {
 disposable(
   PLMainAPI.contextMenuService.on(
     "sidebarContextMenuDeleteClicked",
-    (newValue: { value: { data: string; type: string } }) => {
+    async (newValue: { value: { data: string; type: string } }) => {
+      const isConfirmed = await openDeleteConfirmView();
+      if (!isConfirmed) return;
       if (uiState.contentType === "feed") {
-        feedService.delete([newValue.value.data]);
+        await feedService.delete([newValue.value.data]);
         uiState.selectedFeed = "feed-all";
       }
     }

app/renderer/ui/sidebar-view/sidebar-library-view.vue

@@ -20,6 +20,7 @@ import TreeRoot from "./components/tree/tree-root.vue";
 import ItemRow from "./components/tree/item-row.vue";
 import Counter from "./components/counter.vue";
 import Spinner from "@/renderer/ui/components/spinner.vue";
+import { useDeleteConfirmView } from "@/renderer/ui/delete-confirm-view/useDeleteConfirmView.ts";
 
 // ================================
 // State
@@ -30,6 +31,8 @@ const uiState = uiStateService.useState();
 const paperState = paperService.useState();
 const editingItemId = ref("");
 
+const { confirm: openDeleteConfirmView } = useDeleteConfirmView();
+
 // ================================
 // Data
 // ================================
@@ -84,16 +87,18 @@ const onSelect = (payload: {
       uiState.selectedQuerySentenceIds.includes(payload._id) &&
       uiState.selectedQuerySentenceIds.length > 1
     ) {
-      uiState.selectedQuerySentenceIds = uiState.selectedQuerySentenceIds.filter(
-        (id) => id !== payload._id
-      );
+      uiState.selectedQuerySentenceIds =
+        uiState.selectedQuerySentenceIds.filter((id) => id !== payload._id);
 
-      uiState.querySentencesSidebar = Array.from(uiState.querySentencesSidebar.filter(
-        (query) => query !== payload.query
-      ));
+      uiState.querySentencesSidebar = Array.from(
+        uiState.querySentencesSidebar.filter((query) => query !== payload.query)
+      );
     } else {
       uiState.selectedQuerySentenceIds.push(payload._id);
-      uiState.querySentencesSidebar = [...uiState.querySentencesSidebar, payload.query];
+      uiState.querySentencesSidebar = [
+        ...uiState.querySentencesSidebar,
+        payload.query,
+      ];
     }
   } else {
     // Single selection
@@ -211,12 +216,18 @@ const onContextMenu = (
 disposable(
   PLMainAPI.contextMenuService.on(
     "sidebarContextMenuDeleteClicked",
-    (newValue: { value: { data: string; type: PaperSmartFilterType } }) => {
+    async (newValue: {
+      value: { data: string; type: PaperSmartFilterType };
+    }) => {
+      const isConfirmed = await openDeleteConfirmView();
+      if (!isConfirmed) return;
       if (uiState.contentType === "library") {
         if (newValue.value.type === PaperSmartFilter.schema.name) {
-          smartFilterService.delete(newValue.value.type, [newValue.value.data]);
+          await smartFilterService.delete(newValue.value.type, [
+            newValue.value.data,
+          ]);
         } else {
-          categorizerService.delete(newValue.value.type as any, [
+          await categorizerService.delete(newValue.value.type as any, [
             newValue.value.data,
           ]);
         }

package.json

@@ -54,6 +54,7 @@
     "markdown-it-texmath": "1.0.0",
     "mathml-to-latex": "1.2.0",
     "md5-file": "5.0.0",
+    "mitt": "^3.0.1",
     "p-timeout": "6.1.2",
     "pdfjs-dist": "4.0.269",
     "pinia": "2.1.7",