Drop @mui, addded ems api

This commit is contained in:
cracklesparkle
2024-11-15 17:00:23 +09:00
parent f51835584d
commit a4513e7e7a
29 changed files with 1026 additions and 721 deletions

View File

@ -1,12 +1,11 @@
import { useDocuments, useDownload, useFolders } from '../hooks/swrHooks'
import { IDocument, IDocumentFolder } from '../interfaces/documents'
import { Box, CircularProgress, Divider, SxProps } from '@mui/material'
import { Folder, InsertDriveFile } from '@mui/icons-material'
import React, { useEffect, useState } from 'react'
import DocumentService from '../services/DocumentService'
import { mutate } from 'swr'
import FileViewer from './modals/FileViewer'
import { ActionIcon, Anchor, Breadcrumbs, Button, FileButton, Flex, Loader, RingProgress, ScrollAreaAutosize, Table, Text } from '@mantine/core'
import { ActionIcon, Anchor, Breadcrumbs, Button, Divider, FileButton, Flex, Loader, MantineStyleProp, RingProgress, ScrollAreaAutosize, Table, Text } from '@mantine/core'
import { IconCancel, IconDownload, IconFile, IconFilePlus, IconFileUpload, IconX } from '@tabler/icons-react'
interface FolderProps {
@ -21,7 +20,7 @@ interface DocumentProps {
handleDocumentClick: (index: number) => void;
}
const FileItemStyle: SxProps = {
const FileItemStyle: MantineStyleProp = {
cursor: 'pointer',
display: 'flex',
width: '100%',
@ -36,13 +35,13 @@ function ItemFolder({ folder, handleFolderClick, ...props }: FolderProps) {
<Flex
onClick={() => handleFolderClick(folder)}
>
<Box
sx={FileItemStyle}
<Flex
style={FileItemStyle}
{...props}
>
<Folder />
{folder.name}
</Box>
</Flex>
</Flex>
)
}
@ -72,15 +71,15 @@ function ItemDocument({ doc, index, handleDocumentClick, ...props }: DocumentPro
return (
<Flex align='center'>
<Box
sx={FileItemStyle}
<Flex
style={FileItemStyle}
onClick={() => handleDocumentClick(index)}
{...props}
>
<InsertDriveFile />
{doc.name}
</Box>
<Box>
</Flex>
<Flex>
<ActionIcon
onClick={() => {
if (!isLoading) {
@ -94,7 +93,7 @@ function ItemDocument({ doc, index, handleDocumentClick, ...props }: DocumentPro
<IconDownload />
}
</ActionIcon>
</Box>
</Flex>
</Flex>
)
}
@ -171,7 +170,7 @@ export default function FolderViewer() {
if (foldersLoading || documentsLoading) {
return (
<CircularProgress />
<Loader />
)
}
@ -205,16 +204,12 @@ export default function FolderViewer() {
</Breadcrumbs>
{currentFolder &&
<Box sx={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
<Box sx={{
display: 'flex',
flexDirection: 'column',
gap: '16px',
<Flex direction='column' gap='sm'>
<Flex direction='column' gap='sm' p='sm' style={{
border: filesToUpload.length > 0 ? '1px dashed gray' : 'none',
borderRadius: '8px',
p: '16px'
}}>
<Box sx={{ display: 'flex', gap: '16px' }}>
<Flex gap='sm'>
<FileButton multiple onChange={handleFileInput}>
{(props) => <Button variant='filled' leftSection={isUploading ? <Loader /> : <IconFilePlus />} {...props}>Добавить</Button>}
</FileButton>
@ -240,7 +235,7 @@ export default function FolderViewer() {
</Button>
</>
}
</Box>
</Flex>
<Divider />
@ -264,8 +259,8 @@ export default function FolderViewer() {
))}
</Flex>
}
</Box>
</Box>
</Flex>
</Flex>
}
<Table