12 |
37 |
38 |
39 |
40 |
41 |
42 | 13 | React JS Frontend 14 |
15 | 16 | 35 | 36 |
164 |
165 |
172 |
173 |
174 |
258 |
259 |
295 |
296 |
297 |
298 | )
299 | }
300 | }
--------------------------------------------------------------------------------
/ui/my-app/src/Employee.js:
--------------------------------------------------------------------------------
1 | import React,{Component} from 'react';
2 | import {variables} from './Variables.js';
3 |
4 | export class Employee extends Component{
5 |
6 | constructor(props){
7 | super(props);
8 |
9 | this.state={
10 | departments:[],
11 | employees:[],
12 | modalTitle:"",
13 | EmployeeId:0,
14 | EmployeeName:"",
15 | Department:"",
16 | DateOfJoining:"",
17 | PhotoFileName:"anonymous.png",
18 | PhotoPath:variables.PHOTO_URL
19 | }
20 | }
21 |
22 | refreshList(){
23 |
24 | fetch(variables.API_URL+'employee')
25 | .then(response=>response.json())
26 | .then(data=>{
27 | this.setState({employees:data});
28 | });
29 |
30 | fetch(variables.API_URL+'department')
31 | .then(response=>response.json())
32 | .then(data=>{
33 | this.setState({departments:data});
34 | });
35 | }
36 |
37 | componentDidMount(){
38 | this.refreshList();
39 | }
40 |
41 | changeEmployeeName =(e)=>{
42 | this.setState({EmployeeName:e.target.value});
43 | }
44 | changeDepartment =(e)=>{
45 | this.setState({Department:e.target.value});
46 | }
47 | changeDateOfJoining =(e)=>{
48 | this.setState({DateOfJoining:e.target.value});
49 | }
50 |
51 | addClick(){
52 | this.setState({
53 | modalTitle:"Add Employee",
54 | EmployeeId:0,
55 | EmployeeName:"",
56 | Department:"",
57 | DateOfJoining:"",
58 | PhotoFileName:"anonymous.png"
59 | });
60 | }
61 | editClick(emp){
62 | this.setState({
63 | modalTitle:"Edit Employee",
64 | EmployeeId:emp.EmployeeId,
65 | EmployeeName:emp.EmployeeName,
66 | Department:emp.Department,
67 | DateOfJoining:emp.DateOfJoining,
68 | PhotoFileName:emp.PhotoFileName
69 | });
70 | }
71 |
72 | createClick(){
73 | fetch(variables.API_URL+'employee',{
74 | method:'POST',
75 | headers:{
76 | 'Accept':'application/json',
77 | 'Content-Type':'application/json'
78 | },
79 | body:JSON.stringify({
80 | EmployeeName:this.state.EmployeeName,
81 | Department:this.state.Department,
82 | DateOfJoining:this.state.DateOfJoining,
83 | PhotoFileName:this.state.PhotoFileName
84 | })
85 | })
86 | .then(res=>res.json())
87 | .then((result)=>{
88 | alert(result);
89 | this.refreshList();
90 | },(error)=>{
91 | alert('Failed');
92 | })
93 | }
94 |
95 |
96 | updateClick(){
97 | fetch(variables.API_URL+'employee',{
98 | method:'PUT',
99 | headers:{
100 | 'Accept':'application/json',
101 | 'Content-Type':'application/json'
102 | },
103 | body:JSON.stringify({
104 | EmployeeId:this.state.EmployeeId,
105 | EmployeeName:this.state.EmployeeName,
106 | Department:this.state.Department,
107 | DateOfJoining:this.state.DateOfJoining,
108 | PhotoFileName:this.state.PhotoFileName
109 | })
110 | })
111 | .then(res=>res.json())
112 | .then((result)=>{
113 | alert(result);
114 | this.refreshList();
115 | },(error)=>{
116 | alert('Failed');
117 | })
118 | }
119 |
120 | deleteClick(id){
121 | if(window.confirm('Are you sure?')){
122 | fetch(variables.API_URL+'employee/'+id,{
123 | method:'DELETE',
124 | headers:{
125 | 'Accept':'application/json',
126 | 'Content-Type':'application/json'
127 | }
128 | })
129 | .then(res=>res.json())
130 | .then((result)=>{
131 | alert(result);
132 | this.refreshList();
133 | },(error)=>{
134 | alert('Failed');
135 | })
136 | }
137 | }
138 |
139 | imageUpload=(e)=>{
140 | e.preventDefault();
141 |
142 | const formData=new FormData();
143 | formData.append("file",e.target.files[0],e.target.files[0].name);
144 |
145 | fetch(variables.API_URL+'employee/savefile',{
146 | method:'POST',
147 | body:formData
148 | })
149 | .then(res=>res.json())
150 | .then(data=>{
151 | this.setState({PhotoFileName:data});
152 | })
153 | }
154 |
155 | render(){
156 | const {
157 | departments,
158 | employees,
159 | modalTitle,
160 | EmployeeId,
161 | EmployeeName,
162 | Department,
163 | DateOfJoining,
164 | PhotoPath,
165 | PhotoFileName
166 | }=this.state;
167 |
168 | return(
169 | |
176 |
177 |
178 |
179 |
182 |
183 |
189 |
190 |
196 |
197 |
198 | DepartmentId
199 | |
200 |
201 |
202 |
205 |
206 |
212 |
213 |
219 |
220 | DepartmentName
221 |
222 | |
223 | 224 | Options 225 | | 226 |
|---|---|---|
| {dep.DepartmentId} | 232 |{dep.DepartmentName} | 233 |234 | 244 | 245 | 252 | 253 | | 254 |
170 |
171 |
178 |
179 |
180 |
230 |
231 |
297 |
298 |
299 |
300 | )
301 | }
302 | }
--------------------------------------------------------------------------------
/ui/my-app/src/Home.js:
--------------------------------------------------------------------------------
1 | import React,{Component} from 'react';
2 |
3 | export class Home extends Component{
4 | render(){
5 | return(
6 | | 182 | EmployeeId 183 | | 184 |185 | EmployeeName 186 | | 187 |188 | Department 189 | | 190 |191 | DOJ 192 | | 193 |194 | Options 195 | | 196 |
|---|---|---|---|---|
| {emp.EmployeeId} | 202 |{emp.EmployeeName} | 203 |{emp.Department} | 204 |{emp.DateOfJoining} | 205 |206 | 216 | 217 | 224 | 225 | | 226 |
7 |
9 | )
10 | }
11 | }
--------------------------------------------------------------------------------
/ui/my-app/src/Variables.js:
--------------------------------------------------------------------------------
1 | export const variables={
2 | API_URL:"http://localhost:49146/api/",
3 | PHOTO_URL:"http://localhost:49146/Photos/"
4 | }
--------------------------------------------------------------------------------
/ui/my-app/src/index.css:
--------------------------------------------------------------------------------
1 | body {
2 | margin: 0;
3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
5 | sans-serif;
6 | -webkit-font-smoothing: antialiased;
7 | -moz-osx-font-smoothing: grayscale;
8 | }
9 |
10 | code {
11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
12 | monospace;
13 | }
14 |
--------------------------------------------------------------------------------
/ui/my-app/src/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import './index.css';
4 | import App from './App';
5 | import reportWebVitals from './reportWebVitals';
6 |
7 | ReactDOM.render(
8 |