upstream to API changes

2024-07-01 17:51:50 +09:00
parent e70d94afec
commit 704276037c
9 changed files with 489 additions and 90 deletions
--- a/frontend_reactjs/src/components/FolderViewer.tsx
+++ b/frontend_reactjs/src/components/FolderViewer.tsx
@ -0,0 +1,191 @@
+import { useDocuments, useFolders } from '../hooks/swrHooks'
+import { IDocument, IDocumentFolder } from '../interfaces/documents'
+import { Box, Breadcrumbs, Button, Card, CardActionArea, CircularProgress, LinearProgress, Link } from '@mui/material'
+import { Folder, InsertDriveFile, Upload, UploadFile } from '@mui/icons-material'
+import { useState } from 'react'
+import DocumentService from '../services/DocumentService'
+
+interface FolderProps {
+    folder: IDocumentFolder;
+    handleFolderClick: (folder: IDocumentFolder) => void;
+}
+
+function ItemFolder({ folder, handleFolderClick, ...props }: FolderProps) {
+    return (
+        <Card
+            key={folder.id}
+        >
+            <CardActionArea>
+                <Box
+                    sx={{
+                        cursor: 'pointer',
+                        display: 'flex',
+                        flexDirection: 'row',
+                        gap: '8px',
+                        alignItems: 'center',
+                        padding: '8px'
+                    }}
+                    onClick={() => handleFolderClick(folder)}
+                    {...props}
+                >
+                    <Folder />
+                    {folder.name}
+                </Box>
+            </CardActionArea>
+        </Card>
+    )
+}
+
+interface DocumentProps {
+    doc: IDocument;
+    handleDocumentClick: (doc: IDocument) => void;
+}
+
+function ItemDocument({ doc, handleDocumentClick, ...props }: DocumentProps) {
+    return (
+        <Card
+            key={doc.id}
+        >
+            <CardActionArea>
+                <Box
+                    sx={{
+                        cursor: 'pointer',
+                        display: 'flex',
+                        flexDirection: 'row',
+                        gap: '8px',
+                        alignItems: 'center',
+                        padding: '8px',
+                    }}
+                    onClick={() => {
+                        handleDocumentClick(doc)
+                    }}
+                    {...props}
+                >
+                    <InsertDriveFile />
+                    {doc.name}
+                </Box>
+            </CardActionArea>
+        </Card>
+    )
+}
+
+export default function FolderViewer() {
+    const [currentFolder, setCurrentFolder] = useState<IDocumentFolder | null>(null)
+
+    const [breadcrumbs, setBreadcrumbs] = useState<IDocumentFolder[]>([])
+
+    const { folders, isLoading: foldersLoading } = useFolders()
+
+    const { documents, isLoading: documentsLoading } = useDocuments(currentFolder?.id)
+
+    const handleFolderClick = (folder: IDocumentFolder) => {
+        setCurrentFolder(folder)
+        setBreadcrumbs((prev) => [...prev, folder])
+    }
+
+    const handleDocumentClick = async (doc: IDocument) => {
+        try {
+            const response = await DocumentService.downloadDoc(doc.document_folder_id, doc.id);
+            const url = window.URL.createObjectURL(new Blob([response.data]));
+            const link = document.createElement('a');
+            link.href = url;
+            link.setAttribute('download', doc.name);
+            document.body.appendChild(link);
+            link.click();
+            link.remove();
+        } catch (error) {
+            console.error(error);
+        }
+    }
+
+    const handleBreadcrumbClick = (index: number) => {
+        const newBreadcrumbs = breadcrumbs.slice(0, index + 1);
+        setBreadcrumbs(newBreadcrumbs)
+        setCurrentFolder(newBreadcrumbs[newBreadcrumbs.length - 1])
+    }
+
+    // const handleFileUpload = (event) => {
+    //     const file = event.target.files[0]
+        
+    // }
+
+    if (foldersLoading || documentsLoading) {
+        return (
+            <CircularProgress />
+        )
+    }
+
+    return (
+        <Box sx={{
+            display: 'flex',
+            flexDirection: 'column',
+            gap: '24px'
+        }}>
+            <Breadcrumbs>
+                <Link
+                    underline='hover'
+                    color='inherit'
+                    onClick={() => {
+                        setCurrentFolder(null)
+                        setBreadcrumbs([])
+                    }}
+                    sx={{ cursor: 'pointer' }}
+                >
+                    Главная
+                </Link>
+                {breadcrumbs.map((breadcrumb, index) => (
+                    <Link
+                        key={breadcrumb.id}
+                        underline="hover"
+                        color="inherit"
+                        onClick={() => handleBreadcrumbClick(index)}
+                        sx={{ cursor: 'pointer' }}
+                    >
+                        {breadcrumb.name}
+                    </Link>
+                ))}
+            </Breadcrumbs>
+
+            <Box>
+                {currentFolder &&
+                    <Button
+                        variant="outlined"
+                        startIcon={<UploadFile />}
+                        onClick={() => {
+                            console.log(currentFolder.id)
+                        }}
+                    >
+                        Загрузить
+                    </Button>
+                }
+
+            </Box>
+
+            <Box
+                sx={{
+                    display: 'flex',
+                    flexDirection: 'column',
+                    flexWrap: 'wrap',
+                    gap: '16px'
+                }}>
+                {currentFolder ? (
+                    documents?.map((doc: IDocument) => (
+                        <ItemDocument
+                            key={`doc-${doc.id}`}
+                            doc={doc}
+                            handleDocumentClick={handleDocumentClick}
+                        />
+                    ))
+                ) : (
+                    folders?.map((folder: IDocumentFolder) => (
+                        <ItemFolder
+                            key={`folder-${folder.id}`}
+                            folder={folder}
+                            handleFolderClick={handleFolderClick}
+                        />
+                    ))
+                )}
+            </Box>
+        </Box>
+    )
+}