Refactoring delete pages action

Author: ciur

frontend/apps/ui/src/components/document/ContextMenu__to_be_removed.tsx

@@ -38,13 +38,13 @@ import {
 } from "@tabler/icons-react"
 import {useContext, useRef} from "react"
 import {useNavigate} from "react-router-dom"
-import DeleteEntireDocumentConfirm from "./DeleteEntireDocumentConfirm"
-import DeletePagesButton from "./DeletePagesButton"
-import EditTitleButton from "./EditTitleButton"
+import DeleteEntireDocumentConfirm from "../../features/document/components/DeleteEntireDocumentConfirm"
+import DeletePagesButton from "../../features/document/components/DeletePagesButton"
+import EditTitleButton from "../../features/document/components/EditTitleButton"
+import PageOCRDialog from "../../features/document/components/PageOCRDialog"
+import RotateButton from "../../features/document/components/RotateButton"
+import RotateCCButton from "../../features/document/components/RotateCCButton"
 import MoveDocumentDialogConfirm from "./MoveDocumentDialogConfirm"
-import PageOCRDialog from "./PageOCRDialog"
-import RotateButton from "./RotateButton"
-import RotateCCButton from "./RotateCCButton"
 
 interface Args {
   opened: boolean

frontend/apps/ui/src/components/document/DeletePagesButton.tsx

@@ -1,31 +1,33 @@
 import {useAppDispatch} from "@/app/hooks"
 import ToggleSecondaryPanel from "@/components/DualPanel/ToggleSecondaryPanel"
 import PanelContext from "@/contexts/PanelContext"
+import DeletePagesButton from "@/features/document/components/DeletePagesButton"
+import EditTitleButton from "@/features/document/components/EditTitleButton"
 import {updateActionPanel} from "@/features/ui/uiSlice"
 import {useRuntimeConfig} from "@/hooks/runtime_config"
 import {Group} from "@mantine/core"
 import {useViewportSize} from "@mantine/hooks"
 import {useContext, useEffect, useRef} from "react"
-import DeletePagesButton from "./DeletePagesButton"
-import EditTitleButton from "./EditTitleButton"
 
 import DuplicatePanelButton from "@/components/DualPanel/DuplicatePanelButton"
 import DownloadButton from "@/features/document/components/DownloadButton"
+import RotateButton from "@/features/document/components/RotateButton"
+import RotateCCButton from "@/features/document/components/RotateCCButton"
+import RunOCRButton from "@/features/document/components/RunOCRButton"
 import {useCurrentDocVer, useSelectedPages} from "@/features/document/hooks"
-import RotateButton from "./RotateButton"
-import RotateCCButton from "./RotateCCButton"
-import RunOCRButton from "./RunOCRButton"
 
 interface Args {
   onEditNodeTitleClicked: () => void
   onRotateCWClicked: () => void
   onRotateCCClicked: () => void
+  onDeletePagesClicked: () => void
 }
 
 export default function ActionButtons({
   onEditNodeTitleClicked,
   onRotateCWClicked,
-  onRotateCCClicked
+  onRotateCCClicked,
+  onDeletePagesClicked
 }: Args) {
   const {height, width} = useViewportSize()
   const dispatch = useAppDispatch()
@@ -60,7 +62,9 @@ export default function ActionButtons({
         {selectedPages.length > 0 && (
           <RotateCCButton onClick={onRotateCCClicked} />
         )}
-        {selectedPages.length > 0 && <DeletePagesButton />}
+        {selectedPages.length > 0 && (
+          <DeletePagesButton onClick={onDeletePagesClicked} />
+        )}
       </Group>
       <Group>
         <DuplicatePanelButton />

frontend/apps/ui/src/components/document/ActionButtons.tsx renamed to frontend/apps/ui/src/features/document/components/ActionButtons.tsx

@@ -1,6 +1,9 @@
 import {useAppSelector} from "@/app/hooks"
 import {useCurrentDocVer, useSelectedPages} from "@/features/document/hooks"
-import {selectOtherPanelComponent} from "@/features/ui/uiSlice"
+import {
+  selectOtherPanelComponent,
+  selectViewerPagesHaveChangedDialogVisibility
+} from "@/features/ui/uiSlice"
 import {usePanelMode} from "@/hooks"
 import {useEffect, useState} from "react"
 import {ContextMenu, ExtractPagesDirection, MoveDocumentDirection} from "viewer"
@@ -14,14 +17,20 @@ interface Args {
   onEditNodeTitleItemClicked: () => void
   onRotateCWItemClicked: () => void
   onRotateCCItemClicked: () => void
+  onResetChangesItemClicked: () => void
+  onSaveChangesItemClicked: () => void
+  onDeletePagesItemClicked: () => void
 }
 
 export default function ContextMenuContainer({
   opened,
   position,
   onEditNodeTitleItemClicked,
   onRotateCCItemClicked,
-  onRotateCWItemClicked
+  onRotateCWItemClicked,
+  onResetChangesItemClicked,
+  onSaveChangesItemClicked,
+  onDeletePagesItemClicked
 }: Args) {
   const [showExtractPagesItem, setShowExtractPagesItem] = useState<
     ExtractPagesDirection | undefined
@@ -35,6 +44,10 @@ export default function ContextMenuContainer({
   const otherPanelComponent = useAppSelector(s =>
     selectOtherPanelComponent(s, mode)
   )
+  const visibility = useAppSelector(
+    selectViewerPagesHaveChangedDialogVisibility
+  )
+  const showPagesHaveChangedRelatedItems = visibility == "opened"
 
   const hasSelectedPages = selectedPages && selectedPages.length > 0
 
@@ -69,9 +82,15 @@ export default function ContextMenuContainer({
       showDeletePagesItem={hasSelectedPages}
       showRotateCCItem={hasSelectedPages}
       showRotateCWItem={hasSelectedPages}
+      showResetChangesItem={showPagesHaveChangedRelatedItems}
+      showSaveChangesItem={showPagesHaveChangedRelatedItems}
+      showViewOCRedTextItem={false}
       onChangeTitleItemClicked={onEditNodeTitleItemClicked}
       onRotateCCItemClicked={onRotateCCItemClicked}
       onRotateCWItemClicked={onRotateCWItemClicked}
+      onResetChangesItemClicked={onResetChangesItemClicked}
+      onSaveChangesItemClicked={onSaveChangesItemClicked}
+      onDeletePagesItemClicked={onDeletePagesItemClicked}
     />
   )
 }

frontend/apps/ui/src/features/document/components/ContextMenu/ContextMenu.tsx

@@ -52,12 +52,12 @@ export default function DeleteWithAllPagesSelected({
       {error && <Error message={error} />}
       <Group justify="space-between" mt="md">
         <Button variant="default" onClick={onCancel}>
-          {t("common.yes")}
+          {t("common.no")}
         </Button>
         <Group>
           {isLoading && <Loader size="sm" />}
           <Button disabled={isLoading} onClick={onDeleteDocument} color={"red"}>
-            {t("common.no")}
+            {t("common.yes")}
           </Button>
         </Group>
       </Group>

frontend/apps/ui/src/components/document/DeleteEntireDocumentConfirm.tsx renamed to frontend/apps/ui/src/features/document/components/DeleteEntireDocumentConfirm.tsx

@@ -0,0 +1,18 @@
+import {ActionIcon, Tooltip} from "@mantine/core"
+import {IconTrash} from "@tabler/icons-react"
+
+interface Args {
+  onClick: () => void
+}
+
+export default function DeleteButton({onClick}: Args) {
+  return (
+    <>
+      <Tooltip withArrow label="Delete">
+        <ActionIcon size="lg" onClick={onClick} color={"red"}>
+          <IconTrash />
+        </ActionIcon>
+      </Tooltip>
+    </>
+  )
+}

frontend/apps/ui/src/features/document/components/DeletePagesButton.tsx

@@ -9,15 +9,15 @@ import {
   selectAllPages
 } from "@/features/document/store/documentVersSlice"
 
+import {applyPageChangesThunk} from "@/features/document/actions/applyPageOpChanges"
+import {useCurrentDocVer} from "@/features/document/hooks"
 import {
   selectViewerPagesHaveChangedDialogVisibility,
   viewerPageHaveChangedDialogVisibilityChanged
 } from "@/features/ui/uiSlice"
 import {PanelMode} from "@/types"
 import type {I18NPagesHaveChangedDialogText} from "viewer"
 import {PagesHaveChangedDialog} from "viewer"
-import {applyPageChangesThunk} from "../actions/applyPageOpChanges"
-import {useCurrentDocVer} from "../hooks"
 
 interface Args {
   docID: string