육현진 / DBproject

Go to a project
Toggle navigation Toggle navigation pinning
육현진
fddfb89f 1 parent 0c8cf82f

add student search module

Expand all
Inline Side-by-side
Showing 4 changed files with 183 additions and 59 deletions
This diff is collapsed. Click to expand it.
...@@ -11,19 +11,86 @@ import TableCell from '@material-ui/core/TableCell' ...@@ -11,19 +11,86 @@ import TableCell from '@material-ui/core/TableCell'
11 import {withStyles} from '@material-ui/core/styles'; 11 import {withStyles} from '@material-ui/core/styles';
12 import curcularProgress from '@material-ui/core/CircularProgress'; 12 import curcularProgress from '@material-ui/core/CircularProgress';
13 import CircularProgress from '@material-ui/core/CircularProgress'; 13 import CircularProgress from '@material-ui/core/CircularProgress';
14 +import AppBar from '@material-ui/core/AppBar'
15 +import Toolbar from '@material-ui/core/Toolbar';
16 +import IconButton from '@material-ui/core/IconButton';
17 +import Typography from '@material-ui/core/Typography';
18 +import InputBase from '@material-ui/core/InputBase';
19 +import { fade } from '@material-ui/core/styles/colorManipulator';
20 +import MenuIcon from '@material-ui/icons/Menu';
21 +import SearchIcon from '@material-ui/icons/Search';
22 +
14 23
15 const styles = theme => ({ 24 const styles = theme => ({
16 root: { 25 root: {
17 width: '100%', 26 width: '100%',
18 - marginTop: theme.spacing.unit * 3, 27 + minWidth:1080
19 - overflowX: "auto"
20 }, 28 },
21 table: { 29 table: {
22 - minWidth:1000 30 + marginLeft:18,
31 + marginRight:18
32 + },
33 + menu: {
34 + marginTop:15,
35 + marginBottom:15,
36 + display:'flex',
37 + justifyContent:'center'
23 }, 38 },
24 progress:{ 39 progress:{
25 - margin: theme.spacing.unit * 2 40 + margin: theme.spacing(2)
26 - } 41 + },
42 + menuButton: {
43 + marginRight: theme.spacing(2),
44 + },
45 + tableHead: {
46 + fontSize: '2.0rem',
47 + },
48 + title: {
49 + flexGrow: 1,
50 + display: 'none',
51 + [theme.breakpoints.up('sm')]: {
52 + display: 'block',
53 + },
54 + },
55 + search: {
56 + position: 'relative',
57 + borderRadius: theme.shape.borderRadius,
58 + backgroundColor: fade(theme.palette.common.white, 0.15),
59 + '&:hover': {
60 + backgroundColor: fade(theme.palette.common.white, 0.25),
61 + },
62 + marginLeft: 0,
63 + width: '100%',
64 + [theme.breakpoints.up('sm')]: {
65 + marginLeft: theme.spacing(1),
66 + width: 'auto',
67 + },
68 + },
69 + searchIcon: {
70 + padding: theme.spacing(0, 2),
71 + height: '100%',
72 + position: 'absolute',
73 + pointerEvents: 'none',
74 + display: 'flex',
75 + alignItems: 'center',
76 + justifyContent: 'center',
77 + },
78 + inputRoot: {
79 + color: 'inherit',
80 + },
81 + inputInput: {
82 + padding: theme.spacing(1, 1, 1, 0),
83 + // vertical padding + font size from searchIcon
84 + paddingLeft: `calc(1em + ${theme.spacing(4)}px)`,
85 + transition: theme.transitions.create('width'),
86 + width: '100%',
87 + [theme.breakpoints.up('sm')]: {
88 + width: '12ch',
89 + '&:focus': {
90 + width: '20ch',
91 + },
92 + },
93 + },
27 }) 94 })
28 95
29 const students = [ 96 const students = [
...@@ -56,14 +123,16 @@ class App extends Component{ ...@@ -56,14 +123,16 @@ class App extends Component{
56 super(props); 123 super(props);
57 this.state = { 124 this.state = {
58 students: '', 125 students: '',
59 - completed: 0 126 + completed: 0,
127 + searchKeyword:''
60 } 128 }
61 } 129 }
62 130
63 stateRefresh = () => { 131 stateRefresh = () => {
64 this.setState({ 132 this.setState({
65 students: '', 133 students: '',
66 - completed: 0 134 + completed: 0,
135 + searchKeyword:''
67 }); 136 });
68 this.callApi() 137 this.callApi()
69 .then(res => this.setState({students: res})) 138 .then(res => this.setState({students: res}))
...@@ -89,62 +158,95 @@ class App extends Component{ ...@@ -89,62 +158,95 @@ class App extends Component{
89 this.setState({completed:completed >= 100 ?0:completed +1}); 158 this.setState({completed:completed >= 100 ?0:completed +1});
90 } 159 }
91 160
161 + handleValueChange =(e)=>{
162 + let nextState ={};
163 + nextState[e.target.st_Name]=e.target.value;
164 + this.setState(nextState);
165 + }
166 +
92 render(){ 167 render(){
93 168
94 - const {classes}= this.props; 169 + const filteredComponents = (data)=>{
170 + data=data.filter((c) =>{
171 + return c.st_Name.indexOf(this.state.searchKeyword) > -1;
172 + });
173 + return data.map((c)=>{
174 + return <Student stateRefresh={this.stateRefresh}
175 + key={c.st_Code}
176 + st_Code={c.st_Code}
177 + st_Name={c.st_Name}
178 + st_Id={c.st_Id}
179 + st_Major={c.st_Major}
180 + st_Midscore={c.st_Midscore}
181 + st_Finalscore={c.st_Finalscore}
182 + st_Assignscore={c.st_Assignscore}
183 + st_Attendscore={c.st_Attendscore}
184 + st_Score={c.st_Score}/>
185 + });
186 + }
95 187
188 + const {classes}= this.props;
189 + const cellList=["코드번호","이름","학번","전공","중간","기말","과제","출석","설정"];
96 return ( 190 return (
97 - <div> 191 + <div className={classes.root}>
98 - <Paper className={classes.root}> 192 + <AppBar position="static">
99 - <Table className={classes.table}> 193 + <Toolbar>
100 - 194 + <IconButton
101 - <TableHead> 195 + edge="start"
102 - <TableRow> 196 + className={classes.menuButton}
103 - <TableCell>코드번호</TableCell> 197 + color="inherit"
104 - <TableCell>이름</TableCell> 198 + aria-label="open drawer"
105 - <TableCell>학번</TableCell> 199 + >
106 - <TableCell>전공</TableCell> 200 + <MenuIcon />
107 - <TableCell>중간</TableCell> 201 + </IconButton>
108 - <TableCell>기말</TableCell> 202 + <Typography className={classes.title} variant="h6" noWrap>
109 - <TableCell>과제</TableCell> 203 + 학생 성적 관리 프로그램
110 - <TableCell>출석</TableCell> 204 + </Typography>
111 - <TableCell>학점</TableCell> 205 + <div className={classes.search}>
112 - <TableCell>설정</TableCell> 206 + <div className={classes.searchIcon}>
113 - </TableRow> 207 + <SearchIcon />
114 - </TableHead> 208 + </div>
115 - 209 + <InputBase
116 - <TableBody> 210 + placeholder="검색하기"
117 - { 211 + classes={{
118 - this.state.students ? 212 + root: classes.inputRoot,
119 - this.state.students.map(c=>{ 213 + input: classes.inputInput,
120 - return ( 214 + }}
121 - <Student stateRefresh={this.stateRefresh} 215 + name="searchKeyword"
122 - key={c.st_Code} 216 + value={this.state.searchKeyword}
123 - st_Code={c.st_Code} 217 + onChange={this.handleValueChange}
124 - st_Name={c.st_Name} 218 + //inputProps={{ 'aria-label': 'search' }}
125 - st_Id={c.st_Id} 219 + />
126 - st_Major={c.st_Major} 220 + </div>
127 - st_Midscore={c.st_Midscore} 221 + </Toolbar>
128 - st_Finalscore={c.st_Finalscore} 222 + </AppBar>
129 - st_Assignscore={c.st_Assignscore} 223 + <div className={classes.menu}>
130 - st_Attendscore={c.st_Attendscore} 224 + <StudentAdd stateRefresh={this.stateRefresh}/>
131 - st_Score={c.st_Score} 225 + </div>
132 - /> 226 +
133 - ); 227 + <Paper className={classes.paper}>
134 - }) : 228 + <Table className={classes.table}>
135 - <TableRow> 229 +
136 - <TableCell colSpan="9" allign="center"> 230 + <TableHead>
137 - <CircularProgress className={classes.progress} variant="determinate" value={this.state.completed}/> 231 + <TableRow>
138 - </TableCell> 232 + {cellList.map(c => {
139 - </TableRow> 233 + return <TableCell className={classes.TableHead}>{c}</TableCell>
140 - } 234 + })}
141 - </TableBody> 235 + </TableRow>
142 - 236 + </TableHead>
143 - </Table> 237 + <TableBody>
144 - 238 + {this.state.students ?
145 - </Paper> 239 + filteredComponents(this.state.students):
146 - 240 +
147 - <StudentAdd stateRefresh={this.stateRefresh}/> 241 + <TableRow>
242 + <TableCell colSpan="9" allign="center">
243 + <CircularProgress className={classes.progress} variant="determinate" value={this.state.completed}/>
244 + </TableCell>
245 + </TableRow>
246 + }
247 + </TableBody>
248 + </Table>
249 + </Paper>
148 </div> 250 </div>
149 251
150 252
......
...@@ -4,6 +4,22 @@ ...@@ -4,6 +4,22 @@
4 "lockfileVersion": 1, 4 "lockfileVersion": 1,
5 "requires": true, 5 "requires": true,
6 "dependencies": { 6 "dependencies": {
7 + "@babel/runtime": {
8 + "version": "7.12.5",
9 + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.12.5.tgz",
10 + "integrity": "sha512-plcc+hbExy3McchJCEQG3knOsuh3HH+Prx1P6cLIkET/0dLuQDEnrT+s27Axgc9bqfsmNUNHfscgMUdBpC9xfg==",
11 + "requires": {
12 + "regenerator-runtime": "^0.13.4"
13 + }
14 + },
15 + "@material-ui/icons": {
16 + "version": "4.11.2",
17 + "resolved": "https://registry.npmjs.org/@material-ui/icons/-/icons-4.11.2.tgz",
18 + "integrity": "sha512-fQNsKX2TxBmqIGJCSi3tGTO/gZ+eJgWmMJkgDiOfyNaunNaxcklJQFaFogYcFl0qFuaEz1qaXYXboa/bUXVSOQ==",
19 + "requires": {
20 + "@babel/runtime": "^7.4.4"
21 + }
22 + },
7 "@types/http-proxy": { 23 "@types/http-proxy": {
8 "version": "1.17.4", 24 "version": "1.17.4",
9 "resolved": "https://registry.npmjs.org/@types/http-proxy/-/http-proxy-1.17.4.tgz", 25 "resolved": "https://registry.npmjs.org/@types/http-proxy/-/http-proxy-1.17.4.tgz",
...@@ -833,6 +849,11 @@ ...@@ -833,6 +849,11 @@
833 "util-deprecate": "~1.0.1" 849 "util-deprecate": "~1.0.1"
834 } 850 }
835 }, 851 },
852 + "regenerator-runtime": {
853 + "version": "0.13.7",
854 + "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.7.tgz",
855 + "integrity": "sha512-a54FxoJDIr27pgf7IgeQGxmqUNYrcV338lf/6gH456HZ/PhX+5BcwHXG9ajESmwe6WRO0tAzRUrRmNONWgkrew=="
856 + },
836 "require-directory": { 857 "require-directory": {
837 "version": "2.1.1", 858 "version": "2.1.1",
838 "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz", 859 "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
......
...@@ -7,6 +7,7 @@ ...@@ -7,6 +7,7 @@
7 "dev": "concurrently --kill-others-on-fail \"npm run server\" \"npm run client\"" 7 "dev": "concurrently --kill-others-on-fail \"npm run server\" \"npm run client\""
8 }, 8 },
9 "dependencies": { 9 "dependencies": {
10 + "@material-ui/icons": "^4.11.2",
10 "body-parser": "^1.19.0", 11 "body-parser": "^1.19.0",
11 "config": "^3.3.3", 12 "config": "^3.3.3",
12 "express": "4.17.1", 13 "express": "4.17.1",
......