From fdac9b162e612e0341b1b574629f22b9577c703a Mon Sep 17 00:00:00 2001 From: TTPL-RT-52 Date: Wed, 10 Jul 2024 15:32:25 +0530 Subject: [PATCH 1/4] Issue #PS-1344 fix: Center Sessions UI Implementation --- public/locales/en/common.json | 8 +- src/components/SessionCard.tsx | 51 ++++++++ src/pages/centers/[cohortId].tsx | 192 ++++++++++++++++++++++++++-- src/pages/centers/sessionservice.ts | 0 src/services/Sessionservice.ts | 29 +++++ src/styles/customTheme.tsx | 4 +- src/styles/globals.css | 7 + src/utils/Interfaces.ts | 14 ++ 8 files changed, 294 insertions(+), 11 deletions(-) create mode 100644 src/components/SessionCard.tsx create mode 100644 src/pages/centers/sessionservice.ts create mode 100644 src/services/Sessionservice.ts diff --git a/public/locales/en/common.json b/public/locales/en/common.json index 065a9c46..ca8c7807 100644 --- a/public/locales/en/common.json +++ b/public/locales/en/common.json @@ -94,7 +94,13 @@ "USER_DELETED_PERMANENTLY": "User Successfully Deleted!", "OBSERVATIONS_FORMS": "Observations and Forms", "OTHER_REASON": "Other Reason", - "OTHER_REASON_PLACEHOLDER": "Enter Other Reason" + "OTHER_REASON_PLACEHOLDER": "Enter Other Reason", + "CENTER_SESSIONS":"Center Sessions", + "SCHEDULE_NEW":"Schedule New", + "UPCOMING_EXTRA_SESSION":"Upcoming Extra Sessions", + "NO_SESSIONS_SCHEDULED" :" No sessions scheduled", + "TO_BE_TAUGHT" :"What is going to be taught:", + "SELECT_TOPIC":" Select Topic, Sub-topic" }, "LOGIN_PAGE": { "USERNAME": "Username", diff --git a/src/components/SessionCard.tsx b/src/components/SessionCard.tsx new file mode 100644 index 00000000..02ad9058 --- /dev/null +++ b/src/components/SessionCard.tsx @@ -0,0 +1,51 @@ +import { Box, Typography } from '@mui/material'; +import { Session, SessionsCardProps } from '@/utils/Interfaces'; + +import EditOutlined from '@mui/icons-material/EditOutlined'; +import React from 'react'; +import { useTheme } from '@mui/material/styles'; + +const SessionsCard: React.FC = ({ data, children }) => { + const theme = useTheme(); + return ( + <> + + + + + {data?.subject} + + + + {data?.time} + + + {data?.teacherName} + + + + + {children} + + + ); +}; + +export default SessionsCard; diff --git a/src/pages/centers/[cohortId].tsx b/src/pages/centers/[cohortId].tsx index 86c0c4da..b978f022 100644 --- a/src/pages/centers/[cohortId].tsx +++ b/src/pages/centers/[cohortId].tsx @@ -1,33 +1,51 @@ import { Button, Typography } from '@mui/material'; import React, { useEffect } from 'react'; +import { formatSelectedDate, getTodayDate, toPascalCase } from '@/utils/Helper'; +import Accordion from '@mui/material/Accordion'; +import AccordionDetails from '@mui/material/AccordionDetails'; +import AccordionSummary from '@mui/material/AccordionSummary'; import AddIcon from '@mui/icons-material/Add'; import AddLeanerModal from '@/components/AddLeanerModal'; import ArrowForwardIcon from '@mui/icons-material/ArrowForward'; import Box from '@mui/material/Box'; import CohortLearnerList from '@/components/CohortLearnerList'; import { CustomField } from '@/utils/Interfaces'; +import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; import { GetStaticPaths } from 'next'; import Header from '@/components/Header'; import KeyboardBackspaceOutlinedIcon from '@mui/icons-material/KeyboardBackspaceOutlined'; +import MenuBookIcon from '@mui/icons-material/MenuBook'; +import PriorityHighIcon from '@mui/icons-material/PriorityHigh'; +import { Session } from '../../utils/Interfaces'; +import SessionCard from '@/components/SessionCard'; +import SubdirectoryArrowRightIcon from '@mui/icons-material/SubdirectoryArrowRight'; import Tab from '@mui/material/Tab'; import Tabs from '@mui/material/Tabs'; +import WeekCalender from '@/components/WeekCalender'; import { getCohortDetails } from '@/services/CohortServices'; +import { getSessions } from '@/services/Sessionservice'; import { serverSideTranslations } from 'next-i18next/serverSideTranslations'; import { useRouter } from 'next/router'; import { useTheme } from '@mui/material/styles'; import { useTranslation } from 'next-i18next'; -import { toPascalCase } from '@/utils/Helper'; const TeachingCenterDetails = () => { const [value, setValue] = React.useState(1); + const [showDetails, setShowDetails] = React.useState(false); + const [classId, setClassId] = React.useState(''); const router = useRouter(); const { cohortId }: any = router.query; const { t } = useTranslation(); const theme = useTheme(); + const [selectedDate, setSelectedDate] = + React.useState(getTodayDate()); const [cohortDetails, setCohortDetails] = React.useState({}); const [reloadState, setReloadState] = React.useState(false); + const [sessions, setSessions] = React.useState(); + const [percentageAttendanceData, setPercentageAttendanceData] = + React.useState(null); useEffect(() => { const getCohortData = async () => { @@ -41,13 +59,15 @@ const TeachingCenterDetails = () => { if (cohortData?.customField?.length) { const district = cohortData.customField.find( - (item: CustomField) => item.label === "District" + (item: CustomField) => item.label === 'District' ); const state = cohortData.customField.find( (item: CustomField) => item.label === 'State' ); - cohortData.address = `${toPascalCase(district?.value)}, ${toPascalCase(state?.value)}` || ''; + cohortData.address = + `${toPascalCase(district?.value)}, ${toPascalCase(state?.value)}` || + ''; } setCohortDetails(cohortData); } @@ -55,6 +75,15 @@ const TeachingCenterDetails = () => { getCohortData(); }, []); + useEffect(() => { + const getSessionsData = async () => { + const response: Session[] = await getSessions('cohortId'); // Todo add dynamic cohortId + setSessions(response); + }; + + getSessionsData(); + }, []); + const handleChange = (event: React.SyntheticEvent, newValue: number) => { setValue(newValue); }; @@ -63,6 +92,11 @@ const TeachingCenterDetails = () => { window.history.back(); }; + const showDetailsHandle = (dayStr: string) => { + setSelectedDate(formatSelectedDate(dayStr)); + setShowDetails(true); + }; + return ( <>
@@ -91,14 +125,12 @@ const TeachingCenterDetails = () => { (cohortDetails?.centerType) )} - - + {cohortDetails?.address} - - + @@ -131,11 +163,153 @@ const TeachingCenterDetails = () => { }, }} > - + + + + {value === 1 && ( + <> + + + + + + {t('COMMON.UPCOMING_EXTRA_SESSION')} + + + {t('COMMON.NO_SESSIONS_SCHEDULED')} + + + + + + + {sessions && + sessions.map((item: Session, index: number) => ( + + {!item?.topic && ( + + + + + {t('COMMON.SELECT_TOPIC')} + + + + + )} + {item?.topic && ( + + + + } + aria-controls="panel1-content" + id="panel1-header" + className="accordion-summary" + sx={{ + px: 0, + m: 0, + }} + > + + {t('COMMON.TO_BE_TAUGHT')} + + + + + + + {item?.topic} + + + + + + {item?.subtopic} + + + + + + + )} + + ))} + + + )} - {value === 1 && ( + {value === 2 && ( <>