Skip to content

Commit 8e50273

Browse files
archies-coderarchies-coder
committed
employee form
1 parent f7831b5 commit 8e50273

File tree

8 files changed

+237
-14
lines changed

8 files changed

+237
-14
lines changed

‎src/api/Apis.tsx

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -264,6 +264,14 @@ export async function createDevice(json: string) {
264264
},
265265
})
266266
}
267+
export async function createEmployee(formData: any) {
268+
return await apis.post('/product/employee/register', formData, {
269+
headers: {
270+
"Content-Type": "multipart/form-data",
271+
// "Content-Length": 2617
272+
},
273+
})
274+
}
267275
export async function createSite(json: string) {
268276
return await apis.post('/product/register/site', json, {
269277
headers: {

‎src/app/App.tsx

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@ import SiteForm from "features/SalesAndOrganisation/SiteForm"
2929
import CheckInPointForm from "features/SalesAndOrganisation/CheckInPointForm"
3030
import { fetchVisitorConfigs } from "features/Settings/visitorConfigSlice"
3131
import ContractorView from "features/contractor/contractorView"
32+
import EmployeeForm from "features/Employees/EmployeeForm"
3233

3334

3435
const useStyles = makeStyles((theme: Theme) =>
@@ -103,7 +104,8 @@ export default function App() {
103104
<Route exact path="/invites" component={InviteView} />
104105
<Route exact path="/visitor" component={VisitorDetailsView} />
105106
<Route path="/visitor/:visitorId" component={VisitorDetailsView} />
106-
<Route path="/employees" component={EmployeesView} />
107+
<Route exact path="/employees" component={EmployeesView} />
108+
<Route exact path="/employee/add" component={EmployeeForm} />
107109
<Route exact path="/sites" component={SitesView} />
108110
<Route exact path="/sites/add" component={SiteForm} />
109111
<Route exact path="/checkinpoints/add" component={CheckInPointForm} />
@@ -135,6 +137,7 @@ export default function App() {
135137
<AuthRoute exact path="/visitor" component={VisitorDetailsView} />
136138
<AuthRoute exact path="/visitor/:visitorId" component={VisitorDetailsView} />
137139
<AuthRoute exact path="/employees" component={EmployeesView} />
140+
<AuthRoute exact path="/employee/add" component={EmployeeForm} />
138141
<AuthRoute exact path="/sites" component={SitesView} />
139142
<AuthRoute exact path="/sites/add" component={SiteForm} />
140143
<AuthRoute exact path="/checkinpoints" component={CheckInPointsView} />

‎src/features/Employees/EmployeeForm.tsx

Lines changed: 174 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,174 @@
1+
import { Box, createStyles, Grid, makeStyles, Paper, Theme } from '@material-ui/core';
2+
import { ArrowBackIos } from '@material-ui/icons';
3+
import { RootState } from 'app/rootReducer';
4+
import CustomButton from 'components/Button';
5+
import TextInput from 'components/TextInput';
6+
import { setCurrentEmployee, saveEmployee, defaultInputState } from './employeeSlice';
7+
import * as React from 'react';
8+
import { useEffect } from 'react';
9+
import { useDispatch, useSelector } from 'react-redux';
10+
import { RouteComponentProps } from 'react-router-dom';
11+
12+
const useStyles = makeStyles((theme: Theme) => createStyles({
13+
paper: {
14+
backgroundColor: '#E7ECF6',
15+
borderRadius: theme.shape.borderRadius - 5,
16+
marginRight: 30,
17+
height: '100%',
18+
width: '100%'
19+
// marginTop
20+
},
21+
header: {
22+
fontSize: '22px',
23+
fontWeight: 'bold',
24+
padding: theme.spacing(2, 0, 0, 4),
25+
color: theme.palette.text.primary
26+
},
27+
headerSecondary: {
28+
fontSize: '20px',
29+
fontWeight: 'bold',
30+
padding: theme.spacing(0, 0, 4, 0),
31+
color: theme.palette.text.primary,
32+
},
33+
arrowBack: {
34+
height: '30px',
35+
verticalAlign: 'bottom',
36+
cursor: 'pointer',
37+
},
38+
rightInputs: {
39+
marginTop: 134,
40+
},
41+
button: {
42+
marginRight: 20
43+
},
44+
inputGrid: {
45+
marginTop: '30px',
46+
padding: theme.spacing(1, 0, 0, 2)
47+
}
48+
}))
49+
50+
interface OwnProps extends RouteComponentProps<any> {
51+
}
52+
53+
type Props = OwnProps;
54+
55+
const EmployeeForm: React.FC<Props> = (props) => {
56+
const classes = useStyles()
57+
58+
const dispatch = useDispatch()
59+
60+
const {
61+
currentEmployee
62+
} = useSelector((state: RootState) => state.employees)
63+
64+
const {
65+
designation,
66+
email,
67+
empid,
68+
fname,
69+
lname,
70+
mname,
71+
mobile
72+
} = currentEmployee
73+
const inputState = currentEmployee;
74+
75+
const setInputState = (employee: any) => {
76+
dispatch(setCurrentEmployee(employee));
77+
}
78+
79+
const id = props.match.params.employeeId
80+
// debugger;
81+
// useEffect(() => {
82+
// if (employeesById[id]) {
83+
// const tempId = employeesById[id]
84+
// //setInputState(tempId)
85+
// dispatch(setCurrentEmployee(tempId));
86+
// }
87+
// }, [id])
88+
89+
const handleChange = (e: any) => setInputState({
90+
...inputState,
91+
[e.target.name]: e.target.value
92+
})
93+
94+
const handleSubmit = async (e: any) => {
95+
e.preventDefault()
96+
97+
let bodyFormData = new FormData();
98+
bodyFormData.append('fname',fname)
99+
bodyFormData.append('mname',mname)
100+
bodyFormData.append('lname',lname)
101+
bodyFormData.append('mobile',mobile)
102+
bodyFormData.append('email',email)
103+
bodyFormData.append('empid',empid)
104+
bodyFormData.append('designation',designation)
105+
106+
dispatch(saveEmployee(bodyFormData, () => setInputState(defaultInputState)))
107+
}
108+
return (
109+
<Grid item style={{ height: '80%', width: '90%' }}>
110+
<Paper className={classes.paper}>
111+
<form onSubmit={handleSubmit}>
112+
<div className={classes.header}>
113+
<ArrowBackIos className={classes.arrowBack} onClick={() => props.history.push('/employees')} />
114+
<span> Add Employee </span>
115+
</div>
116+
<Box display="flex" justifyContent="flex-end">
117+
<Box className={classes.button}>
118+
<CustomButton style={{ height: '38px', width: '168px', marginTop: '1px', padding: 0 }} type="submit">Save</CustomButton>
119+
</Box>
120+
</Box>
121+
<Grid className={classes.inputGrid} container>
122+
<Grid item xs={6}>
123+
{/*<div>*/}
124+
<TextInput label="First Name"
125+
required
126+
name="fname"
127+
onChange={handleChange}
128+
value={fname} />
129+
<TextInput label="Middle Name"
130+
required
131+
name="mname"
132+
onChange={handleChange}
133+
value={mname} />
134+
<TextInput label="Last Name"
135+
required
136+
name="lname"
137+
onChange={handleChange}
138+
value={lname} />
139+
<TextInput
140+
required
141+
label="Mobile"
142+
onChange={handleChange}
143+
name="mobile"
144+
value={mobile} />
145+
</Grid>
146+
<Grid item xs={6}>
147+
<TextInput
148+
required
149+
label="Email"
150+
onChange={handleChange}
151+
name="email"
152+
value={email} />
153+
<TextInput
154+
required
155+
label="Employee Id"
156+
onChange={handleChange}
157+
name="empid"
158+
value={empid} />
159+
<TextInput
160+
required
161+
label="Designation"
162+
onChange={handleChange}
163+
name="designation"
164+
value={designation} />
165+
</Grid>
166+
</Grid>
167+
</form>
168+
169+
</Paper>
170+
</Grid>
171+
);
172+
}
173+
174+
export default EmployeeForm

‎src/features/Employees/EmployeesView.tsx

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -105,9 +105,6 @@ const EmployeesView: FunctionComponent<Props> = (props) => {
105105
)
106106
}
107107

108-
109-
110-
111108
const TableConfig = {
112109
columns: columns,
113110
data: employees.map(el => ({
@@ -133,7 +130,7 @@ const EmployeesView: FunctionComponent<Props> = (props) => {
133130
return (
134131
<Grid item xs style={{ height: "100%" }}>
135132
<Paper className={classes.paper}>
136-
133+
137134
<Box display="flex" justifyContent="space-between" style={{ paddingTop: '37px', paddingLeft: '30px', paddingBottom: '25.5px'}} >
138135
<SearchInput /*style={{ margin: '0 23px 30px', paddingTop: '37px' }}*/ placeholder="Search Employees by name, email or mobile" width={500} />
139136
{/* <SelectInput value="Action" /> */}

‎src/features/Employees/employeeSlice.ts

Lines changed: 45 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import { createSlice, PayloadAction } from '@reduxjs/toolkit'
22
import { Links } from 'parse-link-header'
33

4-
import { getEmployeesData } from 'api/Apis'
4+
import { createEmployee, getEmployeesData } from 'api/Apis'
55
import { AppThunk } from 'app/store'
6-
6+
import { getBackdropStart, getBackdropStop } from 'app/BackdropSlice'
77

88
export interface Employee {
99
createdOn: any,//2020-09-30 13: 14: 38,
@@ -24,6 +24,25 @@ export interface EmployeesResult {
2424
employees: Employee[]
2525
}
2626

27+
export interface EmployeeInputState {
28+
fname: string,
29+
mname: string,
30+
lname: string,
31+
mobile: string,
32+
email: string,
33+
empid: string,
34+
designation: string,
35+
}
36+
37+
export const defaultInputState: EmployeeInputState = {
38+
fname: '',
39+
mname: '',
40+
lname: '',
41+
mobile: '',
42+
email: '',
43+
empid: '',
44+
designation: '',
45+
}
2746
interface EmployeeState {
2847
employees: Employee[]
2948
employeesById: Record<string, Employee>
@@ -32,6 +51,7 @@ interface EmployeeState {
3251
pageLinks: Links | null
3352
isLoading: boolean
3453
error: string | null
54+
currentEmployee: EmployeeInputState
3555
}
3656

3757
const employeesInitialState: EmployeeState = {
@@ -41,7 +61,8 @@ const employeesInitialState: EmployeeState = {
4161
pageCount: 0,
4262
pageLinks: {},
4363
isLoading: false,
44-
error: null
64+
error: null,
65+
currentEmployee: defaultInputState
4566
}
4667

4768
function startLoading(state: EmployeeState) {
@@ -69,13 +90,17 @@ const employees = createSlice({
6990
state.employees.map(employee => (state.employeesById[employee.empid]=employee))
7091
},
7192
getEmployeesFailure: loadingFailed,
93+
setCurrentEmployee(state, { payload }: PayloadAction<any>) {
94+
state.currentEmployee = payload
95+
}
7296
}
7397
})
7498

7599
export const {
76100
getEmployeesStart,
77101
getEmployeesSuccess,
78-
getEmployeesFailure
102+
getEmployeesFailure,
103+
setCurrentEmployee
79104
} = employees.actions
80105

81106
export default employees.reducer
@@ -94,3 +119,19 @@ export const fetchEmployees = (
94119
}
95120
}
96121

122+
export const saveEmployee = (
123+
employeeFormData: any,
124+
callback?: (() => void)
125+
): AppThunk => async dispatch => {
126+
try {
127+
dispatch(getBackdropStart())
128+
await createEmployee(employeeFormData)
129+
.then(() => dispatch(getBackdropStop())).catch(() => dispatch(getBackdropStop()))
130+
//return setInputState(defaultInputState)
131+
callback && callback();
132+
//dispatch(saveInvitesSuccess(invites))
133+
} catch (err) {
134+
dispatch(getBackdropStop())
135+
}
136+
}
137+

‎src/features/Invites/InviteView.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -248,15 +248,15 @@ const InviteView: FunctionComponent<Props> = (props) => {
248248
<SelectInput value="In Office" style={{marginLeft: '50px'}} />
249249
<SelectInput value="All Purpose" style={{marginLeft: '50px'}} />
250250
<SelectInput value="All Sites" style={{marginLeft: '50px'}} /> */}
251-
<SearchInput style={{ marginTop: '33px', marginLeft: '27px' }} onChange={(e: any) => { debugger; handleFilterChange({ visitor: e.target.value }) }} value={filter.visitor} placeholder="Search visitor" />
251+
<SearchInput style={{ marginLeft: '27px', height: '38px' }} onChange={(e: any) => { debugger; handleFilterChange({ visitor: e.target.value }) }} value={filter.visitor} placeholder="Search visitor" />
252252
{/* <SelectInput style={{marginTop: '33px', marginLeft: '27px'}} value="In Office" /> */}
253253
{/* <Button onClick={()=>{setFilter({site:"",purpose:"",visitor:""});dispatch(fetchInOfficeInvites())}}
254254
classes={{
255255
root: classes.buttonRoot, // class name, e.g. `classes-nesting-root-x`
256256
label: classes.label, // class name, e.g. `classes-nesting-label-x`
257257
}} variant="contained" style={{ marginTop: '33px', marginLeft: '27px', height: '40px'}}>In Office</Button> */}
258-
<SelectInput style={{ marginTop: '33px', marginLeft: '27px' }} onChange={(e: any) => { debugger; handleFilterChange({ purpose: e.target.value }) }} menuOptions={purpose.map(item => ({ title: item }))} defaultValue="All Purpose" value={filter.purpose} />
259-
<SelectInput style={{ marginTop: '33px', marginLeft: '27px' }} onChange={(e: any) => { debugger; handleFilterChange({ site: e.target.value }) }} menuOptions={sites.map(item => ({ title: item.sitename }))} defaultValue="All Sites" value={filter.site} />
258+
<SelectInput style={{ marginLeft: '27px' }} onChange={(e: any) => { debugger; handleFilterChange({ purpose: e.target.value }) }} menuOptions={purpose.map(item => ({ title: item }))} defaultValue="All Purpose" value={filter.purpose} />
259+
<SelectInput style={{ marginLeft: '27px' }} onChange={(e: any) => { debugger; handleFilterChange({ site: e.target.value }) }} menuOptions={sites.map(item => ({ title: item.sitename }))} defaultValue="All Sites" value={filter.site} />
260260
</Box>
261261
<TableWrapper config={TableConfig} style={{ marginTop: '17px', marginLeft: '43px', marginRight: '300px' }} />
262262
</Paper>

‎src/features/SalesAndOrganisation/CheckInPointForm.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -108,7 +108,7 @@ const CheckInPointForm: FunctionComponent<Props> = (props) => {
108108
<form onSubmit={handleSubmit}>
109109
<div className={classes.header}>
110110
<ArrowBackIos className={classes.arrowBack} onClick={() => props.history.push('/checkInPoints')} />
111-
<span> CheckInPoint details</span>
111+
<span> Add Check in point</span>
112112
</div>
113113
<Box display="flex" justifyContent="flex-end">
114114
<Box className={classes.button}>

‎src/features/SalesAndOrganisation/CheckInPointsView.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -93,7 +93,7 @@ const CheckInPointsView: FunctionComponent<Props> = (props) => {
9393
{/* <SelectInput value="Action" /> */}
9494
<CustomMenuItem to='/checkinpoints/add'>
9595
<CustomButton style={{ width: '150px', fontSize: '12px', height: '39px', padding: 0 }}>
96-
Add Checkin point
96+
Add Check in point
9797
</CustomButton>
9898
</CustomMenuItem>
9999
</Box>

0 commit comments

Comments
 (0)