Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Center sessionIssue #PS-1317 fix: Add Planned Session modal online UI Implementation #371

Open
wants to merge 6 commits into
base: shiksha-2.0
Choose a base branch
from
Open

Center sessionIssue #PS-1317 fix: Add Planned Session modal online UI Implementation #371

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
2931fcb
Issue #PS-1344 fix: Center Sessions UI Implementation
shreyas143shinde Jul 12, 2024
2ca13cc
Issue #PS-1344 fix: Center Sessions UI Implementation
shreyas143shinde Jul 12, 2024
ad02ade
Issue #PS-1344 fix: Center Sessions UI Implementation
shreyas143shinde Jul 15, 2024
6bd7793
Issue #PS-1344 fix: Center Sessions UI Implementation
shreyas143shinde Jul 15, 2024
7a85813
Issue #PS-1344 fix: Center Sessions UI Implementation
shreyas143shinde Jul 15, 2024
746ebcb
Issue #PS-1344 fix: Center Sessions UI Implementation
shreyas143shinde Jul 15, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added src/assets/images/Facilitators.png
View file
Open in desktop
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@shreyas1434shinde rename filename

Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
99 changes: 99 additions & 0 deletions src/components/CenterSessionModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,99 @@
import Box from '@mui/material/Box';
import Button from '@mui/material/Button';
import CloseIcon from '@mui/icons-material/Close';
import { Divider } from '@mui/material';
import Modal from '@mui/material/Modal';
import React from 'react';
import { SessionsModalProps } from '@/utils/Interfaces';
import Typography from '@mui/material/Typography';
import { useTheme } from '@mui/material/styles';
import { useTranslation } from 'react-i18next';

const CenterSessionModal: React.FC<SessionsModalProps> = ({
children,
open,
handleClose,
title,
primary,
}) => {
const style = {
position: 'absolute',
top: '50%',
left: '50%',
transform: 'translate(-50%, -50%)',
width: '75%',
bgcolor: '#fff',
boxShadow: 24,
borderRadius: '16px',
'@media (min-width: 600px)': {
width: '450px',
},
};

const theme = useTheme();
const { t } = useTranslation();

return (
<>
<div>
<Modal
open={open}
onClose={handleClose}
aria-labelledby="modal-modal-title"
aria-describedby="modal-modal-description"
>
<Box sx={style}>
<Box
display={'flex'}
justifyContent={'space-between'}
sx={{ padding: '18px 16px' }}
>
<Box marginBottom={0}>
<Typography
variant="h2"
sx={{
color: '#4D4639',
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@shreyas1434shinde take colors from the theme

fontSize: '14px',
}}
component="h2"
>
{title}
</Typography>
</Box>
<CloseIcon
onClick={handleClose}
sx={{
cursor: 'pointer',
color: '#4D4639',
}}
/>
</Box>
<Divider />
{children}
<Divider />
<Box sx={{ padding: '20px 16px' }}>
<Button
variant="contained"
color="primary"
sx={{
'&.Mui-disabled': {
backgroundColor: theme?.palette?.primary?.main,
},
minWidth: '84px',
height: '2.5rem',
padding: theme.spacing(1),
fontWeight: '500',
width: '100%',
}}
>
{primary}
</Button>
</Box>
</Box>
</Modal>
</div>
</>
);
};

export default CenterSessionModal;
43 changes: 43 additions & 0 deletions src/components/DeleteSession.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
import {
Box,
FormControl,
FormControlLabel,
FormLabel,
Radio,
RadioGroup,
} from '@mui/material';

import React from 'react';

const DeleteSession = () => {
return (
<>
<Box sx={{ padding: '8px 16px' }}>
<Box
sx={{
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
mt: 2,
}}
>
<Box>This session</Box>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@shreyas1434shinde add translation and colors from the theme

<Radio style={{ color: '#1F1B13' }} />
</Box>
<Box
sx={{
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
my: 2,
}}
>
<Box>This and following sessions</Box>
<Radio style={{ color: '#1F1B13' }} />
</Box>
</Box>
</>
);
};

export default DeleteSession;
230 changes: 230 additions & 0 deletions src/components/PlannedSession.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,230 @@
import {
Box,
Button,
Divider,
FormControl,
FormControlLabel,
FormLabel,
Grid,
InputLabel,
MenuItem,
Radio,
RadioGroup,
Select,
} from '@mui/material';
import { ChangeEvent, useState } from 'react';

import AddIcon from '@mui/icons-material/Add';
import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
import { useTheme } from '@mui/material/styles';
import { useTranslation } from 'next-i18next';

