Skip to content

Commit 1f6c4f9

Browse files
ergunesraergunesra
committed
adding files
1 parent 052628e commit 1f6c4f9

File tree

3 files changed

+633
-0
lines changed

3 files changed

+633
-0
lines changed

‎src/components/actionbutton/ActionButtonEmployee.jsx

+299
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,299 @@
1+
import React, { useState } from 'react';
2+
import PropTypes from 'prop-types';
3+
import { FormControl,
4+
Select,
5+
Typography,
6+
MenuItem,
7+
InputBase,
8+
styled,
9+
createTheme,
10+
ThemeProvider,
11+
Dialog,
12+
Snackbar,
13+
Alert as MuiAlert ,
14+
} from '@mui/material'
15+
import EndEmployeeDialog from './EndEmployeeDialog';
16+
import ConfirmationDialog from './ConfirmationDialog';
17+
import { useNavigate } from 'react-router-dom';
18+
19+
20+
const StyledAlert = styled(MuiAlert)(({ theme }) => ({
21+
border:'solid 1px #D0D5DD',
22+
borderRadius:'12px',
23+
backgroundColor: '#FFFFFF', // white background
24+
color: '#475467', // close icon color
25+
26+
'& .MuiAlert-message': {
27+
fontSize: '13px', // adjust font size
28+
color: '#475467', // gray text color
29+
30+
},
31+
'& .MuiAlert-icon': {
32+
display: 'none', // hide the icon
33+
},
34+
}));
35+
36+
37+
38+
export default function ActionButtonEmployee() {
39+
40+
// Create a custom theme to override typography styles
41+
const customTheme = createTheme({
42+
43+
typography: {
44+
45+
h2: {
46+
fontWeight: 600,
47+
fontFamily: 'Inter',
48+
fontSize: '16px',
49+
color: '#101828',
50+
},
51+
body1: {
52+
fontWeight: 600,
53+
fontFamily: 'Inter',
54+
fontSize: '13px',
55+
color: '#344054',
56+
},
57+
body2: {
58+
fontWeight: 550,
59+
fontFamily: 'Inter',
60+
fontSize: '14px',
61+
color: '#101828',
62+
},
63+
body3: {
64+
fontWeight: 550,
65+
fontFamily: 'Inter',
66+
fontSize: '12px',
67+
color: '#475467',
68+
},
69+
body4: {
70+
fontWeight: 550,
71+
fontFamily: 'Inter',
72+
fontSize: '12px',
73+
color: '#344054',
74+
},
75+
body5: {
76+
fontWeight: 400,
77+
fontFamily: 'Inter',
78+
fontSize: '13px',
79+
color: '#344054',
80+
padding: '9px, 10px, 9px, 10px',
81+
},
82+
body6: {
83+
fontWeight: 400,
84+
fontFamily: 'Inter',
85+
fontSize: '13px',
86+
color: '#667085',
87+
marginLeft: '15px',
88+
padding: '9px, 10px, 9px, 10px',
89+
},
90+
},
91+
});
92+
93+
// Custom styling for InputBase component used in the Select component
94+
const BootstrapInput = styled(InputBase)(({ theme }) => ({
95+
height: '34px',
96+
'label + &': {
97+
marginTop: theme.spacing(3),
98+
},
99+
'& .MuiInputBase-input': {
100+
borderRadius: 8,
101+
position: 'relative',
102+
backgroundColor: theme.palette.background.paper,
103+
border: '1px solid #D0D5DD',
104+
fontSize: 13,
105+
height: '24px',
106+
display: 'flex',
107+
alignItems: 'center',
108+
transition: theme.transitions.create(['border-color', 'box-shadow']),
109+
fontFamily: 'Inter',
110+
'&:focus': {
111+
borderRadius: 8,
112+
borderColor: '#D0D5DD',
113+
},
114+
115+
},
116+
}));
117+
const navigate = useNavigate();
118+
const [empId, setEmpId] = useState(null); // Add empId state
119+
const [action, setAction] = useState('');
120+
const [openEndEmployeeDialog, setOpenEndEmployeeDialog] = useState(false);
121+
const [openConfirmationDialog, setOpenConfirmationDialog] = useState(false);
122+
const [openSuccessPopup, setOpenSuccessPopup] = useState(false);
123+
const [dialogData,setDialogData] = useState ({
124+
Option:'',
125+
Date:null,
126+
Notes:'',
127+
Reason:'',
128+
empId: 'null',
129+
})
130+
131+
// Function to handle changes in the Select component
132+
const handleChange = (event) => {
133+
const selectedAction = event.target.value;
134+
setAction(selectedAction);
135+
136+
// Open the dialog if "End employment" is selected
137+
if (selectedAction === 30) {
138+
139+
setEmpId('5');
140+
setOpenEndEmployeeDialog(true);
141+
142+
}else if (selectedAction === 10) {
143+
144+
setEmpId('5');
145+
navigate('/myinfoedit');
146+
147+
} else{
148+
navigate('/myinfoedit');
149+
}
150+
151+
};
152+
153+
// Close "End employment" dialog
154+
const handleCloseEndEmployeeDialog = () => {
155+
setOpenEndEmployeeDialog(false);
156+
setDialogData({ Option: '', Date: null, Notes: '', Reason: '', empId: null });
157+
setAction(''); // Select is null
158+
159+
};
160+
161+
// Open confirmation dialog
162+
const handleOpenConfirmationDialog = (data) => {
163+
setDialogData(data);
164+
setOpenEndEmployeeDialog(false);
165+
setOpenConfirmationDialog(true);
166+
};
167+
168+
//Close Confirmation dialog and open end employee dialog
169+
const handleCloseConfirmationDialog = () => {
170+
setOpenConfirmationDialog(false);
171+
setOpenEndEmployeeDialog(true);
172+
};
173+
174+
// Close dialogs and open successpopu for 5 seconds.
175+
const handleConfirm = async () => {
176+
console.log('data from firstdialog', dialogData);
177+
// try {
178+
// // Define API endpoint
179+
// const apiUrl = 'http://localhost:5000/api/employees/';
180+
181+
// // Prepare the request options
182+
// const response = await fetch(apiUrl, {
183+
// method: 'POST', // POST method to send data
184+
// headers: {
185+
// 'Content-Type': 'application/json', // Set content type to JSON
186+
// },
187+
// body: JSON.stringify(dialogData), // Convert dialogData to JSON
188+
// });
189+
// // Check if the request was successful
190+
// if (!response.ok) {
191+
// throw new Error(`HTTP error! Status: ${response.status}`);
192+
// }
193+
194+
// // Parse the JSON response if needed
195+
// const result = await response.json();
196+
// console.log('API response:', result);
197+
198+
// // Handle successful response (if needed)
199+
// } catch (error) {
200+
// console.error('Error occurred while sending data to the API:', error);
201+
// }
202+
203+
//Close dialogs and open success popup for 5 seconds
204+
setOpenConfirmationDialog(false);
205+
setOpenEndEmployeeDialog(false);
206+
setOpenSuccessPopup(true);
207+
setTimeout(() => {
208+
setOpenSuccessPopup(false);
209+
window.location.reload();
210+
}, 5000); // 5 seconds
211+
212+
setAction(''); // Select is null
213+
};
214+
215+
216+
return (
217+
<ThemeProvider theme={customTheme}>
218+
219+
<FormControl sx={{ m: 2, width: '195px' }}>
220+
<Select
221+
labelId="demo-customized-select-label"
222+
id="demo-customized-select"
223+
MenuProps={{
224+
PaperProps: {
225+
sx: {
226+
"& .MuiMenuItem-root": {
227+
"&:hover": {
228+
backgroundColor: "transparent",
229+
},
230+
231+
'&.Mui-focused': {
232+
backgroundColor: "transparent !important",
233+
},
234+
"&.Mui-selected": {
235+
backgroundColor: "transparent !important",
236+
"&:hover": {
237+
backgroundColor: "transparent !important",
238+
},
239+
"&:active": {
240+
backgroundColor: "transparent !important",
241+
},
242+
},
243+
},
244+
},
245+
},
246+
}}
247+
displayEmpty
248+
value={action}
249+
onChange={handleChange}
250+
input={<BootstrapInput />}
251+
renderValue={(selected) => {
252+
return <Typography variant="body6">Action</Typography>;
253+
}}
254+
255+
>
256+
{/* MenuItem for selecting "Send exit survey" */}
257+
<MenuItem value={10}><Typography variant="body5">Edit Employee</Typography></MenuItem>
258+
259+
{/* MenuItem for selecting "Send exit survey" */}
260+
<MenuItem selected value={20}><Typography variant="body5">Send exit survey</Typography></MenuItem>
261+
262+
{/* MenuItem for selecting "End employment" */}
263+
<MenuItem value={30}><Typography variant="body5">End employment</Typography></MenuItem>
264+
</Select>
265+
</FormControl>
266+
<EndEmployeeDialog
267+
open={openEndEmployeeDialog}
268+
onClose={handleCloseEndEmployeeDialog}
269+
openConfirmationDialog={handleOpenConfirmationDialog}
270+
empId={empId}
271+
/>
272+
<Dialog open={openConfirmationDialog} onClose={handleCloseConfirmationDialog}>
273+
<ConfirmationDialog
274+
closeConfirmationDialog={handleCloseConfirmationDialog}
275+
onConfirm={handleConfirm}
276+
data={dialogData}
277+
empId={empId}
278+
/>
279+
</Dialog>
280+
<Snackbar
281+
open={openSuccessPopup}
282+
autoHideDuration={5000}
283+
onClose={() => setOpenSuccessPopup(false)}
284+
anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
285+
>
286+
<StyledAlert onClose={() => setOpenSuccessPopup(false)} >
287+
Employee termination successful!
288+
</StyledAlert>
289+
</Snackbar>
290+
291+
292+
</ThemeProvider>
293+
)
294+
}
295+
296+
ActionButtonEmployee.propTypes = {
297+
empId : PropTypes.number.isRequired
298+
}
299+

