Notes

import React, { useState, useEffect } from "react";
// import EditIcon from '@material-ui/icons/Edit';
// "@mui/material/LaunchIcon";
import LaunchIcon from "@mui/icons-material/Launch";
import CloseIcon from "@mui/icons-material/Close";
import IconButton from "@mui/material/IconButton";
// import IconButton from "@mui/icons-material/Icon";
// import CloseIcon from "@material-ui/icons/Close";
// import IconButton from "@material-ui/core/IconButton";
import InputAdornment from "@mui/material/InputAdornment";
import SearchIcon from "@mui/icons-material/Search";
// import SearchIcon from "@material-ui/icons/Search";
import {
Paper,
Table,
TableBody,
TableCell,
TableContainer,
TableHead,
TableRow,
TextField,
Button,
} from "@mui/material";
import { Toolbar } from "@mui/material";
import { Container } from "@mui/system";
import NavigateBeforeIcon from "@mui/icons-material/NavigateBefore";
import Typography from "@mui/material/Typography";
import Grid from "@mui/material/Unstable_Grid2/Grid2";
import KeyboardArrowRightIcon from "@mui/icons-material/KeyboardArrowRight";

function ClientLookup() {
const [isPopUpVisible, setIsPopUpVisible] = useState(false);
const [searchTerm, setSearchTerm] = useState("");
const [filteredItems, setFilteredItems] = useState([]);
const [customerList, setCustomerList] = useState([]);
const [isBannerVisible, setIsBannerVisible] = useState(false);

function handleEditClick() {
setIsPopUpVisible(true);
}

function handleCloseClick() {
setIsPopUpVisible(false);
}

function handleBannerClick() {
setIsBannerVisible(!isBannerVisible);
}
function handleCloseClick1() {
setIsBannerVisible(false);
}

// useEffect(() => {
// fetch("")
// .then((response) => response.json())
// .then((data) => setItems(data));
// }, []);
useEffect(() => {
getCustomerList();
}, []);

const getCustomerList =()=>{
fetch("https://localhost:7005/api/Customer/CustomerList")
.then((response) => response.json())
.then((data) => setCustomerList(data));
}

function handleSearchChange(event) {
setSearchTerm(event.target.value);
let customerArr = customerList;
if(event.target.value != ''){
let searchedArr = customerArr.filter(customer =>{
return (customer.customerName.toLowerCase().includes(event.target.value.toLowerCase()))
});
setCustomerList(searchedArr);
}
else if(event.target.value == ''){
getCustomerList();
}
}

function handleSearchClick() {
const filtered = customerList.filter(
(item) => item.name.includes(searchTerm) || item.id === searchTerm
);
setFilteredItems(filtered);
}

return (
<Container>
<Grid>
<Toolbar
style={{
marginTop: "20px",
maxWidth: "100%",
borderRadius: "10px",
backgroundColor: "#FAFAFA",
flexWrap:"wrap",
zIndex: 11
}}
>
<NavigateBeforeIcon style={{ color: "#757575" }} />
<Typography style={{ color: "#757575" }}>
BRUCE BANNER(23461)
</Typography>
<LaunchIcon
onClick={handleEditClick}
style={{ fontSize: "1.3em", color: "#757575" }}
/>
<Typography style={{ color: "blue", marginLeft: "65%" }}>
View Details
</Typography>
<KeyboardArrowRightIcon
onClick={handleBannerClick}
style={{ color: "blue" }} />
{isBannerVisible && (
<Paper style={{ marginTop: "-22px" ,marginLeft: "-28px", marginRight: "-22px", backgroundColor: "#FAFAFA" }}>
<Toolbar style={{minHeight: '40px'}}>
<NavigateBeforeIcon style={{ color: "#757575"}} />
<Typography style={{ color: "#757575" }}>
BRUCE BANNER(23461)
</Typography>
<LaunchIcon
onClick={handleEditClick}
style={{ fontSize: "1.3em", color: "#757575",marginLeft:"73px" }}
/>
<CloseIcon
onClick={handleCloseClick1}
style={{ marginLeft: "73%" }}
/>
</Toolbar>
<Grid container spacing={2}>
<Grid item xs={12}>
<TableContainer>
<TableHead>
<TableCell>ID</TableCell>
<TableCell>Client Name</TableCell>
<TableCell>Category</TableCell>
<TableCell>Address</TableCell>
<TableCell>Tax Number</TableCell>
<TableCell>Phone/Mail</TableCell>
<TableCell>Jurisdiction</TableCell>
<TableCell>Notes</TableCell>
</TableHead>
<TableBody>
<TableCell>23461</TableCell>
<TableCell>Customers Name</TableCell>
<TableCell>NECA Pool member</TableCell>
<TableCell>
112 E Washington St,Greensboro,NC27401, United States
</TableCell>
<TableCell>45621</TableCell>
<TableCell>+1 336-379-8854/[email protected]</TableCell>
<TableCell>Federal Compilance</TableCell>
<TableCell>
Lorem ipsum is a placeholder text commonly used to
</TableCell>
</TableBody>
</TableContainer>
</Grid>
</Grid>
</Paper>
)}
</Toolbar>
</Grid>
{isPopUpVisible && (
<Paper
style={{
position: "absolute",
top: "60%",
left: "50%",
transform: "translate(-50%, -50%)",
width: "35%",
// maxHeight: "70%",
height: "410px",
overflow: "hidden",
borderRadius: "5px",
zIndex: 11,
marginTop: "5px",
marginLeft: "15px",
}}
>
<div
style={{
display: "flex",
justifyContent: "space-between",
alignItems: "center",
padding: "10px",
backgroundColor: "rgb(224 224 224 / 49%)",
height: "12%",
}}
>
<h3 style={{ fontFamily: "inherit", fontSize: "16px" }}>
CHANGE CLIENT
</h3>
<CloseIcon onClick={handleCloseClick} />
</div>
<div
style={{
display: "flex",
justifyContent: "center",
alignItems: "center",
padding: "5px",
height: "10%",
marginTop: "10px",
}}
>
<TextField
style={{
width: "45ch",
height: "5ch",
backgroundColor: "rgb(224 224 224/ 49%)",
borderRadius: "10px",
padding: "0px 10px 0px",
fontStyle: "italic",
textAlign: "center",
marginTop: "5px",
}}
variant="standard"
placeholder="search clients"
value={searchTerm}
onChange={handleSearchChange}
InputProps={{
disableUnderline: true,
endAdornment: (
<InputAdornment position="end">
<IconButton>
<SearchIcon />
</IconButton>
</InputAdornment>
),
}}
/>
</div>
<TableContainer sx={{ maxHeight: 240, overflow: 'auto',width:'93%',marginTop:"10px"}}>
<Table>
<TableBody>
{customerList.map((customer) => (
<TableRow key={customer.id}>
<TableCell
style={{
borderBottom: "none",
textAlign: "left",
fontSize: "14px",
width: "55%",
paddingTop: "5px",
paddingBottom: "5px",
paddingLeft: "35px"
}}
>
{customer.customerName}
</TableCell>
<TableCell
style={{
borderBottom: "none",
padding: "11px",
textAlign: "right",
}}
>
{customer.customerID}
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
<div></div>
<div></div>
<div
style={{
float: "right",
marginBottom: "10px",
marginRight: "29px",
}}
>
<Button
sx={{ mt: 3, ml: 1 }}
variant="standard"
style={{
justifyContent: "right",
marginRight: "45px",
color: "Blue",
backgroundColor: "white",
marginTop: "18px",
fontSize: "12px",
paddingRight: "13px",
height: "27px",
width: "77px"
}}
color="default"
>
Cancel
</Button>
<Button
sx={{ mt: 3, ml: 1 }}
variant="standard"
style={{
justifyContent: "right",
color: "White",
backgroundColor: "blue",
marginTop: "18px",
fontSize: "12px",
paddingRight: "13px",
height: "27px",
width: "77px"
}}
color="primary"
onClick={handleSearchClick}
>
Change
</Button>
</div>
<div></div>
</Paper>
)}
</Container>
);
}
export default ClientLookup;