forked from VinokurovVE/tests
Disable dev pages; FolderViewer table view; CustomTable type safety;
This commit is contained in:
cracklesparkle
@ -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]}
|
||||
onChange={(e) => handleEditCell(rowIndex, cell.column.id, e.target.value)}
|
||||
value={data[rowIndex][cell.column.id as keyof DataType]}
|
||||
onChange={(e) => handleEditCell(rowIndex, (cell.column.id as keyof DataType), e.target.value)}
|
||||
onBlur={() => setEditingCell({ rowIndex: null, columnId: null })}
|
||||
autoFocus
|
||||
/>
|
||||
|
||||
@ -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.Td>
|
||||
<Table.Tr key={doc.id} onClick={() => handleDocumentClick(index)} style={{ cursor: 'pointer' }}>
|
||||
<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) => (
|
||||
<Table.Tr key={folder.id}>
|
||||
<Table.Td>
|
||||
<ItemFolder
|
||||
folder={folder}
|
||||
index={index}
|
||||
handleFolderClick={handleFolderClick}
|
||||
/>
|
||||
folders?.map((folder: IDocumentFolder) => (
|
||||
<Table.Tr key={folder.id} onClick={() => handleFolderClick(folder)} style={{ cursor: 'pointer' }}>
|
||||
<Table.Td p={0}>
|
||||
<Flex style={FileItemStyle}>
|
||||
<IconFolderFilled />
|
||||
{folder.name}
|
||||
</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>
|
||||
)
|
||||
}
|
||||
@ -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,
|
||||
},
|
||||
]
|
||||
|
||||
|
||||
Reference in New Issue
Block a user