popovspiridon99/tests
1
0
Fork 0
forked from VinokurovVE/tests
Code Issues Pull Requests Projects Releases Wiki Activity

Reports test

Browse Source
This commit is contained in:
cracklesparkle
2024-07-04 15:18:06 +09:00
parent 2c71e4f6af
commit 261196afef
17 changed files with 3390 additions and 172 deletions
Download Patch File Download Diff File Expand all files Collapse all files

169
frontend_reactjs/src/components/FolderViewer.tsx
View File

@ -1,72 +1,67 @@
import { useDocuments, useFolders } from '../hooks/swrHooks'
import { IDocument, IDocumentFolder } from '../interfaces/documents'
import { Box, Breadcrumbs, Button, Card, CardActionArea, CircularProgress, Input, InputLabel, LinearProgress, Link } from '@mui/material'
import { Folder, InsertDriveFile, Upload, UploadFile } from '@mui/icons-material'
import { useRef, useState } from 'react'
import { Box, Breadcrumbs, Button, Card, CardActionArea, CircularProgress, Divider, Input, InputLabel, LinearProgress, Link, List, ListItem, ListItemButton } from '@mui/material'
import { Download, Folder, InsertDriveFile, Upload, UploadFile } from '@mui/icons-material'
import { useEffect, useRef, useState } from 'react'
import DocumentService from '../services/DocumentService'
import { mutate } from 'swr'
import FileViewer from './modals/FileViewer'
import { fileTypeFromBlob } from 'file-type/core'
interface FolderProps {
folder: IDocumentFolder;
handleFolderClick: (folder: IDocumentFolder) => void;
}
interface DocumentProps {
doc: IDocument;
index: number;
handleDocumentClick: (doc: IDocument, index: number) => void;
}
function ItemFolder({ folder, handleFolderClick, ...props }: FolderProps) {
return (
<Card
key={folder.id}
<ListItemButton
onClick={() => handleFolderClick(folder)}
>
<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>
<Box
sx={{
cursor: 'pointer',
display: 'flex',
flexDirection: 'row',
gap: '8px',
alignItems: 'center',
padding: '8px'
}}
{...props}
>
<Folder />
{folder.name}
</Box>
</ListItemButton>
)
}
interface DocumentProps {
doc: IDocument;
handleDocumentClick: (doc: IDocument) => void;
}
function ItemDocument({ doc, handleDocumentClick, ...props }: DocumentProps) {
function ItemDocument({ doc, index, handleDocumentClick, ...props }: DocumentProps) {
return (
<Card
key={doc.id}
<ListItemButton
onClick={() => handleDocumentClick(doc, index)}
>
<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>
<Box
sx={{
cursor: 'pointer',
display: 'flex',
flexDirection: 'row',
gap: '8px',
alignItems: 'center',
padding: '8px',
}}
{...props}
>
<InsertDriveFile />
{doc.name}
</Box>
</ListItemButton>
)
}
@ -85,24 +80,18 @@ export default function FolderViewer() {
const fileInputRef = useRef<HTMLInputElement>(null)
const [fileViewerModal, setFileViewerModal] = useState(false)
const [currentFileNo, setCurrentFileNo] = useState<number>(-1)
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 handleDocumentClick = async (doc: IDocument, index: number) => {
setCurrentFileNo(index)
setFileViewerModal(true)
}
const handleBreadcrumbClick = (index: number) => {
@ -136,7 +125,6 @@ export default function FolderViewer() {
}
}
if (foldersLoading || documentsLoading) {
return (
<CircularProgress />
@ -149,6 +137,14 @@ export default function FolderViewer() {
flexDirection: 'column',
gap: '24px'
}}>
<FileViewer
open={fileViewerModal}
setOpen={setFileViewerModal}
currentFileNo={currentFileNo}
setCurrentFileNo={setCurrentFileNo}
docs={documents}
/>
<Breadcrumbs>
<Link
underline='hover'
@ -161,6 +157,7 @@ export default function FolderViewer() {
>
Главная
</Link>
{breadcrumbs.map((breadcrumb, index) => (
<Link
key={breadcrumb.id}
@ -197,31 +194,33 @@ export default function FolderViewer() {
}
</Box>
<Box
sx={{
display: 'flex',
flexDirection: 'column',
flexWrap: 'wrap',
gap: '16px'
}}>
<List
dense
>
{currentFolder ? (
documents?.map((doc: IDocument) => (
<ItemDocument
key={`doc-${doc.id}`}
doc={doc}
handleDocumentClick={handleDocumentClick}
/>
documents?.map((doc: IDocument, index: number) => (
<div key={`${doc.id}-${doc.name}`}>
<ItemDocument
doc={doc}
index={index}
handleDocumentClick={handleDocumentClick}
/>
{index < documents.length - 1 && <Divider />}
</div>
))
) : (
folders?.map((folder: IDocumentFolder) => (
<ItemFolder
key={`folder-${folder.id}`}
folder={folder}
handleFolderClick={handleFolderClick}
/>
folders?.map((folder: IDocumentFolder, index: number) => (
<div key={`${folder.id}-${folder.name}`}>
<ItemFolder
folder={folder}
handleFolderClick={handleFolderClick}
/>
{index < folders.length - 1 && <Divider />}
</div>
))
)}
</Box>
</List>
</Box>
)
}