ui for files manipulation
This commit is contained in:
grimhilt
parent
318f6f9d8f
commit
f24c394388
100
src/pages/files/add.jsx
Normal file
100
src/pages/files/add.jsx
Normal file
@ -0,0 +1,100 @@
|
|||||||
|
import { Group, Modal, Text, rem, Button, List } from '@mantine/core';
|
||||||
|
import { IconUpload, IconPhoto, IconX } from '@tabler/icons-react';
|
||||||
|
import { Dropzone, IMAGE_MIME_TYPE, MIME_TYPES } from '@mantine/dropzone';
|
||||||
|
import { useState } from 'react';
|
||||||
|
import API from '../../services/api';
|
||||||
|
import setNotification from '../errors/error-notification';
|
||||||
|
|
||||||
|
const ModalAddFile = ({ opened, handler, addFiles }) => {
|
||||||
|
const [files, setFiles] = useState([]);
|
||||||
|
const [isLoading, setIsLoading] = useState(false);
|
||||||
|
|
||||||
|
const validate = (object) => {
|
||||||
|
setIsLoading(false);
|
||||||
|
setFiles([]);
|
||||||
|
addFiles(object);
|
||||||
|
handler();
|
||||||
|
};
|
||||||
|
|
||||||
|
const addFilesToList = (files) => {
|
||||||
|
files.forEach((file) => {
|
||||||
|
setFiles((prev) => [...prev, file]);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleSubmit = () => {
|
||||||
|
setIsLoading(true);
|
||||||
|
const formData = new FormData();
|
||||||
|
files.forEach((file) => formData.append('file', file));
|
||||||
|
API.upload(formData)
|
||||||
|
.then((res) => {
|
||||||
|
if (res.status === 200) {
|
||||||
|
validate(files);
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch((err) => {
|
||||||
|
setNotification(true, err.message);
|
||||||
|
setIsLoading(false);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Modal.Root opened={opened} onClose={() => validate([])}>
|
||||||
|
<Modal.Overlay />
|
||||||
|
<Modal.Content>
|
||||||
|
<Modal.Header>
|
||||||
|
<Modal.Title>
|
||||||
|
<Text fw={700} fz="lg">
|
||||||
|
Add File
|
||||||
|
</Text>
|
||||||
|
</Modal.Title>
|
||||||
|
<Modal.CloseButton />
|
||||||
|
</Modal.Header>
|
||||||
|
<Modal.Body>
|
||||||
|
<Dropzone
|
||||||
|
onDrop={(files) => addFilesToList(files)}
|
||||||
|
onReject={(files) => setNotification(true, `Rejected files: ${files.map((file) => file.name)}`)}
|
||||||
|
maxSize={1024 ** 3} // 1 GB
|
||||||
|
accept={[IMAGE_MIME_TYPE, MIME_TYPES.mp4]}
|
||||||
|
>
|
||||||
|
<Group position="center" spacing="xl" style={{ minHeight: rem(220), pointerEvents: 'none' }}>
|
||||||
|
<Dropzone.Accept>
|
||||||
|
<IconUpload size="3.2rem" stroke={1.5} />
|
||||||
|
</Dropzone.Accept>
|
||||||
|
<Dropzone.Reject>
|
||||||
|
<IconX size="3.2rem" stroke={1.5} />
|
||||||
|
</Dropzone.Reject>
|
||||||
|
<Dropzone.Idle>
|
||||||
|
<IconPhoto size="3.2rem" stroke={1.5} />
|
||||||
|
</Dropzone.Idle>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<Text size="xl" inline>
|
||||||
|
Drag images here or click to select files
|
||||||
|
</Text>
|
||||||
|
<Text size="sm" color="dimmed" inline mt={7}>
|
||||||
|
Attach as many files as you like, each file should not exceed 1 GB
|
||||||
|
</Text>
|
||||||
|
</div>
|
||||||
|
</Group>
|
||||||
|
</Dropzone>
|
||||||
|
<List>
|
||||||
|
{files.map((file, index) => (
|
||||||
|
<List.Item key={index}>{file.name}</List.Item>
|
||||||
|
))}
|
||||||
|
</List>
|
||||||
|
<Group position="right" mt="md">
|
||||||
|
<Button variant="light" color="red" onClick={() => validate([])}>
|
||||||
|
Cancel
|
||||||
|
</Button>
|
||||||
|
<Button variant="light" color="green" loading={isLoading} onClick={handleSubmit}>
|
||||||
|
Upload
|
||||||
|
</Button>
|
||||||
|
</Group>
|
||||||
|
</Modal.Body>
|
||||||
|
</Modal.Content>
|
||||||
|
</Modal.Root>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default ModalAddFile;
|
||||||
130
src/pages/files/file-selector.jsx
Normal file
130
src/pages/files/file-selector.jsx
Normal file
@ -0,0 +1,130 @@
|
|||||||
|
import { Modal, Button, Text, Group, Grid, TextInput, ScrollArea } from '@mantine/core';
|
||||||
|
import { IconSearch } from '@tabler/icons-react';
|
||||||
|
import { useEffect, useState } from 'react';
|
||||||
|
import ModalAddFile from './add';
|
||||||
|
import SelectorItem from '../../components/select-item';
|
||||||
|
import API from '../../services/api';
|
||||||
|
import setNotification from '../errors/error-notification';
|
||||||
|
|
||||||
|
const ModalFileSelector = ({ opened, handleClose, handleSubmit, ...props }) => {
|
||||||
|
const [files, setFiles] = useState([]);
|
||||||
|
const [showAdd, setShowAdd] = useState(false);
|
||||||
|
const [search, setSearch] = useState('');
|
||||||
|
let resfiless = [];
|
||||||
|
|
||||||
|
const toggleShowAdd = () => setShowAdd(!showAdd);
|
||||||
|
|
||||||
|
const clickHandler = (files) => {
|
||||||
|
if (props.multi) {
|
||||||
|
// eslint-disable-next-line eqeqeq
|
||||||
|
const indexfiles = resfiless.findIndex((item) => item._id == files._id);
|
||||||
|
if (indexfiles === -1) {
|
||||||
|
resfiless.push(files);
|
||||||
|
} else {
|
||||||
|
resfiless.splice(indexfiles, 1);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
handleSubmitLocal(files);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleSubmitLocal = (files) => {
|
||||||
|
handleSubmit(props.multi ? resfiless : files);
|
||||||
|
handleClose();
|
||||||
|
};
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
API.getFiles()
|
||||||
|
.then((res) => {
|
||||||
|
if (res.status === 200) {
|
||||||
|
setFiles(res.data);
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch((err) => {
|
||||||
|
setNotification(true, err.response.data.error);
|
||||||
|
});
|
||||||
|
|
||||||
|
return () => {};
|
||||||
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (search.length >= 2) {
|
||||||
|
API.searchfiles(search)
|
||||||
|
.then((res) => {
|
||||||
|
if (res.status === 200) {
|
||||||
|
setFiles(res.data);
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch((err) => {
|
||||||
|
setNotification(true, err.response.data.error);
|
||||||
|
});
|
||||||
|
} else if (search.length === 0) {
|
||||||
|
API.getFiles()
|
||||||
|
.then((res) => {
|
||||||
|
if (res.status === 200) {
|
||||||
|
setFiles(res.data);
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch((err) => {
|
||||||
|
setNotification(true, err.response.data.error);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}, [search]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Modal.Root opened={opened} onClose={handleClose} size="lg">
|
||||||
|
<Modal.Overlay />
|
||||||
|
<Modal.Content>
|
||||||
|
<Modal.Header>
|
||||||
|
<Modal.Title>
|
||||||
|
<Text fw={700} fz="lg">
|
||||||
|
Select file{props.multi ? 's' : ''}
|
||||||
|
</Text>
|
||||||
|
</Modal.Title>
|
||||||
|
<Modal.CloseButton />
|
||||||
|
</Modal.Header>
|
||||||
|
<Modal.Body>
|
||||||
|
<TextInput
|
||||||
|
placeholder="Type to Search"
|
||||||
|
mb="sm"
|
||||||
|
radius="md"
|
||||||
|
onChange={(e) => setSearch(e.target.value)}
|
||||||
|
icon={<IconSearch size="1rem" stroke={1.5} />}
|
||||||
|
/>
|
||||||
|
<ScrollArea h={430} offsetScrollbars>
|
||||||
|
<Grid columns={3}>
|
||||||
|
{files.map((file) => (
|
||||||
|
<SelectorItem file={file} clickHandler={clickHandler} key={file.id} />
|
||||||
|
))}
|
||||||
|
</Grid>
|
||||||
|
</ScrollArea>
|
||||||
|
<Group position="right" mt="md">
|
||||||
|
{props.multi && (
|
||||||
|
<>
|
||||||
|
<Button variant="light" color="gray" onClick={() => setShowAdd(true)}>
|
||||||
|
Add file(s)
|
||||||
|
</Button>
|
||||||
|
<Button variant="light" color="red" onClick={handleClose}>
|
||||||
|
Cancel
|
||||||
|
</Button>
|
||||||
|
<Button type="submit" variant="light" color="green" onClick={() => handleSubmitLocal()}>
|
||||||
|
Validate
|
||||||
|
</Button>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</Group>
|
||||||
|
{showAdd && (
|
||||||
|
<ModalAddFile
|
||||||
|
opened={showAdd}
|
||||||
|
handler={toggleShowAdd}
|
||||||
|
addFiles={(files) => setFiles((prev) => [...prev, files])}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</Modal.Body>
|
||||||
|
</Modal.Content>
|
||||||
|
</Modal.Root>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default ModalFileSelector;
|
||||||
37
src/pages/files/file-view.jsx
Normal file
37
src/pages/files/file-view.jsx
Normal file
@ -0,0 +1,37 @@
|
|||||||
|
import { Card, Divider, Text, Title, Image, Badge, Button, Group } from '@mantine/core';
|
||||||
|
|
||||||
|
import API from '../../services/api';
|
||||||
|
|
||||||
|
const FileView = ({ file, onSelect, onDelete, ...props }) => {
|
||||||
|
const deleteHandler = async () => {
|
||||||
|
try {
|
||||||
|
await API.deleteFile(file.id);
|
||||||
|
onDelete(file.id);
|
||||||
|
} catch (error) {
|
||||||
|
console.log(error);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Card shadow="sm" padding="md" withBorder>
|
||||||
|
<Card.Section>
|
||||||
|
<Image src={'/api/file/' + file?.id ?? ''} alt={file?.name ?? ''} withPlaceholder fit="contain" />
|
||||||
|
</Card.Section>
|
||||||
|
<Text>{file?.name ?? 'File Name'}</Text>
|
||||||
|
<Group position="center" grow>
|
||||||
|
{!props.noSelect ? (
|
||||||
|
<Button color="green" mt="sm" variant="light" onClick={() => onSelect(file?.id)}>
|
||||||
|
Select
|
||||||
|
</Button>
|
||||||
|
) : (
|
||||||
|
<></>
|
||||||
|
)}
|
||||||
|
<Button color="red" mt="sm" variant="light">
|
||||||
|
Delete
|
||||||
|
</Button>
|
||||||
|
</Group>
|
||||||
|
</Card>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default FileView;
|
||||||
67
src/pages/files/index.jsx
Normal file
67
src/pages/files/index.jsx
Normal file
@ -0,0 +1,67 @@
|
|||||||
|
import { Button, Paper, Grid, Text, Title, Group, List, Image, ScrollArea, Center } from '@mantine/core';
|
||||||
|
import { useEffect, useState } from 'react';
|
||||||
|
import API from '../../services/api';
|
||||||
|
import setNotification from '../errors/error-notification';
|
||||||
|
import ModalAddFile from './add';
|
||||||
|
import FileView from '../files/file-view';
|
||||||
|
|
||||||
|
const Files = () => {
|
||||||
|
const [showAddFile, setShowAddFile] = useState(false);
|
||||||
|
const [files, setFiles] = useState([]);
|
||||||
|
const toggleShowAddFile = () => setShowAddFile(!showAddFile);
|
||||||
|
|
||||||
|
const handleAddFiles = (files) => {
|
||||||
|
console.log(files);
|
||||||
|
};
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
API.getFiles()
|
||||||
|
.then((res) => {
|
||||||
|
if (res.status === 200) {
|
||||||
|
setFiles(res.data);
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch((err) => {
|
||||||
|
setNotification(true, err.response.data.error);
|
||||||
|
});
|
||||||
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Group position="apart" mt="md">
|
||||||
|
<Title m="md" order={2}>
|
||||||
|
Files
|
||||||
|
</Title>
|
||||||
|
<Button variant="light" mt="sm" onClick={toggleShowAddFile}>
|
||||||
|
Add file
|
||||||
|
</Button>
|
||||||
|
</Group>
|
||||||
|
|
||||||
|
<Paper p="xs" radius="sm" shadow="sm" withBorder my="md">
|
||||||
|
<ScrollArea.Autosize mah={700} offsetScrollbars>
|
||||||
|
<Title order={3}>Files</Title>
|
||||||
|
<Grid columns={12}>
|
||||||
|
{files.map((file) => (
|
||||||
|
<Grid.Col xl={2} lg={3} md={3} sm={4} xs={4} key={file.id}>
|
||||||
|
<FileView key={file.id} file={file} noSelect />
|
||||||
|
</Grid.Col>
|
||||||
|
))}
|
||||||
|
</Grid>
|
||||||
|
</ScrollArea.Autosize>
|
||||||
|
<Center>
|
||||||
|
<Button onClick={() => {}} mt="md">
|
||||||
|
Load More
|
||||||
|
</Button>
|
||||||
|
</Center>
|
||||||
|
</Paper>
|
||||||
|
<ModalAddFile
|
||||||
|
opened={showAddFile}
|
||||||
|
handler={toggleShowAddFile}
|
||||||
|
addFiles={(files) => handleAddFiles(files)}
|
||||||
|
/>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Files;
|
||||||
Loading…
Reference in New Issue
Block a user