육현진 / 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
[{"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
[{"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
......
......@@ -11,19 +11,86 @@ import TableCell from '@material-ui/core/TableCell'
import {withStyles} from '@material-ui/core/styles';
import curcularProgress from '@material-ui/core/CircularProgress';
import CircularProgress from '@material-ui/core/CircularProgress';
import AppBar from '@material-ui/core/AppBar'
import Toolbar from '@material-ui/core/Toolbar';
import IconButton from '@material-ui/core/IconButton';
import Typography from '@material-ui/core/Typography';
import InputBase from '@material-ui/core/InputBase';
import { fade } from '@material-ui/core/styles/colorManipulator';
import MenuIcon from '@material-ui/icons/Menu';
import SearchIcon from '@material-ui/icons/Search';
const styles = theme => ({
root: {
width: '100%',
marginTop: theme.spacing.unit * 3,
overflowX: "auto"
minWidth:1080
},
table: {
minWidth:1000
marginLeft:18,
marginRight:18
},
menu: {
marginTop:15,
marginBottom:15,
display:'flex',
justifyContent:'center'
},
progress:{
margin: theme.spacing.unit * 2
}
margin: theme.spacing(2)
},
menuButton: {
marginRight: theme.spacing(2),
},
tableHead: {
fontSize: '2.0rem',
},
title: {
flexGrow: 1,
display: 'none',
[theme.breakpoints.up('sm')]: {
display: 'block',
},
},
search: {
position: 'relative',
borderRadius: theme.shape.borderRadius,
backgroundColor: fade(theme.palette.common.white, 0.15),
'&:hover': {
backgroundColor: fade(theme.palette.common.white, 0.25),
},
marginLeft: 0,
width: '100%',
[theme.breakpoints.up('sm')]: {
marginLeft: theme.spacing(1),
width: 'auto',
},
},
searchIcon: {
padding: theme.spacing(0, 2),
height: '100%',
position: 'absolute',
pointerEvents: 'none',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
},
inputRoot: {
color: 'inherit',
},
inputInput: {
padding: theme.spacing(1, 1, 1, 0),
// vertical padding + font size from searchIcon
paddingLeft: `calc(1em + ${theme.spacing(4)}px)`,
transition: theme.transitions.create('width'),
width: '100%',
[theme.breakpoints.up('sm')]: {
width: '12ch',
'&:focus': {
width: '20ch',
},
},
},
})
const students = [
......@@ -56,14 +123,16 @@ class App extends Component{
super(props);
this.state = {
students: '',
completed: 0
completed: 0,
searchKeyword:''
}
}
stateRefresh = () => {
this.setState({
students: '',
completed: 0
completed: 0,
searchKeyword:''
});
this.callApi()
.then(res => this.setState({students: res}))
......@@ -89,62 +158,95 @@ class App extends Component{
this.setState({completed:completed >= 100 ?0:completed +1});
}
handleValueChange =(e)=>{
let nextState ={};
nextState[e.target.st_Name]=e.target.value;
this.setState(nextState);
}
render(){
const {classes}= this.props;
const filteredComponents = (data)=>{
data=data.filter((c) =>{
return c.st_Name.indexOf(this.state.searchKeyword) > -1;
});
return data.map((c)=>{
return <Student stateRefresh={this.stateRefresh}
key={c.st_Code}
st_Code={c.st_Code}
st_Name={c.st_Name}
st_Id={c.st_Id}
st_Major={c.st_Major}
st_Midscore={c.st_Midscore}
st_Finalscore={c.st_Finalscore}
st_Assignscore={c.st_Assignscore}
st_Attendscore={c.st_Attendscore}
st_Score={c.st_Score}/>
});
}
const {classes}= this.props;
const cellList=["코드번호","이름","학번","전공","중간","기말","과제","출석","설정"];
return (
<div>
<Paper className={classes.root}>
<Table className={classes.table}>
<TableHead>
<TableRow>
<TableCell>코드번호</TableCell>
<TableCell>이름</TableCell>
<TableCell>학번</TableCell>
<TableCell>전공</TableCell>
<TableCell>중간</TableCell>
<TableCell>기말</TableCell>
<TableCell>과제</TableCell>
<TableCell>출석</TableCell>
<TableCell>학점</TableCell>
<TableCell>설정</TableCell>
</TableRow>
</TableHead>
<TableBody>
{
this.state.students ?
this.state.students.map(c=>{
return (
<Student stateRefresh={this.stateRefresh}
key={c.st_Code}
st_Code={c.st_Code}
st_Name={c.st_Name}
st_Id={c.st_Id}
st_Major={c.st_Major}
st_Midscore={c.st_Midscore}
st_Finalscore={c.st_Finalscore}
st_Assignscore={c.st_Assignscore}
st_Attendscore={c.st_Attendscore}
st_Score={c.st_Score}
/>
);
}) :
<TableRow>
<TableCell colSpan="9" allign="center">
<CircularProgress className={classes.progress} variant="determinate" value={this.state.completed}/>
</TableCell>
</TableRow>
}
</TableBody>
</Table>
</Paper>
<StudentAdd stateRefresh={this.stateRefresh}/>
<div className={classes.root}>
<AppBar position="static">
<Toolbar>
<IconButton
edge="start"
className={classes.menuButton}
color="inherit"
aria-label="open drawer"
>
<MenuIcon />
</IconButton>
<Typography className={classes.title} variant="h6" noWrap>
학생 성적 관리 프로그램
</Typography>
<div className={classes.search}>
<div className={classes.searchIcon}>
<SearchIcon />
</div>
<InputBase
placeholder="검색하기"
classes={{
root: classes.inputRoot,
input: classes.inputInput,
}}
name="searchKeyword"
value={this.state.searchKeyword}
onChange={this.handleValueChange}
//inputProps={{ 'aria-label': 'search' }}
/>
</div>
</Toolbar>
</AppBar>
<div className={classes.menu}>
<StudentAdd stateRefresh={this.stateRefresh}/>
</div>
<Paper className={classes.paper}>
<Table className={classes.table}>
<TableHead>
<TableRow>
{cellList.map(c => {
return <TableCell className={classes.TableHead}>{c}</TableCell>
})}
</TableRow>
</TableHead>
<TableBody>
{this.state.students ?
filteredComponents(this.state.students):
<TableRow>
<TableCell colSpan="9" allign="center">
<CircularProgress className={classes.progress} variant="determinate" value={this.state.completed}/>
</TableCell>
</TableRow>
}
</TableBody>
</Table>
</Paper>
</div>
......
......@@ -4,6 +4,22 @@
"lockfileVersion": 1,
"requires": true,
"dependencies": {
"@babel/runtime": {
"version": "7.12.5",
"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.12.5.tgz",
"integrity": "sha512-plcc+hbExy3McchJCEQG3knOsuh3HH+Prx1P6cLIkET/0dLuQDEnrT+s27Axgc9bqfsmNUNHfscgMUdBpC9xfg==",
"requires": {
"regenerator-runtime": "^0.13.4"
}
},
"@material-ui/icons": {
"version": "4.11.2",
"resolved": "https://registry.npmjs.org/@material-ui/icons/-/icons-4.11.2.tgz",
"integrity": "sha512-fQNsKX2TxBmqIGJCSi3tGTO/gZ+eJgWmMJkgDiOfyNaunNaxcklJQFaFogYcFl0qFuaEz1qaXYXboa/bUXVSOQ==",
"requires": {
"@babel/runtime": "^7.4.4"
}
},
"@types/http-proxy": {
"version": "1.17.4",
"resolved": "https://registry.npmjs.org/@types/http-proxy/-/http-proxy-1.17.4.tgz",
......@@ -833,6 +849,11 @@
"util-deprecate": "~1.0.1"
}
},
"regenerator-runtime": {
"version": "0.13.7",
"resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.7.tgz",
"integrity": "sha512-a54FxoJDIr27pgf7IgeQGxmqUNYrcV338lf/6gH456HZ/PhX+5BcwHXG9ajESmwe6WRO0tAzRUrRmNONWgkrew=="
},
"require-directory": {
"version": "2.1.1",
"resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
......
......@@ -7,6 +7,7 @@
"dev": "concurrently --kill-others-on-fail \"npm run server\" \"npm run client\""
},
"dependencies": {
"@material-ui/icons": "^4.11.2",
"body-parser": "^1.19.0",
"config": "^3.3.3",
"express": "4.17.1",
......