From 2931fcb18cfacb7806fadad89cf0175e025d6bb4 Mon Sep 17 00:00:00 2001 From: TTPL-RT-52 Date: Fri, 12 Jul 2024 15:13:15 +0530 Subject: [PATCH 1/4] Issue #PS-1344 fix: Center Sessions UI Implementation --- src/assets/images/Facilitators.png | Bin 0 -> 9892 bytes src/components/CenterSessionModal.tsx | 99 +++++++++++ src/components/DeleteSession.tsx | 43 +++++ src/components/PlannedSession.tsx | 230 ++++++++++++++++++++++++++ src/components/ScheduleModal.tsx | 51 ++++++ src/components/SessionCardFooter.tsx | 6 +- src/components/TopicDetails.tsx | 110 ++++++++++++ src/pages/centers/[cohortId].tsx | 65 +++++--- src/styles/globals.css | 15 ++ src/utils/Interfaces.ts | 9 + 10 files changed, 605 insertions(+), 23 deletions(-) create mode 100644 src/assets/images/Facilitators.png create mode 100644 src/components/CenterSessionModal.tsx create mode 100644 src/components/DeleteSession.tsx create mode 100644 src/components/PlannedSession.tsx create mode 100644 src/components/ScheduleModal.tsx create mode 100644 src/components/TopicDetails.tsx diff --git a/src/assets/images/Facilitators.png b/src/assets/images/Facilitators.png new file mode 100644 index 0000000000000000000000000000000000000000..4a12fdd8f271c979aa03d18c2de91f6a77fe1f06 GIT binary patch literal 9892 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 literal 0 HcmV?d00001 diff --git a/src/components/CenterSessionModal.tsx b/src/components/CenterSessionModal.tsx new file mode 100644 index 00000000..c7dd2fbe --- /dev/null +++ b/src/components/CenterSessionModal.tsx @@ -0,0 +1,99 @@ +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 style = { + position: 'absolute', + top: '50%', + left: '50%', + transform: 'translate(-50%, -50%)', + width: '75%', + bgcolor: '#fff', + boxShadow: 24, + borderRadius: '16px', + '@media (min-width: 600px)': { + width: '450px', + }, + }; + + const theme = useTheme(); + const { t } = useTranslation(); + + return ( + <> +
+ + + + + + {title} + + + + + + {children} + + + + + + +
+ + ); +}; + +export default CenterSessionModal; diff --git a/src/components/DeleteSession.tsx b/src/components/DeleteSession.tsx new file mode 100644 index 00000000..4b651cc4 --- /dev/null +++ b/src/components/DeleteSession.tsx @@ -0,0 +1,43 @@ +import { + Box, + FormControl, + FormControlLabel, + FormLabel, + Radio, + RadioGroup, +} from '@mui/material'; + +import React from 'react'; + +const DeleteSession = () => { + return ( + <> + + + This session + + + + This and following sessions + + + + + ); +}; + +export default DeleteSession; diff --git a/src/components/PlannedSession.tsx b/src/components/PlannedSession.tsx new file mode 100644 index 00000000..65eafc70 --- /dev/null +++ b/src/components/PlannedSession.tsx @@ -0,0 +1,230 @@ +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 { useTheme } from '@mui/material/styles'; +import { useTranslation } from 'next-i18next'; + +const PlannedSession = () => { + const [sessionMode, setSessionMode] = useState('Offline'); + + const handleSessionModeChange = (event: ChangeEvent) => { + setSessionMode(event.target.value); + }; + + const { t } = useTranslation(); + const theme = useTheme(); + + return ( + <> + + + + + Mode of Session + + + } + label={Offline} + /> + } + label={Online} + /> + + + + + + + Subject + + + + + {sessionMode === 'Online' && ( + <> + + + + Meeting Link + + + + + + + + Meeting Passcode (if applicable) + + + + + + )} + + + + + + + + Start Time + + + + + + + + + + End Time + + + + + + + + + + + + + + + Start Date + + + + + + + + + + End Date + + + + + + + + + + + Remove this session + + + + + + + + + + + + + + + + ); +}; + +export default PlannedSession; diff --git a/src/components/ScheduleModal.tsx b/src/components/ScheduleModal.tsx new file mode 100644 index 00000000..4b4f36fa --- /dev/null +++ b/src/components/ScheduleModal.tsx @@ -0,0 +1,51 @@ +import { Box } from '@mui/material'; +import React from 'react'; + +const ScheduleModal = () => { + return ( + <> + + + + Planned Session + + For fixed subjects in the timetable + + + + Planned Session + + For fixed subjects in the timetable + + + + ); +}; + +export default ScheduleModal; 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..23b9279c --- /dev/null +++ b/src/components/TopicDetails.tsx @@ -0,0 +1,110 @@ +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 ( + <> + + + + + Topic + Real Numbers + + + + + Sub Topic + Revisiting Irrational Numbers + + + + + Remove this session + + + + + + + } + aria-controls="panel1-content" + id="panel1-header" + className="accordion-summary" + sx={{ m: 0, background: '#F1E7D9', px: '16px' }} + > + + Facilitators Pre-requisites + + + + + + + Title + Video + + + + + Title + Video + + + + + Title + Video + + + + + Title + Video + + + + + + + ); +}; + +export default TopicDetails; diff --git a/src/pages/centers/[cohortId].tsx b/src/pages/centers/[cohortId].tsx index f7b5377f..1724cf1d 100644 --- a/src/pages/centers/[cohortId].tsx +++ b/src/pages/centers/[cohortId].tsx @@ -1,28 +1,39 @@ -import { Button, Typography } from '@mui/material'; -import React, { useEffect } from 'react'; +import { + Button, + Divider, + Grid, + InputLabel, + MenuItem, + Select, + Typography, +} from '@mui/material'; +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 DeleteSession from '@/components/DeleteSession'; +import FormControl from '@mui/material/FormControl'; +import FormControlLabel from '@mui/material/FormControlLabel'; +import FormLabel from '@mui/material/FormLabel'; 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 PlannedSession from '@/components/PlannedSession'; +import Radio from '@mui/material/Radio'; +import RadioGroup from '@mui/material/RadioGroup'; +import ScheduleModal from '@/components/ScheduleModal'; 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 TopicDetails from '@/components/TopicDetails'; import WeekCalender from '@/components/WeekCalender'; import { getCohortDetails } from '@/services/CohortServices'; import { getSessions } from '@/services/Sessionservice'; @@ -34,6 +45,7 @@ import { useTranslation } from 'next-i18next'; 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; @@ -41,6 +53,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); @@ -74,16 +88,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); @@ -106,7 +120,6 @@ const TeachingCenterDetails = () => { sx={{ display: 'flex', justifyContent: 'left', - // alignItems: 'center', color: '#4D4639', padding: '15px 17px 5px', }} @@ -123,7 +136,7 @@ const TeachingCenterDetails = () => { {cohortDetails?.centerType && ( - (cohortDetails?.centerType) + {cohortDetails?.centerType} )} @@ -139,12 +152,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')} @@ -281,14 +307,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/globals.css b/src/styles/globals.css index 2536f79a..fc158664 100644 --- a/src/styles/globals.css +++ b/src/styles/globals.css @@ -913,3 +913,18 @@ main { .text-7C { color: var(--mui-palette-warning-400) !important; } + +.facilitator-bg { + background-image: url('./../assets/images/Facilitators.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 160a4a22..52221a14 100644 --- a/src/utils/Interfaces.ts +++ b/src/utils/Interfaces.ts @@ -117,6 +117,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; From ad02adeccddac5ad4f168cb47e1111b717bc6666 Mon Sep 17 00:00:00 2001 From: TTPL-RT-52 Date: Mon, 15 Jul 2024 12:56:22 +0530 Subject: [PATCH 2/4] Issue #PS-1344 fix: Center Sessions UI Implementation --- public/locales/en/common.json | 25 +++++++ .../{Facilitators.png => decorationBg.png} | Bin src/components/CenterSessionModal.tsx | 12 ++-- src/components/DeleteSession.tsx | 12 ++-- src/components/PlannedSession.tsx | 62 +++++++++++------- .../{ScheduleModal.tsx => Schedule.tsx} | 24 ++++--- src/components/TopicDetails.tsx | 62 ++++++++++-------- src/pages/centers/[cohortId].tsx | 19 +----- src/styles/customTheme.tsx | 2 + src/styles/globals.css | 2 +- 10 files changed, 129 insertions(+), 91 deletions(-) rename src/assets/images/{Facilitators.png => decorationBg.png} (100%) rename src/components/{ScheduleModal.tsx => Schedule.tsx} (52%) diff --git a/public/locales/en/common.json b/public/locales/en/common.json index 1405d6a1..aa2d6d46 100644 --- a/public/locales/en/common.json +++ b/public/locales/en/common.json @@ -292,5 +292,30 @@ }, "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/src/assets/images/Facilitators.png b/src/assets/images/decorationBg.png similarity index 100% rename from src/assets/images/Facilitators.png rename to src/assets/images/decorationBg.png diff --git a/src/components/CenterSessionModal.tsx b/src/components/CenterSessionModal.tsx index c7dd2fbe..185da134 100644 --- a/src/components/CenterSessionModal.tsx +++ b/src/components/CenterSessionModal.tsx @@ -16,23 +16,21 @@ const CenterSessionModal: React.FC = ({ title, primary, }) => { + const theme = useTheme(); + const { t } = useTranslation(); const style = { position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%, -50%)', width: '75%', - bgcolor: '#fff', + bgcolor: theme?.palette?.warning['A400'], boxShadow: 24, borderRadius: '16px', '@media (min-width: 600px)': { width: '450px', }, }; - - const theme = useTheme(); - const { t } = useTranslation(); - return ( <>
@@ -52,7 +50,7 @@ const CenterSessionModal: React.FC = ({ = ({ onClick={handleClose} sx={{ cursor: 'pointer', - color: '#4D4639', + color: theme?.palette?.warning['A200'], }} /> diff --git a/src/components/DeleteSession.tsx b/src/components/DeleteSession.tsx index 4b651cc4..8d3973c7 100644 --- a/src/components/DeleteSession.tsx +++ b/src/components/DeleteSession.tsx @@ -8,8 +8,12 @@ import { } 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 ( <> @@ -21,8 +25,8 @@ const DeleteSession = () => { mt: 2, }} > - This session - + {t('CENTER_SESSION.THIS_SESSION')} + { my: 2, }} > - This and following sessions - + {t('CENTER_SESSION.FOLLOWING_SESSIONS')} + diff --git a/src/components/PlannedSession.tsx b/src/components/PlannedSession.tsx index 65eafc70..fc2380bf 100644 --- a/src/components/PlannedSession.tsx +++ b/src/components/PlannedSession.tsx @@ -36,9 +36,9 @@ const PlannedSession = () => { - Mode of Session + {t('CENTER_SESSION.MODE_OF_SESSION')} { > } - label={Offline} + control={ + + } + label={ + + {t('CENTER_SESSION.OFFLINE')} + + } /> } - label={Online} + control={ + + } + label={ + + {t('CENTER_SESSION.ONLINE')} + + } /> @@ -63,13 +75,15 @@ const PlannedSession = () => { - Subject + + {t('CENTER_SESSION.SUBJECT')} + @@ -79,28 +93,28 @@ const PlannedSession = () => { - Meeting Link + {t('CENTER_SESSION.MEETING_LINK')} - Meeting Passcode (if applicable) + {t('CENTER_SESSION.MEETING_PASSCODE')} @@ -113,14 +127,14 @@ const PlannedSession = () => { - Start Time + {t('CENTER_SESSION.START_TIME')} @@ -129,14 +143,14 @@ const PlannedSession = () => { - End Time + {t('CENTER_SESSION.END_TIME')} @@ -150,14 +164,14 @@ const PlannedSession = () => { - Start Date + {t('CENTER_SESSION.START_DATE')} @@ -166,14 +180,14 @@ const PlannedSession = () => { - End Date + {t('CENTER_SESSION.END_DATE')} @@ -192,13 +206,15 @@ const PlannedSession = () => { - Remove this session + {t('CENTER_SESSION.REMOVE_THIS_SESSION')} - + diff --git a/src/components/ScheduleModal.tsx b/src/components/Schedule.tsx similarity index 52% rename from src/components/ScheduleModal.tsx rename to src/components/Schedule.tsx index 4b4f36fa..7a0f92bc 100644 --- a/src/components/ScheduleModal.tsx +++ b/src/components/Schedule.tsx @@ -1,13 +1,17 @@ import { Box } from '@mui/material'; import React from 'react'; +import { useTheme } from '@mui/material/styles'; +import { useTranslation } from 'react-i18next'; -const ScheduleModal = () => { +const Schedule = () => { + const theme = useTheme(); + const { t } = useTranslation(); return ( <> { sx={{ fontSize: '16px', fontWeight: '400', - color: '#1F1B13', + color: theme?.palette?.warning['300'], }} > - Planned Session + {t('CENTER_SESSION.PLANNED_SESSION')} - For fixed subjects in the timetable + {t('CENTER_SESSION.FIXES_SUBJECTS')} { sx={{ fontSize: '16px', fontWeight: '400', - color: '#1F1B13', + color: theme?.palette?.warning['300'], }} > - Planned Session + {t('CENTER_SESSION.EXTRA_SESSION')} - For fixed subjects in the timetable + {t('CENTER_SESSION.DOUBT_CLEARING')} ); }; -export default ScheduleModal; +export default Schedule; diff --git a/src/components/TopicDetails.tsx b/src/components/TopicDetails.tsx index 23b9279c..a18ceb14 100644 --- a/src/components/TopicDetails.tsx +++ b/src/components/TopicDetails.tsx @@ -20,18 +20,22 @@ const TopicDetails = () => { <> - Topic - Real Numbers + {t('CENTER_SESSION.TOPIC')} + {/* Real Numbers */} - Sub Topic - Revisiting Irrational Numbers + {t('CENTER_SESSION.SUBTOPIC')} + {/* Revisiting Irrational Numbers */} { - Remove this session + {t('CENTER_SESSION.REMOVE_THIS_SESSION')} - + @@ -64,40 +70,38 @@ const TopicDetails = () => { }} > } + expandIcon={ + + } aria-controls="panel1-content" id="panel1-header" className="accordion-summary" - sx={{ m: 0, background: '#F1E7D9', px: '16px' }} + sx={{ + m: 0, + background: theme?.palette?.background.paper, + px: '16px', + }} > - - Facilitators Pre-requisites + + {t('CENTER_SESSION.FACILITATORS')} - + - Title - Video + {t('CENTER_SESSION.TITLE')} - Title - Video - - - - - Title - Video - - - - - Title - Video + {t('CENTER_SESSION.TITLE')} diff --git a/src/pages/centers/[cohortId].tsx b/src/pages/centers/[cohortId].tsx index bafd9089..5e01029b 100644 --- a/src/pages/centers/[cohortId].tsx +++ b/src/pages/centers/[cohortId].tsx @@ -1,13 +1,9 @@ import { Button, - Divider, - Grid, IconButton, - InputLabel, ListItemIcon, Menu, MenuItem, - Select, Typography, } from '@mui/material'; import React, { useEffect, useState } from 'react'; @@ -21,26 +17,18 @@ import CenterSessionModal from '@/components/CenterSessionModal'; import CohortLearnerList from '@/components/CohortLearnerList'; import { CustomField } from '@/utils/Interfaces'; import DeleteOutlineOutlinedIcon from '@mui/icons-material/DeleteOutlineOutlined'; -import DeleteSession from '@/components/DeleteSession'; -import FormControl from '@mui/material/FormControl'; -import FormControlLabel from '@mui/material/FormControlLabel'; -import FormLabel from '@mui/material/FormLabel'; import { GetStaticPaths } from 'next'; 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 Radio from '@mui/material/Radio'; -import RadioGroup from '@mui/material/RadioGroup'; import RenameCenterModal from '@/components/center/RenameCenterModal'; -import ScheduleModal from '@/components/ScheduleModal'; +import Schedule from '@/components/Schedule'; 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'; @@ -271,10 +259,7 @@ const TeachingCenterDetails = () => { title={'Schedule'} primary={'Next'} > - {/* - */} - {/* */} - + 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 2f717a03..47298d5f 100644 --- a/src/styles/globals.css +++ b/src/styles/globals.css @@ -948,7 +948,7 @@ main { } .facilitator-bg { - background-image: url('./../assets/images/Facilitators.png'); + background-image: url('./../assets/images/decorationBg.png'); /* width: 140px; */ height: 180px; background-position: center; From 6bd7793663389f58157e3d9622b09da1ec340ae9 Mon Sep 17 00:00:00 2001 From: TTPL-RT-52 Date: Mon, 15 Jul 2024 13:01:57 +0530 Subject: [PATCH 3/4] Issue #PS-1344 fix: Center Sessions UI Implementation --- public/locales/en/common.json | 2 -- public/locales/hi/common.json | 24 ++++++++++++++++++++++++ public/locales/mr/common.json | 24 ++++++++++++++++++++++++ 3 files changed, 48 insertions(+), 2 deletions(-) diff --git a/public/locales/en/common.json b/public/locales/en/common.json index aa2d6d46..385dcb51 100644 --- a/public/locales/en/common.json +++ b/public/locales/en/common.json @@ -307,12 +307,10 @@ "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", diff --git a/public/locales/hi/common.json b/public/locales/hi/common.json index d623f845..512404fc 100644 --- a/public/locales/hi/common.json +++ b/public/locales/hi/common.json @@ -268,5 +268,29 @@ "REQUEST_TO_DELETE": "हटाने का अनुरोध", "RENAME": "नाम बदलें", "CENTER_RENAMED": "केंद्र का नाम सफलतापूर्वक बदल दिया गया!" + }, + + "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 eefc9739..633c3f83 100644 --- a/public/locales/mr/common.json +++ b/public/locales/mr/common.json @@ -269,5 +269,29 @@ "REQUEST_TO_DELETE": "हटवण्याची विनंती", "RENAME": "नाव बदला", "CENTER_RENAMED": "केंद्राचे नाव यशस्वीरित्या बदलले गेले!" + }, + + "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": "शीर्षक" } } From 7a858135574b8b4e0faa5541f32e8d175c97998a Mon Sep 17 00:00:00 2001 From: TTPL-RT-52 Date: Mon, 15 Jul 2024 14:06:47 +0530 Subject: [PATCH 4/4] Issue #PS-1344 fix: Center Sessions UI Implementation --- src/components/PlannedSession.tsx | 16 +++++++++++----- src/pages/centers/[cohortId].tsx | 3 ++- src/utils/app.constant.ts | 5 +++++ 3 files changed, 18 insertions(+), 6 deletions(-) diff --git a/src/components/PlannedSession.tsx b/src/components/PlannedSession.tsx index fc2380bf..d58fd42d 100644 --- a/src/components/PlannedSession.tsx +++ b/src/components/PlannedSession.tsx @@ -16,14 +16,20 @@ 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('Offline'); + const [sessionMode, setSessionMode] = useState( + sessionModeConstant.OFFLINE + ); const handleSessionModeChange = (event: ChangeEvent) => { - setSessionMode(event.target.value); + setSessionMode(event.target.value as SessionMode); }; const { t } = useTranslation(); @@ -48,7 +54,7 @@ const PlannedSession = () => { onChange={handleSessionModeChange} > } @@ -59,7 +65,7 @@ const PlannedSession = () => { } /> } @@ -88,7 +94,7 @@ const PlannedSession = () => { - {sessionMode === 'Online' && ( + {sessionMode === sessionModeConstant.ONLINE && ( <> diff --git a/src/pages/centers/[cohortId].tsx b/src/pages/centers/[cohortId].tsx index 5e01029b..cc773b53 100644 --- a/src/pages/centers/[cohortId].tsx +++ b/src/pages/centers/[cohortId].tsx @@ -22,6 +22,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'; @@ -259,7 +260,7 @@ const TeachingCenterDetails = () => { title={'Schedule'} primary={'Next'} > - + 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', +}