2020-1-CloudComputing-E / E_Team_KhuBox

Go to a project
Toggle navigation Toggle navigation pinning
이우진
4201fe1f 1 parent 5ecbbcb8

Add shared file list view

Inline Side-by-side
Showing 21 changed files with 339 additions and 46 deletions
......@@ -7,7 +7,8 @@ import { Main as MainLayout, Minimal as MinimalLayout } from './layouts';
import {
Dashboard as DashboardView,
ProductList as ProductListView,
FileList as FileListView,
MyDrive as MyDriveView,
SharedFileList as SharedFileView,
Typography as TypographyView,
Icons as IconsView,
Account as AccountView,
......@@ -26,13 +27,13 @@ const Routes = () => {
to="/my-drive"
/>
<RouteWithLayout
component={FileListView}
component={MyDriveView}
exact
layout={MainLayout}
path="/my-drive"
/>
<RouteWithLayout
component={FileListView}
component={SharedFileView}
exact
layout={MainLayout}
path="/share"
......
[{"id":1,"name":"MattisNibh.tiff","modifiedAt":"2019-12-20","size":334,"share":false,"sharedAt":"2019-11-19","sharedUser":"Vi de Lloyd"},
{"id":2,"name":"UltricesPosuereCubilia.mpeg","modifiedAt":"2019-06-12","size":703,"share":true,"sharedAt":"2019-10-10","sharedUser":"Rogerio Baynon"},
{"id":3,"name":"FuscePosuereFelis.tiff","modifiedAt":"2019-08-09","size":811,"share":true,"sharedAt":"2019-11-18","sharedUser":"Etheline Hynard"},
{"id":4,"name":"HacHabitassePlatea.xls","modifiedAt":"2020-01-23","size":414,"share":false,"sharedAt":"2020-01-08","sharedUser":"Rudd Skellern"},
{"id":5,"name":"Vivamus.xls","modifiedAt":"2020-03-14","size":351,"share":false,"sharedAt":"2019-12-12","sharedUser":"Carmelle Plumridege"},
{"id":6,"name":"BlanditMi.ppt","modifiedAt":"2019-05-09","size":234,"share":false,"sharedAt":"2020-03-12","sharedUser":"Darla Hassey"},
{"id":7,"name":"ErosVestibulumAc.ppt","modifiedAt":"2019-12-18","size":381,"share":true,"sharedAt":"2019-12-17","sharedUser":"Dame Alenikov"},
{"id":8,"name":"AcTellusSemper.ppt","modifiedAt":"2019-05-07","size":706,"share":false,"sharedAt":"2020-02-10","sharedUser":"Jules Gutteridge"},
{"id":9,"name":"SedTinciduntEu.xls","modifiedAt":"2019-07-24","size":746,"share":true,"sharedAt":"2020-04-19","sharedUser":"Peyton Wakeling"},
{"id":10,"name":"Turpis.tiff","modifiedAt":"2019-12-14","size":132,"share":true,"sharedAt":"2019-07-10","sharedUser":"Felice Tethcote"},
{"id":11,"name":"Nascetur.mp3","modifiedAt":"2019-12-28","size":218,"share":true,"sharedAt":"2019-05-19","sharedUser":"Lindie Balmann"},
{"id":12,"name":"Est.ppt","modifiedAt":"2019-07-13","size":467,"share":true,"sharedAt":"2019-08-31","sharedUser":"Nathalia Heinritz"},
{"id":13,"name":"Egestas.txt","modifiedAt":"2020-04-22","size":690,"share":true,"sharedAt":"2020-04-26","sharedUser":"Eloise Proschke"},
{"id":14,"name":"Sed.doc","modifiedAt":"2019-10-09","size":691,"share":false,"sharedAt":"2019-08-27","sharedUser":"Janaye Aikin"},
{"id":15,"name":"InFaucibus.ppt","modifiedAt":"2019-12-10","size":677,"share":false,"sharedAt":"2020-02-09","sharedUser":"Maurizia Swann"},
{"id":16,"name":"EgetTempus.xls","modifiedAt":"2020-04-07","size":542,"share":false,"sharedAt":"2019-11-16","sharedUser":"Terrence Gummow"},
{"id":17,"name":"AcNulla.tiff","modifiedAt":"2019-09-12","size":409,"share":true,"sharedAt":"2019-12-03","sharedUser":"Paulie Strawbridge"},
{"id":18,"name":"LiberoNullam.mov","modifiedAt":"2019-11-29","size":700,"share":true,"sharedAt":"2019-07-07","sharedUser":"Peggi Guildford"},
{"id":19,"name":"DuisBibendum.xls","modifiedAt":"2020-04-19","size":822,"share":true,"sharedAt":"2019-06-17","sharedUser":"Baron Colles"},
{"id":20,"name":"AliquetPulvinar.ppt","modifiedAt":"2019-09-11","size":799,"share":true,"sharedAt":"2020-02-13","sharedUser":"Roxanna Elcombe"},
{"id":21,"name":"Congue.ppt","modifiedAt":"2020-03-28","size":671,"share":true,"sharedAt":"2019-05-11","sharedUser":"Gleda Rabjohn"},
{"id":22,"name":"IdNulla.xls","modifiedAt":"2019-06-05","size":810,"share":true,"sharedAt":"2019-08-18","sharedUser":"Constantia Windrass"},
{"id":23,"name":"MaurisLaoreet.mov","modifiedAt":"2019-07-12","size":651,"share":false,"sharedAt":"2019-11-17","sharedUser":"Lynda Paoletto"},
{"id":24,"name":"EuSapien.mp3","modifiedAt":"2019-08-19","size":50,"share":true,"sharedAt":"2019-10-23","sharedUser":"Bern Rizzello"},
{"id":25,"name":"Eu.jpeg","modifiedAt":"2020-01-08","size":635,"share":true,"sharedAt":"2019-12-01","sharedUser":"Norah Dumini"},
{"id":26,"name":"Cras.ppt","modifiedAt":"2020-04-28","size":37,"share":true,"sharedAt":"2019-11-26","sharedUser":"Kelsy Stebbings"},
{"id":27,"name":"SapienUt.xls","modifiedAt":"2020-02-10","size":901,"share":true,"sharedAt":"2019-09-13","sharedUser":"Aveline Kemmis"},
{"id":28,"name":"EgetTempus.ppt","modifiedAt":"2020-03-05","size":652,"share":false,"sharedAt":"2020-04-05","sharedUser":"Steffane Hussy"},
{"id":29,"name":"ConvallisTortor.mpeg","modifiedAt":"2019-10-05","size":306,"share":false,"sharedAt":"2020-01-20","sharedUser":"Coral Lisciandro"},
{"id":30,"name":"Sed.pdf","modifiedAt":"2020-03-22","size":965,"share":false,"sharedAt":"2020-02-25","sharedUser":"Dawna Ruprechter"},
{"id":31,"name":"MollisMolestieLorem.ppt","modifiedAt":"2019-12-12","size":415,"share":true,"sharedAt":"2020-03-06","sharedUser":"Myra Fifield"},
{"id":32,"name":"APedePosuere.tiff","modifiedAt":"2019-12-01","size":132,"share":false,"sharedAt":"2019-09-03","sharedUser":"Wolfy Boniface"},
{"id":33,"name":"Proin.jpeg","modifiedAt":"2020-04-21","size":315,"share":false,"sharedAt":"2019-10-13","sharedUser":"Ozzie Orpin"},
{"id":34,"name":"HacHabitassePlatea.mp3","modifiedAt":"2020-03-09","size":761,"share":false,"sharedAt":"2019-10-09","sharedUser":"Theadora Vaughan"},
{"id":35,"name":"Vulputate.doc","modifiedAt":"2019-11-22","size":761,"share":false,"sharedAt":"2019-05-18","sharedUser":"Reina Copley"},
{"id":36,"name":"SitAmet.tiff","modifiedAt":"2019-07-11","size":284,"share":true,"sharedAt":"2019-10-06","sharedUser":"Rhiamon Devon"},
{"id":37,"name":"ConvallisNullaNeque.tiff","modifiedAt":"2019-12-23","size":201,"share":true,"sharedAt":"2019-05-19","sharedUser":"Dur Pocke"},
{"id":38,"name":"RhoncusAliquet.xls","modifiedAt":"2019-10-11","size":635,"share":true,"sharedAt":"2019-07-31","sharedUser":"Dori Grellis"},
{"id":39,"name":"TinciduntEuFelis.doc","modifiedAt":"2019-06-05","size":118,"share":true,"sharedAt":"2019-09-17","sharedUser":"Wylie Warbrick"},
{"id":40,"name":"Erat.mp3","modifiedAt":"2020-02-13","size":285,"share":false,"sharedAt":"2019-10-06","sharedUser":"Chelsey Marzellano"},
{"id":41,"name":"VestibulumSitAmet.jpeg","modifiedAt":"2020-04-23","size":262,"share":false,"sharedAt":"2019-11-03","sharedUser":"Marni Harpur"},
{"id":42,"name":"PorttitorLacusAt.xls","modifiedAt":"2019-11-06","size":301,"share":false,"sharedAt":"2019-08-23","sharedUser":"Gerri Jest"},
{"id":43,"name":"EratNulla.jpeg","modifiedAt":"2019-10-11","size":788,"share":true,"sharedAt":"2020-01-20","sharedUser":"Ginni Hillatt"},
{"id":44,"name":"CubiliaCuraeMauris.ppt","modifiedAt":"2019-11-04","size":416,"share":true,"sharedAt":"2019-10-09","sharedUser":"Eolande Garstan"},
{"id":45,"name":"QuisJusto.avi","modifiedAt":"2020-03-03","size":159,"share":false,"sharedAt":"2020-02-13","sharedUser":"Karl Lyness"},
{"id":46,"name":"ElementumInHac.avi","modifiedAt":"2019-09-04","size":413,"share":true,"sharedAt":"2019-06-17","sharedUser":"Hugo Challicum"},
{"id":47,"name":"Adipiscing.tiff","modifiedAt":"2020-01-16","size":510,"share":true,"sharedAt":"2019-08-30","sharedUser":"Leela Larmouth"},
{"id":48,"name":"Sed.gif","modifiedAt":"2020-02-17","size":778,"share":true,"sharedAt":"2019-12-30","sharedUser":"Koren Timmermann"},
{"id":49,"name":"QuisqueArcuLibero.xls","modifiedAt":"2020-02-23","size":320,"share":false,"sharedAt":"2020-01-15","sharedUser":"Osborne Sprull"},
{"id":50,"name":"Ac.ppt","modifiedAt":"2019-07-01","size":644,"share":true,"sharedAt":"2019-10-15","sharedUser":"Brandy Antal"}]
import uuid from 'uuid/v1';
export default [
{id:1,name:"VelitEuEst.jpeg",modifiedAt:"2019-08-28",size:73,share:false},
{id:2,name:"EstRisusAuctor.mp3",modifiedAt:"2019-11-03",size:34,share:true},
{id:3,name:"NonLigula.pdf",modifiedAt:"2019-12-15",size:20,share:true},
{id:4,name:"In.avi",modifiedAt:"2019-05-09",size:100,share:true},
{id:5,name:"DiamEratFermentum.txt",modifiedAt:"2019-07-18",size:20,share:false},
{id:6,name:"Amet.avi",modifiedAt:"2020-02-27",size:77,share:false},
{id:7,name:"OrnareImperdietSapien.jpeg",modifiedAt:"2020-01-22",size:24,share:false},
{id:8,name:"AugueLuctus.mp3",modifiedAt:"2020-03-22",size:50,share:true},
{id:9,name:"TempusSemperEst.doc",modifiedAt:"2020-04-26",size:20,share:true},
{id:10,name:"Pellentesque.avi",modifiedAt:"2020-03-31",size:7,share:true},
{id:11,name:"Ante.mp3",modifiedAt:"2020-04-08",size:53,share:true},
{id:12,name:"NamDui.mp3",modifiedAt:"2019-11-05",size:14,share:true},
{id:13,name:"MagnaAc.xls",modifiedAt:"2020-01-04",size:92,share:true},
{id:14,name:"Nam.mp3",modifiedAt:"2019-11-04",size:10,share:true},
{id:15,name:"Vestibulum.avi",modifiedAt:"2019-07-02",size:62,share:true},
{id:16,name:"VestibulumAnteIpsum.ppt",modifiedAt:"2020-03-17",size:67,share:true},
{id:17,name:"Id.tiff",modifiedAt:"2019-05-15",size:72,share:true},
{id:18,name:"NequeVestibulumEget.xls",modifiedAt:"2019-09-06",size:1,share:true},
{id:19,name:"AdipiscingMolestieHendrerit.ppt",modifiedAt:"2019-05-25",size:87,share:true},
{id:20,name:"Lacus.xls",modifiedAt:"2020-03-04",size:52,share:true},
{id:21,name:"EgetElitSodales.xls",modifiedAt:"2019-05-19",size:95,share:false},
{id:22,name:"PorttitorLacus.ppt",modifiedAt:"2019-11-01",size:89,share:false},
{id:23,name:"Cubilia.mp3",modifiedAt:"2019-05-10",size:35,share:true},
{id:24,name:"VenenatisNonSodales.xls",modifiedAt:"2019-10-29",size:22,share:true},
{id:25,name:"JustoIn.ppt",modifiedAt:"2020-02-23",size:54,share:false},
{id:26,name:"InFelis.ppt",modifiedAt:"2019-10-18",size:58,share:false},
{id:27,name:"SitAmetEleifend.xls",modifiedAt:"2019-09-21",size:12,share:false},
{id:28,name:"UtSuscipit.ppt",modifiedAt:"2019-05-17",size:83,share:false},
{id:29,name:"UtDolor.pdf",modifiedAt:"2019-07-28",size:23,share:false},
{id:30,name:"DuisBibendum.ppt",modifiedAt:"2019-09-06",size:48,share:true}
];
export { default } from './FileList';
......@@ -13,7 +13,7 @@ const useStyles = makeStyles(theme => ({
}
}));
const FileList = () => {
const MyDrive = () => {
const classes = useStyles();
const [files] = useState(mockData);
......@@ -22,10 +22,10 @@ const FileList = () => {
<div className={classes.root}>
<DriveToolbar />
<div className={classes.content}>
<FileTable users={files} />
<FileTable files={files} />
</div>
</div>
);
};
export default FileList;
export default MyDrive;
......
......@@ -42,7 +42,7 @@ const useStyles = makeStyles(theme => ({
}));
const FileTable = props => {
const { className, users: files, ...rest } = props;
const { className, files: files, ...rest } = props;
const classes = useStyles();
......@@ -51,12 +51,12 @@ const FileTable = props => {
const [page, setPage] = useState(0);
const handleSelectAll = event => {
const { users } = props;
const { files } = props;
let selectedUsers;
if (event.target.checked) {
selectedUsers = users.map(user => user.id);
selectedUsers = files.map(user => user.id);
} else {
selectedUsers = [];
}
......@@ -174,7 +174,7 @@ const FileTable = props => {
FileTable.propTypes = {
className: PropTypes.string,
users: PropTypes.array.isRequired
files: PropTypes.array.isRequired
};
export default FileTable;
......
import uuid from 'uuid/v1';
import data from 'mock_file_data.json'
export default data;
\ No newline at end of file
export { default } from './MyDrive';
import React, { useState } from 'react';
import { makeStyles } from '@material-ui/styles';
import { SharedFileToolbar, SharedFileTable } from './components';
import mockData from './data';
const useStyles = makeStyles(theme => ({
root: {
padding: theme.spacing(3)
},
content: {
marginTop: theme.spacing(2)
}
}));
const SharedFileList = () => {
const classes = useStyles();
const [files] = useState(mockData);
return (
<div className={classes.root}>
<SharedFileToolbar />
<div className={classes.content}>
<SharedFileTable files={files} />
</div>
</div>
);
};
export default SharedFileList;
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 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>
</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.sharedAt).format('DD/MM/YYYY')}
</TableCell>
<TableCell>{file.sharedUser}</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 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 as SharedFileTable } from './SharedFileTable';
export { default as SharedFileToolbar } from './SharedFileToolbar';
import uuid from 'uuid/v1';
import data from 'mock_file_data.json'
export default data;
export { default } from './SharedFileList';
......@@ -7,4 +7,5 @@ export { default as Settings } from './Settings';
export { default as SignIn } from './SignIn';
export { default as SignUp } from './SignUp';
export { default as Typography } from './Typography';
export { default as FileList } from './FileList';
export { default as MyDrive } from './MyDrive';
export { default as SharedFileList } from './SharedFileList';
......