Skip to content

Commit

Permalink
Table data
Browse files Browse the repository at this point in the history
  • Loading branch information
@aju-alen
aju-alen committed Oct 21, 2024
1 parent 3a65acd commit ac1115d
Showing 1 changed file with 95 additions and 25 deletions.
120 changes: 95 additions & 25 deletions client/src/components/MySurvery.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,9 @@ import TableHead from '@mui/material/TableHead';
import TableRow from '@mui/material/TableRow';
import Paper from '@mui/material/Paper';
import Container from '@mui/material/Container';
import InputLabel from '@mui/material/InputLabel';
import FormControl from '@mui/material/FormControl';
import Select from '@mui/material/Select';
import CssBaseline from '@mui/material/CssBaseline';
import excelIcon from '../assets/icons/excel.svg';
import Box from '@mui/material/Box';
Expand All @@ -25,23 +28,51 @@ import DialogContentText from '@mui/material/DialogContentText';
import DialogTitle from '@mui/material/DialogTitle';
import HighlightOffIcon from '@mui/icons-material/HighlightOff';
import Typography from '@mui/material/Typography';
import Menu from '@mui/material/Menu';
import MenuItem from '@mui/material/MenuItem';
import MoreVertIcon from '@mui/icons-material/MoreVert';

export function MySurvey({ userSurveyData, isSubscribed }) {
export function MySurvey({ userSurveyData, isSubscribed, onDeleteSurvey }) {
console.log(userSurveyData,'--userSurveyData--');

const navigate = useNavigate();
dayjs.extend(relativeTime);

const [open, setOpen] = React.useState(false);
const [deleteOpen, setDeleteOpen] = React.useState(false);
const [surveyId, setSurveyId] = React.useState('');

const [anchorEl, setAnchorEl] = React.useState(null);

const [surveyURLStatus, setSurveyURLStatus] = React.useState('');

const handleChangeSelect = async(event,surveyId) => {
const updateSurveyStatus = await axiosWithAuth.put(`${backendUrl}/api/survey/update-survey-status/${surveyId}`,{surveyStatus:event.target.value});

console.log(event.target.value);

};
const openMenu = Boolean(anchorEl);
const handleClickMenu = (event,surveyId) => {
setSurveyId(surveyId);


setAnchorEl(event.currentTarget);
};
const handleCloseMenu = () => {
setAnchorEl(null);
};

const handleClickOpen = (surveyId) => {
setSurveyId(surveyId);
setOpen(true);
handleCloseMenu();
};

const handleDeleteOpen = (surveyId) => {
setSurveyId(surveyId);
setDeleteOpen(true);
handleCloseMenu();
};

const handleClose = () => {
Expand All @@ -55,6 +86,7 @@ export function MySurvey({ userSurveyData, isSubscribed }) {
const deleteSurvey = await axiosWithAuth.delete(`${backendUrl}/api/survey/delete-survey/${surveyId}`);
console.log('delete survey', deleteSurvey);
setDeleteOpen(false);
onDeleteSurvey(surveyId);
} catch (err) {
if (err.response.status === 401) {
console.log('unauthorized');
Expand All @@ -71,10 +103,12 @@ export function MySurvey({ userSurveyData, isSubscribed }) {
try {
await refreshToken();
const getAllUserResponse = await axiosWithAuth.get(`${backendUrl}/api/survey/get-all-user-response/${surveyId}/${isSubscribed}`);
console.log(getAllUserResponse.data,'--getAllUserResponse--');
if (getAllUserResponse.data.length === 0) {
alert('No response available for this survey');
return;
}

const response = await axiosWithAuth.post(`${backendUrl}/api/excel/export-to-excel`, getAllUserResponse.data, {
responseType: 'blob'
});
Expand Down Expand Up @@ -111,8 +145,8 @@ export function MySurvey({ userSurveyData, isSubscribed }) {
<TableCell align="center" sx={{ fontWeight: 'bold' }}>Modified At</TableCell>
<TableCell align="center" sx={{ fontWeight: 'bold' }}>Status</TableCell>
<TableCell align="center" sx={{ fontWeight: 'bold' }}>Response</TableCell>
<TableCell align="center" sx={{ fontWeight: 'bold' }}>Export to Excel</TableCell>
<TableCell align="center" sx={{ fontWeight: 'bold' }}>Delete Survey</TableCell>

<TableCell align="center" sx={{ fontWeight: 'bold' }}>Action</TableCell>
</TableRow>
</TableHead>
<TableBody>
Expand All @@ -130,47 +164,83 @@ export function MySurvey({ userSurveyData, isSubscribed }) {
</TableCell>
<TableCell align="center">{dayjs(survey.createdAt).fromNow()}</TableCell>
<TableCell align="center">{dayjs(survey.updatedAt).fromNow()}</TableCell>
<TableCell align="center">{survey.surveyStatus}</TableCell>
<TableCell align="center">
<Select
labelId="demo-simple-select-label"
id="demo-simple-select"
value={survey.surveyStatus}
label="Age"
onChange={(event)=>handleChangeSelect(event,survey.id)}
variant='standard'
>
<MenuItem value={'Active'}>Active</MenuItem>
<MenuItem value={'Disable'}>Disable</MenuItem>
<MenuItem value={'Draft'}>Draft</MenuItem>
</Select>
</TableCell>
<TableCell align="center">{survey.surveyResponses}</TableCell>



<TableCell align="center">
<Button onClick={() => handleClickOpen(survey.id)}>
<img src={excelIcon} alt="excel icon" style={{ width: 70 }} />
</Button>
<Dialog open={open} onClose={handleClose}>
<DialogTitle>{"Export User Responses"}</DialogTitle>
<Button
id="basic-button"
aria-controls={openMenu ? 'basic-menu' : undefined}
aria-haspopup="true"
aria-expanded={openMenu ? 'true' : undefined}
onClick={(event)=>handleClickMenu(event,survey.id)}
>
<MoreVertIcon color='warning' />
</Button>
<Menu
id="basic-menu"
anchorEl={anchorEl}
open={openMenu}
onClose={handleCloseMenu}
MenuListProps={{
'aria-labelledby': 'basic-button',
}}
>
<MenuItem onClick={() => handleDeleteOpen(surveyId)}>Delete</MenuItem>
<MenuItem onClick={() => handleClickOpen(surveyId)}>Export to Excel</MenuItem>
</Menu>
<Dialog open={deleteOpen} onClose={handleClose}>
<DialogTitle>{"Are you sure you want to delete this survey?"}</DialogTitle>
<DialogContent>
<DialogContentText>
Display as Answers - This will show user responses as answers in the Excel sheet.
If you delete this survey, all data including participant responses will be lost.
</DialogContentText>
</DialogContent>
<DialogActions>
<Button onClick={() => handleConvertToExcelAnswer(surveyId)} color="primary">
Display as Answers
</Button>
<Button onClick={handleClose} color="secondary">
<Button
onClick={() => {
const confirmed = window.confirm("Are you sure you want to delete this survey?");
if (confirmed) {
handleDeleteSurvey(surveyId);
}
}}
color="error"
>
Delete
</Button>
<Button onClick={handleClose} variant="contained">
Cancel
</Button>
</DialogActions>
</Dialog>
</TableCell>

<TableCell align="center">
<Button onClick={() => handleDeleteOpen(survey.id)}>
<HighlightOffIcon color="error" />
</Button>
<Dialog open={deleteOpen} onClose={handleClose}>
<DialogTitle>{"Are you sure you want to delete this survey?"}</DialogTitle>
<Dialog open={open} onClose={handleClose}>
<DialogTitle>{"Export User Responses"}</DialogTitle>
<DialogContent>
<DialogContentText>
If you delete this survey, all data including participant responses will be lost.
Display as Answers - This will show user responses as answers in the Excel sheet.
</DialogContentText>
</DialogContent>
<DialogActions>
<Button onClick={() => handleDeleteSurvey(surveyId)} color="error">
Confirm Delete
<Button onClick={() => handleConvertToExcelAnswer(surveyId)} color="primary">
Display as Answers
</Button>
<Button onClick={handleClose} variant="contained">
<Button onClick={handleClose} color="secondary">
Cancel
</Button>
</DialogActions>
Expand Down

0 comments on commit ac1115d

Please sign in to comment.