feat: support pdf/pptx merge order select

Okabe-Rintarou-0 · Jun 18, 2024 · 3cddca3 · 3cddca3
1 parent 3e3c86c
commit 3cddca3
Show file tree

Hide file tree

Showing 11 changed files with 215 additions and 12 deletions.
diff --git a/package.json b/package.json
@@ -13,6 +13,7 @@
     "@cyntler/react-doc-viewer": "^1.14.1",
     "@tauri-apps/api": "^1",
     "@tauri-apps/plugin-updater": "^2.0.0-beta.2",
+    "@types/react-beautiful-dnd": "^13.1.8",
     "@types/react-highlight": "^0.12.8",
     "@types/react-syntax-highlighter": "^15.5.11",
     "antd": "^5.14.2",
@@ -25,6 +26,7 @@
     "libarchive.js": "^2.0.2",
     "pdf-merger-js": "^5.1.1",
     "react": "^18.2.0",
+    "react-beautiful-dnd": "^13.1.1",
     "react-chat-elements": "^12.0.14",
     "react-dom": "^18.2.0",
     "react-highlight": "^0.15.0",

diff --git a/src-tauri/Cargo.lock b/src-tauri/Cargo.lock
diff --git a/src-tauri/Cargo.toml b/src-tauri/Cargo.toml
@@ -1,6 +1,6 @@
 [package]
 name = "sjtu_canvas_helper"
-version = "1.3.10"
+version = "1.3.11"
 description = "SJTU Canvas Helper"
 authors = ["Okabe"]
 edition = "2021"

