diff --git a/frontend_reactjs/src/components/FolderViewer.tsx b/frontend_reactjs/src/components/FolderViewer.tsx index e26f085..3c84450 100644 --- a/frontend_reactjs/src/components/FolderViewer.tsx +++ b/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}`); diff --git a/frontend_reactjs/src/components/modals/FileViewer.tsx b/frontend_reactjs/src/components/modals/FileViewer.tsx index 2dff852..e328576 100644 --- a/frontend_reactjs/src/components/modals/FileViewer.tsx +++ b/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>