Notes

import React, { useState, useEffect, useContext } from "react";
import Box from "@mui/material/Box";
import { Grid, Paper } from "@mui/material";
import Select, { SelectChangeEvent } from "@mui/material/Select";
import InputLabel from "@mui/material/InputLabel";
import FormControl from "@mui/material/FormControl";
import InputBase from "@mui/material/InputBase";
import SearchIcon from "@mui/icons-material/Search";
import IconButton from "@mui/material/IconButton";
import Radio from "@mui/material/Radio";
import RadioGroup from "@mui/material/RadioGroup";
import FormControlLabel from "@mui/material/FormControlLabel";
import DirectionsIcon from "@mui/icons-material/Directions";
import MenuItem from "@mui/material/MenuItem";
import MultiSelect from "../common/MultiSelect";
import states from "../../data/StateLookup.json";
import Checkbox from "@mui/material/Checkbox";
import DeleteIcon from '@mui/icons-material/Delete';
import axios from "axios";
// import DeleteIcon from "@mui/icons-material"
// import { Checkbox } from 'primereact/checkbox';

export default function ApprovalConfig() {
const [name, setName] = React.useState("");
const [state, setState] = React.useState("");
const [selectCustomer, setSelectedCustomer] = useState(null);
const [selectedCustomerObj, setSelectCustomerObj] = useState(null);
const [customerList, setCustomerList] = useState([]);
const [selectedState, setSelectedState] = useState([]);
const [approverList, setApproverList] = useState([]);
const [value, setValue] = React.useState("");
const [selectedRadio, setSelectedRadio] = React.useState("state");
const [selectedApproverData, setSelectedApproverData] = React.useState([]);
const [isPopUpVisible, setIsPopUpVisible] = useState(false);
const [selectReset,setSelectReset]=useState(false)
const [approverId,setApproverId]=useState(null)
const [customerId,setCustomerId]=useState(null)

useEffect(() => {
getCustomerList();
}, []);

const getCustomerList = () => {
fetch(
"https://jsitracknowdevapi.azurewebsites.net/api/Customer/CustomerList"
)
.then((response) => response.json())
.then((data) => setCustomerList(data));


};
useEffect(() => {
getApproverList();
}, []);

const getApproverList = () => {
fetch(
"https://jsitracknowdevapi.azurewebsites.net/api/Application/ListApprovers"
)
.then((response) => response.json())
.then((data) => setApproverList(data));
};
const sendApprover = async () => {
let postObj = {
approverId: approverId,
approverName: value,
customerId: customerId,
// juristiction:"string",
state: selectedState,
isdefault: true,
approverGroupId: 0,
// createDate: 2023-03-25T11:13:08.464Z,
createUser: "string",
// updateDate: 2023-03-25T11:13:08.464Z,
updateUser: "string"
}

await axios
.post(
"https://jsitracknowdevapi.azurewebsites.net/api/Application/CreateApprovers",
postObj,

)
.then((res) => {
getApproverList();
});
};


const collectApproverData = () => {
let selectedApprover = {
client: name,
ApproverName: value,
states: selectedState,

};
let arr = [selectedApprover];
setSelectedApproverData(arr);
console.log("array",arr)
};

const handleReset=(e)=>{
setName("");
setValue("")
setSelectedState([])
// setSelectedApproverData([])
}


// setRows((prevRows) => prevRows.filter((r) => r !== selectedRow));

// } catch (error) {

// console.error(error);

// }
const nameChange = (event) => {
alert(event.target.value)
setName(event.target.value);
customerList.forEach(obj=>{
if(obj.customerName==event.target.value){

setCustomerId(obj.customerId)
}
})

};
const handlenameChange = (event) => {
setValue(event.target.value);
approverList.forEach(obj =>{
if(obj.approverName == event.target.value){
setApproverId(obj.approverId);

}
})
console.log(approverId);
};
const handleRadioChange = (event) => {
setSelectedRadio(event.target.value);
console.log("val", selectedRadio);
};


const stateChange = (event) => {
// setState(event.target.value);

const {
target: { value },
} = event;
setSelectedState(
// On autofill we get a stringified value.
typeof value === "string" ? value.split(",") : value
);
// setSelectedState("")
};
return (
<div style={{ padding: "20px" }}>
<h2>APPROVER CONFIGURATION</h2>
<Grid style={{ display: "flex" }}>
<Grid>
<Box
sx={{
display: "flex",
"& > :not(style)": {
m: 1,
width: 368,
height: 368,
backgroundColor: "#D0D3D4",
overflow:"auto"
},
}}
>
<Paper variant="outlined">
<h5 style={{ marginLeft: "20px" }}>SELECT CLIENT</h5>

<FormControl sx={{ m: 1, minWidth: 280,width:"10%"}}>
<InputLabel id="demo-simple-select-helper-label">
Select Name
</InputLabel>
<Select
labelId="demo-simple-select-helper-label"
id="demo-simple-select-helper"
value={name}
label="Select Name"
onChange={nameChange}
width="10%"
style={{ width: 340, marginLeft: "3%" }}

>
{customerList.map((customer) => (
<MenuItem key={customer.id} value={customer.customerName}>
{customer.customerName}
</MenuItem>
))}
</Select>
</FormControl>

<h5 style={{ marginLeft: "20px" }}>APPROVER LISTS</h5>

<FormControl sx={{ m: 1, minWidth: 280,width:"75%" }}>
<InputLabel id="demo-simple-select-helper-label">
Select Name
</InputLabel>
<Select
labelId="demo-simple-select-helper-label"
id="demo-simple-select-helper"
value={value}
label="Select Name"
onChange={handlenameChange}
style={{ width: 340, marginLeft: "3%" }}

>
{approverList.map((approver) => (
<MenuItem key={approver.id} value={approver.approverName}>
{approver.approverName}
</MenuItem>
))}
</Select>
</FormControl>
</Paper>
</Box>
</Grid>

<Grid>
<Box
sx={{
display: "flex",
"& > :not(style)": {
m: 1,
width: 368,
height: 368,
backgroundColor: "#D0D3D4",
overflow:"auto"
},
}}
>
<Paper variant="outlined">
<h5 style={{ marginLeft: "20px" }}>JURISDICTION</h5>
<FormControl>
<RadioGroup
row
aria-labelledby="demo-radio-buttons-group-label"
defaultValue={selectedRadio}
name="radio-buttons-group"
>
<FormControlLabel
value="State Compliance"
control={<Radio />}
label="State"
style={{ marginLeft: "10px" }}
onChange={handleRadioChange}
/>
<FormControlLabel
value="Federal Compliance"
control={<Radio />}
label="Federal"
style={{ marginLeft: "10px" }}
onChange={handleRadioChange}
/>
</RadioGroup>
</FormControl>
{selectedRadio == "state" ? (
<FormControl fullWidth variant="filled">
<InputLabel id="state-label" >Select State</InputLabel>
<Select
labelId="demo-multiple-checkbox-label"
id="demo-multiple-checkbox"
multiple
value={selectedState}
onChange={stateChange}
style={{ width: 340, marginLeft: "3%" }}
renderValue={(selected) => selected.join(", ")}
>
{states.map((item) => (
<MenuItem key={item.code} value={item.state}>
<Checkbox
checked={selectedState.indexOf(item.state) > -1}
// <Checkbox checked={personName.indexOf(name) > -1} />
/>
{item.state}
</MenuItem>
))}
</Select>
</FormControl>
) : (
""
)}
</Paper>
</Box>
</Grid>
<Grid style={{ marginTop: "160px" }}>
<DirectionsIcon onClick={collectApproverData} />
</Grid>
<Grid>

<Box
sx={{
display: "flex",
"& > :not(style)": {
m: 1,
width: 368,
height: 368,
backgroundColor: "#D0D3D4",
overflow:"auto"
},
}}
>

<Paper variant="outlined">
<h5 style={{ marginLeft: "10px" }}>SELECTED APPROVER</h5>
<div>
<div style={{display:'flex',justifyContent:'space-between'}}>
</div>
{selectedApproverData.map((obj) => (
<div>
<p style={{marginLeft:"10px"}}>{obj.client}</p>
<div style={{display:"flex"}}>

<p style={{marginLeft:"10px",paddingLeft:"10px"}} >{obj.ApproverName}</p>

<div>
{obj.states.map((state) => (
<div>
<table style={{padding:"12px"}}>
<tr>
<td style={{textAlign:"center",paddingRight:"78px"}}>{state}</td>

<td><DeleteIcon/></td>
</tr>

</table>



</div>

))}
</div>
</div>
</div>

))}
</div>
</Paper>

</Box>



<br></br>

<Grid style={{display:"flex"}}>
<button style={{padding:"10px 20px",marginLeft:"60px",border:"none", color:"blue"}} onClick={handleReset}>RESET</button>

<button style={{padding:"8px 30px",marginLeft:"30px",backgroundColor:"blue",color:'white',border:"1px",borderRadius:"3px"}}onClick={sendApprover} >SUBMIT</button>
</Grid>
</Grid>
</Grid>
</div>
);
}