const PlannedSession = () => {
const [sessionMode, setSessionMode] = useState('Offline');

const handleSessionModeChange = (event: ChangeEvent<HTMLInputElement>) => {
setSessionMode(event.target.value);
};

const { t } = useTranslation();
const theme = useTheme<any>();

return (
<>
<Box sx={{ padding: '10px 16px' }}>
<Box>
<FormControl>
<FormLabel
id="demo-row-radio-buttons-group-label"
style={{ color: '#1F1B13' }}
>
Mode of Session
</FormLabel>
<RadioGroup
row
aria-labelledby="demo-row-radio-buttons-group-label"
name="row-radio-buttons-group"
value={sessionMode}
onChange={handleSessionModeChange}
>
<FormControlLabel
value="Offline"
control={<Radio style={{ color: '#1F1B13' }} />}
label={<span style={{ color: '#1F1B13' }}>Offline</span>}
/>
<FormControlLabel
value="Online"
control={<Radio style={{ color: '#1F1B13' }} />}
label={<span style={{ color: '#1F1B13' }}>Online</span>}
/>
</RadioGroup>
</FormControl>
</Box>

<Box sx={{ mt: 2 }}>
<FormControl fullWidth>
<InputLabel id="demo-simple-select-label">Subject</InputLabel>
<Select
labelId="demo-simple-select-label"
id="demo-simple-select"
label="Subject"
>
<MenuItem value={'Mathematics'}>Mathematics</MenuItem>
</Select>
</FormControl>
</Box>

{sessionMode === 'Online' && (
shreyas1434shinde marked this conversation as resolved.
Show resolved Hide resolved
<>
<Box sx={{ mt: 2 }}>
<FormControl fullWidth>
<InputLabel id="demo-simple-select-label">
Meeting Link
</InputLabel>
<Select
labelId="demo-simple-select-label"
id="demo-simple-select"
label="Meeting Link"
>
<MenuItem value={'Link1'}>Link 1</MenuItem>
</Select>
</FormControl>
</Box>
<Box sx={{ mt: 2 }}>
<FormControl fullWidth>
<InputLabel id="demo-simple-select-label">
Meeting Passcode (if applicable)
</InputLabel>
<Select
labelId="demo-simple-select-label"
id="demo-simple-select"
label="Meeting Passcode"
>
<MenuItem value={'Passcode1'}>Passcode 1</MenuItem>
</Select>
</FormControl>
</Box>
</>
)}

<Box sx={{ mt: 2 }}>
<Grid container spacing={2}>
<Grid sx={{ paddingTop: '0px !important' }} item xs={6}>
<Box sx={{ mt: 2 }}>
<FormControl fullWidth>
<InputLabel id="demo-simple-select-label">
Start Time
</InputLabel>
<Select
labelId="demo-simple-select-label"
id="demo-simple-select"
label="Start Time"
>
<MenuItem value={'Time1'}>Time 1</MenuItem>
</Select>
</FormControl>
</Box>
</Grid>
<Grid sx={{ paddingTop: '0px !important' }} item xs={6}>
<Box sx={{ my: 2 }}>
<FormControl fullWidth>
<InputLabel id="demo-simple-select-label">
End Time
</InputLabel>
<Select
labelId="demo-simple-select-label"
id="demo-simple-select"
label="End Time"
>
<MenuItem value={'Time2'}>Time 2</MenuItem>
</Select>
</FormControl>
</Box>
</Grid>
</Grid>
</Box>

<Box sx={{ mt: 2 }}>
<Grid container spacing={2}>
<Grid sx={{ paddingTop: '0px !important' }} item xs={6}>
<Box>
<FormControl fullWidth>
<InputLabel id="demo-simple-select-label">
Start Date
</InputLabel>
<Select
labelId="demo-simple-select-label"
id="demo-simple-select"
label="Start Date"
>
<MenuItem value={'Date1'}>Date 1</MenuItem>
</Select>
</FormControl>
</Box>
</Grid>
<Grid sx={{ paddingTop: '0px !important' }} item xs={6}>
<Box>
<FormControl fullWidth>
<InputLabel id="demo-simple-select-label">
End Date
</InputLabel>
<Select
labelId="demo-simple-select-label"
id="demo-simple-select"
label="End Date"
>
<MenuItem value={'Date2'}>Date 2</MenuItem>
</Select>
</FormControl>
</Box>
</Grid>
</Grid>
</Box>

<Box
sx={{
display: 'flex',
gap: '5px',
mt: 2,
alignItems: 'center',
}}
>
<Box
sx={{
fontSize: '14px',
color: '#0D599E',
fontWeight: '500',
}}
>
Remove this session
</Box>
<DeleteOutlineIcon sx={{ fontSize: '18px', color: '#BA1A1A' }} />
</Box>

<Box sx={{ mt: 2 }}>
<Divider />
</Box>

<Divider />

<Box mt={2.5} mb={2}>
<Button
sx={{
border: `1px solid ${theme.palette.error.contrastText}`,
borderRadius: '100px',
height: '40px',
width: '163px',
color: theme.palette.error.contrastText,
}}
className="text-1E"
endIcon={<AddIcon />}
>
{t('COMMON.SCHEDULE_NEW')}
</Button>
</Box>
</Box>
</>
);
};

export default PlannedSession;
Loading