From c74c911eea94e1920be337547e929a4d25612a0b Mon Sep 17 00:00:00 2001
From: cracklesparkle <kitkatt2014@gmail.com>
Date: Fri, 5 Jul 2024 18:00:31 +0900
Subject: [PATCH] Minor fixes

---
 .../src/components/FolderViewer.tsx           | 18 ++++--
 .../src/components/modals/FileViewer.tsx      | 56 ++++++++++++-------
 2 files changed, 51 insertions(+), 23 deletions(-)

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>