diff --git a/client/src/components/admin_v2/Poll/PollDialogBox.js b/client/src/components/admin_v2/Poll/PollDialogBox.js new file mode 100644 index 00000000..8e988b40 --- /dev/null +++ b/client/src/components/admin_v2/Poll/PollDialogBox.js @@ -0,0 +1,152 @@ +import React, { useEffect, useState } from 'react'; +import { + Button, + Dialog, + DialogContent, + DialogTitle, + FormControl, + InputLabel, + MenuItem, + Select, + TextField, + Typography, +} from '@mui/material'; +import makeStyles from '@mui/styles/makeStyles'; + +const DialogPoll = ({ dialogBoxOpen, setDialogBoxOpen }) => { + const [value, setValue] = useState(0); + const [live, setLive] = useState('offline'); + const [Options, setOptions] = useState(''); + const DialogBoxClose = () => { + setDialogBoxOpen(false); + setValue(0); + setLive('offline'); + }; + const handleOptions = (e) => { + setOptions(e.target.value); + }; + const handleValue = (e) => { + setValue(e.target.value); + }; + const handleLive = () => { + setLive('Live'); + }; + const handleSave = () => { + DialogBoxClose(); + }; + const classes = useStyles(); + + return ( + <> + + + Create Poll + + {live === 'offline' ? ( + +
+ Question + +
+ + Options + + + {[...Array(value).keys()].map((num) => { + return ( +
+ handleOptions(e)} + key={num} + placeholder={`Poll Option ${num + 1}`} + variant='outlined' + margin='dense' + fullWidth + /> +
+ ); + })} +
+ ) : ( + + Poll Going Live + + )} + +
+ + +
+
+ + ); +}; +const useStyles = makeStyles((theme) => ({ + dialogTitle: { + textAlign: 'center', + }, + buttonBox: { + display: 'flex', + justifyContent: 'end', + }, + liveButton: { + width: '3rem', + margin: '1rem 1rem 1rem 0', + backgroundColor: 'green', + color: '#fff', + '&:hover': { + backgroundColor: '#f50057', + }, + }, + liveReturn: { + display: 'flex', + justifyContent: 'center', + alignItems: 'center', + height: '10rem', + width: '100%', + }, + questionInputField:{ + width: '100%', + marginBottom: '1rem ', + marginTop: '1rem' +})); +export default DialogPoll; diff --git a/client/src/pages/admin_v2/poll.jsx b/client/src/pages/admin_v2/poll.jsx new file mode 100644 index 00000000..737345d1 --- /dev/null +++ b/client/src/pages/admin_v2/poll.jsx @@ -0,0 +1,53 @@ +import React from 'react'; +import Poll from '../../screens/admin_v2/Poll'; +import getAccess from '../../utils/getAccess'; +import { parseCookies } from 'nookies'; +import { getGraphClient } from '../../context/ApolloContextProvider'; +import Custom500 from '../500.jsx'; + +const PollPage = ({ isError, PollList }) => { + if (isError) { + return ; + } + return ; +}; +export default PollPage; +export async function getServerSideProps(ctx) { + try { + const requiredPermissions = ['poll.write.restricted']; + const userPermissions = await getAccess({ ctx }); + + if (!userPermissions.data) { + return { + redirect: { + destination: '/', + permanent: false, + }, + }; + } + + const acsessPermitted = requiredPermissions.every((permission) => { + return userPermissions?.data?.includes(permission); + }); + + if (!acsessPermitted) { + return { + redirect: { + destination: '/', + permanent: false, + }, + }; + } + const cookies = parseCookies(ctx); + const graphClient = getGraphClient(false, cookies.firebaseToken); + return { + props: { userPermissions }, + }; + } catch { + return { + props: { + isError: true, + }, + }; + } +} diff --git a/client/src/screens/admin_v2/Poll.jsx b/client/src/screens/admin_v2/Poll.jsx new file mode 100644 index 00000000..9e2cf0f3 --- /dev/null +++ b/client/src/screens/admin_v2/Poll.jsx @@ -0,0 +1,77 @@ +import React, { useEffect, useState } from 'react'; +import Marginals from '../../components/admin_v2/Marginals/Marginals'; +//mui +import { styled } from '@mui/material/styles'; +import Table from '@mui/material/Table'; +import TableBody from '@mui/material/TableBody'; +import TableCell, { tableCellClasses } from '@mui/material/TableCell'; +import TableHead from '@mui/material/TableHead'; +import TableRow from '@mui/material/TableRow'; +import EditIcon from '@mui/icons-material/Edit'; +import DeleteIcon from '@mui/icons-material/Delete'; +import Button from '@mui/material/Button'; +import AddCircleOutlineIcon from '@mui/icons-material/AddCircleOutline'; +import DialogPoll from '../../components/admin_v2/Poll/PollDialogBox'; + +const StyledTableCell = styled(TableCell)(({ theme }) => ({ + [`&.${tableCellClasses.head}`]: { + backgroundColor: theme.palette.common.black, + color: theme.palette.common.white, + }, + [`&.${tableCellClasses.body}`]: { + fontSize: 13, + }, +})); + +const StyledTableRow = styled(TableRow)(({ theme }) => ({ + '&:nth-of-type(odd)': { + backgroundColor: theme.palette.action.hover, + }, + // hide last border + '&:last-child td, &:last-child th': { + border: 0, + }, +})); + +const Poll = ({ PollList }) => { + const [dialogBoxOpen, setDialogBoxOpen] = useState(false); + const handleDialogBoxOpen = () => setDialogBoxOpen(true); + return ( + <> +
+ + + + + + + Content + Date + Timer + Status + Edit + Delete + + + +
+ +
+
+ + ); +}; +export default Poll;