Notes

import * as React from "react";
import Checkbox from "@mui/material/Checkbox";
import { Container, IconButton, Stack } from "@mui/material";
import FormControl from "@mui/material/FormControl";
import Grid from "@mui/material/Grid";
import Paper from "@mui/material/Paper";
import Toolbar from "@mui/material/Toolbar";
import NavigateBeforeIcon from "@mui/icons-material/NavigateBefore";
import Button from "@mui/material/Button";
import Typography from "@mui/material/Typography";
import DeleteIcon from "@mui/icons-material/Delete";
import ChevronRightIcon from "@mui/icons-material/ChevronRight";
import { useState, useEffect } from "react";
import { useNavigate } from "react-router-dom";
import CloseIcon from "@mui/icons-material/Close";
import {
Table,
TableBody,
TableCell,
TableContainer,
TableHead,
TableRow,
TextField,
} from "@mui/material";
import axios from "axios";
import NavBar from "../layout/NavBar";
//import { LocalGroceryStore } from "@mui/icons-material";

export default function Notification() {
// const [customerNotification, setCostumerNotification] = useState([]);
// const [filingMasterNotification, setFilingMastersNotifications] = useState(
// []
// );
const [allNotifications, setAllNotifications] = useState([]);
const [selectedCustfNotifications, setSelectedCustfNotifications] = useState(
[]
);
const [notificationCount, setNotificationCount] = useState(0);
const navigate = useNavigate();
const backToHome = () => {
navigate("/");
};
const [listNotification, setListNotification] = useState([]);
const [isBannerVisible, setIsBannerVisible] = useState({
isOpen: false,
notificationId: null,
});
const [detailsLoaded, setDetailsLoaded] = useState(false);
function handleCloseClick() {
setListNotification([]);
setIsBannerVisible(false);
setDetailsLoaded(false);
}
// useEffect(() => {
// setNotificationCount(allNotifications.length);
// }, [allNotifications, setNotificationCount]);
//Delete all
function deleteNotifications(ids) {
ids.forEach((id) => {
axios
.delete(
`https://localhost:7005/api/Customer/DeleteCustomerFilingTrackingNotification/${id}`
)
.then((response) => {
console.log(
`Deleted customer filing tracking notification with ID ${id}`
);
})
.catch((error) => {
console.error(
`Failed to delete customer filing tracking notification with ID ${id}: ${error}`
);
});

axios
.delete(
`https://localhost:7005/api/FilingMaster/DeleteFilingMasterWorkflowNotifications/${id}`
)
.then((response) => {
console.log(
`Deleted filing master workflow notification with ID ${id}`
);
})
.catch((error) => {
console.error(
`Failed to delete filing master workflow notification with ID ${id}: ${error}`
);
});
});
}
//Confiming Delete All
const deleteAll = () => {
if (selectedCustfNotifications.length > 0) {
const ids = selectedCustfNotifications.map(
(notification) => notification.notificationId
);
console.log("**", ids);
const confirmed = window.confirm(
`Are you sure you want to delete ${ids.length} notifications?`
);
if (confirmed) {
deleteNotifications(ids);
}
} else {
alert("please select the notification");
}
};
// const deleteAll2 = () => {
// if (selectedCustfNotifications.length > 0) {
// const notId = selectedCustfNotifications.map(
// (notification) => notification.notificationId
// );

// console.log("**", ids);
// const confirmed = window.confirm(
// `Are you sure you want to delete ${ids.length} notifications?`
// );
// if (confirmed) {
// deleteNotifications(ids);
// }
// } else {
// alert("please select the notification");
// }
// };

//Delete Row
async function handleDelete(id) {
if (window.confirm("are you sure want to delete")) {
try {
const response1 = await fetch(
`https://localhost:7005/api/Customer/DeleteCustomerFilingTrackingNotification/${id}`,
{
method: "DELETE",
}
);
const response2 = await fetch(
`https://localhost:7005/api/FilingMaster/DeleteFilingMasterWorkflowNotifications/${id}`,
{
method: "DELETE",
}
);

if (response1.ok || response2.ok) {
// Deletion was successful
console.log("Deletion successful");
} else {
// Deletion was not successful
console.log("Deletion failed");
}
} catch (error) {
console.error(error);
}
}
}

useEffect(() => {
const fetchNotifications = async () => {
try {
const response1 = await fetch(
"https://localhost:7005/api/Customer/ListCustomerFilingTrackingNotifications"
);
const customerNotifications = await response1.json();

const response2 = await fetch(
"https://localhost:7005/api/FilingMaster/ListFilingMasterWorkflowNotifications"
);
const filingMasterNotifications = await response2.json();

const allData = [
...customerNotifications.data,
...filingMasterNotifications.data,
];
console.log("allData", allData);
setAllNotifications(allData);
setNotificationCount(allData.length);
} catch (error) {
console.error(error);
}
};
fetchNotifications();
}, []);

const handleMsCheckboxChange = (event, id) => {
alert(id);
const checked = event.target.checked;
if (checked) {
// setSelectedNotifications([...selectedNotifications, id]);
if (!selectedCustfNotifications.includes(id)) {
selectedCustfNotifications.push(id);
console.log("SELECTED NOTIFICATION", selectedCustfNotifications);
}
} else {
const index = selectedCustfNotifications.indexOf(id);
if (index !== -1) {
selectedCustfNotifications.splice(index, 1);
console.log("SELECTED NOTIFICATION", selectedCustfNotifications);
}
}
};
// const handleClick = (notificationId) => {
// viewNotification(notificationId, setIsBannerVisible, setListNotification);
// };

// const viewNotification = async (notificationId) => {
// try {
// const customerResponse = await axios.get(
// `https://localhost:7005/api/Customer/ViewCustomerFilingTrackingNotification/${notificationId}`
// );
// console.log(customerResponse.data);

// const filingMasterResponse = await axios.get(
// `https://localhost:7005/api/FilingMaster/ViewFilingMasterWorkflowNotifications/${notificationId}`
// );
// console.log(filingMasterResponse.data.data);

// setIsBannerVisible({ isOpen: true, notificationId });
// } catch (error) {
// console.error(error);
// }
// };
const viewNotification = async (notificationId) => {
try {
const customerResponse = await axios.get(
`https://localhost:7005/api/Customer/ViewCustomerFilingTrackingNotification/${notificationId}`
);
const customerData = customerResponse.data.data;
const filingMasterResponse = await axios.get(
`https://localhost:7005/api/FilingMaster/ViewFilingMasterWorkflowNotifications/${notificationId}`
);
const filingMasterData = filingMasterResponse.data.data;

setIsBannerVisible({
isOpen: true,
notificationId,
});
} catch (error) {
console.error(error);
}
};

return (
<Container>
<Grid>
<Toolbar style={{ backgroundColor: "", borderRadius: "6px" }}>
<IconButton onClick={backToHome}>
<NavigateBeforeIcon style={{ color: "#757575" }} />
</IconButton>
<Typography style={{ color: "#757575", marginRight: "40px" }}>
NOTIFICATIONS
</Typography>

<FormControl action="/action_page.php">
<select
style={{
width: "230px",
height: "30px",
padding: "5px 9px",
marginLeft: "750px",

backgroundColor: "#EEEEEE",
borderRadius: "5px",
borderStyle: "none",
}}
>
<option value="todays">Today's</option>
<option value="yesterday">Yesterday</option>
<option value="this week">This Week</option>
</select>
</FormControl>
</Toolbar>

<br></br>
<div
style={{
padding: "10px",
marginTop: "-18px",
backgroundColor: "#F5F5F5",
width: "114%",
marginLeft: "-106px",
}}
></div>
<Grid>
<Typography
style={{
marginLeft: "-6px",
color: "#757575",
fontSize: "16px",
marginTop: "20px",
}}
>
TODAY'S (10)
</Typography>
<div>
<Button
variant="contained"
style={{
marginLeft: "95%",
marginTop: "-4%",
backgroundColor: "#BDBDBD",
}}
onClick={deleteAll}
>
DELETE
</Button>
</div>
</Grid>
</Grid>

{allNotifications.map((notification) => (
<div
key={notification.id}
style={{
display: "flex",
justifyContent: "center",
marginTop: "10px",
}}
>
<Checkbox
onChange={(event) => handleMsCheckboxChange(event, notification)}
/>
<Paper
sx={{
p: 2,
margin: 0,
maxWidth: 500,
flexGrow: 1,
backgroundColor: "#F5F5F5",
}}
>
<Grid container spacing={2}>
<Grid item xs={12} sm container>
<Grid item xs container direction="column" spacing={2}>
<Grid item xs>
<div style={{ display: "flex" }}>
<Typography
gutterBottom
variant="subtitle1"
component="div"
fontSize="14px"
width="170px"
>
{notification.createUser}
</Typography>
<Typography style={{ marginLeft: "90px", color: "grey" }}>
{notification.createDate}
</Typography>
</div>
</Grid>
<Grid item>
<div style={{ display: "flex" }}>
<IconButton
onClick={() =>
viewNotification(notification.notificationId)
}
>
<Typography
sx={{ cursor: "pointer" }}
variant="body2"
fontSize="14px"
style={{ display: "flex", color: "blue" }}
>
VIEW DETAILS
</Typography>
<ChevronRightIcon style={{ marginTop: "-3px" }} />
</IconButton>
<DeleteIcon
onClick={() =>
handleDelete(notification.notificationId)
}
style={{ marginLeft: "300px", marginTop: "-10px" }}
/>
</div>
</Grid>

<div>
{isBannerVisible.isOpen &&
isBannerVisible.notificationId ===
notification.notificationId && (
<Paper sx={{ backgroundColor: "#F5F5F5" }}>
<IconButton sx={{ alignContent: "end" }}>
<CloseIcon
onClick={() =>
setIsBannerVisible({
isOpen: false,
notificationId: null,
})
}
/>
</IconButton>
<TableContainer>
<TableHead>
<TableCell>Id</TableCell>
</TableHead>

<TableRow>
<TableCell></TableCell>
</TableRow>
</TableContainer>
</Paper>
)}
</div>
</Grid>
</Grid>
</Grid>
</Paper>
</div>
))}
</Container>
);
}