feat(spaces): confirm before deleting math sheets and drawings (#848)

Author: antonreshetov

src/renderer/components/drawings/List.vue

@@ -5,6 +5,7 @@ import {
   useContentSort,
   useCopyToClipboard,
   useDeleteShortcut,
+  useDialog,
   useDrawings,
   useInlineRename,
 } from '@/composables'
@@ -26,6 +27,7 @@ const {
 } = useDrawings()
 const copyToClipboard = useCopyToClipboard()
 const { contentSortState } = useContentSort()
+const { confirm } = useDialog()
 
 function copyLinkForNote(name: string) {
   copyToClipboard(`![${name}](masscode://drawing/${encodeURIComponent(name)})`)
@@ -153,12 +155,29 @@ function selectDrawingFromList(id: string, event: MouseEvent) {
   focusDrawingListItem(event)
 }
 
+async function confirmDeleteDrawing(id: string) {
+  const drawing = drawings.value.find(item => item.id === id)
+
+  const isConfirmed = await confirm({
+    title: i18n.t('messages:confirm.deletePermanently', {
+      name: drawing?.name ?? '',
+    }),
+    content: i18n.t('messages:warning.noUndo'),
+  })
+
+  if (!isConfirmed) {
+    return
+  }
+
+  await deleteDrawing(id)
+}
+
 function deleteActiveDrawing() {
   if (!activeDrawingId.value) {
     return
   }
 
-  void deleteDrawing(activeDrawingId.value)
+  void confirmDeleteDrawing(activeDrawingId.value)
 }
 
 useDeleteShortcut({
@@ -281,7 +300,9 @@ defineExpose({
             {{ i18n.t("spaces.drawings.exportImage") }}
           </ContextMenu.ContextMenuItem>
           <ContextMenu.ContextMenuSeparator />
-          <ContextMenu.ContextMenuItem @click="deleteDrawing(drawing.id)">
+          <ContextMenu.ContextMenuItem
+            @click="confirmDeleteDrawing(drawing.id)"
+          >
             {{ i18n.t("action.delete.common") }}
           </ContextMenu.ContextMenuItem>
         </ContextMenu.ContextMenuContent>

src/renderer/components/math-notebook/SheetList.vue

@@ -4,6 +4,7 @@ import {
   useApp,
   useContentSort,
   useDeleteShortcut,
+  useDialog,
   useInlineRename,
   useMathNotebook,
 } from '@/composables'
@@ -22,6 +23,7 @@ const {
   renameSheet,
 } = useMathNotebook()
 const { contentSortState } = useContentSort()
+const { confirm } = useDialog()
 
 const {
   editingId,
@@ -146,12 +148,29 @@ function selectSheetFromList(id: string, event: MouseEvent) {
   focusSheetListItem(event)
 }
 
+async function confirmDeleteSheet(id: string) {
+  const sheet = sheets.value.find(item => item.id === id)
+
+  const isConfirmed = await confirm({
+    title: i18n.t('messages:confirm.deletePermanently', {
+      name: sheet?.name ?? '',
+    }),
+    content: i18n.t('messages:warning.noUndo'),
+  })
+
+  if (!isConfirmed) {
+    return
+  }
+
+  deleteSheet(id)
+}
+
 function deleteActiveSheet() {
   if (!activeSheetId.value) {
     return
   }
 
-  deleteSheet(activeSheetId.value)
+  void confirmDeleteSheet(activeSheetId.value)
 }
 
 useDeleteShortcut({
@@ -262,7 +281,7 @@ defineExpose({
             {{ i18n.t("action.rename") }}
           </ContextMenu.ContextMenuItem>
           <ContextMenu.ContextMenuSeparator />
-          <ContextMenu.ContextMenuItem @click="deleteSheet(sheet.id)">
+          <ContextMenu.ContextMenuItem @click="confirmDeleteSheet(sheet.id)">
             {{ i18n.t("action.delete.common") }}
           </ContextMenu.ContextMenuItem>
         </ContextMenu.ContextMenuContent>