WIP

ui2/src/features/document/apiSlice.ts

@@ -1,6 +1,6 @@
 import {RootState} from "@/app/types"
 import {apiSlice} from "@/features/api/slice"
-import {DocumentType} from "@/types"
+import {DocumentType, TransferStrategyType} from "@/types"
 import {getBaseURL, getDefaultHeaders, imageEncode} from "@/utils"
 
 type ShortPageType = {
@@ -18,6 +18,16 @@ type ApplyPagesType = {
   pages: PagesType[]
 }
 
+type MovePagesType = {
+  body: {
+    source_pages_ids: string[]
+    target_page_id: string
+    move_strategy: TransferStrategyType
+  }
+  sourceDocID: string
+  targetDocID: string
+}
+
 export const apiSliceWithDocuments = apiSlice.injectEndpoints({
   endpoints: builder => ({
     getDocument: builder.query<DocumentType, string>({
@@ -79,12 +89,24 @@ export const apiSliceWithDocuments = apiSlice.injectEndpoints({
       invalidatesTags: (_result, _error, arg) => [
         {type: "Document", id: arg.documentID}
       ]
+    }),
+    movePages: builder.mutation<void, MovePagesType>({
+      query: data => ({
+        url: "/pages/move",
+        method: "POST",
+        body: data.body
+      }),
+      invalidatesTags: (_result, _error, arg) => [
+        {type: "Document", id: arg.targetDocID},
+        {type: "Document", id: arg.sourceDocID}
+      ]
     })
   })
 })
 
 export const {
   useGetDocumentQuery,
   useGetPageImageQuery,
-  useApplyPageOpChangesMutation
+  useApplyPageOpChangesMutation,
+  useMovePagesMutation
 } = apiSliceWithDocuments

ui2/src/features/document/components/Thumbnail/Thumbnail.tsx

@@ -4,7 +4,10 @@ import {Checkbox, Skeleton, Stack} from "@mantine/core"
 import {useDisclosure} from "@mantine/hooks"
 import {useContext, useEffect, useRef, useState} from "react"
 
-import {useGetPageImageQuery} from "@/features/document/apiSlice"
+import {
+  useGetDocumentQuery,
+  useGetPageImageQuery
+} from "@/features/document/apiSlice"
 import {
   pagesDroppedInDoc,
   selectCurrentPages,
@@ -15,7 +18,9 @@ import {
   dragPagesEnded,
   dragPagesStarted,
   selectCurrentDocVerID,
-  selectDraggedPages
+  selectCurrentNodeID,
+  selectDraggedPages,
+  selectDraggedPagesDocID
 } from "@/features/ui/uiSlice"
 
 import {setCurrentPage} from "@/slices/dualPanel/dualPanel"
@@ -27,7 +32,7 @@ import {
 } from "@/features/ui/uiSlice"
 
 import {contains_every} from "@/utils"
-import MovePagesModal from "../MovePagesModal"
+import TransferPagesModal from "../TransferPagesModal"
 import classes from "./Thumbnail.module.scss"
 
 const BORDERLINE_TOP = "borderline-top"
@@ -40,8 +45,8 @@ type Args = {
 
 export default function Thumbnail({page}: Args) {
   const [
-    movePagesDialogOpened,
-    {open: movePagesDialogOpen, close: movePagesDialogClose}
+    trPagesDialogOpened,
+    {open: trPagesDialogOpen, close: trPagesDialogClose}
   ] = useDisclosure(false)
   const dispatch = useAppDispatch()
   const {data, isFetching} = useGetPageImageQuery(page.id)
@@ -51,6 +56,10 @@ export default function Thumbnail({page}: Args) {
   const ref = useRef<HTMLDivElement>(null)
   const [cssClassNames, setCssClassNames] = useState<Array<string>>([])
   const draggedPages = useAppSelector(selectDraggedPages)
+  const draggedPagesIDs = draggedPages?.map(p => p.id)
+  const draggedPagesDocID = useAppSelector(selectDraggedPagesDocID)
+  const currentNodeID = useAppSelector(s => selectCurrentNodeID(s, mode))
+  const {currentData: doc} = useGetDocumentQuery(currentNodeID!)
   const docVerID = useAppSelector(s => selectCurrentDocVerID(s, mode))
   const docVerPages = useAppSelector(s => selectCurrentPages(s, docVerID!))
 
@@ -113,7 +122,11 @@ export default function Thumbnail({page}: Args) {
   }
 
   const onDragStart = () => {
-    dispatch(dragPagesStarted([page, ...selectedPages]))
+    const data = {
+      pages: [page, ...selectedPages],
+      docID: doc!.id
+    }
+    dispatch(dragPagesStarted(data))
   }
 
   const onDragEnd = () => {
@@ -161,7 +174,8 @@ export default function Thumbnail({page}: Args) {
         dispatch(dragPagesEnded())
       } else {
         // here we deal with pages transfer between documents
-        movePagesDialogOpen()
+        trPagesDialogOpen()
+        console.log(`dragged pages IDs= ${draggedPagesIDs}`)
       }
     } // if (ref?.current)
 
@@ -216,10 +230,14 @@ export default function Thumbnail({page}: Args) {
         />
         {page.number}
       </Stack>
-      <MovePagesModal
-        opened={movePagesDialogOpened}
-        onCancel={movePagesDialogClose}
-        onSubmit={movePagesDialogOpen}
+      <TransferPagesModal
+        targetDoc={doc!}
+        sourceDocID={draggedPagesDocID}
+        sourcePageIDs={draggedPagesIDs}
+        targetPageID={page.id}
+        opened={trPagesDialogOpened}
+        onCancel={trPagesDialogClose}
+        onSubmit={trPagesDialogOpen}
       />
     </>
   )

ui2/src/features/document/components/TransferPagesModal.tsx

@@ -0,0 +1,99 @@
+import Error from "@/components/Error"
+import PanelContext from "@/contexts/PanelContext"
+import {useMovePagesMutation} from "@/features/document/apiSlice"
+import {Button, ComboboxItem, Group, Loader, Modal, Select} from "@mantine/core"
+import {useContext, useState} from "react"
+
+import type {DocumentType, PanelMode, TransferStrategyType} from "@/types"
+
+interface Args {
+  sourceDocID?: string
+  targetDoc?: DocumentType
+  sourcePageIDs?: string[]
+  targetPageID: string
+  opened: boolean
+  onCancel: () => void
+  onSubmit: () => void
+}
+
+export default function TransferPagesModal({
+  opened,
+  onCancel,
+  onSubmit,
+  sourceDocID,
+  targetDoc,
+  targetPageID,
+  sourcePageIDs
+}: Args) {
+  const [value, setValue] = useState<ComboboxItem | null>(null)
+  const [error, setError] = useState("")
+  const mode: PanelMode = useContext(PanelContext)
+  const [movePages, {isLoading}] = useMovePagesMutation()
+
+  if (!sourceDocID) {
+    return <></>
+  }
+
+  if (!targetDoc) {
+    return <></>
+  }
+
+  if (!sourcePageIDs || sourcePageIDs.length == 0) {
+    console.warn("Missing source page IDs")
+    return <></>
+  }
+
+  const onTransferPages = async () => {
+    const transferStrategy = (value?.value || "mix") as TransferStrategyType
+    debugger
+    const data = {
+      body: {
+        source_pages_ids: sourcePageIDs,
+        target_page_id: targetPageID,
+        move_strategy: transferStrategy
+      },
+      sourceDocID: sourceDocID,
+      targetDocID: targetDoc.id
+    }
+    try {
+      await movePages(data)
+      onSubmit()
+      reset()
+    } catch (error: unknown) {
+      // @ts-ignore
+      setError(err.data.detail)
+    }
+  }
+
+  const reset = () => {
+    setError("")
+  }
+
+  return (
+    <Modal title={"Transfer Selected Pages"} opened={opened} onClose={onCancel}>
+      Do you want to transfer selected pages to
+      {targetDoc.title}?
+      <Select
+        data={[
+          {value: "mix", label: "Mix"},
+          {value: "replace", label: "Replace"}
+        ]}
+        label="Strategy"
+        value={value ? value.value : "mix"}
+        onChange={(_value, option) => setValue(option)}
+      />
+      {error && <Error message={error} />}
+      <Group justify="space-between" mt="md">
+        <Button variant="default" onClick={onCancel}>
+          Cancel
+        </Button>
+        <Group>
+          {isLoading && <Loader size="sm" />}
+          <Button disabled={isLoading} onClick={onTransferPages}>
+            Yes, transfer
+          </Button>
+        </Group>
+      </Group>
+    </Modal>
+  )
+}

ui2/src/features/ui/uiSlice.ts

@@ -48,6 +48,11 @@ interface PanelSelectionArg {
   mode: PanelMode
 }
 
+type DragPageStartedArg = {
+  pages: Array<ClientPage>
+  docID: string
+}
+
 export interface UploaderFileItemArgs {
   item: {
     source: NodeType | null
@@ -109,6 +114,7 @@ interface DragNDropState {
   in another thumbnail panel or inside Commander
   */
   pages: Array<ClientPage> | null
+  pagesDocID: string
 }
 
 type PanelComponent = "commander" | "viewer" | "searchResults"
@@ -511,12 +517,15 @@ const uiSlice = createSlice({
         state.secondaryViewerCurrentDocVerID = docVerID
       }
     },
-    dragPagesStarted(state, action: PayloadAction<Array<ClientPage>>) {
+    dragPagesStarted(state, action: PayloadAction<DragPageStartedArg>) {
+      const {pages, docID} = action.payload
       if (state.dragndrop) {
-        state.dragndrop.pages = action.payload
+        state.dragndrop.pages = pages
+        state.dragndrop.pagesDocID = docID
       } else {
         state.dragndrop = {
-          pages: action.payload
+          pages: pages,
+          pagesDocID: docID
         }
       }
     },
@@ -699,6 +708,9 @@ export const selectCurrentDocVerID = (state: RootState, mode: PanelMode) => {
 export const selectDraggedPages = (state: RootState) =>
   state.ui.dragndrop?.pages
 
+export const selectDraggedPagesDocID = (state: RootState) =>
+  state.ui.dragndrop?.pagesDocID
+
 /* Load initial collapse state value from cookie */
 function initial_collapse_value(): boolean {
   const collapsed = Cookies.get(NAVBAR_COLLAPSED_COOKIE) as BooleanString

ui2/src/types.ts

@@ -356,3 +356,5 @@ export type Coord = {
   x: number
   y: number
 }
+
+export type TransferStrategyType = "mix" | "replace"