육현진 / DBproject

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

add student search module

Inline Side-by-side
Showing 4 changed files with 184 additions and 60 deletions
1 -[{"C:\\Users\\sally\\Desktop\\3-1\\DBproject\\project\\client\\src\\index.js":"1","C:\\Users\\sally\\Desktop\\3-1\\DBproject\\project\\client\\src\\App.js":"2","C:\\Users\\sally\\Desktop\\3-1\\DBproject\\project\\client\\src\\reportWebVitals.js":"3","C:\\Users\\sally\\Desktop\\3-1\\DBproject\\project\\client\\src\\components\\Student.js":"4","C:\\Users\\sally\\Desktop\\3-1\\DBproject\\project\\client\\src\\components\\StudentAdd.js":"5","C:\\Users\\sally\\Desktop\\3-1\\DBproject\\project\\client\\src\\components\\StudentDelete.js":"6"},{"size":500,"mtime":499162500000,"results":"7","hashOfConfig":"8"},{"size":3923,"mtime":1607450260952,"results":"9","hashOfConfig":"8"},{"size":362,"mtime":499162500000,"results":"10","hashOfConfig":"8"},{"size":2602,"mtime":1607450773121,"results":"11","hashOfConfig":"8"},{"size":6867,"mtime":1607455316983,"results":"12","hashOfConfig":"8"},{"size":2169,"mtime":1607455318372,"results":"13","hashOfConfig":"8"},{"filePath":"14","messages":"15","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"16"},"15hdric",{"filePath":"17","messages":"18","errorCount":0,"warningCount":3,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"19","messages":"20","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"16"},{"filePath":"21","messages":"22","errorCount":0,"warningCount":3,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"23","messages":"24","errorCount":0,"warningCount":3,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"25","messages":"26","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},"C:\\Users\\sally\\Desktop\\3-1\\DBproject\\project\\client\\src\\index.js",[],["27","28"],"C:\\Users\\sally\\Desktop\\3-1\\DBproject\\project\\client\\src\\App.js",["29","30","31"],"C:\\Users\\sally\\Desktop\\3-1\\DBproject\\project\\client\\src\\reportWebVitals.js",[],"C:\\Users\\sally\\Desktop\\3-1\\DBproject\\project\\client\\src\\components\\Student.js",["32","33","34"],"C:\\Users\\sally\\Desktop\\3-1\\DBproject\\project\\client\\src\\components\\StudentAdd.js",["35","36","37"],"C:\\Users\\sally\\Desktop\\3-1\\DBproject\\project\\client\\src\\components\\StudentDelete.js",["38"],{"ruleId":"39","replacedBy":"40"},{"ruleId":"41","replacedBy":"42"},{"ruleId":"43","severity":1,"message":"44","line":1,"column":27,"nodeType":"45","messageId":"46","endLine":1,"endColumn":37},{"ruleId":"43","severity":1,"message":"47","line":12,"column":8,"nodeType":"45","messageId":"46","endLine":12,"endColumn":24},{"ruleId":"43","severity":1,"message":"48","line":29,"column":7,"nodeType":"45","messageId":"46","endLine":29,"endColumn":15},{"ruleId":"43","severity":1,"message":"49","line":43,"column":7,"nodeType":"45","messageId":"46","endLine":43,"endColumn":19},{"ruleId":"43","severity":1,"message":"50","line":59,"column":7,"nodeType":"45","messageId":"46","endLine":59,"endColumn":18},{"ruleId":"43","severity":1,"message":"51","line":69,"column":7,"nodeType":"45","messageId":"46","endLine":69,"endColumn":19},{"ruleId":"43","severity":1,"message":"52","line":13,"column":7,"nodeType":"45","messageId":"46","endLine":13,"endColumn":12},{"ruleId":"43","severity":1,"message":"53","line":24,"column":7,"nodeType":"45","messageId":"46","endLine":24,"endColumn":14},{"ruleId":"43","severity":1,"message":"54","line":122,"column":15,"nodeType":"45","messageId":"46","endLine":122,"endColumn":22},{"ruleId":"43","severity":1,"message":"52","line":11,"column":7,"nodeType":"45","messageId":"46","endLine":11,"endColumn":12},"no-native-reassign",["55"],"no-negated-in-lhs",["56"],"no-unused-vars","'components' is defined but never used.","Identifier","unusedVar","'curcularProgress' is defined but never used.","'students' is assigned a value but never used.","'Searchscores' is defined but never used.","'Searchscore' is defined but never used.","'Searchothers' is defined but never used.","'theme' is assigned a value but never used.","'primary' is assigned a value but never used.","'classes' is assigned a value but never used.","no-global-assign","no-unsafe-negation"]
...\ No newline at end of file ...\ No newline at end of file
1 +[{"C:\\Users\\sally\\Desktop\\3-1\\DBproject\\project\\client\\src\\index.js":"1","C:\\Users\\sally\\Desktop\\3-1\\DBproject\\project\\client\\src\\App.js":"2","C:\\Users\\sally\\Desktop\\3-1\\DBproject\\project\\client\\src\\reportWebVitals.js":"3","C:\\Users\\sally\\Desktop\\3-1\\DBproject\\project\\client\\src\\components\\Student.js":"4","C:\\Users\\sally\\Desktop\\3-1\\DBproject\\project\\client\\src\\components\\StudentAdd.js":"5","C:\\Users\\sally\\Desktop\\3-1\\DBproject\\project\\client\\src\\components\\StudentDelete.js":"6"},{"size":500,"mtime":499162500000,"results":"7","hashOfConfig":"8"},{"size":6906,"mtime":1607495154012,"results":"9","hashOfConfig":"8"},{"size":362,"mtime":499162500000,"results":"10","hashOfConfig":"8"},{"size":2602,"mtime":1607450773121,"results":"11","hashOfConfig":"8"},{"size":6867,"mtime":1607455316983,"results":"12","hashOfConfig":"8"},{"size":2169,"mtime":1607455462628,"results":"13","hashOfConfig":"8"},{"filePath":"14","messages":"15","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"16"},"15hdric",{"filePath":"17","messages":"18","errorCount":0,"warningCount":3,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"19","messages":"20","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"16"},{"filePath":"21","messages":"22","errorCount":0,"warningCount":3,"fixableErrorCount":0,"fixableWarningCount":0,"source":"23","usedDeprecatedRules":"16"},{"filePath":"24","messages":"25","errorCount":0,"warningCount":3,"fixableErrorCount":0,"fixableWarningCount":0,"source":"26","usedDeprecatedRules":"16"},{"filePath":"27","messages":"28","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":"29","usedDeprecatedRules":"16"},"C:\\Users\\sally\\Desktop\\3-1\\DBproject\\project\\client\\src\\index.js",[],["30","31"],"C:\\Users\\sally\\Desktop\\3-1\\DBproject\\project\\client\\src\\App.js",["32","33","34"],"C:\\Users\\sally\\Desktop\\3-1\\DBproject\\project\\client\\src\\reportWebVitals.js",[],"C:\\Users\\sally\\Desktop\\3-1\\DBproject\\project\\client\\src\\components\\Student.js",["35","36","37"],"import React from 'react';\r\nimport TableRow from '@material-ui/core/TableRow';\r\nimport TableCell from '@material-ui/core/TableCell';\r\nimport StudentDelete from './StudentDelete';\r\n\r\nclass Student extends React.Component{\r\n render(){\r\n return(\r\n <TableRow>\r\n <TableCell> {this.props.st_Code} </TableCell>\r\n <TableCell> {this.props.st_Name} </TableCell>\r\n <TableCell> {this.props.st_Id} </TableCell>\r\n <TableCell> {this.props.st_Major} </TableCell>\r\n <TableCell> {this.props.st_Midscore} </TableCell>\r\n <TableCell> {this.props.st_Finalscore} </TableCell>\r\n <TableCell> {this.props.st_Assignscore} </TableCell>\r\n <TableCell> {this.props.st_Attendscore} </TableCell>\r\n <TableCell> {this.props.st_Score} </TableCell>\r\n <TableCell><StudentDelete stateRefresh={this.props.stateRefresh} st_Code={this.props.st_Code}/></TableCell>\r\n </TableRow>\r\n \r\n /*<div>\r\n \r\n <Searchscores st_Midscore={this.props.st_Midscore} \r\n st_Finalscore = {this.props.st_Finalscore}\r\n st_Assignscore = {this.props.st_Assignscore}\r\n st_Attendscore = {this.props.st_Attendscore}/>\r\n\r\n <Searchscore st_Score={this.props.st_Score}/>\r\n\r\n <Searchothers st_Midscore={this.props.st_Midscore} \r\n st_Finalscore = {this.props.st_Finalscore}\r\n st_Assignscore = {this.props.st_Assignscore}\r\n st_Attendscore = {this.props.st_Attendscore}\r\n st_Score = {this.props.st_Score}/>\r\n\r\n </div>*/\r\n\r\n )\r\n }\r\n}\r\n\r\nclass Searchscores extends React.Component{\r\n render(){\r\n return(\r\n <div>\r\n\r\n <p>{this.props.st_Midscore}</p>\r\n <p>{this.props.st_Finalscore}</p>\r\n <p>{this.props.st_Assignscore}</p>\r\n <p>{this.props.st_Attendscore}</p>\r\n\r\n </div> \r\n )\r\n }\r\n}\r\n\r\n\r\nclass Searchscore extends React.Component{\r\n render(){\r\n return(\r\n <div>\r\n <p>{this.props.st_Score}</p>\r\n </div> \r\n )\r\n }\r\n}\r\n\r\nclass Searchothers extends React.Component{\r\n render(){\r\n return(\r\n <div>\r\n <p>{this.props.st_Midscore}</p>\r\n <p>{this.props.st_Finalscore}</p>\r\n <p>{this.props.st_Assignscore}</p>\r\n <p>{this.props.st_Attendscore}</p>\r\n <p>{this.props.st_Score}</p>\r\n </div> \r\n )\r\n }\r\n}\r\n\r\nexport default Student;","C:\\Users\\sally\\Desktop\\3-1\\DBproject\\project\\client\\src\\components\\StudentAdd.js",["38","39","40"],"import React from 'react';\r\nimport {post} from 'axios';\r\nimport Dialog from '@material-ui/core/Dialog';\r\nimport DialogActions from '@material-ui/core/DialogActions';\r\nimport DialogTitle from '@material-ui/core/DialogTitle';\r\nimport DialogContent from '@material-ui/core/DialogContent';\r\nimport Textfield from '@material-ui/core/TextField';\r\nimport Button from '@material-ui/core/Button';\r\nimport{withStyles}from '@material-ui/core/styles';\r\nimport { createMuiTheme } from '@material-ui/core/styles';\r\nimport {blue, pink} from '@material-ui/core/colors';\r\n\r\nconst theme = createMuiTheme({\r\n palette: {\r\n primary: {\r\n main: blue[100],\r\n },\r\n secondary: {\r\n main: pink[100],\r\n },\r\n },\r\n});\r\n\r\nconst primary = blue[100]; //#bbdefb\r\n\r\nconst styles = theme=>({\r\n hidden:{\r\n display:'none'\r\n }\r\n\r\n});\r\n\r\nclass StudentAdd extends React.Component{\r\n\r\n constructor(props){\r\n super(props);\r\n this.state={\r\n st_Code:'',\r\n st_Name:'',\r\n st_Id:'',\r\n st_Major:'',\r\n st_Midscore:'',\r\n st_Finalscore:'',\r\n st_Assignscore:'',\r\n st_Attendscore:'',\r\n st_Score:'',\r\n open:false\r\n }\r\n }\r\n\r\n handleFormSubmit = (e) => {\r\n e.preventDefault()\r\n this.addStudent()\r\n .then((response) => {\r\n console.log(response.data);\r\n this.props.stateRefresh();\r\n })\r\n this.setState({\r\n st_Code:'',\r\n st_Name:'',\r\n st_Id:'',\r\n st_Major:'',\r\n st_Midscore:'',\r\n st_Finalscore:'',\r\n st_Assignscore:'',\r\n st_Attendscore:'',\r\n st_Score:'',\r\n open: false\r\n })\r\n\r\n }\r\n\r\n handleValueChange = (e) => {\r\n let nextState = {};\r\n nextState[e.target.name]=e.target.value;\r\n this.setState(nextState);\r\n }\r\n\r\n addStudent = () =>{\r\n const url ='/api/students';\r\n const formData=new FormData();\r\n formData.append('st_Code',this.state.st_Code);\r\n formData.append('st_Name',this.state.st_Name);\r\n formData.append('st_Id',this.state.st_Id);\r\n formData.append('st_Major',this.state.st_Major);\r\n formData.append('st_Midscore',this.state.st_Midscore);\r\n formData.append('st_Finalscore',this.state.st_Finalscore);\r\n formData.append('st_Assignscore',this.state.st_Assignscore);\r\n formData.append('st_Attendscore',this.state.st_Attendscore);\r\n formData.append('st_Score',this.state.st_Score);\r\n const config = {\r\n headers: {\r\n 'content-tupe': 'multipart/form-data' \r\n }\r\n\r\n }\r\n return post(url, formData, config);\r\n }\r\n\r\n handleClickOpen = () => {\r\n this.setState({\r\n open:true\r\n });\r\n }\r\n\r\n handleClose = () => {\r\n this.setState({\r\n st_Code:'',\r\n st_Name:'',\r\n st_Id:'',\r\n st_Major:'',\r\n st_Midscore:'',\r\n st_Finalscore:'',\r\n st_Assignscore:'',\r\n st_Attendscore:'',\r\n st_Score:'',\r\n open: false\r\n })\r\n }\r\n\r\n render(){\r\n const{classes}=this.props;\r\n return(\r\n <div>\r\n <Button variant=\"contained\" color=\"primary\" onClick={this.handleClickOpen}>\r\n 학생 추가하기\r\n </Button>\r\n <Dialog open={this.state.open} onClose={this.handleClose}>\r\n <DialogTitle>학생 추가</DialogTitle>\r\n <DialogContent>\r\n <Textfield label=\"코드 번호\" type=\"text\" name=\"st_Code\" value={this.state.st_Code} onChange={this.handleValueChange}/><br/>\r\n <Textfield label=\"이름\" name=\"st_Name\" value={this.state.st_Name} onChange={this.handleValueChange}/><br/>\r\n <Textfield label=\"학번\" name=\"st_Id\" value={this.state.st_Id} onChange={this.handleValueChange}/><br/>\r\n <Textfield label=\"전공\" name=\"st_Major\" value={this.state.st_Major} onChange={this.handleValueChange}/><br/>\r\n <Textfield label=\"중간 점수\" name=\"st_Midscore\" value={this.state.st_Midscore} onChange={this.handleValueChange}/><br/>\r\n <Textfield label=\"기말 점수\" name=\"st_Finalscore\" value={this.state.st_Finalscore} onChange={this.handleValueChange}/><br/>\r\n <Textfield label=\"과제 점수\" name=\"st_Assignscore\" value={this.state.st_Assignscore} onChange={this.handleValueChange}/><br/>\r\n <Textfield label=\"출석 점수\" name=\"st_Attendscore\" value={this.state.st_Attendscore} onChange={this.handleValueChange}/><br/>\r\n <Textfield label=\"학점\" name=\"st_Score\" value={this.state.st_Score} onChange={this.handleValueChange}/><br/>\r\n </DialogContent>\r\n <DialogActions>\r\n <Button varient=\"contained\" color=\"primary\" onClick={this.handleFormSubmit}>추가</Button>\r\n <Button varient=\"outlined\" color=\"primary\" onClick={this.handleClose}>닫기</Button>\r\n </DialogActions>\r\n </Dialog>\r\n </div>\r\n /*\r\n <form onSubmit={this.handleFormSubmit}>\r\n <h1>학생 추가</h1>\r\n 코드 번호 : <input type=\"text\" name=\"st_Code\" value={this.state.st_Code} onChange={this.handleValueChange}/><br/>\r\n 이름 : <input type=\"text\" name=\"st_Name\" value={this.state.st_Name} onChange={this.handleValueChange}/><br/>\r\n 학번 : <input type=\"text\" name=\"st_Id\" value={this.state.st_Id} onChange={this.handleValueChange}/><br/>\r\n 전공 : <input type=\"text\" name=\"st_Major\" value={this.state.st_Major} onChange={this.handleValueChange}/><br/>\r\n 중간 점수 : <input type=\"text\" name=\"st_Midscore\" value={this.state.st_Midscore} onChange={this.handleValueChange}/><br/>\r\n 기말 점수 : <input type=\"text\" name=\"st_Finalscore\" value={this.state.st_Finalscore} onChange={this.handleValueChange}/><br/>\r\n 과제 점수 : <input type=\"text\" name=\"st_Assignscore\" value={this.state.st_Assignscore} onChange={this.handleValueChange}/><br/>\r\n 출석 점수 : <input type=\"text\" name=\"st_Attendscore\" value={this.state.st_Attendscore} onChange={this.handleValueChange}/><br/>\r\n 학점 : <input type=\"text\" name=\"st_Score\" value={this.state.st_Score} onChange={this.handleValueChange}/><br/>\r\n <button type=\"submit\">추가하기</button>\r\n\r\n </form>\r\n */\r\n )\r\n }\r\n}\r\n\r\nexport default withStyles(styles)(StudentAdd);","C:\\Users\\sally\\Desktop\\3-1\\DBproject\\project\\client\\src\\components\\StudentDelete.js",["41"],"import React from 'react';\r\nimport Dialog from '@material-ui/core/Dialog';\r\nimport DialogActions from '@material-ui/core/DialogActions';\r\nimport DialogTitle from '@material-ui/core/DialogTitle';\r\nimport DialogContent from '@material-ui/core/DialogContent';\r\nimport Button from '@material-ui/core/Button';\r\nimport Typography from '@material-ui/core/Typography';\r\nimport { createMuiTheme } from '@material-ui/core/styles';\r\nimport {blue, pink} from '@material-ui/core/colors';\r\n\r\nconst theme = createMuiTheme({\r\n palette: {\r\n primary: {\r\n main: blue[100],\r\n },\r\n secondary: {\r\n main: pink[100],\r\n },\r\n },\r\n});\r\n\r\nclass StudentDelete extends React.Component{\r\n\r\n constructor(props){\r\n super(props);\r\n this.state = {\r\n open: false\r\n }\r\n }\r\n\r\n handleClickOpen = () => {\r\n this.setState({\r\n open:true\r\n });\r\n }\r\n\r\n handleClose = () => {\r\n this.setState({\r\n open: false\r\n })\r\n }\r\n\r\n deleteStudent(st_Code){\r\n const url='/api/students/'+st_Code;\r\n fetch(url,{\r\n method:'DELETE'\r\n });\r\n this.props.stateRefresh();\r\n }\r\n \r\n render(){\r\n\r\n return(\r\n <div>\r\n <Button variant=\"contained\" color=\"secondary\" onClick={this.handleClickOpen}>삭제</Button>\r\n <Dialog open={this.state.open} onClose={this.handleClose}>\r\n <DialogTitle onClose={this.handleClose}>\r\n 삭제 경고\r\n </DialogTitle>\r\n <DialogContent>\r\n <Typography gutterBottom>\r\n 선택한 학생의 정보가 삭제됩니다!\r\n </Typography>\r\n </DialogContent>\r\n <DialogActions>\r\n <Button variant=\"contained\" color=\"secondary\" onClick={(e)=>{this.deleteStudent(this.props.st_Code)}}>삭제</Button>\r\n <Button variant=\"outlined\" color=\"secondary\" onClick={this.handleClose}>닫기</Button>\r\n </DialogActions>\r\n </Dialog> \r\n </div>\r\n\r\n )\r\n }\r\n}\r\n\r\nexport default StudentDelete;",{"ruleId":"42","replacedBy":"43"},{"ruleId":"44","replacedBy":"45"},{"ruleId":"46","severity":1,"message":"47","line":1,"column":27,"nodeType":"48","messageId":"49","endLine":1,"endColumn":37},{"ruleId":"46","severity":1,"message":"50","line":12,"column":8,"nodeType":"48","messageId":"49","endLine":12,"endColumn":24},{"ruleId":"46","severity":1,"message":"51","line":96,"column":7,"nodeType":"48","messageId":"49","endLine":96,"endColumn":15},{"ruleId":"46","severity":1,"message":"52","line":43,"column":7,"nodeType":"48","messageId":"49","endLine":43,"endColumn":19},{"ruleId":"46","severity":1,"message":"53","line":59,"column":7,"nodeType":"48","messageId":"49","endLine":59,"endColumn":18},{"ruleId":"46","severity":1,"message":"54","line":69,"column":7,"nodeType":"48","messageId":"49","endLine":69,"endColumn":19},{"ruleId":"46","severity":1,"message":"55","line":13,"column":7,"nodeType":"48","messageId":"49","endLine":13,"endColumn":12},{"ruleId":"46","severity":1,"message":"56","line":24,"column":7,"nodeType":"48","messageId":"49","endLine":24,"endColumn":14},{"ruleId":"46","severity":1,"message":"57","line":122,"column":15,"nodeType":"48","messageId":"49","endLine":122,"endColumn":22},{"ruleId":"46","severity":1,"message":"55","line":11,"column":7,"nodeType":"48","messageId":"49","endLine":11,"endColumn":12},"no-native-reassign",["58"],"no-negated-in-lhs",["59"],"no-unused-vars","'components' is defined but never used.","Identifier","unusedVar","'curcularProgress' is defined but never used.","'students' is assigned a value but never used.","'Searchscores' is defined but never used.","'Searchscore' is defined but never used.","'Searchothers' is defined but never used.","'theme' is assigned a value but never used.","'primary' is assigned a value but never used.","'classes' is assigned a value but never used.","no-global-assign","no-unsafe-negation"]
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -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",
......