Browse Source

Minor fixes

master
cracklesparkle 11 months ago
parent
commit
c74c911eea
  1. 18
      frontend_reactjs/src/components/FolderViewer.tsx
  2. 56
      frontend_reactjs/src/components/modals/FileViewer.tsx

18
frontend_reactjs/src/components/FolderViewer.tsx

@ -22,6 +22,7 @@ interface DocumentProps {
const FileItemStyle: SxProps = {
cursor: 'pointer',
display: 'flex',
width: '100%',
flexDirection: 'row',
gap: '8px',
alignItems: 'center',
@ -46,16 +47,25 @@ function ItemFolder({ folder, index, handleFolderClick, ...props }: FolderProps)
function ItemDocument({ doc, index, handleDocumentClick, ...props }: DocumentProps) {
return (
<ListItemButton
onClick={() => handleDocumentClick(doc, index)}
>
<ListItemButton>
<Box
sx={FileItemStyle}
onClick={() => handleDocumentClick(doc, index)}
{...props}
>
<InsertDriveFile />
{doc.name}
</Box>
<Box>
<IconButton
onClick={() => {
console.log("TODO: save")
}}
sx={{ ml: 'auto' }}
>
<Download />
</IconButton>
</Box>
</ListItemButton>
)
}
@ -125,7 +135,7 @@ export default function FolderViewer() {
formData.append('files', file)
}
try {
// const response = await DocumentService.uploadFiles(currentFolder.id, formData, setUploadProgress);
const response = await DocumentService.uploadFiles(currentFolder.id, formData, setUploadProgress);
setIsUploading(false);
setFilesToUpload([]);
mutate(`/info/documents/${currentFolder.id}`);

56
frontend_reactjs/src/components/modals/FileViewer.tsx

@ -65,7 +65,11 @@ function DocxViewer({
useEffect(() => {
if (previewContainerRef && previewContainerRef.current) {
setLoadingPreview(true);
jsPreviewDocx.init(previewContainerRef.current)
jsPreviewDocx.init(previewContainerRef.current, {
breakPages: true,
inWrapper: true,
ignoreHeight: true
})
.preview(url)
}
@ -79,6 +83,7 @@ function DocxViewer({
return (
<Box ref={previewContainerRef} sx={{
width: '100%',
height: '100%'
}} />
)
}
@ -116,8 +121,19 @@ function ImageViewer({
url
}: ViewerProps) {
return (
<Box>
<img alt='image-preview' src={url} />
<Box sx={{
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
objectFit: 'contain',
width: '100%',
height: '100%'
}}>
<img alt='image-preview' src={url} style={{
display: 'flex',
maxWidth: '100%',
maxHeight: '100%'
}} />
</Box>
)
}
@ -235,23 +251,25 @@ export default function FileViewer({
fileType?.startsWith('image/') ?
<ImageViewer url={window.URL.createObjectURL(file)} />
:
<Box sx={{ display: 'flex', gap: '16px', flexDirection: 'column', p: '16px' }}>
<Box sx={{ display: 'flex', gap: '16px', alignItems: 'center' }}>
<Warning />
<Typography>
Предпросмотр данного файла невозможен.
</Typography>
fileType && file ?
<Box sx={{ display: 'flex', gap: '16px', flexDirection: 'column', p: '16px' }}>
<Box sx={{ display: 'flex', gap: '16px', alignItems: 'center' }}>
<Warning />
<Typography>
Предпросмотр данного файла невозможен.
</Typography>
</Box>
<Box>
<Button variant='contained' onClick={() => {
handleSave()
}}>
Сохранить
</Button>
</Box>
</Box>
<Box>
<Button variant='contained' onClick={() => {
handleSave()
}}>
Сохранить
</Button>
</Box>
</Box>
:
null
}
</Box>
</Dialog>

Loading…
Cancel
Save