Merge pull request #25 from shreyas1434shinde/centerSession

Issue #PS-1333 fix: Select Topic Sub-topic modal UI Implementation
tekdi · Jul 19, 2024 · eb0d9f5 · eb0d9f5
2 parents b2f60d6 + 15fac86
commit eb0d9f5
Show file tree

Hide file tree

Showing 5 changed files with 123 additions and 83 deletions.
diff --git a/src/components/CenterSessionModal.tsx b/src/components/CenterSessionModal.tsx
@@ -18,6 +18,7 @@ const CenterSessionModal: React.FC<SessionsModalProps> = ({
  primary,
  center,
  date,
+ handlePrimaryModel,
 }) => {
  const theme = useTheme<any>();
  const { t } = useTranslation();
@@ -35,97 +36,101 @@ const CenterSessionModal: React.FC<SessionsModalProps> = ({
  width: '450px',
  },
  };
+
  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}>
+ <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: 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: '500',
+ fontWeight: '400',
  }}
  component="h2"
  >
- {title}
+ {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 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}
- sx={{
- cursor: 'pointer',
- color: theme?.palette?.warning['A200'],
- }}
- />
- </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>
+ <CloseIcon
+ onClick={handleClose}
+ sx={{
+ cursor: 'pointer',
+ color: theme?.palette?.warning['A200'],
+ }}
+ />
  </Box>
- </Modal>
- </div>
- </>
+ <Divider />
+ {children}
+ {primary && (
+ <>
+ <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%',
+ }}
+ onClick={handlePrimaryModel}
+ >
+ {primary}
+ </Button>
+ </Box>
+ </>
+ )}
+ </Box>
+ </Modal>
+ </div>
  );
 };
 

diff --git a/src/components/PlannedSession.tsx b/src/components/PlannedSession.tsx
@@ -20,6 +20,8 @@ import dayjs, { Dayjs } from 'dayjs';
 
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import AddIcon from '@mui/icons-material/Add';
+import CenterSessionModal from './CenterSessionModal';
+import DeleteCenterModal from './center/DeleteCenterModal';
 import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
 import { MobileDatePicker } from '@mui/x-date-pickers/MobileDatePicker';
@@ -33,6 +35,10 @@ type mode = (typeof sessionMode)[keyof typeof sessionMode];
 
 const PlannedSession = () => {
  const [mode, setMode] = useState<mode>(sessionMode.OFFLINE);
+ const [open, setOpen] = React.useState(false);
+
+ const handleClose = () => setOpen(false);
+ const handleOpen = () => setOpen(true);
 
  const handleSessionModeChange = (event: ChangeEvent<HTMLInputElement>) => {
  setMode(event.target.value as mode);
@@ -242,6 +248,7 @@ const PlannedSession = () => {
  color: theme?.palette?.secondary.main,
  fontWeight: '500',
  }}
+ onClick={handleOpen}
  >
  {t('CENTER_SESSION.REMOVE_THIS_SESSION')}
  </Box>
@@ -250,6 +257,20 @@ const PlannedSession = () => {
  />
  </Box>
 
+ <CenterSessionModal
+ open={open}
+ handleClose={handleClose}
+ title={'Delete Session'}
+ date={'25 May, 2024'}
+ >
+ <DeleteCenterModal
+ open={false}
+ handleClose={function (): void {
+ throw new Error('Function not implemented.');
+ }}
+ />
+ </CenterSessionModal>
+
  <Box sx={{ mt: 2 }}>
  <Divider />
  </Box>

diff --git a/src/components/SessionCardFooter.tsx b/src/components/SessionCardFooter.tsx
@@ -112,7 +112,6 @@ const SessionCardFooter: React.FC<SessionCardFooterProps> = ({ item }) => {
  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
@@ -8,7 +8,9 @@ import {
 } from '@mui/material';
 import React, { useEffect, useState } from 'react';
 import { formatSelectedDate, getTodayDate, toPascalCase } from '@/utils/Helper';
+
 import AddIcon from '@mui/icons-material/Add';
+import AddLearnerModal from '@/components/AddLeanerModal';
 import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
 import Box from '@mui/material/Box';
 import CenterSessionModal from '@/components/CenterSessionModal';
@@ -21,6 +23,7 @@ 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 { Session } from '../../utils/Interfaces';
@@ -35,8 +38,6 @@ import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
 import { useRouter } from 'next/router';
 import { useTheme } from '@mui/material/styles';
 import { useTranslation } from 'next-i18next';
-import CohortFacilitatorList from '@/components/CohortFacilitatorList';
-import AddLearnerModal from '@/components/AddLeanerModal';
 
 const TeachingCenterDetails = () => {
  const [value, setValue] = React.useState(1);
@@ -60,6 +61,15 @@ const TeachingCenterDetails = () => {
  const [openDeleteCenterModal, setOpenDeleteCenterModal] =
  React.useState(false);
  const [openAddLearnerModal, setOpenAddLearnerModal] = React.useState(false);
+ const [openSchedule, setOpenSchedule] = React.useState(false);
+
+ const handleCentermodel = () => {
+ setOpenSchedule(true);
+ };
+
+ const handleSchedule = () => {
+ console.log('API Call');
+ };
 
  const handleOpen = () => setOpen(true);
  const handleClose = () => setOpen(false);
@@ -291,10 +301,14 @@ const TeachingCenterDetails = () => {
  open={open}
  handleClose={handleClose}
  title={'Schedule'}
- primary={'Next'}
+ primary={openSchedule ? 'Schedule' : 'Next'}
+ handlePrimaryModel={
+ openSchedule ? handleSchedule : handleCentermodel
+ }
  >
- <Schedule />
+ {openSchedule ? <PlannedSession /> : <Schedule />}
  </CenterSessionModal>
+
  <Box mt={3} px={'18px'}>
  <Box
  className="fs-14 fw-500"

diff --git a/src/utils/Interfaces.ts b/src/utils/Interfaces.ts
@@ -137,6 +137,7 @@ export interface SessionsModalProps {
  primary?: string;
  center?: string;
  date?: string;
+ handlePrimaryModel?: () => void;
 }
 export interface AttendanceStatusListProps {
  limit: number;