diff --git a/public/locales/en/common.json b/public/locales/en/common.json index 5293f591..acc1e083 100644 --- a/public/locales/en/common.json +++ b/public/locales/en/common.json @@ -295,5 +295,28 @@ }, "MANAGE_USERS": { "CENTERS_REQUESTED_SUCCESSFULLY": "Center Requested Successfully" + }, + "CENTER_SESSION": { + "THIS_SESSION": "This session", + "FOLLOWING_SESSIONS": "This and following sessions", + "MODE_OF_SESSION": "Mode of Session", + "OFFLINE": "Offline", + "ONLINE": "Online", + "SUBJECT": "Subject", + "MEETING_LINK": "Meeting Link", + "MEETING_PASSCODE": "Meeting Passcode (if applicable)", + "START_TIME": "Start Time", + "END_TIME": "End Time", + "START_DATE": "Start Date", + "END_DATE": "End Date", + "REMOVE_THIS_SESSION": "Remove this session", + "PLANNED_SESSION": "Planned Session", + "FIXES_SUBJECTS": "For fixed subjects in the timetable", + "EXTRA_SESSION": "Extra Session", + "DOUBT_CLEARING": "For doubt clearing, webinars, etc", + "TOPIC": "Topic", + "SUBTOPIC": "Sub Topic", + "FACILITATORS": " Facilitators Pre-requisites", + "TITLE": "Title" } } diff --git a/public/locales/hi/common.json b/public/locales/hi/common.json index 11216f45..38401c3a 100644 --- a/public/locales/hi/common.json +++ b/public/locales/hi/common.json @@ -268,8 +268,32 @@ "REQUEST_TO_DELETE": "हटाने का अनुरोध", "RENAME": "नाम बदलें", "CENTER_RENAMED": "केंद्र का नाम सफलतापूर्वक बदल दिया गया!", - "SEND_REQUEST":"अनुरोध भेजें", + "SEND_REQUEST": "अनुरोध भेजें", "REQUEST_TO_DELETE_HAS_BEEN_SENT": " हटाने का अनुरोध भेजा गया है", "YOU_ARE_SENDING_REQUEST_TO_THE_STATE_ADMIN": "आप राज्य प्रशासन को इस केंद्र को हटाने का अनुरोध भेज रहे हैं" + }, + + "CENTER_SESSION": { + "THIS_SESSION": "यह सत्र", + "FOLLOWING_SESSIONS": "यह और आने वाले सत्र", + "MODE_OF_SESSION": "सत्र का मोड", + "OFFLINE": "ऑफलाइन", + "ONLINE": "ऑनलाइन", + "SUBJECT": "विषय", + "MEETING_LINK": "बैठक लिंक", + "MEETING_PASSCODE": "बैठक पासकोड (यदि लागू हो)", + "START_TIME": "प्रारंभ समय", + "END_TIME": "समाप्ति समय", + "START_DATE": "प्रारंभ तिथि", + "END_DATE": "समाप्ति तिथि", + "REMOVE_THIS_SESSION": "इस सत्र को हटाएं", + "PLANNED_SESSION": "नियोजित सत्र", + "FIXES_SUBJECTS": "समय सारिणी में निश्चित विषयों के लिए", + "EXTRA_SESSION": "अतिरिक्त सत्र", + "DOUBT_CLEARING": "शंका समाधान, वेबिनार आदि के लिए", + "TOPIC": "विषय", + "SUBTOPIC": "उप विषय", + "FACILITATORS": "सुविधादाताओं की पूर्व आवश्यकताएँ", + "TITLE": "शीर्षक" } } diff --git a/public/locales/mr/common.json b/public/locales/mr/common.json index 176870db..3ca7d276 100644 --- a/public/locales/mr/common.json +++ b/public/locales/mr/common.json @@ -269,8 +269,32 @@ "REQUEST_TO_DELETE": "हटवण्याची विनंती", "RENAME": "नाव बदला", "CENTER_RENAMED": "केंद्राचे नाव यशस्वीरित्या बदलले गेले!", - "SEND_REQUEST":"विनंती पाठवा", + "SEND_REQUEST": "विनंती पाठवा", "REQUEST_TO_DELETE_HAS_BEEN_SENT": "हटवण्याची विनंती पाठवली आहे", "YOU_ARE_SENDING_REQUEST_TO_THE_STATE_ADMIN": "आपण या केंद्राला हटविण्याचे विनंती राज्य प्रशासनाला पाठवत आहात" + }, + + "CENTER_SESSION": { + "THIS_SESSION": "हे सत्र", + "FOLLOWING_SESSIONS": "हे आणि पुढील सत्र", + "MODE_OF_SESSION": "सत्राचा प्रकार", + "OFFLINE": "ऑफलाइन", + "ONLINE": "ऑनलाइन", + "SUBJECT": "विषय", + "MEETING_LINK": "बैठक लिंक", + "MEETING_PASSCODE": "बैठक पासकोड (जर लागू असेल तर)", + "START_TIME": "सुरवातीचा वेळ", + "END_TIME": "समाप्तीचा वेळ", + "START_DATE": "सुरवात तारीख", + "END_DATE": "समाप्ती तारीख", + "REMOVE_THIS_SESSION": "हे सत्र काढून टाका", + "PLANNED_SESSION": "नियोजित सत्र", + "FIXES_SUBJECTS": "वेळापत्रकात निश्चित विषयांसाठी", + "EXTRA_SESSION": "अतिरिक्त सत्र", + "DOUBT_CLEARING": "शंका निरसन, वेबिनार इत्यादीसाठी", + "TOPIC": "विषय", + "SUBTOPIC": "उपविषय", + "FACILITATORS": "सुविधादात्यांची पूर्व आवश्यकताएं", + "TITLE": "शीर्षक" } } diff --git a/src/assets/images/decorationBg.png b/src/assets/images/decorationBg.png new file mode 100644 index 00000000..4a12fdd8 Binary files /dev/null and b/src/assets/images/decorationBg.png differ diff --git a/src/components/CenterSessionModal.tsx b/src/components/CenterSessionModal.tsx new file mode 100644 index 00000000..185da134 --- /dev/null +++ b/src/components/CenterSessionModal.tsx @@ -0,0 +1,97 @@ +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 = ({ + children, + open, + handleClose, + title, + primary, +}) => { + const theme = useTheme(); + const { t } = useTranslation(); + const style = { + position: 'absolute', + top: '50%', + left: '50%', + transform: 'translate(-50%, -50%)', + width: '75%', + bgcolor: theme?.palette?.warning['A400'], + boxShadow: 24, + borderRadius: '16px', + '@media (min-width: 600px)': { + width: '450px', + }, + }; + return ( + <> +
+ + + + + + {title} + + + + + + {children} + + + + + + +
+ + ); +}; + +export default CenterSessionModal; diff --git a/src/components/DeleteSession.tsx b/src/components/DeleteSession.tsx new file mode 100644 index 00000000..8d3973c7 --- /dev/null +++ b/src/components/DeleteSession.tsx @@ -0,0 +1,47 @@ +import { + Box, + FormControl, + FormControlLabel, + FormLabel, + Radio, + RadioGroup, +} from '@mui/material'; + +import React from 'react'; +import { useTheme } from '@mui/material/styles'; +import { useTranslation } from 'react-i18next'; + +const DeleteSession = () => { + const theme = useTheme(); + const { t } = useTranslation(); + return ( + <> + + + {t('CENTER_SESSION.THIS_SESSION')} + + + + {t('CENTER_SESSION.FOLLOWING_SESSIONS')} + + + + + ); +}; + +export default DeleteSession; diff --git a/src/components/PlannedSession.tsx b/src/components/PlannedSession.tsx new file mode 100644 index 00000000..d58fd42d --- /dev/null +++ b/src/components/PlannedSession.tsx @@ -0,0 +1,252 @@ +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 { sessionModeConstant } from '@/utils/app.constant'; +import { useTheme } from '@mui/material/styles'; +import { useTranslation } from 'next-i18next'; + +type SessionMode = + (typeof sessionModeConstant)[keyof typeof sessionModeConstant]; + +const PlannedSession = () => { + const [sessionMode, setSessionMode] = useState( + sessionModeConstant.OFFLINE + ); + + const handleSessionModeChange = (event: ChangeEvent) => { + setSessionMode(event.target.value as SessionMode); + }; + + const { t } = useTranslation(); + const theme = useTheme(); + + return ( + <> + + + + + {t('CENTER_SESSION.MODE_OF_SESSION')} + + + + } + label={ + + {t('CENTER_SESSION.OFFLINE')} + + } + /> + + } + label={ + + {t('CENTER_SESSION.ONLINE')} + + } + /> + + + + + + + + {t('CENTER_SESSION.SUBJECT')} + + + + + + {sessionMode === sessionModeConstant.ONLINE && ( + <> + + + + {t('CENTER_SESSION.MEETING_LINK')} + + + + + + + + {t('CENTER_SESSION.MEETING_PASSCODE')} + + + + + + )} + + + + + + + + {t('CENTER_SESSION.START_TIME')} + + + + + + + + + + {t('CENTER_SESSION.END_TIME')} + + + + + + + + + + + + + + + {t('CENTER_SESSION.START_DATE')} + + + + + + + + + + {t('CENTER_SESSION.END_DATE')} + + + + + + + + + + + {t('CENTER_SESSION.REMOVE_THIS_SESSION')} + + + + + + + + + + + + + + + + ); +}; + +export default PlannedSession; diff --git a/src/components/Schedule.tsx b/src/components/Schedule.tsx new file mode 100644 index 00000000..7a0f92bc --- /dev/null +++ b/src/components/Schedule.tsx @@ -0,0 +1,55 @@ +import { Box } from '@mui/material'; +import React from 'react'; +import { useTheme } from '@mui/material/styles'; +import { useTranslation } from 'react-i18next'; + +const Schedule = () => { + const theme = useTheme(); + const { t } = useTranslation(); + return ( + <> + + + + {t('CENTER_SESSION.PLANNED_SESSION')} + + {t('CENTER_SESSION.FIXES_SUBJECTS')} + + + + {t('CENTER_SESSION.EXTRA_SESSION')} + + {t('CENTER_SESSION.DOUBT_CLEARING')} + + + + ); +}; + +export default Schedule; diff --git a/src/components/SessionCardFooter.tsx b/src/components/SessionCardFooter.tsx index 05cf3a54..31127eb5 100644 --- a/src/components/SessionCardFooter.tsx +++ b/src/components/SessionCardFooter.tsx @@ -26,7 +26,7 @@ const SessionCardFooter: React.FC = ({ item }) => { }} > = ({ item }) => { - + {item?.topic} @@ -88,7 +88,7 @@ const SessionCardFooter: React.FC = ({ item }) => { {t('COMMON.SELECT_TOPIC')} - + ); }; diff --git a/src/components/TopicDetails.tsx b/src/components/TopicDetails.tsx new file mode 100644 index 00000000..a18ceb14 --- /dev/null +++ b/src/components/TopicDetails.tsx @@ -0,0 +1,114 @@ +import { + Accordion, + AccordionDetails, + AccordionSummary, + Box, + Grid, + Typography, +} from '@mui/material'; + +import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown'; +import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline'; +import EditIcon from '@mui/icons-material/Edit'; +import { useTheme } from '@mui/material/styles'; +import { useTranslation } from 'next-i18next'; + +const TopicDetails = () => { + const { t } = useTranslation(); + const theme = useTheme(); + return ( + <> + + + + + {t('CENTER_SESSION.TOPIC')} + {/* Real Numbers */} + + + + + {t('CENTER_SESSION.SUBTOPIC')} + {/* Revisiting Irrational Numbers */} + + + + + {t('CENTER_SESSION.REMOVE_THIS_SESSION')} + + + + + + + + } + aria-controls="panel1-content" + id="panel1-header" + className="accordion-summary" + sx={{ + m: 0, + background: theme?.palette?.background.paper, + px: '16px', + }} + > + + {t('CENTER_SESSION.FACILITATORS')} + + + + + + + {t('CENTER_SESSION.TITLE')} + + + + + {t('CENTER_SESSION.TITLE')} + + + + + + + ); +}; + +export default TopicDetails; diff --git a/src/pages/centers/[cohortId].tsx b/src/pages/centers/[cohortId].tsx index 7d68146c..898193dd 100644 --- a/src/pages/centers/[cohortId].tsx +++ b/src/pages/centers/[cohortId].tsx @@ -9,25 +9,26 @@ import { import React, { useEffect, useState } 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 CenterSessionModal from '@/components/CenterSessionModal'; import CohortLearnerList from '@/components/CohortLearnerList'; import { CustomField } from '@/utils/Interfaces'; -import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; +import DeleteCenterModal from '@/components/center/DeleteCenterModal'; +import DeleteOutlineOutlinedIcon from '@mui/icons-material/DeleteOutlineOutlined'; 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 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'; import SessionCard from '@/components/SessionCard'; import SessionCardFooter from '@/components/SessionCardFooter'; -import SubdirectoryArrowRightIcon from '@mui/icons-material/SubdirectoryArrowRight'; import Tab from '@mui/material/Tab'; import Tabs from '@mui/material/Tabs'; import WeekCalender from '@/components/WeekCalender'; @@ -37,15 +38,11 @@ import { serverSideTranslations } from 'next-i18next/serverSideTranslations'; import { useRouter } from 'next/router'; import { useTheme } from '@mui/material/styles'; import { useTranslation } from 'next-i18next'; -import MoreVertIcon from '@mui/icons-material/MoreVert'; -import ModeEditOutlineOutlinedIcon from '@mui/icons-material/ModeEditOutlineOutlined'; -import DeleteOutlineOutlinedIcon from '@mui/icons-material/DeleteOutlineOutlined'; -import RenameCenterModal from '@/components/center/RenameCenterModal'; -import DeleteCenterModal from '@/components/center/DeleteCenterModal'; const TeachingCenterDetails = () => { const [value, setValue] = React.useState(1); const [showDetails, setShowDetails] = React.useState(false); + const [open, setOpen] = React.useState(false); const [classId, setClassId] = React.useState(''); const router = useRouter(); const { cohortId }: any = router.query; @@ -53,6 +50,8 @@ const TeachingCenterDetails = () => { const theme = useTheme(); const [selectedDate, setSelectedDate] = React.useState(getTodayDate()); + const handleOpen = () => setOpen(true); + const handleClose = () => setOpen(false); const [cohortDetails, setCohortDetails] = React.useState({}); const [reloadState, setReloadState] = React.useState(false); @@ -61,7 +60,7 @@ const TeachingCenterDetails = () => { React.useState(null); const [openRenameCenterModal, setOpenRenameCenterModal] = React.useState(false); - const [openDeleteCenterModal, setOpenDeleteCenterModal] = + const [openDeleteCenterModal, setOpenDeleteCenterModal] = React.useState(false); useEffect(() => { @@ -90,16 +89,16 @@ const TeachingCenterDetails = () => { } }; getCohortData(); - }, []); + }, [cohortId]); useEffect(() => { const getSessionsData = async () => { - const response: Session[] = await getSessions('cohortId'); // Todo add dynamic cohortId + const response: Session[] = await getSessions(cohortId); // Updated to use dynamic cohortId setSessions(response); }; getSessionsData(); - }, []); + }, [cohortId]); const handleChange = (event: React.SyntheticEvent, newValue: number) => { setValue(newValue); @@ -139,8 +138,7 @@ const TeachingCenterDetails = () => { { open={Boolean(anchorEl)} onClose={handleMenuClose} > - { setOpenRenameCenterModal(true); handleMenuClose(); }}> - + { + setOpenRenameCenterModal(true); + handleMenuClose(); + }} + > + {t('CENTERS.RENAME_CENTER')} - {setOpenDeleteCenterModal(true); handleMenuClose(); }}> + { + setOpenDeleteCenterModal(true); + handleMenuClose(); + }} + > @@ -210,7 +218,7 @@ const TeachingCenterDetails = () => { open={openRenameCenterModal} handleClose={handleRenameCenterClose} /> - @@ -220,12 +228,11 @@ const TeachingCenterDetails = () => { { }} className="text-1E" endIcon={} + onClick={handleOpen} > {t('COMMON.SCHEDULE_NEW')} + + + + { {t('COMMON.NO_SESSIONS_SCHEDULED')} - + { }} className="text-1E" endIcon={} + onClick={handleOpen} > {t('COMMON.ADD_NEW')} @@ -362,14 +380,13 @@ export async function getStaticProps({ locale }: any) { return { props: { ...(await serverSideTranslations(locale, ['common'])), - // Will be passed to the page component as props }, }; } export const getStaticPaths: GetStaticPaths<{ slug: string }> = async () => { return { - paths: [], //indicates that no page needs be created at build time - fallback: 'blocking', //indicates the type of fallback + paths: [], + fallback: 'blocking', }; }; diff --git a/src/styles/customTheme.tsx b/src/styles/customTheme.tsx index 31c43fb1..fd07b028 100644 --- a/src/styles/customTheme.tsx +++ b/src/styles/customTheme.tsx @@ -48,12 +48,14 @@ const customTheme = extendTheme({ action: { activeChannel: '#987100', selectedChannel: '#dba403', + selected: '#FBF4E4', }, Skeleton: { bg: '#FFDCC2', }, background: { default: '#F3EDF7', + paper: '#F1E7D9', }, }, }, diff --git a/src/styles/globals.css b/src/styles/globals.css index aeae907a..47298d5f 100644 --- a/src/styles/globals.css +++ b/src/styles/globals.css @@ -946,3 +946,18 @@ main { .text-7C { color: var(--mui-palette-warning-400) !important; } + +.facilitator-bg { + background-image: url('./../assets/images/decorationBg.png'); + /* width: 140px; */ + height: 180px; + background-position: center; + background-size: cover; + background-repeat: no-repeat; + object-fit: cover; + border-radius: 28px; + display: flex; + flex-direction: column; + justify-content: end; + padding: 15px; +} diff --git a/src/utils/Interfaces.ts b/src/utils/Interfaces.ts index a31f451e..9f89173f 100644 --- a/src/utils/Interfaces.ts +++ b/src/utils/Interfaces.ts @@ -129,6 +129,15 @@ export interface SessionsCardProps { data: Session; children?: React.ReactNode; } + +export interface SessionsModalProps { + children?: React.ReactNode; + open: boolean; + handleClose: () => void; + title: string; + primary: string; +} + export interface AttendanceStatusListProps { limit: number; page: number; diff --git a/src/utils/app.constant.ts b/src/utils/app.constant.ts index f450d756..147174ee 100644 --- a/src/utils/app.constant.ts +++ b/src/utils/app.constant.ts @@ -27,3 +27,8 @@ export enum cohortHierarchy { BLOCK = 'BLOCK', COHORT = 'COHORT', } + +export enum sessionModeConstant { + ONLINE = 'online', + OFFLINE = 'offline', +}