Disable dev pages; FolderViewer table view; CustomTable type safety;

client/src/components/CustomTable.tsx

@@ -32,7 +32,7 @@ const CustomTable = () => {
         { id: 2, name: 'Jane Smith', age: 30 },
         { id: 3, name: 'Sam Green', age: 22 },
     ]);
-    const [editingCell, setEditingCell] = useState({ rowIndex: null, columnId: null });
+    const [editingCell, setEditingCell] = useState<{ rowIndex: string | number | null, columnId: string | number | null }>({ rowIndex: null, columnId: null });
 
     const tableColumns = useMemo<ColumnDef<typeof data[0]>[]>(() => columns, []);
 
@@ -50,7 +50,7 @@ const CustomTable = () => {
         value: DataType[keyof DataType]
     ) => {
         const updatedData = [...data];
-        updatedData[rowIndex][columnId] = value;
+        (updatedData[rowIndex][columnId] as DataType[keyof DataType]) = value;
         setData(updatedData);
         //setEditingCell({ rowIndex: null, columnId: null });
     };
@@ -90,8 +90,8 @@ const CustomTable = () => {
                                     {isEditing ? (
                                         <Input
                                             type='text'
-                                            value={data[rowIndex][cell.column.id]}
+                                            value={data[rowIndex][cell.column.id as keyof DataType]}
-                                            onChange={(e) => handleEditCell(rowIndex, cell.column.id, e.target.value)}
+                                            onChange={(e) => handleEditCell(rowIndex, (cell.column.id as keyof DataType), e.target.value)}
                                             onBlur={() => setEditingCell({ rowIndex: null, columnId: null })}
                                             autoFocus
                                         />

client/src/components/FolderViewer.tsx

@@ -4,19 +4,11 @@ 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, Divider, FileButton, Flex, Loader, MantineStyleProp, RingProgress, ScrollAreaAutosize, Table, Text } from '@mantine/core'
+import { ActionIcon, Anchor, Breadcrumbs, Button, Divider, FileButton, Flex, Loader, MantineStyleProp, RingProgress, ScrollAreaAutosize, Stack, Table, Text } from '@mantine/core'
 import { IconCancel, IconDownload, IconFile, IconFileFilled, IconFilePlus, IconFileUpload, IconFolderFilled, IconX } from '@tabler/icons-react'
 
-interface FolderProps {
-    folder: IDocumentFolder;
-    index: number;
-    handleFolderClick: (folder: IDocumentFolder) => void;
-}
-
 interface DocumentProps {
     doc: IDocument;
-    index: number;
-    handleDocumentClick: (index: number) => void;
 }
 
 const FileItemStyle: MantineStyleProp = {
@@ -29,22 +21,6 @@ const FileItemStyle: MantineStyleProp = {
     padding: '8px'
 }
 
-function ItemFolder({ folder, handleFolderClick, ...props }: FolderProps) {
-    return (
-        <Flex
-            onClick={() => handleFolderClick(folder)}
-        >
-            <Flex
-                style={FileItemStyle}
-                {...props}
-            >
-                <IconFolderFilled />
-                {folder.name}
-            </Flex>
-        </Flex>
-    )
-}
-
 const handleSave = async (file: Blob, filename: string) => {
     const link = document.createElement('a')
     link.href = window.URL.createObjectURL(file)
@@ -54,7 +30,7 @@ const handleSave = async (file: Blob, filename: string) => {
     window.URL.revokeObjectURL(link.href)
 }
 
-function ItemDocument({ doc, index, handleDocumentClick, ...props }: DocumentProps) {
+function ItemDocument({ doc }: DocumentProps) {
     const [shouldFetch, setShouldFetch] = useState(false)
 
     const { file, isLoading } = useDownload(shouldFetch ? doc?.document_folder_id : null, shouldFetch ? doc?.id : null)
@@ -66,21 +42,13 @@ function ItemDocument({ doc, index, handleDocumentClick, ...props }: DocumentPro
                 setShouldFetch(false)
             }
         }
-    }, [shouldFetch, file])
+    }, [shouldFetch, file, doc.name])
 
     return (
-        <Flex align='center'>
-            <Flex
-                style={FileItemStyle}
-                onClick={() => handleDocumentClick(index)}
-                {...props}
-            >
-                <IconFileFilled />
-                {doc.name}
-            </Flex>
         <Flex>
             <ActionIcon
-                    onClick={() => {
+                onClick={(e) => {
+                    e.stopPropagation()
                     if (!isLoading) {
                         setShouldFetch(true)
                     }
@@ -93,7 +61,6 @@ function ItemDocument({ doc, index, handleDocumentClick, ...props }: DocumentPro
                 }
             </ActionIcon>
         </Flex>
-        </Flex>
     )
 }
 
@@ -175,6 +142,7 @@ export default function FolderViewer() {
 
     return (
         <ScrollAreaAutosize w={'100%'} h={'100%'} p={'sm'}>
+            {fileViewerModal &&
                 <FileViewer
                     open={fileViewerModal}
                     setOpen={setFileViewerModal}
@@ -182,7 +150,10 @@ export default function FolderViewer() {
                     setCurrentFileNo={setCurrentFileNo}
                     docs={documents}
                 />
+            }
 
+
+            <Stack>
                 <Breadcrumbs>
                     <Anchor
                         onClick={() => {
@@ -270,38 +241,52 @@ export default function FolderViewer() {
                     highlightOnHover>
                     <Table.Thead>
                         <Table.Tr>
-
+                            <Table.Th>Название</Table.Th>
+                            <Table.Th p={0}>Дата создания</Table.Th>
+                            <Table.Th p={0}></Table.Th>
                         </Table.Tr>
                     </Table.Thead>
 
                     <Table.Tbody>
                         {currentFolder ? (
                             documents?.map((doc: IDocument, index: number) => (
-                            <Table.Tr key={doc.id}>
+                                <Table.Tr key={doc.id} onClick={() => handleDocumentClick(index)} style={{ cursor: 'pointer' }}>
-                                <Table.Td>
+                                    <Table.Td p={0}>
+                                        <Flex style={FileItemStyle}>
+                                            <IconFileFilled />
+                                            {doc.name}
+                                        </Flex>
+                                    </Table.Td>
+                                    <Table.Td p={0}>
+                                        {new Date(doc.create_date).toLocaleDateString()}
+                                    </Table.Td>
+                                    <Table.Td p={0}>
                                         <ItemDocument
                                             doc={doc}
-                                        index={index}
-                                        handleDocumentClick={handleDocumentClick}
                                         />
                                     </Table.Td>
                                 </Table.Tr>
                             ))
                         ) : (
-                        folders?.map((folder: IDocumentFolder, index: number) => (
+                            folders?.map((folder: IDocumentFolder) => (
-                            <Table.Tr key={folder.id}>
+                                <Table.Tr key={folder.id} onClick={() => handleFolderClick(folder)} style={{ cursor: 'pointer' }}>
-                                <Table.Td>
+                                    <Table.Td p={0}>
-                                    <ItemFolder
+                                        <Flex style={FileItemStyle}>
-                                        folder={folder}
+                                            <IconFolderFilled />
-                                        index={index}
+                                            {folder.name}
-                                        handleFolderClick={handleFolderClick}
+                                        </Flex>
-                                    />
+                                    </Table.Td>
+                                    <Table.Td p={0} align='left'>
+                                        {new Date(folder.create_date).toLocaleDateString()}
+                                    </Table.Td>
+                                    <Table.Td p={0}>
                                     </Table.Td>
                                 </Table.Tr>
                             ))
                         )}
                     </Table.Tbody>
                 </Table>
+            </Stack>
         </ScrollAreaAutosize>
     )
 }

client/src/constants/app.tsx

@@ -133,7 +133,7 @@ const pages = [
     component: <MonitorPage />,
     drawer: true,
     dashboard: true,
-    enabled: true,
+    enabled: false,
   },
   {
     label: "Table test",
@@ -142,7 +142,7 @@ const pages = [
     component: <TableTest />,
     drawer: true,
     dashboard: true,
-    enabled: true,
+    enabled: false,
   },
   {
     label: "Component test",
@@ -151,7 +151,7 @@ const pages = [
     component: <ComponentTest />,
     drawer: true,
     dashboard: true,
-    enabled: true,
+    enabled: false,
   },
 ]