‎src/components/actionbutton/ConfirmationDialog.jsx

+77
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
import React from 'react';
2+
import { Dialog, Typography, Stack, Button } from '@mui/material';
3+
import PropTypes from 'prop-types';
4+
import { createTheme, ThemeProvider } from '@mui/material/styles';
5+
6+
const theme = createTheme({
7+
typography: {
8+
h2: {
9+
fontWeight: 550,
10+
fontFamily: 'Inter',
11+
fontSize: '16px',
12+
color: '#101828',
13+
marginBottom: '4px',
14+
},
15+
body1: {
16+
fontWeight: 550,
17+
fontFamily: 'Inter',
18+
fontSize: '13px',
19+
color: '#344054',
20+
paddingBottom: '8px',
21+
},
22+
body2: {
23+
fontWeight: 400,
24+
fontFamily: 'Inter',
25+
fontSize: '13px',
26+
color: '#344054',
27+
marginLeft:'9px',
28+
marginTop: '4px',
29+
padding: '9px, 10px',
30+
},
31+
body3: {
32+
fontWeight: 400,
33+
fontFamily: 'Inter',
34+
fontSize: '13px',
35+
color: '#475467',
36+
padding: '9px, 10px',
37+
},
38+
39+
40+
},
41+
});
42+
43+
export default function ConfirmationDialog({ open, closeConfirmationDialog, onConfirm, data }) {
44+
45+
const handleConfirm = () => {
46+
onConfirm(); // Trigger the onConfirm callback to handle confirmation
47+
48+
};
49+
50+
return (
51+
<ThemeProvider theme={theme}>
52+
<Dialog open onClose={closeConfirmationDialog} PaperProps={{
53+
sx: {
54+
borderRadius:'12px',
55+
}
56+
}}>
57+
<Stack direction="column" spacing={2} sx={{ padding: '20px' }}>
58+
<Typography variant="h2">End this employment?</Typography>
59+
<Typography variant="body3">
60+
When you click on "End employment", the employee will<br /> be terminated either on the date selected, or<br /> immediately.
61+
</Typography>
62+
63+
<Stack direction="row" alignItems="center" justifyContent="flex-end" spacing={3} sx= {{marginTop: '19px'}}>
64+
<Button onClick={closeConfirmationDialog}>Cancel</Button>
65+
<Button onClick={handleConfirm}>End Employment</Button>
66+
</Stack>
67+
68+
</Stack>
69+
</Dialog>
70+
</ThemeProvider>
71+
);
72+
}
73+
74+
ConfirmationDialog.propTypes = {
75+
closeConfirmationDialog: PropTypes.func.isRequired,
76+
77+
};

0 commit comments

Comments
 (0)