feat: move page between spaces (#988)

* feat: Move the page to another space - The ability to move a page to another space has been added * feat: Move the page to another space * feat: Move the page to another space - Correction of the visibility attribute of elements that extend beyond the boundaries of the space selection modal window * feat: Move the page to another space - Added removal of query keys when moving pages * feat: Move the page to another space - Fix locales * feat: Move the page to another space * feat: Move the page to another space - Fix docker compose * feat: Move the page to another space * feat: Move the page to another space - Some refactor * feat: Move the page to another space - Attachments update * feat: Move the page to another space - The function of searching for attachments by page ID and updating attachments has been combined * feat: Move the page to another space - Fix variable name * feat: Move the page to another space - Move current space to parameter of component SpaceSelectionModal * refactor ui --------- Co-authored-by: plekhanov <astecom@mail.ru>
2026-05-18 23:44:24 +08:00 · 2025-04-04 23:44:18 +01:00
parent b27d1708b0
commit 17ce3bab8a
15 changed files with 316 additions and 49 deletions
@@ -1,5 +1,6 @@
 import { ActionIcon, Group, Menu, Text, Tooltip } from "@mantine/core";
 import {
+  IconArrowRight,
  IconArrowsHorizontal,
  IconDots,
  IconFileExport,
@@ -31,11 +32,13 @@ import {
  yjsConnectionStatusAtom,
 } from "@/features/editor/atoms/editor-atoms.ts";
 import { formattedDate, timeAgo } from "@/lib/time.ts";
+import MovePageModal from "@/features/page/components/move-page-modal.tsx";

 interface PageHeaderMenuProps {
  readOnly?: boolean;
 }
 export default function PageHeaderMenu({ readOnly }: PageHeaderMenuProps) {
+  const { t } = useTranslation();
  const toggleAside = useToggleAside();
  const [yjsConnectionStatus] = useAtom(yjsConnectionStatusAtom);

@@ -43,7 +46,7 @@ export default function PageHeaderMenu({ readOnly }: PageHeaderMenuProps) {
    <>
      {yjsConnectionStatus === "disconnected" && (
        <Tooltip
-          label="Real-time editor connection lost. Retrying..."
+          label={t("Real-time editor connection lost. Retrying...")}
          openDelay={250}
          withArrow
        >
@@ -83,6 +86,10 @@ function PageActionMenu({ readOnly }: PageActionMenuProps) {
  const [tree] = useAtom(treeApiAtom);
  const [exportOpened, { open: openExportModal, close: closeExportModal }] =
    useDisclosure(false);
+  const [
+    movePageModalOpened,
+    { open: openMovePageModal, close: closeMoveSpaceModal },
+  ] = useDisclosure(false);
  const [pageEditor] = useAtom(pageEditorAtom);

  const handleCopyLink = () => {
@@ -147,6 +154,15 @@ function PageActionMenu({ readOnly }: PageActionMenuProps) {

          <Menu.Divider />

+          {!readOnly && (
+            <Menu.Item
+              leftSection={<IconArrowRight size={16} />}
+              onClick={openMovePageModal}
+            >
+              {t("Move")}
+            </Menu.Item>
+          )}
+
          <Menu.Item
            leftSection={<IconFileExport size={16} />}
            onClick={openExportModal}
@@ -217,6 +233,14 @@ function PageActionMenu({ readOnly }: PageActionMenuProps) {
        open={exportOpened}
        onClose={closeExportModal}
      />
+
+      <MovePageModal
+        pageId={page.id}
+        slugId={page.slugId}
+        currentSpaceSlug={spaceSlug}
+        onClose={closeMoveSpaceModal}
+        open={movePageModalOpened}
+      />
    </>
  );
 }
@@ -0,0 +1,98 @@
+import { Modal, Button, Group, Text } from "@mantine/core";
+import { movePageToSpace } from "@/features/page/services/page-service.ts";
+import { useState } from "react";
+import { notifications } from "@mantine/notifications";
+import { useTranslation } from "react-i18next";
+import { ISpace } from "@/features/space/types/space.types.ts";
+import { queryClient } from "@/main.tsx";
+import { SpaceSelect } from "@/features/space/components/sidebar/space-select.tsx";
+import { useNavigate } from "react-router-dom";
+import { buildPageUrl } from "@/features/page/page.utils.ts";
+
+interface MovePageModalProps {
+  pageId: string;
+  slugId: string;
+  currentSpaceSlug: string;
+  open: boolean;
+  onClose: () => void;
+}
+
+export default function MovePageModal({
+  pageId,
+  slugId,
+  currentSpaceSlug,
+  open,
+  onClose,
+}: MovePageModalProps) {
+  const { t } = useTranslation();
+  const [targetSpace, setTargetSpace] = useState<ISpace>(null);
+  const navigate = useNavigate();
+
+  const handlePageMove = async () => {
+    if (!targetSpace) return;
+
+    try {
+      await movePageToSpace({ pageId, spaceId: targetSpace.id });
+      queryClient.removeQueries({
+        predicate: (item) =>
+          ["pages", "sidebar-pages", "root-sidebar-pages"].includes(
+            item.queryKey[0] as string,
+          ),
+      });
+
+      const pageUrl = buildPageUrl(targetSpace.slug, slugId, undefined);
+      navigate(pageUrl);
+      notifications.show({
+        message: t("Page moved successfully"),
+      });
+      onClose();
+    } catch (err) {
+      notifications.show({
+        message: err.response?.data.message || "An error occurred",
+        color: "red",
+      });
+      console.log(err);
+    }
+    setTargetSpace(null);
+  };
+
+  const handleChange = (space: ISpace) => {
+    setTargetSpace(space);
+  };
+
+  return (
+    <Modal.Root
+      opened={open}
+      onClose={onClose}
+      size={500}
+      padding="xl"
+      yOffset="10vh"
+      xOffset={0}
+      mah={400}
+      onClick={e => e.stopPropagation()}
+    >
+      <Modal.Overlay />
+      <Modal.Content style={{ overflow: "hidden" }}>
+        <Modal.Header py={0}>
+          <Modal.Title fw={500}>{t("Move page")}</Modal.Title>
+          <Modal.CloseButton />
+        </Modal.Header>
+        <Modal.Body>
+          <Text mb="xs" c="dimmed" size="sm">{t("Move page to a different space.")}</Text>
+
+          <SpaceSelect
+            value={currentSpaceSlug}
+            clearable={false}
+            onChange={handleChange}
+          />
+          <Group justify="end" mt="md">
+            <Button onClick={onClose} variant="default">
+              {t("Cancel")}
+            </Button>
+            <Button onClick={handlePageMove}>{t("Move")}</Button>
+          </Group>
+        </Modal.Body>
+      </Modal.Content>
+    </Modal.Root>
+  );
+}