2020-1-CloudComputing-E / E_Team_KhuBox

Go to a project
Toggle navigation Toggle navigation pinning
이우진
f37a0b89 1 parent 622bc0c6

Add trash view

Inline Side-by-side
Showing 11 changed files with 458 additions and 2 deletions
......@@ -9,7 +9,7 @@ import {
RecentFileList as RecentFileListView,
MyDrive as MyDriveView,
SharedFileList as SharedFileView,
Typography as TypographyView,
Trash as TrashView,
Icons as IconsView,
Account as AccountView,
Settings as SettingsView,
......@@ -45,7 +45,7 @@ const Routes = () => {
path="/recent"
/>
<RouteWithLayout
component={TypographyView}
component={TrashView}
exact
layout={MainLayout}
path="/trash"
......
import React, { useState } from 'react';
import clsx from 'clsx';
import PropTypes from 'prop-types';
import moment from 'moment';
import PerfectScrollbar from 'react-perfect-scrollbar';
import { makeStyles } from '@material-ui/styles';
import {
Card,
CardActions,
CardContent,
Avatar,
Checkbox,
Table,
TableBody,
TableCell,
TableHead,
TableRow,
Typography,
TablePagination
} from '@material-ui/core';
import { getInitials } from '../../../Trash/components/RemovedFileTable/node_modules/helpers';
const useStyles = makeStyles(theme => ({
root: {},
content: {
padding: 0
},
inner: {
minWidth: 1050
},
nameContainer: {
display: 'flex',
alignItems: 'center'
},
avatar: {
marginRight: theme.spacing(2)
},
actions: {
justifyContent: 'flex-end'
}
}));
const FileTable = props => {
const { className, files: files, ...rest } = props;
const classes = useStyles();
const [selectedUsers, setSelectedUsers] = useState([]);
const [rowsPerPage, setRowsPerPage] = useState(10);
const [page, setPage] = useState(0);
const handleSelectAll = event => {
const { files } = props;
let selectedUsers;
if (event.target.checked) {
selectedUsers = files.map(user => user.id);
} else {
selectedUsers = [];
}
setSelectedUsers(selectedUsers);
};
const handleSelectOne = (event, id) => {
const selectedIndex = selectedUsers.indexOf(id);
let newSelectedUsers = [];
if (selectedIndex === -1) {
newSelectedUsers = newSelectedUsers.concat(selectedUsers, id);
} else if (selectedIndex === 0) {
newSelectedUsers = newSelectedUsers.concat(selectedUsers.slice(1));
} else if (selectedIndex === selectedUsers.length - 1) {
newSelectedUsers = newSelectedUsers.concat(selectedUsers.slice(0, -1));
} else if (selectedIndex > 0) {
newSelectedUsers = newSelectedUsers.concat(
selectedUsers.slice(0, selectedIndex),
selectedUsers.slice(selectedIndex + 1)
);
}
setSelectedUsers(newSelectedUsers);
};
const handlePageChange = (event, page) => {
setPage(page);
};
const handleRowsPerPageChange = event => {
setRowsPerPage(event.target.value);
};
return (
<Card
{...rest}
className={clsx(classes.root, className)}
>
<CardContent className={classes.content}>
<PerfectScrollbar>
<div className={classes.inner}>
<Table>
<TableHead>
<TableRow>
<TableCell padding="checkbox">
<Checkbox
checked={selectedUsers.length === files.length}
color="primary"
indeterminate={
selectedUsers.length > 0 &&
selectedUsers.length < files.length
}
onChange={handleSelectAll}
/>
</TableCell>
<TableCell>이름</TableCell>
<TableCell>마지막으로 수정한 날짜</TableCell>
<TableCell>크기</TableCell>
<TableCell>공유</TableCell>
</TableRow>
</TableHead>
<TableBody>
{files.slice(0, rowsPerPage).map(file => (
<TableRow
className={classes.tableRow}
hover
key={file.id}
selected={selectedUsers.indexOf(file.id) !== -1}
>
<TableCell padding="checkbox">
<Checkbox
checked={selectedUsers.indexOf(file.id) !== -1}
color="primary"
onChange={event => handleSelectOne(event, file.id)}
value="true"
/>
</TableCell>
<TableCell>
<div className={classes.nameContainer}>
{/* 파일 아이콘 */}
<Typography variant="body1">{file.name}</Typography>
</div>
</TableCell>
<TableCell>
{moment(file.modifiedAt).format('DD/MM/YYYY')}
</TableCell>
<TableCell>{file.size}</TableCell>
<TableCell>
{file.share}
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</div>
</PerfectScrollbar>
</CardContent>
<CardActions className={classes.actions}>
<TablePagination
component="div"
count={files.length}
onChangePage={handlePageChange}
onChangeRowsPerPage={handleRowsPerPageChange}
page={page}
rowsPerPage={rowsPerPage}
rowsPerPageOptions={[5, 10, 25]}
/>
</CardActions>
</Card>
);
};
FileTable.propTypes = {
className: PropTypes.string,
files: PropTypes.array.isRequired
};
export default FileTable;
import React, { useState } from 'react';
import { makeStyles } from '@material-ui/styles';
import { TrashToolbar, RemovedFileTable } from './components';
import mockData from './data';
const useStyles = makeStyles(theme => ({
root: {
padding: theme.spacing(3)
},
content: {
marginTop: theme.spacing(2)
}
}));
const Trash = () => {
const classes = useStyles();
const [files] = useState(mockData);
return (
<div className={classes.root}>
<TrashToolbar />
<div className={classes.content}>
<RemovedFileTable files={files} />
</div>
</div>
);
};
export default Trash;
import React, { useState } from 'react';
import clsx from 'clsx';
import PropTypes from 'prop-types';
import moment from 'moment';
import PerfectScrollbar from 'react-perfect-scrollbar';
import { makeStyles } from '@material-ui/styles';
import {
Card,
CardActions,
CardContent,
Avatar,
Checkbox,
Table,
TableBody,
TableCell,
TableHead,
TableRow,
Typography,
TablePagination
} from '@material-ui/core';
import { getInitials } from 'helpers';
const useStyles = makeStyles(theme => ({
root: {},
content: {
padding: 0
},
inner: {
minWidth: 1050
},
nameContainer: {
display: 'flex',
alignItems: 'center'
},
avatar: {
marginRight: theme.spacing(2)
},
actions: {
justifyContent: 'flex-end'
}
}));
const RemovedFileTable = props => {
const { className, files: files, ...rest } = props;
const classes = useStyles();
const [selectedUsers, setSelectedUsers] = useState([]);
const [rowsPerPage, setRowsPerPage] = useState(10);
const [page, setPage] = useState(0);
const handleSelectAll = event => {
const { files } = props;
let selectedUsers;
if (event.target.checked) {
selectedUsers = files.map(user => user.id);
} else {
selectedUsers = [];
}
setSelectedUsers(selectedUsers);
};
const handleSelectOne = (event, id) => {
const selectedIndex = selectedUsers.indexOf(id);
let newSelectedUsers = [];
if (selectedIndex === -1) {
newSelectedUsers = newSelectedUsers.concat(selectedUsers, id);
} else if (selectedIndex === 0) {
newSelectedUsers = newSelectedUsers.concat(selectedUsers.slice(1));
} else if (selectedIndex === selectedUsers.length - 1) {
newSelectedUsers = newSelectedUsers.concat(selectedUsers.slice(0, -1));
} else if (selectedIndex > 0) {
newSelectedUsers = newSelectedUsers.concat(
selectedUsers.slice(0, selectedIndex),
selectedUsers.slice(selectedIndex + 1)
);
}
setSelectedUsers(newSelectedUsers);
};
const handlePageChange = (event, page) => {
setPage(page);
};
const handleRowsPerPageChange = event => {
setRowsPerPage(event.target.value);
};
return (
<Card
{...rest}
className={clsx(classes.root, className)}
>
<CardContent className={classes.content}>
<PerfectScrollbar>
<div className={classes.inner}>
<Table>
<TableHead>
<TableRow>
<TableCell padding="checkbox">
<Checkbox
checked={selectedUsers.length === files.length}
color="primary"
indeterminate={
selectedUsers.length > 0 &&
selectedUsers.length < files.length
}
onChange={handleSelectAll}
/>
</TableCell>
<TableCell>이름</TableCell>
<TableCell>마지막으로 수정한 날짜</TableCell>
<TableCell>크기</TableCell>
<TableCell>공유</TableCell>
</TableRow>
</TableHead>
<TableBody>
{files.slice(0, rowsPerPage).map(file => (
<TableRow
className={classes.tableRow}
hover
key={file.id}
selected={selectedUsers.indexOf(file.id) !== -1}
>
<TableCell padding="checkbox">
<Checkbox
checked={selectedUsers.indexOf(file.id) !== -1}
color="primary"
onChange={event => handleSelectOne(event, file.id)}
value="true"
/>
</TableCell>
<TableCell>
<div className={classes.nameContainer}>
{/* 파일 아이콘 */}
<Typography variant="body1">{file.name}</Typography>
</div>
</TableCell>
<TableCell>
{moment(file.modifiedAt).format('DD/MM/YYYY')}
</TableCell>
<TableCell>{file.size}</TableCell>
<TableCell>
{file.share}
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</div>
</PerfectScrollbar>
</CardContent>
<CardActions className={classes.actions}>
<TablePagination
component="div"
count={files.length}
onChangePage={handlePageChange}
onChangeRowsPerPage={handleRowsPerPageChange}
page={page}
rowsPerPage={rowsPerPage}
rowsPerPageOptions={[5, 10, 25]}
/>
</CardActions>
</Card>
);
};
RemovedFileTable.propTypes = {
className: PropTypes.string,
files: PropTypes.array.isRequired
};
export default RemovedFileTable;
export { default } from './RemovedFileTable';
import React from 'react';
import PropTypes from 'prop-types';
import clsx from 'clsx';
import { makeStyles } from '@material-ui/styles';
import { Button } from '@material-ui/core';
import { SearchInput } from 'components';
const useStyles = makeStyles(theme => ({
root: {},
row: {
height: '42px',
display: 'flex',
alignItems: 'center',
marginTop: theme.spacing(1)
},
spacer: {
flexGrow: 1
},
importButton: {
marginRight: theme.spacing(1)
},
exportButton: {
marginRight: theme.spacing(1)
},
searchInput: {
marginRight: theme.spacing(1)
}
}));
const DriveToolbar = props => {
const { className, ...rest } = props;
const classes = useStyles();
return (
<div
{...rest}
className={clsx(classes.root, className)}
>
<div className={classes.row}>
<SearchInput
className={classes.searchInput}
placeholder="파일, 폴더 검색"
/>
</div>
</div>
);
};
DriveToolbar.propTypes = {
className: PropTypes.string
};
export default DriveToolbar;
export { default } from './TrashToolbar';
export { default as RemovedFileTable } from './RemovedFileTable';
export { default as TrashToolbar } from './TrashToolbar';
import uuid from 'uuid/v1';
import data from 'mock_file_data.json'
export default data;
\ No newline at end of file
export { default } from './Trash';
......@@ -9,3 +9,4 @@ export { default as SignUp } from './SignUp';
export { default as Typography } from './Typography';
export { default as MyDrive } from './MyDrive';
export { default as SharedFileList } from './SharedFileList';
export { default as Trash } from './Trash';
......