2020-1-CloudComputing-E / E_Team_KhuBox

Go to a project
Toggle navigation Toggle navigation pinning
이우진
5ecbbcb8 1 parent 6b2bed4d

Add FileList view

Inline Side-by-side
Showing 3 changed files with 51 additions and 167 deletions
...@@ -16,13 +16,13 @@ const useStyles = makeStyles(theme => ({ ...@@ -16,13 +16,13 @@ const useStyles = makeStyles(theme => ({
16 const FileList = () => { 16 const FileList = () => {
17 const classes = useStyles(); 17 const classes = useStyles();
18 18
19 - const [users] = useState(mockData); 19 + const [files] = useState(mockData);
20 20
21 return ( 21 return (
22 <div className={classes.root}> 22 <div className={classes.root}>
23 <DriveToolbar /> 23 <DriveToolbar />
24 <div className={classes.content}> 24 <div className={classes.content}>
25 - <FileTable users={users} /> 25 + <FileTable users={files} />
26 </div> 26 </div>
27 </div> 27 </div>
28 ); 28 );
......
...@@ -42,7 +42,7 @@ const useStyles = makeStyles(theme => ({ ...@@ -42,7 +42,7 @@ const useStyles = makeStyles(theme => ({
42 })); 42 }));
43 43
44 const FileTable = props => { 44 const FileTable = props => {
45 - const { className, users, ...rest } = props; 45 + const { className, users: files, ...rest } = props;
46 46
47 const classes = useStyles(); 47 const classes = useStyles();
48 48
...@@ -105,58 +105,51 @@ const FileTable = props => { ...@@ -105,58 +105,51 @@ const FileTable = props => {
105 <TableRow> 105 <TableRow>
106 <TableCell padding="checkbox"> 106 <TableCell padding="checkbox">
107 <Checkbox 107 <Checkbox
108 - checked={selectedUsers.length === users.length} 108 + checked={selectedUsers.length === files.length}
109 color="primary" 109 color="primary"
110 indeterminate={ 110 indeterminate={
111 selectedUsers.length > 0 && 111 selectedUsers.length > 0 &&
112 - selectedUsers.length < users.length 112 + selectedUsers.length < files.length
113 } 113 }
114 onChange={handleSelectAll} 114 onChange={handleSelectAll}
115 /> 115 />
116 </TableCell> 116 </TableCell>
117 - <TableCell>Name</TableCell> 117 + <TableCell>이름</TableCell>
118 - <TableCell>Email</TableCell> 118 + <TableCell>마지막으로 수정한 날짜</TableCell>
119 - <TableCell>Location</TableCell> 119 + <TableCell>크기</TableCell>
120 - <TableCell>Phone</TableCell> 120 + <TableCell>공유</TableCell>
121 - <TableCell>Registration date</TableCell>
122 </TableRow> 121 </TableRow>
123 </TableHead> 122 </TableHead>
124 <TableBody> 123 <TableBody>
125 - {users.slice(0, rowsPerPage).map(user => ( 124 + {files.slice(0, rowsPerPage).map(file => (
126 <TableRow 125 <TableRow
127 className={classes.tableRow} 126 className={classes.tableRow}
128 hover 127 hover
129 - key={user.id} 128 + key={file.id}
130 - selected={selectedUsers.indexOf(user.id) !== -1} 129 + selected={selectedUsers.indexOf(file.id) !== -1}
131 > 130 >
132 <TableCell padding="checkbox"> 131 <TableCell padding="checkbox">
133 <Checkbox 132 <Checkbox
134 - checked={selectedUsers.indexOf(user.id) !== -1} 133 + checked={selectedUsers.indexOf(file.id) !== -1}
135 color="primary" 134 color="primary"
136 - onChange={event => handleSelectOne(event, user.id)} 135 + onChange={event => handleSelectOne(event, file.id)}
137 value="true" 136 value="true"
138 /> 137 />
139 </TableCell> 138 </TableCell>
140 <TableCell> 139 <TableCell>
141 <div className={classes.nameContainer}> 140 <div className={classes.nameContainer}>
142 - <Avatar 141 + {/* 파일 아이콘 */}
143 - className={classes.avatar} 142 + <Typography variant="body1">{file.name}</Typography>
144 - src={user.avatarUrl}
145 - >
146 - {getInitials(user.name)}
147 - </Avatar>
148 - <Typography variant="body1">{user.name}</Typography>
149 </div> 143 </div>
150 </TableCell> 144 </TableCell>
151 - <TableCell>{user.email}</TableCell>
152 <TableCell> 145 <TableCell>
153 - {user.address.city}, {user.address.state},{' '} 146 + {moment(file.modifiedAt).format('DD/MM/YYYY')}
154 - {user.address.country}
155 </TableCell> 147 </TableCell>
156 - <TableCell>{user.phone}</TableCell> 148 + <TableCell>{file.size}</TableCell>
157 <TableCell> 149 <TableCell>
158 - {moment(user.createdAt).format('DD/MM/YYYY')} 150 + {file.share}
159 </TableCell> 151 </TableCell>
152 +
160 </TableRow> 153 </TableRow>
161 ))} 154 ))}
162 </TableBody> 155 </TableBody>
...@@ -167,7 +160,7 @@ const FileTable = props => { ...@@ -167,7 +160,7 @@ const FileTable = props => {
167 <CardActions className={classes.actions}> 160 <CardActions className={classes.actions}>
168 <TablePagination 161 <TablePagination
169 component="div" 162 component="div"
170 - count={users.length} 163 + count={files.length}
171 onChangePage={handlePageChange} 164 onChangePage={handlePageChange}
172 onChangeRowsPerPage={handleRowsPerPageChange} 165 onChangeRowsPerPage={handleRowsPerPageChange}
173 page={page} 166 page={page}
......
1 import uuid from 'uuid/v1'; 1 import uuid from 'uuid/v1';
2 2
3 export default [ 3 export default [
4 - { 4 + {id:1,name:"VelitEuEst.jpeg",modifiedAt:"2019-08-28",size:73,share:false},
5 - id: uuid(), 5 +{id:2,name:"EstRisusAuctor.mp3",modifiedAt:"2019-11-03",size:34,share:true},
6 - name: 'Ekaterina Tankova', 6 +{id:3,name:"NonLigula.pdf",modifiedAt:"2019-12-15",size:20,share:true},
7 - address: { 7 +{id:4,name:"In.avi",modifiedAt:"2019-05-09",size:100,share:true},
8 - country: 'USA', 8 +{id:5,name:"DiamEratFermentum.txt",modifiedAt:"2019-07-18",size:20,share:false},
9 - state: 'West Virginia', 9 +{id:6,name:"Amet.avi",modifiedAt:"2020-02-27",size:77,share:false},
10 - city: 'Parkersburg', 10 +{id:7,name:"OrnareImperdietSapien.jpeg",modifiedAt:"2020-01-22",size:24,share:false},
11 - street: '2849 Fulton Street' 11 +{id:8,name:"AugueLuctus.mp3",modifiedAt:"2020-03-22",size:50,share:true},
12 - }, 12 +{id:9,name:"TempusSemperEst.doc",modifiedAt:"2020-04-26",size:20,share:true},
13 - email: 'ekaterina.tankova@devias.io', 13 +{id:10,name:"Pellentesque.avi",modifiedAt:"2020-03-31",size:7,share:true},
14 - phone: '304-428-3097', 14 +{id:11,name:"Ante.mp3",modifiedAt:"2020-04-08",size:53,share:true},
15 - avatarUrl: '/images/avatars/avatar_3.png', 15 +{id:12,name:"NamDui.mp3",modifiedAt:"2019-11-05",size:14,share:true},
16 - createdAt: 1555016400000 16 +{id:13,name:"MagnaAc.xls",modifiedAt:"2020-01-04",size:92,share:true},
17 - }, 17 +{id:14,name:"Nam.mp3",modifiedAt:"2019-11-04",size:10,share:true},
18 - { 18 +{id:15,name:"Vestibulum.avi",modifiedAt:"2019-07-02",size:62,share:true},
19 - id: uuid(), 19 +{id:16,name:"VestibulumAnteIpsum.ppt",modifiedAt:"2020-03-17",size:67,share:true},
20 - name: 'Cao Yu', 20 +{id:17,name:"Id.tiff",modifiedAt:"2019-05-15",size:72,share:true},
21 - address: { 21 +{id:18,name:"NequeVestibulumEget.xls",modifiedAt:"2019-09-06",size:1,share:true},
22 - country: 'USA', 22 +{id:19,name:"AdipiscingMolestieHendrerit.ppt",modifiedAt:"2019-05-25",size:87,share:true},
23 - state: 'Bristow', 23 +{id:20,name:"Lacus.xls",modifiedAt:"2020-03-04",size:52,share:true},
24 - city: 'Iowa', 24 +{id:21,name:"EgetElitSodales.xls",modifiedAt:"2019-05-19",size:95,share:false},
25 - street: '1865 Pleasant Hill Road' 25 +{id:22,name:"PorttitorLacus.ppt",modifiedAt:"2019-11-01",size:89,share:false},
26 - }, 26 +{id:23,name:"Cubilia.mp3",modifiedAt:"2019-05-10",size:35,share:true},
27 - email: 'cao.yu@devias.io', 27 +{id:24,name:"VenenatisNonSodales.xls",modifiedAt:"2019-10-29",size:22,share:true},
28 - avatarUrl: '/images/avatars/avatar_4.png', 28 +{id:25,name:"JustoIn.ppt",modifiedAt:"2020-02-23",size:54,share:false},
29 - phone: '712-351-5711', 29 +{id:26,name:"InFelis.ppt",modifiedAt:"2019-10-18",size:58,share:false},
30 - createdAt: 1555016400000 30 +{id:27,name:"SitAmetEleifend.xls",modifiedAt:"2019-09-21",size:12,share:false},
31 - }, 31 +{id:28,name:"UtSuscipit.ppt",modifiedAt:"2019-05-17",size:83,share:false},
32 - { 32 +{id:29,name:"UtDolor.pdf",modifiedAt:"2019-07-28",size:23,share:false},
33 - id: uuid(), 33 +{id:30,name:"DuisBibendum.ppt",modifiedAt:"2019-09-06",size:48,share:true}
34 - name: 'Alexa Richardson',
35 - address: {
36 - country: 'USA',
37 - state: 'Georgia',
38 - city: 'Atlanta',
39 - street: '4894 Lakeland Park Drive'
40 - },
41 - email: 'alexa.richardson@devias.io',
42 - phone: '770-635-2682',
43 - avatarUrl: '/images/avatars/avatar_2.png',
44 - createdAt: 1555016400000
45 - },
46 - {
47 - id: uuid(),
48 - name: 'Anje Keizer',
49 - address: {
50 - country: 'USA',
51 - state: 'Ohio',
52 - city: 'Dover',
53 - street: '4158 Hedge Street'
54 - },
55 - email: 'anje.keizer@devias.io',
56 - avatarUrl: '/images/avatars/avatar_5.png',
57 - phone: '908-691-3242',
58 - createdAt: 1554930000000
59 - },
60 - {
61 - id: uuid(),
62 - name: 'Clarke Gillebert',
63 - address: {
64 - country: 'USA',
65 - state: 'Texas',
66 - city: 'Dallas',
67 - street: '75247'
68 - },
69 - email: 'clarke.gillebert@devias.io',
70 - phone: '972-333-4106',
71 - avatarUrl: '/images/avatars/avatar_6.png',
72 - createdAt: 1554757200000
73 - },
74 - {
75 - id: uuid(),
76 - name: 'Adam Denisov',
77 - address: {
78 - country: 'USA',
79 - state: 'California',
80 - city: 'Bakerfield',
81 - street: '317 Angus Road'
82 - },
83 - email: 'adam.denisov@devias.io',
84 - phone: '858-602-3409',
85 - avatarUrl: '/images/avatars/avatar_1.png',
86 - createdAt: 1554670800000
87 - },
88 - {
89 - id: uuid(),
90 - name: 'Ava Gregoraci',
91 - address: {
92 - country: 'USA',
93 - state: 'California',
94 - city: 'Redondo Beach',
95 - street: '2188 Armbrester Drive'
96 - },
97 - email: 'ava.gregoraci@devias.io',
98 - avatarUrl: '/images/avatars/avatar_7.png',
99 - phone: '415-907-2647',
100 - createdAt: 1554325200000
101 - },
102 - {
103 - id: uuid(),
104 - name: 'Emilee Simchenko',
105 - address: {
106 - country: 'USA',
107 - state: 'Nevada',
108 - city: 'Las Vegas',
109 - street: '1798 Hickory Ridge Drive'
110 - },
111 - email: 'emilee.simchenko@devias.io',
112 - phone: '702-661-1654',
113 - avatarUrl: '/images/avatars/avatar_8.png',
114 - createdAt: 1523048400000
115 - },
116 - {
117 - id: uuid(),
118 - name: 'Kwak Seong-Min',
119 - address: {
120 - country: 'USA',
121 - state: 'Michigan',
122 - city: 'Detroit',
123 - street: '3934 Wildrose Lane'
124 - },
125 - email: 'kwak.seong.min@devias.io',
126 - avatarUrl: '/images/avatars/avatar_9.png',
127 - phone: '313-812-8947'
128 - },
129 - {
130 - id: uuid(),
131 - name: 'Merrile Burgett',
132 - address: {
133 - country: 'USA',
134 - state: 'Utah',
135 - city: 'Salt Lake City',
136 - street: '368 Lamberts Branch Road'
137 - },
138 - email: 'merrile.burgett@devias.io',
139 - phone: '801-301-7894',
140 - avatarUrl: '/images/avatars/avatar_10.png',
141 - createdAt: 1522702800000
142 - }
143 ]; 34 ];
......