🎇 finish move

src/hooks/useApi.ts

@@ -49,6 +49,13 @@ const useApi = () => {
       const path_ = pathJoin(path, old);
       return admin.post("rename", { name, path: path_ });
     },
+    move: (names: string[], dir: string) => {
+      return admin.post("move",{
+        src_dir: path,
+        dst_dir: dir,
+        names
+      })
+    }
   };
 };
 

src/i18n/locales/zh.ts

@@ -120,8 +120,8 @@ const zh = {
   "Leaving the page will interrupt the download": "离开页面会中断下载",
   "Frontend": "前端",
   "Backend": "后端",
-  "Package download {{number}} files": "打包下载{{number}}个文件",
-  "Copy links of {{number}} files": "复制{{number}}个文件的直链",
+  "Package download {{number}} files": "打包下载 {{number}} 个文件",
+  "Copy links of {{number}} files": "复制 {{number}} 个文件的直链",
   "Upload file": "上传文件",
   "Uploading": "正在上传",
   "upload": "上传",
@@ -130,13 +130,17 @@ const zh = {
   "Confirmation!": "确认！",
   "Are you sure you want to delete \"{{name}}\" ?": "确定要删除“{{name}}”吗？",
   "Confirm": "确认",
-  "Delete {{number}} files": "删除{{number}}个文件",
+  "Delete {{number}} files": "删除 {{number}} 个文件",
   "Copy": "复制",
   "Paste": "粘贴",
   "New folder": "新建文件夹",
   "Folder name": "文件夹名称",
   "Rename": "重命名",
   "New name": "新名称",
+  "Move": "移动",
+  "Select folder": "选择文件夹",
+  "Move {{number}} files": "移动 {{number}} 个文件",
+  "Please select a folder": "请选择一个文件夹",
 }
 
 export default zh

src/pages/list/layout/files/contextmenu.tsx

@@ -31,6 +31,7 @@ import { useLocation } from "react-router-dom";
 import bus from "../../../../utils/event-bus";
 import NewFolder, { NewFolderInput } from "./menus/new-folder";
 import Rename, { RenameInput } from "./menus/rename";
+import Move, { MoveSelect } from "./menus/move";
 
 export const MENU_ID = "list-menu";
 
@@ -74,6 +75,13 @@ const ContextMenu = () => {
           }}
         />
       )}
+      {isOpen.move && (
+        <MoveSelect
+          onClose={() => {
+            setIsOpen({ ...isOpen, move: false });
+          }}
+        />
+      )}
       <Menu id={MENU_ID} theme={menuTheme} animation={animation.scale}>
         <Item
           onClick={() => {
@@ -104,6 +112,11 @@ const ContextMenu = () => {
               setIsOpen({ ...isOpen, rename: true });
             }}
           />
+          <Move
+            onOpen={() => {
+              setIsOpen({ ...isOpen, move: true });
+            }}
+          />
           <Item
             disabled={isItemDisabled}
             onClick={({ props }) => {

src/pages/list/layout/files/menus/move.tsx

@@ -0,0 +1,153 @@
+import {
+  Icon,
+  Flex,
+  useDisclosure,
+  useToast,
+  useColorModeValue,
+  Modal,
+  ModalOverlay,
+  ModalContent,
+  ModalHeader,
+  ModalFooter,
+  ModalBody,
+  ModalCloseButton,
+  Button,
+} from "@chakra-ui/react";
+import React, { useContext } from "react";
+import { Item } from "react-contexify";
+import "react-contexify/dist/ReactContexify.css";
+import { useTranslation } from "react-i18next";
+import FolderTree from "../../../../../components/folder-tree";
+import useApi from "../../../../../hooks/useApi";
+import { File, IContext } from "../../../context";
+import { MdDriveFileMove } from "react-icons/md";
+import bus from "../../../../../utils/event-bus";
+
+let currentFile: File = {
+  name: "",
+  size: 0,
+  type: 0,
+  driver: "",
+  updated_at: "",
+  thumbnail: "",
+  url: "",
+};
+
+const Move = (props: { onOpen: () => void }) => {
+  const { loggedIn, multiSelect, selectFiles } = useContext(IContext);
+  const { t } = useTranslation();
+  if (!loggedIn) return null;
+  return (
+    <Item
+      disabled={(props as any).propsFromTrigger === undefined}
+      onClick={() => {
+        currentFile = (props as any).propsFromTrigger;
+        console.log(currentFile);
+        props.onOpen();
+      }}
+    >
+      <Flex align="center">
+        <Icon
+          color={useColorModeValue("blue.400", "blue.300")}
+          boxSize={5}
+          as={MdDriveFileMove}
+          mr={2}
+        />
+        {multiSelect
+          ? t("Move {{number}} files", {
+              number: selectFiles.length,
+            })
+          : t("Move")}
+      </Flex>
+    </Item>
+  );
+};
+
+export const MoveSelect = (props: { onClose: () => void }) => {
+  const { multiSelect, selectFiles } = useContext(IContext);
+  const { isOpen, onClose, onOpen } = useDisclosure({
+    defaultIsOpen: true,
+  });
+  const toast = useToast();
+  const { t } = useTranslation();
+  const [dir, setDir] = React.useState("");
+  const { move } = useApi();
+  const [loading, setLoading] = React.useState(false);
+  return (
+    <Modal
+      isOpen={isOpen}
+      onClose={() => {
+        props.onClose();
+        onClose();
+      }}
+    >
+      <ModalOverlay />
+      <ModalContent>
+        <ModalHeader>{t("Select folder")}</ModalHeader>
+        <ModalCloseButton />
+        <ModalBody pb={6}>
+          <FolderTree
+            onChange={(dir) => {
+              setDir(dir);
+            }}
+          />
+        </ModalBody>
+        <ModalFooter>
+          <Button
+            onClick={() => {
+              console.log("move", currentFile, dir);
+              if (!dir) {
+                toast({
+                  title: t("Please select a folder"),
+                  status: "warning",
+                  duration: 3000,
+                  isClosable: true,
+                });
+                return;
+              }
+              const names = [];
+              if (multiSelect) {
+                selectFiles.forEach((file) => {
+                  names.push(file.name);
+                });
+              } else {
+                names.push(currentFile.name);
+              }
+              setLoading(true);
+              move(names, dir).then((resp) => {
+                setLoading(false);
+                const res = resp.data;
+                toast({
+                  title: t(res.message),
+                  status: res.code === 200 ? "success" : "error",
+                  duration: 3000,
+                  isClosable: true,
+                });
+                if (res.code === 200) {
+                  // wait for the move to finish
+                  setTimeout(() => {
+                    bus.emit("refresh");
+                  }, 300);
+                }
+              });
+            }}
+            mr={3}
+          >
+            {t("Ok")}
+          </Button>
+          <Button
+            colorScheme="gray"
+            onClick={() => {
+              props.onClose();
+            }}
+            isLoading={loading}
+          >
+            {t("Cancel")}
+          </Button>
+        </ModalFooter>
+      </ModalContent>
+    </Modal>
+  );
+};
+
+export default Move;

src/utils/file.ts

@@ -13,4 +13,8 @@ export function getFileSize(size: number){
   if (size < Math.pow(num, 4))
       return (size / Math.pow(num, 3)).toFixed(2) + "G"; //G
   return (size / Math.pow(num, 4)).toFixed(2) + "T"; //T
-}
+}
+
+export const pathJoin = (...paths: string[]) => {
+  return paths.join("/").replace(/\/{2,}/g, "/");
+};