Merge pull request #21 from shreyas1434shinde/centerSession

Issue #PS-1333 fix: Select Topic Sub-topic modal UI Implementation
tekdi · Jul 18, 2024 · 3007c75 · 3007c75
2 parents 816231a + fe11575
commit 3007c75
Show file tree

Hide file tree

Showing 4 changed files with 133 additions and 74 deletions.
diff --git a/src/components/CenterSessionModal.tsx b/src/components/CenterSessionModal.tsx
@@ -1,5 +1,6 @@
 import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
+import CircleIcon from '@mui/icons-material/Circle';
 import CloseIcon from '@mui/icons-material/Close';
 import { Divider } from '@mui/material';
 import Modal from '@mui/material/Modal';
@@ -15,6 +16,8 @@ const CenterSessionModal: React.FC<SessionsModalProps> = ({
  handleClose,
  title,
  primary,
+ center,
+ date,
 }) => {
  const theme = useTheme<any>();
  const { t } = useTranslation();
@@ -27,6 +30,7 @@ const CenterSessionModal: React.FC<SessionsModalProps> = ({
  bgcolor: theme?.palette?.warning['A400'],
  boxShadow: 24,
  borderRadius: '16px',
+ border: 'none',
  '@media (min-width: 600px)': {
  width: '450px',
  },
@@ -52,11 +56,42 @@ const CenterSessionModal: React.FC<SessionsModalProps> = ({
  sx={{
  color: theme?.palette?.warning['A200'],
  fontSize: '14px',
+ fontWeight: '500',
  }}
  component="h2"
  >
  {title}
  </Typography>
+ <Box sx={{ display: 'flex', alignItems: 'center', gap: '5px' }}>
+ <Typography
+ variant="h2"
+ sx={{
+ color: theme?.palette?.warning['A200'],
+ fontSize: '14px',
+ fontWeight: '400',
+ }}
+ component="h2"
+ >
+ {center}
+ </Typography>
+ <CircleIcon
+ sx={{
+ fontSize: '6px',
+ color: theme.palette.secondary.contrastText,
+ }}
+ />
+ <Typography
+ variant="h2"
+ sx={{
+ color: theme?.palette?.warning['A200'],
+ fontSize: '14px',
+ fontWeight: '400',
+ }}
+ component="h2"
+ >
+ {date}
+ </Typography>
+ </Box>
  </Box>
  <CloseIcon
  onClick={handleClose}

diff --git a/src/components/SessionCardFooter.tsx b/src/components/SessionCardFooter.tsx
@@ -3,93 +3,120 @@ import AccordionDetails from '@mui/material/AccordionDetails';
 import AccordionSummary from '@mui/material/AccordionSummary';
 import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
 import Box from '@mui/material/Box';
+import CenterSessionModal from './CenterSessionModal';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import MenuBookIcon from '@mui/icons-material/MenuBook';
 import PriorityHighIcon from '@mui/icons-material/PriorityHigh';
 import React from 'react';
+import SelectTopic from './SelectTopic';
 import { SessionCardFooterProps } from '../utils/Interfaces';
 import SubdirectoryArrowRightIcon from '@mui/icons-material/SubdirectoryArrowRight';
+import TopicDetails from './TopicDetails';
 import Typography from '@mui/material/Typography';
 import { useTheme } from '@mui/material/styles';
 import { useTranslation } from 'react-i18next';
 
 const SessionCardFooter: React.FC<SessionCardFooterProps> = ({ item }) => {
  const theme = useTheme();
  const { t } = useTranslation();
+ const [open, setOpen] = React.useState(false);
+ const handleOpen = () => setOpen(true);
+ const handleClose = () => setOpen(false);
 
- return item?.topic ? (
- <Box
- sx={{
- background: theme.palette.background.default,
- padding: '4px 16px',
- borderRadius: '8px',
- }}
- >
- <Accordion
- //defaultExpanded
- sx={{
- boxShadow: 'none',
- border: 'none',
- background: 'none',
- }}
- >
- <AccordionSummary
- expandIcon={<ExpandMoreIcon />}
- aria-controls="panel1-content"
- id="panel1-header"
- className="accordion-summary"
- sx={{ px: 0, m: 0 }}
+ return (
+ <>
+ {item?.topic ? (
+ <Box
+ sx={{
+ background: theme.palette.background.default,
+ padding: '4px 16px',
+ borderRadius: '8px',
+ }}
  >
- <Typography fontWeight="500" fontSize="14px" className="text-7C">
- {t('COMMON.TO_BE_TAUGHT')}
- </Typography>
- </AccordionSummary>
- <AccordionDetails sx={{ padding: '0px' }}>
- <Box sx={{ display: 'flex', gap: '10px' }}>
- <MenuBookIcon sx={{ color: theme.palette.secondary.main }} />
- <Typography color={theme.palette.secondary.main} variant="h5">
- {item?.topic}
- </Typography>
- </Box>
- <Box
+ <Accordion
+ //defaultExpanded
  sx={{
- display: 'flex',
- gap: '10px',
- marginTop: '5px',
- marginLeft: '10px',
+ boxShadow: 'none',
+ border: 'none',
+ background: 'none',
  }}
  >
- <SubdirectoryArrowRightIcon />
- <Typography color={theme.palette.secondary.main} variant="h5">
- {item?.subtopic}
- </Typography>
- </Box>
- </AccordionDetails>
- </Accordion>
- </Box>
- ) : (
- <Box
- sx={{
- display: 'flex',
- justifyContent: 'space-between',
- background: theme.palette.background.default,
- padding: '8px 16px',
- borderRadius: '8px',
- }}
- >
- <Box sx={{ display: 'flex', alignItems: 'center' }}>
- <PriorityHighIcon sx={{ color: theme.palette.error.main }} />
+ <AccordionSummary
+ expandIcon={<ExpandMoreIcon />}
+ aria-controls="panel1-content"
+ id="panel1-header"
+ className="accordion-summary"
+ sx={{ px: 0, m: 0 }}
+ >
+ <Typography fontWeight="500" fontSize="14px" className="text-7C">
+ {t('COMMON.TO_BE_TAUGHT')}
+ </Typography>
+ </AccordionSummary>
+ <AccordionDetails sx={{ padding: '0px' }}>
+ <Box
+ onClick={handleOpen}
+ sx={{ display: 'flex', gap: '10px', cursor: 'pointer' }}
+ >
+ <MenuBookIcon sx={{ color: theme.palette.secondary.main }} />
+ <Typography color={theme.palette.secondary.main} variant="h5">
+ {item?.topic}
+ </Typography>
+ </Box>
+ <Box
+ sx={{
+ display: 'flex',
+ gap: '10px',
+ marginTop: '5px',
+ marginLeft: '10px',
+ cursor: 'pointer',
+ }}
+ onClick={handleOpen}
+ >
+ <SubdirectoryArrowRightIcon />
+ <Typography color={theme.palette.secondary.main} variant="h5">
+ {item?.subtopic}
+ </Typography>
+ </Box>
+ </AccordionDetails>
+ </Accordion>
+ </Box>
+ ) : (
  <Box
- fontSize={'14px'}
- fontWeight={500}
- color={theme.palette.secondary.main}
- ml={1}
+ sx={{
+ display: 'flex',
+ justifyContent: 'space-between',
+ background: theme.palette.background.default,
+ padding: '8px 16px',
+ borderRadius: '8px',
+ cursor: 'pointer',
+ }}
+ onClick={handleOpen}
  >
- {t('COMMON.SELECT_TOPIC')}
+ <Box sx={{ display: 'flex', alignItems: 'center' }}>
+ <PriorityHighIcon sx={{ color: theme.palette.error.main }} />
+ <Box
+ fontSize={'14px'}
+ fontWeight={500}
+ color={theme.palette.secondary.main}
+ ml={1}
+ >
+ {t('COMMON.SELECT_TOPIC')}
+ </Box>
+ </Box>
+ <ArrowForwardIcon sx={{ color: theme.palette.secondary.main }} />
  </Box>
- </Box>
- <ArrowForwardIcon sx={{ color: theme.palette.secondary.main }} />
- </Box>
+ )}
+ <CenterSessionModal
+ open={open}
+ handleClose={handleClose}
+ title={item.subject}
+ center={'Khapari Dharmu'}
+ date={'25 May, 2024'}
+ primary={'save'}
+ >
+ {item?.topic ? <TopicDetails /> : <SelectTopic />}
+ </CenterSessionModal>
+ </>
  );
 };
 

diff --git a/src/pages/centers/[cohortId].tsx b/src/pages/centers/[cohortId].tsx
@@ -12,6 +12,7 @@ import AddIcon from '@mui/icons-material/Add';
 import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
 import Box from '@mui/material/Box';
 import CenterSessionModal from '@/components/CenterSessionModal';
+import CohortFacilitatorList from '@/components/CohortFacilitatorList';
 import CohortLearnerList from '@/components/CohortLearnerList';
 import { CustomField } from '@/utils/Interfaces';
 import DeleteCenterModal from '@/components/center/DeleteCenterModal';
@@ -21,16 +22,13 @@ import Header from '@/components/Header';
 import KeyboardBackspaceOutlinedIcon from '@mui/icons-material/KeyboardBackspaceOutlined';
 import ModeEditOutlineOutlinedIcon from '@mui/icons-material/ModeEditOutlineOutlined';
 import MoreVertIcon from '@mui/icons-material/MoreVert';
-import PlannedSession from '@/components/PlannedSession';
 import RenameCenterModal from '@/components/center/RenameCenterModal';
 import Schedule from './../../components/Schedule';
-import SelectTopic from '@/components/SelectTopic';
 import { Session } from '../../utils/Interfaces';
 import SessionCard from '@/components/SessionCard';
 import SessionCardFooter from '@/components/SessionCardFooter';
 import Tab from '@mui/material/Tab';
 import Tabs from '@mui/material/Tabs';
-import TopicDetails from '@/components/TopicDetails';
 import WeekCalender from '@/components/WeekCalender';
 import { getCohortDetails } from '@/services/CohortServices';
 import { getSessions } from '@/services/Sessionservice';
@@ -296,7 +294,7 @@ const TeachingCenterDetails = () => {
  title={'Schedule'}
  primary={'Next'}
  >
- <SelectTopic />
+ <Schedule />
  </CenterSessionModal>
  <Box mt={3} px={'18px'}>
  <Box

diff --git a/src/utils/Interfaces.ts b/src/utils/Interfaces.ts
@@ -134,7 +134,9 @@ export interface SessionsModalProps {
  open: boolean;
  handleClose: () => void;
  title: string;
- primary: string;
+ primary?: string;
+ center?: string;
+ date?: string;
 }
 export interface AttendanceStatusListProps {
  limit: number;
@@ -159,7 +161,6 @@ export interface AttendancePercentageProps {
  facets: Array<string>;
 }
 
-
 export interface OverallAttendancePercentageProps {
  limit: number;
  page: number;
@@ -170,7 +171,6 @@ export interface OverallAttendancePercentageProps {
  facets: Array<string>;
 }
 
-
 export interface LearnerAttendanceProps {
  limit: number;
  page: number;
@@ -326,7 +326,6 @@ export interface SessionCardFooterProps {
  item: Session;
 }
 
-
 export interface FieldOption {
  label: string;
  value: string;