From 8cacf5dd96fa8ce315d699f07888dce40cdd7e63 Mon Sep 17 00:00:00 2001 From: ttpl-rt-217 Date: Mon, 10 Feb 2025 15:13:28 +0530 Subject: [PATCH 1/9] Issue task PS-3887 :mark center popup conditional rendering --- src/components/CohortFacilitatorList.tsx | 38 +++++++++++---- src/components/MarkBulkAttendance.tsx | 2 +- src/components/Modal.tsx | 44 +++++++++++++++-- src/pages/dashboard.tsx | 62 ++++++++++++++++++++++-- 4 files changed, 128 insertions(+), 18 deletions(-) diff --git a/src/components/CohortFacilitatorList.tsx b/src/components/CohortFacilitatorList.tsx index 739dddd0..68c2bffd 100644 --- a/src/components/CohortFacilitatorList.tsx +++ b/src/components/CohortFacilitatorList.tsx @@ -39,6 +39,7 @@ const CohortLearnerList: React.FC = ({ const [loading, setLoading] = React.useState(false); const [userData, setUserData] = React.useState(); const [resData, setResData] = React.useState(); + console.log(userData); const [filteredData, setFilteredData] = React.useState(userData); const [searchTerm, setSearchTerm] = React.useState(''); @@ -67,9 +68,12 @@ const CohortLearnerList: React.FC = ({ } try { if (cohortId) { - const filters = { cohortId: cohortId }; - const limit = pagesLimit - const page=offset + const filters = { + cohortId: cohortId, + }; + const limit = pagesLimit; + const page = offset; + const response = await getMyCohortFacilitatorList({ limit, page, @@ -93,17 +97,17 @@ const CohortLearnerList: React.FC = ({ age: ageField ? ageField.value : null, }; }); - // setResData(userDetails) if (isMobile) { setInfiniteData([...infiniteData, ...userDetails]); setFilteredData(userDetails); + setUserData([...infiniteData, ...userDetails]); } else { setUserData(userDetails); setFilteredData(userDetails); setInfiniteData(userDetails); - setOffset(0) + setOffset(0); } setTotalCount(response.result?.totalCount); @@ -125,6 +129,7 @@ const CohortLearnerList: React.FC = ({ getCohortMemberList(); }, [cohortId, reloadState, page, infinitePage]); + const onDelete = () => {}; @@ -154,11 +159,26 @@ const CohortLearnerList: React.FC = ({ showToastMessage(t('COMMON.SOMETHING_WENT_WRONG'), 'error'); } } - const handleSearch = (searchTerm: string) => { - const filtered = userData?.filter((data) => - data?.name?.toLowerCase()?.includes(searchTerm) || data?.enrollmentNumber?.toLowerCase()?.includes(searchTerm) + const handleSearch = async (searchTerm: string) => { + const filtered = userData?.filter((data) =>{ + return data?.name?.toLowerCase()?.includes(searchTerm.toLowerCase()) || data?.enrollmentNumber?.toLowerCase()?.includes(searchTerm) + } ); - setFilteredData(filtered); + // const filters = { + // cohortId: cohortId, + // firstName: searchTerm + // }; + // const limit = pagesLimit; + // const page = offset; + // const response = await getMyCohortFacilitatorList({ + // limit, + // page, + // filters, + // }); + + setUserData(resData || []); + setFilteredData(resData || []); + }; const handlePageChange = (newPage: number) => { diff --git a/src/components/MarkBulkAttendance.tsx b/src/components/MarkBulkAttendance.tsx index 1e0fbce4..1e6af3d5 100644 --- a/src/components/MarkBulkAttendance.tsx +++ b/src/components/MarkBulkAttendance.tsx @@ -263,7 +263,7 @@ const MarkBulkAttendance: React.FC = ({ sx={{ padding: '0 10px' }} > - void; - secondaryBtnText?: string; + secondaryBtnText?: string; handleSecondaryAction?: () => void; + selectedDate?: Date; // Ensure selectedDate is always a Date if provided } + const ModalComponent: React.FC = ({ open, onClose, @@ -26,10 +36,14 @@ const ModalComponent: React.FC = ({ children, btnText, handlePrimaryAction, + selectedDate, secondaryBtnText='Back', handleSecondaryAction=(()=>{console.log('Button2')}), }) => { const { t } = useTranslation(); + const theme = useTheme(); + + return ( @@ -42,9 +56,25 @@ const ModalComponent: React.FC = ({ justifyContent="space-between" alignItems="center" > - - {heading} - + + + {heading} + + + {selectedDate + ? getDayMonthYearFormat(shortDateFormat(selectedDate)) + : 'N/A'} + + + = ({ aria-label="Close" /> + {SubHeading} {children} + + {secondaryBtnText && handleSecondaryAction && ( | null = null; if (!isEliminatedFromBuild('SessionCardFooter', 'component')) { @@ -255,6 +256,9 @@ const Dashboard: React.FC = () => { ); const cohortData = response?.result?.userData?.customFields; + console.log(cohortData, "shreyas"); + + const state = cohortData?.find( (item: CustomField) => item.label === 'STATES' ); @@ -627,7 +631,7 @@ const Dashboard: React.FC = () => { }; telemetryFactory.interact(telemetryInteract); }; - + const viewTimeTable = () => { if (classId !== 'all') { router.push( @@ -811,6 +815,29 @@ const Dashboard: React.FC = () => { ? localStorage.getItem('mui-mode') : null; + const remoteFields = cohortsData.flatMap((cohort) => + cohort.customField.filter((field) => field.value === "REMOTE") + ); + + console.log(classId, remoteFields, myCohortList, "shreyas"); + + const teacherAPP = localStorage.getItem("teacherApp"); + const parsedData = teacherAPP ? JSON.parse(teacherAPP) : null; + + const cohortData = parsedData?.state?.cohorts; + + const cohort = cohortData?.find((cohort: any) => cohort.cohortId === classId); + // console.log("cohortdata", cohort) + const selectedCohortType = cohort?.cohortType ==="REMOTE" + + + + + // console.log("Class IDs with remoteFields:", remoteClassIds); + + // console.log(cohortData ,'sunny'); + + return ( <> { @@ -882,7 +909,7 @@ const Dashboard: React.FC = () => { > {t('DASHBOARD.DAY_WISE_ATTENDANCE')} - + = () => { {open && ( - + = () => { dropoutCount={attendanceData?.dropoutCount} bulkStatus={attendanceData?.bulkAttendanceStatus} /> + + setOpen(true)} + > + +

Are you sure you want to mark attendance manually?

+

+ Attendance is usually auto-marked after the first session of the day. +

+

+ Use manual marking only for technical issues, sessions on other + platforms, or if not conducted online. +

+

+ Note: Manually marked attendance will override auto-attendance if it is + later recorded. +

+ + + + + )} From 744a11f5f1a6d5e9c57926ea5b51e88c0f929955 Mon Sep 17 00:00:00 2001 From: ttpl-rt-217 Date: Mon, 10 Feb 2025 15:28:01 +0530 Subject: [PATCH 2/9] Issue task PS-3887 :mark center popup conditional rendering --- src/pages/dashboard.tsx | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/src/pages/dashboard.tsx b/src/pages/dashboard.tsx index 7fa8a4bf..50f4654d 100644 --- a/src/pages/dashboard.tsx +++ b/src/pages/dashboard.tsx @@ -1162,25 +1162,25 @@ const Dashboard: React.FC = () => { setOpen(true)} > -

Are you sure you want to mark attendance manually?

- Attendance is usually auto-marked after the first session of the day. + {t("COMMON.ARE_YOU_SURE_MANUALLY")}

- Use manual marking only for technical issues, sessions on other - platforms, or if not conducted online. + {t('COMMON.ATTENDANCE_IS_USUALLY')} +

+

+ {t("COMMON.USE_MANUAL")}

- Note: Manually marked attendance will override auto-attendance if it is - later recorded. + {t("COMMON.NOTE_MANUALLY")}

From fbe67691030aafe4d4e001429e28a08c28dfa8a1 Mon Sep 17 00:00:00 2001 From: ttpl-rt-217 Date: Mon, 10 Feb 2025 15:49:49 +0530 Subject: [PATCH 3/9] Issue task PS-3887 :mark center popup conditional rendering --- public/locales/en/common.json | 7 ++++++- src/pages/dashboard.tsx | 17 ++++++++--------- 2 files changed, 14 insertions(+), 10 deletions(-) diff --git a/public/locales/en/common.json b/public/locales/en/common.json index c35bb380..5279e23c 100644 --- a/public/locales/en/common.json +++ b/public/locales/en/common.json @@ -162,7 +162,12 @@ "UPDATE_AVAILABLE": "New Update Available!", "RELOAD_TO_UPDATE": "Get the latest features and improvements—update now to enjoy a smoother experience and stay up-to-date!", "NO_ASSIGNED_BOARDS":"No assigned Board for selected Center", - "YOU_HAVE_UNSAVED_CHANGES": "You have unsaved changes. Are you sure you want to go back?" + "YOU_HAVE_UNSAVED_CHANGES": "You have unsaved changes. Are you sure you want to go back?", + "ATTENDANCE_IS_USUALLY":" Attendance is usually auto-marked after the first session of the day.", + "ARE_YOU_SURE_MANUALLY" : "Are you sure you want to mark attendance manually?", + "USE_MANUAL":"Use manual marking only for technical issues, sessions on other platforms, or if not conducted online.", + "NOTE_MANUALLY":"Note: Manually marked attendance will override auto-attendance if it is later recorded.", + "YES_MANUALLY":"Yes, Mark Manually" }, "LOGIN_PAGE": { diff --git a/src/pages/dashboard.tsx b/src/pages/dashboard.tsx index 50f4654d..ab49e19b 100644 --- a/src/pages/dashboard.tsx +++ b/src/pages/dashboard.tsx @@ -821,14 +821,13 @@ const Dashboard: React.FC = () => { console.log(classId, remoteFields, myCohortList, "shreyas"); - const teacherAPP = localStorage.getItem("teacherApp"); - const parsedData = teacherAPP ? JSON.parse(teacherAPP) : null; - - const cohortData = parsedData?.state?.cohorts; - - const cohort = cohortData?.find((cohort: any) => cohort.cohortId === classId); - // console.log("cohortdata", cohort) - const selectedCohortType = cohort?.cohortType ==="REMOTE" + const isRemoteCohort = React.useMemo(() => { + const teacherApp = JSON.parse(localStorage.getItem("teacherApp") || "null"); + const cohort = teacherApp?.state?.cohorts?.find( + (c: any) => c.cohortId === classId + ); +return cohort?.cohortType === "REMOTE"; +}, [classId]); @@ -1161,7 +1160,7 @@ const Dashboard: React.FC = () => { /> Date: Mon, 10 Feb 2025 15:54:05 +0530 Subject: [PATCH 4/9] Issue task PS-3887 :mark center popup conditional rendering --- src/components/Modal.tsx | 7 +++---- src/pages/dashboard.tsx | 2 -- 2 files changed, 3 insertions(+), 6 deletions(-) diff --git a/src/components/Modal.tsx b/src/components/Modal.tsx index 2757f79a..9974c986 100644 --- a/src/components/Modal.tsx +++ b/src/components/Modal.tsx @@ -1,16 +1,15 @@ import { Box, Divider, Modal, Typography } from '@mui/material'; +import { modalStyles } from '@/styles/modalStyles'; import CloseSharpIcon from '@mui/icons-material/CloseSharp'; +import { useTheme } from '@mui/material/styles'; import PropTypes from 'prop-types'; import { useTranslation } from 'react-i18next'; import ButtonFunctional from './ButtonComponent'; -import { modalStyles } from '@/styles/modalStyles'; -import { useTheme } from '@mui/material/styles'; import { - deepClone, getDayMonthYearFormat, - shortDateFormat, + shortDateFormat } from '../utils/Helper'; diff --git a/src/pages/dashboard.tsx b/src/pages/dashboard.tsx index ab49e19b..5f189157 100644 --- a/src/pages/dashboard.tsx +++ b/src/pages/dashboard.tsx @@ -255,8 +255,6 @@ const Dashboard: React.FC = () => { (item: any) => item?.label === 'BLOCKS' ); const cohortData = response?.result?.userData?.customFields; - - console.log(cohortData, "shreyas"); const state = cohortData?.find( From 111052bb63bb2e70cbe3d57b3b09a28476c96a94 Mon Sep 17 00:00:00 2001 From: ttpl-rt-217 Date: Mon, 10 Feb 2025 18:23:01 +0530 Subject: [PATCH 5/9] Issue task PS-3887 :mark center popup conditional rendering --- src/pages/dashboard.tsx | 92 ++++++++++++++++++++++++++--------------- 1 file changed, 59 insertions(+), 33 deletions(-) diff --git a/src/pages/dashboard.tsx b/src/pages/dashboard.tsx index 5f189157..cc366544 100644 --- a/src/pages/dashboard.tsx +++ b/src/pages/dashboard.tsx @@ -165,6 +165,14 @@ const Dashboard: React.FC = () => { dropoutCount: 0, bulkAttendanceStatus: '', }); + const [isRemoteCohort, setIsRemoteCohort] = React.useState(false); + // const [test, setTest] = React.useState(false); + + + // React.useEffect(() => { + + + // }, [classId, test]); const handleAttendanceDataUpdate = (data: any) => { setAttendanceData(data); @@ -528,10 +536,21 @@ const Dashboard: React.FC = () => { }; const handleModalToggle = () => { - setOpen(!open); - ReactGA.event('mark/modify-attendance-button-clicked-dashboard', { - teacherId: userId, - }); + if (! isRemoteCohort) { + setOpen(!open); + } + + + const teacherApp = JSON.parse(localStorage.getItem("teacherApp") || "null"); + const cohort = teacherApp?.state?.cohorts?.find( + (c: any) => c.cohortId === classId + ); + setIsRemoteCohort(cohort?.cohortType === "REMOTE"); + ReactGA.event('mark/modify-attendance-button-clicked-dashboard', { + teacherId: userId, + }); + + const telemetryInteract = { context: { @@ -548,6 +567,7 @@ const Dashboard: React.FC = () => { telemetryFactory.interact(telemetryInteract); }; + const getMonthName = (dateString: string) => { try { const parsedDate = parse(dateString, 'yyyy-MM-dd', new Date()); @@ -641,6 +661,8 @@ const Dashboard: React.FC = () => { const handleClose = () => { setOpen(false); + setIsRemoteCohort(false) + // setTest(false) }; const todayDate = getTodayDate(); @@ -813,19 +835,15 @@ const Dashboard: React.FC = () => { ? localStorage.getItem('mui-mode') : null; - const remoteFields = cohortsData.flatMap((cohort) => - cohort.customField.filter((field) => field.value === "REMOTE") - ); - console.log(classId, remoteFields, myCohortList, "shreyas"); - const isRemoteCohort = React.useMemo(() => { - const teacherApp = JSON.parse(localStorage.getItem("teacherApp") || "null"); - const cohort = teacherApp?.state?.cohorts?.find( - (c: any) => c.cohortId === classId - ); -return cohort?.cohortType === "REMOTE"; -}, [classId]); + // const isRemoteCohort = React.useMemo(() => { + // const teacherApp = JSON.parse(localStorage.getItem("teacherApp") || "null"); + // const cohort = teacherApp?.state?.cohorts?.find( + // (c: any) => c.cohortId === classId + // ); + // return cohort?.cohortType === "REMOTE"; + // }, [classId]); @@ -840,6 +858,7 @@ return cohort?.cohortType === "REMOTE"; { ( <> + {/* */} <> {!isAuthenticated && ( @@ -1157,34 +1176,41 @@ return cohort?.cohortType === "REMOTE"; bulkStatus={attendanceData?.bulkAttendanceStatus} /> - + + )} + { + isRemoteCohort && ( + setOpen(true)} - > - -

+ > + + {t("COMMON.ARE_YOU_SURE_MANUALLY")} -

-

+ + {t('COMMON.ATTENDANCE_IS_USUALLY')} -

-

+ + {t("COMMON.USE_MANUAL")} -

-

+ + {t("COMMON.NOTE_MANUALLY")} -

- - - - - - )} + + + + ) + } From 2af36da75a7153c55bca8d3bead2100939f3356a Mon Sep 17 00:00:00 2001 From: ttpl-rt-217 Date: Mon, 10 Feb 2025 23:30:18 +0530 Subject: [PATCH 6/9] Issue task PS-3887 :mark center popup conditional rendering --- src/pages/dashboard.tsx | 64 ++++++++++++----------------------------- 1 file changed, 18 insertions(+), 46 deletions(-) diff --git a/src/pages/dashboard.tsx b/src/pages/dashboard.tsx index cc366544..06ae1ade 100644 --- a/src/pages/dashboard.tsx +++ b/src/pages/dashboard.tsx @@ -536,21 +536,7 @@ const Dashboard: React.FC = () => { }; const handleModalToggle = () => { - if (! isRemoteCohort) { - setOpen(!open); - } - - - const teacherApp = JSON.parse(localStorage.getItem("teacherApp") || "null"); - const cohort = teacherApp?.state?.cohorts?.find( - (c: any) => c.cohortId === classId - ); - setIsRemoteCohort(cohort?.cohortType === "REMOTE"); - ReactGA.event('mark/modify-attendance-button-clicked-dashboard', { - teacherId: userId, - }); - - + setOpen(!open); const telemetryInteract = { context: { @@ -567,6 +553,20 @@ const Dashboard: React.FC = () => { telemetryFactory.interact(telemetryInteract); }; + const handleRemoteSession = () => { + const teacherApp = JSON.parse(localStorage.getItem("teacherApp") || "null"); + const cohort = teacherApp?.state?.cohorts?.find( + (c: any) => c.cohortId === classId + ); + if (cohort?.cohortType === "REMOTE") { + setIsRemoteCohort(true); + ReactGA.event('mark/modify-attendance-button-clicked-dashboard', { + teacherId: userId, + }); + } else { + handleModalToggle() + } + } const getMonthName = (dateString: string) => { try { @@ -833,32 +833,12 @@ const Dashboard: React.FC = () => { const darkMode = typeof window !== 'undefined' && window.localStorage ? localStorage.getItem('mui-mode') - : null; - - - - // const isRemoteCohort = React.useMemo(() => { - // const teacherApp = JSON.parse(localStorage.getItem("teacherApp") || "null"); - // const cohort = teacherApp?.state?.cohorts?.find( - // (c: any) => c.cohortId === classId - // ); - // return cohort?.cohortType === "REMOTE"; - // }, [classId]); - - - - - // console.log("Class IDs with remoteFields:", remoteClassIds); - - // console.log(cohortData ,'sunny'); - - + : null; return ( <> { ( <> - {/* */} <> {!isAuthenticated && ( @@ -1124,7 +1104,7 @@ const Dashboard: React.FC = () => { width: '15%', }, }} - onClick={handleModalToggle} + onClick={handleRemoteSession} disabled={ currentAttendance === 'futureDate' || classId === 'all' || @@ -1139,7 +1119,6 @@ const Dashboard: React.FC = () => { {open && ( - <> = () => { dropoutCount={attendanceData?.dropoutCount} bulkStatus={attendanceData?.bulkAttendanceStatus} /> - - - - - - - )} { isRemoteCohort && ( @@ -1192,7 +1164,7 @@ const Dashboard: React.FC = () => { btnText={t('COMMON.YES_MANUALLY')} selectedDate={selectedDate ? new Date(selectedDate) : undefined} onClose={handleClose} - handlePrimaryAction={() => setOpen(true)} + handlePrimaryAction={() => handleModalToggle()} > From 4652801af1ca2fde8b6be7678cbccf59080c137c Mon Sep 17 00:00:00 2001 From: ttpl-rt-217 Date: Mon, 10 Feb 2025 23:41:27 +0530 Subject: [PATCH 7/9] Issue task PS-3887 :mark center popup conditional rendering --- src/pages/dashboard.tsx | 8 -------- 1 file changed, 8 deletions(-) diff --git a/src/pages/dashboard.tsx b/src/pages/dashboard.tsx index 06ae1ade..31c2ce7e 100644 --- a/src/pages/dashboard.tsx +++ b/src/pages/dashboard.tsx @@ -166,14 +166,6 @@ const Dashboard: React.FC = () => { bulkAttendanceStatus: '', }); const [isRemoteCohort, setIsRemoteCohort] = React.useState(false); - // const [test, setTest] = React.useState(false); - - - // React.useEffect(() => { - - - // }, [classId, test]); - const handleAttendanceDataUpdate = (data: any) => { setAttendanceData(data); }; From 7dba910c2a813469f03ded7d1105fb249a4ca033 Mon Sep 17 00:00:00 2001 From: ttpl-rt-217 Date: Mon, 10 Feb 2025 23:56:44 +0530 Subject: [PATCH 8/9] Issue task PS-3887 :mark center popup conditional rendering --- src/pages/dashboard.tsx | 16 +++++++++++----- 1 file changed, 11 insertions(+), 5 deletions(-) diff --git a/src/pages/dashboard.tsx b/src/pages/dashboard.tsx index 31c2ce7e..ea686612 100644 --- a/src/pages/dashboard.tsx +++ b/src/pages/dashboard.tsx @@ -546,11 +546,13 @@ const Dashboard: React.FC = () => { }; const handleRemoteSession = () => { - const teacherApp = JSON.parse(localStorage.getItem("teacherApp") || "null"); - const cohort = teacherApp?.state?.cohorts?.find( - (c: any) => c.cohortId === classId - ); - if (cohort?.cohortType === "REMOTE") { + try { + const teacherApp = JSON.parse(localStorage.getItem("teacherApp") ?? "null"); + const cohort = teacherApp?.state?.cohorts?.find?.( + (c: any) => c.cohortId === classId + ); + const REMOTE_COHORT_TYPE = "REMOTE" as const; + if (cohort?.cohortType === REMOTE_COHORT_TYPE) { setIsRemoteCohort(true); ReactGA.event('mark/modify-attendance-button-clicked-dashboard', { teacherId: userId, @@ -558,6 +560,10 @@ const Dashboard: React.FC = () => { } else { handleModalToggle() } + } catch (error) { + console.error('Error parsing teacher app data:', error); + handleModalToggle(); + } } const getMonthName = (dateString: string) => { From 0796a8d08c8340b11f706d902311e06890867dff Mon Sep 17 00:00:00 2001 From: ttpl-rt-217 Date: Tue, 11 Feb 2025 14:44:41 +0530 Subject: [PATCH 9/9] Issue task PS-3899 : UI is breaking of Teacher app added unnecessary horizontal scroll on windows browsers --- src/components/MenuDrawer.tsx | 2 ++ src/pages/_app.tsx | 6 +----- 2 files changed, 3 insertions(+), 5 deletions(-) diff --git a/src/components/MenuDrawer.tsx b/src/components/MenuDrawer.tsx index 244b4400..50f2eee2 100644 --- a/src/components/MenuDrawer.tsx +++ b/src/components/MenuDrawer.tsx @@ -211,7 +211,9 @@ const MenuDrawer: React.FC = ({ sx={{ '& .MuiPaper-root': { borderRight: `1px solid ${theme.palette.warning['A100']}`, + '@media (max-width: 900px)': { zIndex: '998 !important', + }, left: isRTL ? '0px !important' : '0px !important', width: isRTL ? '350px !important' : 'unset !important', diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx index f2340305..e99a6f79 100644 --- a/src/pages/_app.tsx +++ b/src/pages/_app.tsx @@ -179,11 +179,7 @@ function App({ Component, pageProps }: AppProps) { sx={{ padding: '0', '@media (min-width: 900px)': { - width: !isFullWidthPage ? 'calc(100% - 22rem)' : '100%', - marginLeft: !isFullWidthPage ? '351px' : '0', - }, - '@media (min-width: 2000px)': { - width: '100%', + width: !isFullWidthPage ? 'calc(100% - 351px)' : '100%', marginLeft: !isFullWidthPage ? '351px' : '0', }, background: theme.palette.warning['A400'],