diff --git a/src-tauri/tauri.conf.json b/src-tauri/tauri.conf.json
@@ -7,7 +7,7 @@
   },
   "package": {
     "productName": "SJTU Canvas Helper",
-    "version": "1.3.10"
+    "version": "1.3.11"
   },
   "tauri": {
     "allowlist": {

diff --git a/src/components/change_log_modal.tsx b/src/components/change_log_modal.tsx
@@ -11,6 +11,12 @@ export function ChangeLogModal({ open, onCancel, onOk }: {
         overflow: "scroll",
     }}>
         <Typography>
+            <Title level={4}>v1.3.11 2024/6/18</Title>
+            <Paragraph>
+                <ul>
+                    <li>[Enhancement] 支持调整 PPTX/PDF 合并顺序（源自 Issue: <a target="_blank" href="https://github.com/Okabe-Rintarou-0/SJTU-Canvas-Helper/issues/29">https://github.com/Okabe-Rintarou-0/SJTU-Canvas-Helper/issues/29</a>）</li>
+                </ul>
+            </Paragraph>
             <Title level={4}>v1.3.10 2024/6/12</Title>
             <Paragraph>
                 <ul>
@@ -66,5 +72,5 @@ export function ChangeLogModal({ open, onCancel, onOk }: {
                 </ul>
             </Paragraph>
         </Typography>
-    </Modal>
+    </Modal >
 }
diff --git a/src/components/draggable_list.tsx b/src/components/draggable_list.tsx
@@ -0,0 +1,32 @@
+import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd";
+import DraggableListItem from "./draggable_list_item";
+import { DraggableItem } from "../lib/model";
+
+export default function DraggableList({ items, onDragEnd }: { items: DraggableItem[], onDragEnd?: (newItems: DraggableItem[]) => void }) {
+    const onDragEndWrapper = (result: any) => {
+        const newItems = Array.from(items);
+        const [removed] = newItems.splice(result.source.index, 1);
+        newItems.splice(result.destination.index, 0, removed);
+        onDragEnd?.(newItems);
+    };
+    return <DragDropContext onDragEnd={onDragEndWrapper}>
+        <Droppable droppableId="droppable">
+            {(provided) => (
+                <div {...provided.droppableProps} ref={provided.innerRef}>
+                    {items.map((item, index) => (
+                        <Draggable key={item.id} draggableId={item.id} index={index}>
+                            {(provided) => (
+                                <DraggableListItem
+                                    provided={provided}
+                                    item={item}
+                                />
+                            )}
+                        </Draggable>
+                    ))}
+                    {provided.placeholder}
+                </div>
+            )}
+        </Droppable>
+    </DragDropContext>
+}
+
diff --git a/src/components/draggable_list_item.tsx b/src/components/draggable_list_item.tsx
@@ -0,0 +1,14 @@
+import { Card } from "antd";
+import { DraggableItem } from "../lib/model";
+
+export default function DraggableListItem({ item, provided }: { item: DraggableItem, provided: any }) {
+    return <div
+        ref={provided.innerRef}
+        {...provided.draggableProps}
+        {...provided.dragHandleProps}
+    >
+        <Card styles={{ body: { padding: "0px 15px" } }}>
+            <p>{item.content}</p>
+        </Card>
+    </div >
+}
diff --git a/src/components/file_order_select_modal.tsx b/src/components/file_order_select_modal.tsx
@@ -0,0 +1,36 @@
+import { DraggableItem, File } from "../lib/model";
+import { Alert, Modal, Space } from "antd";
+import DraggableList from "./draggable_list";
+import { useEffect, useState } from "react";
+
+export default function FileOrderSelectModal({ files, open, handleOk, handleCancel }: {
+    files: File[],
+    open: boolean,
+    handleOk: (items: DraggableItem[]) => void,
+    handleCancel: () => void
+}) {
+    const [items, setItems] = useState<DraggableItem[]>([]);
+    useEffect(() => {
+        setItems(files.map(f => ({
+            id: f.id.toString(),
+            content: f.display_name,
+            data: f
+        })));
+    }, [files])
+    return <Modal open={open} onCancel={handleCancel}
+        width={"60%"}
+        onOk={() => handleOk(items)}
+        title={"指定合并顺序"}
+        styles={{ body: { padding: "20px" } }}
+    >
+        <Space direction="vertical" style={{ width: "100%" }}>
+            <Alert
+                message="使用提示"
+                description="您可以拖拽文件名称以调整合并顺序。"
+                type="info"
+                showIcon
+            />
+            <DraggableList items={items} onDragEnd={setItems} />
+        </Space>
+    </Modal>
+}
diff --git a/src/lib/model.ts b/src/lib/model.ts
@@ -488,3 +488,9 @@ export interface Reply {
     rating_sum: number | null;
     message: string | null;
 }
+
+export interface DraggableItem {
+    id: string;
+    content: string;
+    data: any;
+}
diff --git a/src/page/files.tsx b/src/page/files.tsx
@@ -9,6 +9,7 @@ import FileDownloadTable from "../components/file_download_table";
 import { useCourses, useLoginModal, useMerger, usePreview } from "../lib/hooks";
 import { FolderOutlined, HomeOutlined, LeftOutlined } from "@ant-design/icons"
 import { scrollToTop, getFileIcon } from "../lib/utils";
+import FileOrderSelectModal from "../components/file_order_select_modal";
 
 interface DownloadInfo {
     course?: Course;
@@ -34,6 +35,7 @@ export default function FilesPage() {
     const [currentFolderFullName, setCurrentFolderFullName] = useState<string | undefined>('');
     const [parentFolderId, setParentFolderId] = useState<number | undefined | null>(null);
     const [keyword, setKeyword] = useState<string>("");
+    const [openFileOrderSelectModal, setOpenFileOrderSelectModal] = useState<boolean>(false);
     const { previewer, onHoverEntry, onLeaveEntry, setPreviewEntry, setEntries } = usePreview();
     const { merger, mergePDFs } = useMerger({ setPreviewEntry, onHoverEntry, onLeaveEntry });
     const courses = useCourses();
@@ -410,10 +412,6 @@ export default function FilesPage() {
         }
     }
 
-    const handleMergePDFs = () => {
-        mergePDFs(selectedEntries.filter(isFile) as File[]);
-    }
-
     const backToParentDir = async () => {
         setFiles([]);
         setFolders([]);
@@ -454,10 +452,21 @@ export default function FilesPage() {
         }
     ]
 
+    const getSupportedMergeFiles = () => {
+        return (selectedEntries as File[]).filter(f => f.display_name.endsWith(".pptx") || f.display_name.endsWith(".pdf"));
+    }
+
     return <BasicLayout>
         {contextHolder}
         {previewer}
         {modal}
+        <FileOrderSelectModal open={openFileOrderSelectModal}
+            handleOk={(items) => {
+                setOpenFileOrderSelectModal(false);
+                const files = items.map(item => item.data as File);
+                mergePDFs(files);
+            }}
+            handleCancel={() => setOpenFileOrderSelectModal(false)} files={getSupportedMergeFiles()} />
         <Space direction="vertical" style={{ width: "100%", overflow: "scroll" }} size={"large"}>
             <Tabs items={tabs} onChange={setSection} />
             <Space>
@@ -496,7 +505,7 @@ export default function FilesPage() {
             />
             <Space>
                 <Button disabled={operating || selectedEntries.length === 0} onClick={handleDownloadSelectedFiles}>下载</Button>
-                <Button disabled={operating || noSelectedPDFs} onClick={handleMergePDFs}>合并 PDF/PPTX</Button>
+                <Button disabled={operating || noSelectedPDFs} onClick={() => setOpenFileOrderSelectModal(true)}>合并 PDF/PPTX</Button>
             </Space>
             <Divider orientation="left">PDF/PPTX (混合)合并</Divider>
             {merger}