525 lines
20 KiB
JavaScript
525 lines
20 KiB
JavaScript
import { useState } from 'react';
|
|
import {
|
|
Button,
|
|
Card,
|
|
Container,
|
|
Grid,
|
|
IconButton,
|
|
Link,
|
|
Menu,
|
|
MenuItem,
|
|
Skeleton,
|
|
Stack,
|
|
TextField,
|
|
Tooltip,
|
|
Typography,
|
|
} from '@mui/material';
|
|
import MoreVertIcon from '@mui/icons-material/MoreVert';
|
|
import AnnouncementCard from '../../../../components/AnnouncementCard';
|
|
import PublishAnnouncementCard from '../../../../components/PublishAnnouncementCard';
|
|
import FormDialog from '../../../../components/FormDialog';
|
|
|
|
import styles from './styles';
|
|
import jitsiLogo from '../../../../assets/jitsi.svg';
|
|
import { createArrayFrom1ToN } from '../../../../utils/createArrayFrom1ToN';
|
|
|
|
function AnnouncementsTab({
|
|
layoutType,
|
|
announcementsTabData,
|
|
classroom,
|
|
onChangeEditInput,
|
|
onSaveEditChanges,
|
|
user,
|
|
}) {
|
|
const [anchorEl, setAnchorEl] = useState({
|
|
virtualRoom: null,
|
|
appointmentSlots: null,
|
|
});
|
|
const [dialogOpened, setDialogOpened] = useState(null);
|
|
const [composingTextValue, setComposingTextValue] = useState('');
|
|
const { container, emptyStateContainer } = styles[layoutType];
|
|
|
|
const onSaveEdit = anchorName => {
|
|
onSaveEditChanges();
|
|
setDialogOpened(null);
|
|
setAnchorEl({ ...anchorEl, [anchorName]: null });
|
|
};
|
|
|
|
const onDismissEdit = anchorName => {
|
|
setDialogOpened(null);
|
|
setAnchorEl({ ...anchorEl, [anchorName]: null });
|
|
};
|
|
|
|
const layoutResolver = (state, layoutType) => {
|
|
if (layoutType === 'desktop') {
|
|
switch (state) {
|
|
case 'loading':
|
|
return (
|
|
<Grid sx={container} container spacing={2}>
|
|
<Grid sx={{ padding: '0 !important' }} item xs={4}>
|
|
{createArrayFrom1ToN(3).map(i => (
|
|
<Skeleton
|
|
key={i}
|
|
variant="rectangular"
|
|
width="100%"
|
|
height={200}
|
|
sx={{ marginBottom: '30px' }}
|
|
/>
|
|
))}
|
|
</Grid>
|
|
<Grid sx={{ paddingTop: '0 !important' }} item xs={8}>
|
|
{createArrayFrom1ToN(4).map(i => (
|
|
<Skeleton
|
|
key={i}
|
|
variant="rectangular"
|
|
width="100%"
|
|
height={250}
|
|
sx={{ marginBottom: '30px' }}
|
|
/>
|
|
))}
|
|
</Grid>
|
|
</Grid>
|
|
);
|
|
|
|
case 'idle':
|
|
return (
|
|
<Grid sx={container} container spacing={2}>
|
|
<Grid sx={{ padding: '0 !important' }} item xs={4}>
|
|
<Stack gap="30px">
|
|
<Card
|
|
sx={{ width: '100%', padding: '20px', paddingTop: '10px' }}
|
|
elevation={4}
|
|
variant="elevation"
|
|
>
|
|
<Stack justifyContent="flex-start" spacing={1}>
|
|
<Container
|
|
disableGutters
|
|
sx={{
|
|
display: 'flex',
|
|
justifyContent: 'space-between',
|
|
}}
|
|
>
|
|
<Stack direction="row">
|
|
<img src={jitsiLogo} alt="Jitsi Meet" />
|
|
<h3 style={{ fontWeight: 500 }}>
|
|
Sala de aula virtual
|
|
</h3>
|
|
</Stack>
|
|
|
|
<Tooltip title="Opcoes">
|
|
<IconButton
|
|
onClick={e =>
|
|
setAnchorEl({
|
|
...anchorEl,
|
|
virtualRoom: e.currentTarget,
|
|
})
|
|
}
|
|
aria-label="edit"
|
|
size="medium"
|
|
>
|
|
<MoreVertIcon fontSize="inherit" />
|
|
</IconButton>
|
|
</Tooltip>
|
|
<Menu
|
|
id="menu-appbar-virtual-room"
|
|
anchorEl={anchorEl.virtualRoom}
|
|
anchorOrigin={{
|
|
vertical: 'bottom',
|
|
horizontal: 'right',
|
|
}}
|
|
transformOrigin={{
|
|
vertical: 'top',
|
|
horizontal: 'right',
|
|
}}
|
|
open={Boolean(anchorEl.virtualRoom)}
|
|
onClose={() =>
|
|
setAnchorEl({ ...anchorEl, virtualRoom: null })
|
|
}
|
|
>
|
|
<MenuItem
|
|
onClick={() => setDialogOpened('virtualRoom')}
|
|
>
|
|
<Typography textAlign="center">Editar</Typography>
|
|
</MenuItem>
|
|
</Menu>
|
|
<FormDialog
|
|
isOpened={dialogOpened === 'virtualRoom'}
|
|
title="Alterar url da sala de aula virtual"
|
|
contentText="Edite o campo abaixo para alterar a url da sua sala de aula virtual."
|
|
inputs={[
|
|
<TextField
|
|
autoFocus
|
|
margin="dense"
|
|
name="virtualRoom"
|
|
type="text"
|
|
value={classroom.virtualRoom}
|
|
onChange={onChangeEditInput}
|
|
fullWidth
|
|
variant="standard"
|
|
/>,
|
|
]}
|
|
onDismiss={() => onDismissEdit('virtualRoom')}
|
|
onSave={() => onSaveEdit('virtualRoom')}
|
|
/>
|
|
</Container>
|
|
|
|
<Button
|
|
sx={{ marginTop: '15px' }}
|
|
variant="contained"
|
|
href={classroom.virtualRoom}
|
|
target="__blank"
|
|
>
|
|
Iniciar aula
|
|
</Button>
|
|
</Stack>
|
|
</Card>
|
|
<Card
|
|
sx={{ width: '100%', padding: '20px', paddingTop: '10px' }}
|
|
elevation={4}
|
|
variant="elevation"
|
|
>
|
|
<Stack justifyContent="flex-start" spacing={1}>
|
|
<h3 style={{ fontWeight: 500 }}>Próximas Atividades</h3>
|
|
{announcementsTabData.upcomingAssignments.length !== 0 ? (
|
|
announcementsTabData.upcomingAssignments.map(ua => (
|
|
<Link
|
|
href={`/assignment/${ua.id}`}
|
|
sx={{ fontSize: '15px' }}
|
|
key={ua.id}
|
|
>
|
|
{ua.title}
|
|
</Link>
|
|
))
|
|
) : (
|
|
<Container disableGutters>
|
|
<p>Nenhuma atividade encontrada!</p>
|
|
</Container>
|
|
)}
|
|
</Stack>
|
|
</Card>
|
|
<Card
|
|
sx={{ width: '100%', padding: '20px', paddingTop: '10px' }}
|
|
elevation={4}
|
|
variant="elevation"
|
|
>
|
|
<Stack justifyContent="flex-start" spacing={1}>
|
|
<Container
|
|
disableGutters
|
|
sx={{
|
|
display: 'flex',
|
|
justifyContent: 'space-between',
|
|
}}
|
|
>
|
|
<h3 style={{ fontWeight: 500 }}>
|
|
Horários de Atendimento
|
|
</h3>
|
|
<Tooltip title="Opcoes">
|
|
<IconButton
|
|
onClick={e =>
|
|
setAnchorEl({
|
|
...anchorEl,
|
|
appointmentSlots: e.currentTarget,
|
|
})
|
|
}
|
|
aria-label="edit"
|
|
size="medium"
|
|
>
|
|
<MoreVertIcon fontSize="inherit" />
|
|
</IconButton>
|
|
</Tooltip>
|
|
<Menu
|
|
id="menu-appbar-appointment-slots"
|
|
anchorEl={anchorEl.appointmentSlots}
|
|
anchorOrigin={{
|
|
vertical: 'bottom',
|
|
horizontal: 'right',
|
|
}}
|
|
transformOrigin={{
|
|
vertical: 'top',
|
|
horizontal: 'right',
|
|
}}
|
|
open={Boolean(anchorEl.appointmentSlots)}
|
|
onClose={() =>
|
|
setAnchorEl({ ...anchorEl, appointmentSlots: null })
|
|
}
|
|
>
|
|
<MenuItem
|
|
onClick={() => setDialogOpened('appointmentSlots')}
|
|
>
|
|
<Typography textAlign="center">Editar</Typography>
|
|
</MenuItem>
|
|
</Menu>
|
|
<FormDialog
|
|
isOpened={dialogOpened === 'appointmentSlots'}
|
|
title="Alterar horarios de atendimento"
|
|
contentText="Edite os campos abaixo para alterar os horarios de atendimento da disciplina."
|
|
inputs={[
|
|
classroom.appointmentSlots.map((appts, index) => (
|
|
<TextField
|
|
key={index}
|
|
autoFocus
|
|
margin="dense"
|
|
name={index}
|
|
type="text"
|
|
value={`${appts.weekDay}, ${appts.start}h - ${appts.end}h`}
|
|
onChange={onChangeEditInput}
|
|
fullWidth
|
|
variant="standard"
|
|
/>
|
|
)),
|
|
]}
|
|
onDismiss={() => onDismissEdit('appointmentSlots')}
|
|
onSave={() => onSaveEdit('appointmentSlots')}
|
|
/>
|
|
</Container>
|
|
{classroom.appointmentSlots.map((appts, index) => (
|
|
<Typography key={index} variant="body1">
|
|
{appts.weekDay}, {appts.start}h - {appts.end}h
|
|
</Typography>
|
|
))}
|
|
</Stack>
|
|
</Card>
|
|
</Stack>
|
|
</Grid>
|
|
<Grid sx={{ paddingTop: '0 !important' }} item xs={8}>
|
|
<Stack
|
|
sx={{ width: '100%', paddingTop: 0 }}
|
|
alignItems="center"
|
|
justifyContent="center"
|
|
flexWrap="wrap"
|
|
direction="row"
|
|
gap="30px"
|
|
>
|
|
<PublishAnnouncementCard
|
|
layoutType={layoutType}
|
|
user={user}
|
|
value={composingTextValue}
|
|
onChange={e => setComposingTextValue(e.target.value)}
|
|
/>
|
|
{announcementsTabData.announcements.length !== 0 ? (
|
|
announcementsTabData.announcements.map(announcement => (
|
|
<AnnouncementCard
|
|
key={announcement.id}
|
|
announcement={announcement}
|
|
/>
|
|
))
|
|
) : (
|
|
<Container sx={emptyStateContainer} disableGutters>
|
|
<p>Nenhum comunicado encontrado!</p>
|
|
</Container>
|
|
)}
|
|
</Stack>
|
|
</Grid>
|
|
</Grid>
|
|
);
|
|
|
|
case 'gone':
|
|
return null;
|
|
|
|
default:
|
|
return null;
|
|
}
|
|
} else if (layoutType === 'mobile') {
|
|
switch (state) {
|
|
case 'loading':
|
|
return (
|
|
<Stack
|
|
alignItems="center"
|
|
justifyContent="center"
|
|
flexWrap="wrap"
|
|
direction="row"
|
|
gap="30px"
|
|
sx={{ marginTop: '30px' }}
|
|
>
|
|
{createArrayFrom1ToN(3).map(i => (
|
|
<Skeleton
|
|
key={i}
|
|
variant="rectangular"
|
|
width="100%"
|
|
height={200}
|
|
sx={{ marginBottom: '30px' }}
|
|
/>
|
|
))}
|
|
{createArrayFrom1ToN(4).map(i => (
|
|
<Skeleton
|
|
key={i}
|
|
variant="rectangular"
|
|
width="100%"
|
|
height={250}
|
|
sx={{ marginBottom: '30px' }}
|
|
/>
|
|
))}
|
|
</Stack>
|
|
);
|
|
|
|
case 'idle':
|
|
return (
|
|
<Stack
|
|
alignItems="center"
|
|
justifyContent="center"
|
|
flexWrap="wrap"
|
|
direction="row"
|
|
gap="30px"
|
|
sx={{ marginTop: '30px' }}
|
|
>
|
|
<Stack gap="30px" sx={{ width: '100%' }}>
|
|
<Card
|
|
sx={{ width: '100%', padding: '20px', paddingTop: '10px' }}
|
|
elevation={4}
|
|
variant="elevation"
|
|
>
|
|
<Stack justifyContent="flex-start" spacing={1}>
|
|
<Container
|
|
disableGutters
|
|
sx={{ display: 'flex', justifyContent: 'space-between' }}
|
|
>
|
|
<Stack direction="row">
|
|
<img src={jitsiLogo} alt="Jitsi Meet" />
|
|
<h3 style={{ fontWeight: 500 }}>
|
|
Sala de aula virtual
|
|
</h3>
|
|
</Stack>
|
|
<Tooltip title="Opcoes">
|
|
<IconButton
|
|
onClick={e => setAnchorEl(e.currentTarget)}
|
|
aria-label="edit"
|
|
size="medium"
|
|
>
|
|
<MoreVertIcon fontSize="inherit" />
|
|
</IconButton>
|
|
</Tooltip>
|
|
<Menu
|
|
id="menu-appbar"
|
|
anchorEl={anchorEl}
|
|
anchorOrigin={{
|
|
vertical: 'bottom',
|
|
horizontal: 'right',
|
|
}}
|
|
transformOrigin={{
|
|
vertical: 'top',
|
|
horizontal: 'right',
|
|
}}
|
|
open={Boolean(anchorEl)}
|
|
onClose={() => setAnchorEl(null)}
|
|
>
|
|
<MenuItem
|
|
onClick={() => setDialogOpened('virtualRoom')}
|
|
>
|
|
<Typography textAlign="center">Editar</Typography>
|
|
</MenuItem>
|
|
</Menu>
|
|
<FormDialog
|
|
isOpened={dialogOpened === 'virtualRoom'}
|
|
title="Alterar url da sala de aula virtual"
|
|
contentText="Edite o campo abaixo para alterar a url da sua sala de aula virtual."
|
|
inputs={[
|
|
<TextField
|
|
autoFocus
|
|
margin="dense"
|
|
name="virtualRoom"
|
|
type="text"
|
|
value={classroom.virtualRoom}
|
|
onChange={onChangeEditInput}
|
|
fullWidth
|
|
variant="standard"
|
|
/>,
|
|
]}
|
|
onDismiss={() => onDismissEdit('virtualRoom')}
|
|
onSave={() => onSaveEdit('virtualRoom')}
|
|
/>
|
|
</Container>
|
|
<Button
|
|
variant="contained"
|
|
href={classroom.virtualRoom}
|
|
target="__blank"
|
|
>
|
|
Iniciar aula
|
|
</Button>
|
|
</Stack>
|
|
</Card>
|
|
<Card
|
|
sx={{ width: '100%', padding: '20px', paddingTop: '10px' }}
|
|
elevation={4}
|
|
variant="elevation"
|
|
>
|
|
<Stack justifyContent="flex-start" spacing={1}>
|
|
<h3 style={{ fontWeight: 500 }}>Próximas Atividades</h3>
|
|
|
|
{announcementsTabData.upcomingAssignments.length !== 0 ? (
|
|
announcementsTabData.upcomingAssignments.map(ua => (
|
|
<Link
|
|
href={`/assignment/${ua.id}`}
|
|
sx={{ fontSize: '15px' }}
|
|
key={ua.id}
|
|
>
|
|
{ua.title}
|
|
</Link>
|
|
))
|
|
) : (
|
|
<Container disableGutters>
|
|
<p>Nenhuma atividade encontrada!</p>
|
|
</Container>
|
|
)}
|
|
</Stack>
|
|
</Card>
|
|
<Card
|
|
sx={{ width: '100%', padding: '20px', paddingTop: '10px' }}
|
|
elevation={4}
|
|
variant="elevation"
|
|
>
|
|
<Stack justifyContent="flex-start" spacing={1}>
|
|
<h3 style={{ fontWeight: 500 }}>Horários de Atendimento</h3>
|
|
{classroom.appointmentSlots.map((appts, index) => (
|
|
<Typography key={index} variant="body1">
|
|
{appts.weekDay}, {appts.start}h - {appts.end}h
|
|
</Typography>
|
|
))}
|
|
</Stack>
|
|
</Card>
|
|
</Stack>
|
|
<Stack
|
|
sx={{ width: '100%' }}
|
|
alignItems="center"
|
|
justifyContent="center"
|
|
flexWrap="wrap"
|
|
direction="row"
|
|
gap="30px"
|
|
>
|
|
<PublishAnnouncementCard
|
|
layoutType={layoutType}
|
|
user={user}
|
|
value={composingTextValue}
|
|
onChange={e => setComposingTextValue(e.target.value)}
|
|
/>
|
|
{announcementsTabData.announcements.length !== 0 ? (
|
|
announcementsTabData.announcements.map(announcement => (
|
|
<AnnouncementCard
|
|
key={announcement.id}
|
|
announcement={announcement}
|
|
/>
|
|
))
|
|
) : (
|
|
<Container sx={emptyStateContainer} disableGutters>
|
|
<p>Nenhum comunicado encontrado!</p>
|
|
</Container>
|
|
)}
|
|
</Stack>
|
|
</Stack>
|
|
);
|
|
|
|
case 'gone':
|
|
return null;
|
|
|
|
default:
|
|
return null;
|
|
}
|
|
}
|
|
};
|
|
|
|
return layoutResolver(
|
|
announcementsTabData && announcementsTabData.state,
|
|
layoutType
|
|
);
|
|
}
|
|
|
|
export default AnnouncementsTab;
|