USER
import { useEffect, useState } from 'react';
import { IconButton, Box, Menu, MenuItem, ListItemIcon, Tooltip } from '@mui/material';
import DeleteIcon from "@mui/icons-material/Delete";
import { useDispatch, useSelector } from 'react-redux';
import { useNavigate } from 'react-router-dom';
import { deleteUser } from '../../../redux/userRelated/userHandle';
import { getAllSclasses } from '../../../redux/sclassRelated/sclassHandle';
import { BlueButton, GreenButton } from '../../../components/buttonStyles';
import TableTemplate from '../../../components/TableTemplate';
import SpeedDialIcon from '@mui/material/SpeedDialIcon';
import PostAddIcon from '@mui/icons-material/PostAdd';
import PersonAddAlt1Icon from '@mui/icons-material/PersonAddAlt1';
import AddCardIcon from '@mui/icons-material/AddCard';
import styled from 'styled-components';
import SpeedDialTemplate from '../../../components/SpeedDialTemplate';
import Popup from '../../../components/Popup';
const ShowClasses = () => {
const navigate = useNavigate()
const dispatch = useDispatch();
const { sclassesList, loading, error, getresponse } = useSelector((state) => state.sclass);
const { currentUser } = useSelector(state => state.user)
const adminID = currentUser._id
useEffect(() => {
dispatch(getAllSclasses(adminID, "Sclass"));
}, [adminID, dispatch]);
if (error) {
console.log(error)
}
const [showPopup, setShowPopup] = useState(false);
const [message, setMessage] = useState("");
const deleteHandler = (deleteID, address) => {
console.log(deleteID);
console.log(address);
setMessage("Sorry the delete function has been disabled for now.")
setShowPopup(true)
// dispatch(deleteUser(deleteID, address))
// .then(() => {
// dispatch(getAllSclasses(adminID, "Sclass"));
// })
}
const sclassColumns = [
{ id: 'name', label: 'Form Name', minWidth: 170 },
]
const sclassRows = sclassesList && sclassesList.length > 0 && sclassesList.map((sclass) => {
return {
name: sclass.sclassName,
id: sclass._id,
};
})
const SclassButtonHaver = ({ row }) => {
const actions = [
{ icon: <PostAddIcon />, name: 'Add Subjects', action: () => navigate("/Admin/addsubject/" + row.id) },
{ icon: <PersonAddAlt1Icon />, name: 'Add Student', action: () => navigate("/Admin/class/addstudents/" + row.id) },
];
return (
<ButtonContainer>
<IconButton onClick={() => deleteHandler(row.id, "Sclass")} color="secondary">
<DeleteIcon color="error" />
</IconButton>
<BlueButton variant="contained"
onClick={() => navigate("/Admin/classes/class/" + row.id)}>
View
</BlueButton>
<ActionMenu actions={actions} />
</ButtonContainer>
);
};
const ActionMenu = ({ actions }) => {
const [anchorEl, setAnchorEl] = useState(null);
const open = Boolean(anchorEl);
const handleClick = (event) => {
setAnchorEl(event.currentTarget);
};
const handleClose = () => {
setAnchorEl(null);
};
return (
<>
<Box sx={{ display: 'flex', alignItems: 'center', textAlign: 'center' }}>
<Tooltip title="Add Students & Subjects">
<IconButton
onClick={handleClick}
size="small"
sx={{ ml: 2 }}
aria-controls={open ? 'account-menu' : undefined}
aria-haspopup="true"
aria-expanded={open ? 'true' : undefined}
>
<h5>Add</h5>
<SpeedDialIcon />
</IconButton>
</Tooltip>
</Box>
<Menu
anchorEl={anchorEl}
id="account-menu"
open={open}
onClose={handleClose}
onClick={handleClose}
PaperProps={{
elevation: 0,
sx: styles.styledPaper,
}}
transformOrigin={{ horizontal: 'right', vertical: 'top' }}
anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}
>
{actions.map((action) => (
<MenuItem onClick={action.action}>
<ListItemIcon fontSize="small">
{action.icon}
</ListItemIcon>
{action.name}
</MenuItem>
))}
</Menu>
</>
);
}
const actions = [
{
icon: <AddCardIcon color="primary" />, name: 'Add New Class',
action: () => navigate("/Admin/addclass")
},
{
icon: <DeleteIcon color="error" />, name: 'Delete All Classes',
action: () => deleteHandler(adminID, "Sclasses")
},
];
return (
<>
{loading ?
<div>Loading...</div>
:
<>
{getresponse ?
<Box sx={{ display: 'flex', justifyContent: 'flex-end', marginTop: '16px' }}>
<GreenButton variant="contained" onClick={() => navigate("/Admin/addclass")}>
Add Form Type
</GreenButton>
</Box>
:
<>
{Array.isArray(sclassesList) && sclassesList.length > 0 &&
<TableTemplate buttonHaver={SclassButtonHaver} columns={sclassColumns} rows={sclassRows} />
}
<SpeedDialTemplate actions={actions} />
</>}
</>
}
<Popup message={message} setShowPopup={setShowPopup} showPopup={showPopup} />
</>
);
};
export default ShowClasses;
const styles = {
styledPaper: {
overflow: 'visible',
filter: 'drop-shadow(0px 2px 8px rgba(0,0,0,0.32))',
mt: 1.5,
'& .MuiAvatar-root': {
width: 32,
height: 32,
ml: -0.5,
mr: 1,
},
'&:before': {
content: '""',
display: 'block',
position: 'absolute',
top: 0,
right: 14,
width: 10,
height: 10,
bgcolor: 'background.paper',
transform: 'translateY(-50%) rotate(45deg)',
zIndex: 0,
},
}
}
const ButtonContainer = styled.div`
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
`; on pressig view button i wanted to opena pdf whose path i will provode ASSISTANT
To open a PDF document when the "View" button is clicked in your `ShowClasses` component, you can modify the `SclassButtonHaver` function to open the PDF in a new tab or window with a specified path. Here’s how to implement that:
### Step-by-Step Implementation
1. **Modify the `SclassButtonHaver` Function**: Update the `View` button to navigate to a PDF file path. You will define the path based on the `row.id` or any other relevant identifier.
2. **Define the PDF Path**: In this example, I’ll use a placeholder URL. You can replace it with your actual PDF path.
### Updated Code Snippet
Here’s how to adjust your `ShowClasses` component:
```javascript
const SclassButtonHaver = ({ row }) => {
const actions = [
{ icon: <PostAddIcon />, name: 'Add Subjects', action: () => navigate("/Admin/addsubject/" + row.id) },
{ icon: <PersonAddAlt1Icon />, name: 'Add Student', action: () => navigate("/Admin/class/addstudents/" + row.id) },
];
return (
<ButtonContainer>
<IconButton onClick={() => deleteHandler(row.id, "Sclass")} color="secondary">
<DeleteIcon color="error" />
</IconButton>
<BlueButton
variant="contained"
onClick={() => {
// Replace 'PDF_PATH' with your actual PDF file path or URL.
const pdfPath = `http://example.com/path/to/pdf/${row.id}.pdf`; // Adjust as necessary
window.open(pdfPath, '_blank'); // Opens the PDF in a new tab
}}>
View
</BlueButton>
<ActionMenu actions={actions} />
</ButtonContainer>
);
};
```
### Explanation of Changes:
- **`onClick` Event**: The `onClick` handler for the `View` button uses `window.open()` to open the PDF located at the provided path in a new tab.
- **Dynamic URL**: In this case, `pdfPath` is constructed to be a URL, and you can adjust it to point to any URL structure that fits your server setup or storage system. You can dynamically generate the URL based on the `row.id` or any other relevant data.
### Notes:
- **Security Caution**: When using `window.open()`, ensure that the URL is trusted to avoid potential security issues.
- **Handling PDF Path**: If the PDF path is stored in your database or API, you might want to fetch it instead of hardcoding. Depending on your backend setup, consider fetching the PDF URL as part of the data in `sclassesList`.
### Complete Example
Below is the complete `ShowClasses` component with the updated `SclassButtonHaver` function:
```javascript
const ShowClasses = () => {
const navigate = useNavigate();
const dispatch = useDispatch();
const { sclassesList, loading, error, getresponse } = useSelector((state) => state.sclass);
const { currentUser } = useSelector(state => state.user);
const adminID = currentUser._id;
useEffect(() => {
dispatch(getAllSclasses(adminID, "Sclass"));
}, [adminID, dispatch]);
if (error) {
console.log(error);
}
const [showPopup, setShowPopup] = useState(false);
const [message, setMessage] = useState("");
const deleteHandler = (deleteID, address) => {
console.log(deleteID);
console.log(address);
setMessage("Sorry the delete function has been disabled for now.");
setShowPopup(true);
// dispatch(deleteUser(deleteID, address))
// .then(() => {
// dispatch(getAllSclasses(adminID, "Sclass"));
// })
}
const sclassColumns = [
{ id: 'name', label: 'Form Name', minWidth: 170 },
];
const sclassRows = sclassesList && sclassesList.length > 0 && sclassesList.map((sclass) => {
return {
name: sclass.sclassName,
id: sclass._id,
};
});
const SclassButtonHaver = ({ row }) => {
const actions = [
{ icon: <PostAddIcon />, name: 'Add Subjects', action: () => navigate("/Admin/addsubject/" + row.id) },
{ icon: <PersonAddAlt1Icon />, name: 'Add Student', action: () => navigate("/Admin/class/addstudents/" + row.id) },
];
return (
<ButtonContainer>
<IconButton onClick={() => deleteHandler(row.id, "Sclass")} color="secondary">
<DeleteIcon color="error" />
</IconButton>
<BlueButton
variant="contained"
onClick={() => {
const pdfPath = `http://example.com/path/to/pdf/${row.id}.pdf`; // Adjust accordingly
window.open(pdfPath, '_blank');
}}>
View
</BlueButton>
<ActionMenu actions={actions} />
</ButtonContainer>
);
};
const ActionMenu = ({ actions }) => {
const [anchorEl, setAnchorEl] = useState(null);
const open = Boolean(anchorEl);
const handleClick = (event) => {
setAnchorEl(event.currentTarget);
};
const handleClose = () => {
setAnchorEl(null);
};
return (
<>
<Box sx={{ display: 'flex', alignItems: 'center', textAlign: 'center' }}>
<Tooltip title="Add Students & Subjects">
<IconButton
onClick={handleClick}
size="small"
sx={{ ml: 2 }}
aria-controls={open ? 'account-menu' : undefined}
aria-haspopup="true"
aria-expanded={open ? 'true' : undefined}
>
<h5>Add</h5>
<SpeedDialIcon />
</IconButton>
</Tooltip>
</Box>
<Menu
anchorEl={anchorEl}
id="account-menu"
open={open}
onClose={handleClose}
onClick={handleClose}
PaperProps={{
elevation: 0,
sx: styles.styledPaper,
}}
transformOrigin={{ horizontal: 'right', vertical: 'top' }}
anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}
>
{actions.map((action) => (
<MenuItem onClick={action.action}>
<ListItemIcon fontSize="small">
{action.icon}
</ListItemIcon>
{action.name}
</MenuItem>
))}
</Menu>
</>
);
}
const actions = [
{
icon: <AddCardIcon color="primary" />, name: 'Add New Class',
action: () => navigate("/Admin/addclass")
},
{
icon: <DeleteIcon color="error" />, name: 'Delete All Classes',
action: () => deleteHandler(adminID, "Sclasses")
},
];
return (
<>
{loading ?
<div>Loading...</div>
:
<>
{getresponse ?
<Box sx={{ display: 'flex', justifyContent: 'flex-end', marginTop: '16px' }}>
<GreenButton variant="contained" onClick={() => navigate("/Admin/addclass")}>
Add Form Type
</GreenButton>
</Box>
:
<>
{Array.isArray(sclassesList) && sclassesList.length > 0 &&
<TableTemplate buttonHaver={SclassButtonHaver} columns={sclassColumns} rows={sclassRows} />
}
<SpeedDialTemplate actions={actions} />
</>}
</>
}
<Popup message={message} setShowPopup={setShowPopup} showPopup={showPopup} />
</>
);
};
export default ShowClasses;
const styles = {
styledPaper: {
overflow: 'visible',
filter: 'drop-shadow(0px 2px 8px rgba(0,0,0,0.32))',
mt: 1.5,
'& .MuiAvatar-root': {
width: 32,
height: 32,
ml: -0.5,
mr: 1,
},
'&:before': {
content: '""',
display: 'block',
position: 'absolute',
top: 0,
right: 14,
width: 10,
height: 10,
bgcolor: 'background.paper',
transform: 'translateY(-50%) rotate(45deg)',
zIndex: 0,
},
}
}
const ButtonContainer = styled.div`
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
`;
```
### Summary
With these changes, clicking the "View" button on a specific form will open a PDF document associated with that form in a new browser tab. Make sure to update the `pdfPath` variable with the correct path to match your application's needs.