From b1d9f53630edf6f81d12890723b46aebfb647604 Mon Sep 17 00:00:00 2001 From: suvarnakale Date: Thu, 8 Aug 2024 18:26:35 +0530 Subject: [PATCH] Issue #PS-1626 feat: pathname changes --- src/pages/centers/[cohortId].tsx | 26 +- .../[cohortId]/events/[date]/index.tsx} | 23 +- src/pages/centers/[cohortId]/index.tsx | 686 ++++++++++++++++++ 3 files changed, 716 insertions(+), 19 deletions(-) rename src/pages/{eventMonthView.tsx => centers/[cohortId]/events/[date]/index.tsx} (90%) create mode 100644 src/pages/centers/[cohortId]/index.tsx diff --git a/src/pages/centers/[cohortId].tsx b/src/pages/centers/[cohortId].tsx index 4f353280..02a51c85 100644 --- a/src/pages/centers/[cohortId].tsx +++ b/src/pages/centers/[cohortId].tsx @@ -47,7 +47,7 @@ import { serverSideTranslations } from 'next-i18next/serverSideTranslations'; import { useRouter } from 'next/router'; import ReactGA from 'react-ga4'; import { Session } from '../../utils/Interfaces'; -import Schedule from './../../components/Schedule'; +import Schedule from '../../components/Schedule'; import reassignLearnerStore from '@/store/reassignLearnerStore'; import { Role } from '@/utils/app.constant'; import { showToastMessage } from '@/components/Toastify'; @@ -278,7 +278,7 @@ const TeachingCenterDetails = () => { const viewAttendanceHistory = () => { if (classId !== 'all') { - router.push('/eventMonthView'); + router.push(`${router.asPath}/events/${selectedDate}`); ReactGA.event('month-name-clicked', { selectedCohortID: classId }); } }; @@ -318,7 +318,7 @@ const TeachingCenterDetails = () => { {cohortDetails?.centerType && ( - {cohortDetails?.centerType} + {cohortDetails?.centerType} )} @@ -327,21 +327,21 @@ const TeachingCenterDetails = () => { fontSize={'11px'} fontWeight={500} > - {cohortDetails?.address} + {cohortDetails?.address} {role === Role.TEAM_LEADER && ( - - - + + + )} { const theme = useTheme(); const { t } = useTranslation(); + const router = useRouter(); + const { date }: any = router.query; const [sessions, setSessions] = useState([]); const [selectedDate, setSelectedDate] = useState(new Date()); @@ -28,7 +32,7 @@ const eventMonthView = () => { useEffect(() => { const getSessionsData = async () => { try { - const today = shortDateFormat(selectedDate); + const date = shortDateFormat(selectedDate); let cohortId; if (typeof window !== 'undefined' && window.localStorage) { cohortId = localStorage.getItem('classId') || ''; @@ -37,7 +41,7 @@ const eventMonthView = () => { const limit = 0; const offset = 0; const filters = { - date: today, + date: date, cohortId: cohortId, status: ['live'], }; @@ -45,7 +49,7 @@ const eventMonthView = () => { let sessionArray: any[] = []; let extraSessionArray: any[] = []; if (response?.events.length > 0) { - response?.events.forEach((event: any) => { + response?.events?.forEach((event: any) => { if (event.isRecurring) { sessionArray.push(event); } @@ -112,8 +116,8 @@ const eventMonthView = () => { onClick={() => { window.history.back(); logEvent({ - action: 'back-button-clicked-attendance-history-page', - category: 'Attendance History Page', + action: 'back-button-clicked-events-month-page', + category: 'events month Page', label: 'Back Button Clicked', }); }} @@ -222,3 +226,10 @@ export async function getStaticProps({ locale }: { locale: string }) { }, }; } + +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 + }; +}; diff --git a/src/pages/centers/[cohortId]/index.tsx b/src/pages/centers/[cohortId]/index.tsx new file mode 100644 index 00000000..7150a644 --- /dev/null +++ b/src/pages/centers/[cohortId]/index.tsx @@ -0,0 +1,686 @@ +import { + formatSelectedDate, + getMonthName, + getTodayDate, + shortDateFormat, + toPascalCase, +} from '@/utils/Helper'; +import { + Button, + IconButton, + ListItemIcon, + Menu, + MenuItem, + Typography, +} from '@mui/material'; +import React, { useEffect, useState } from 'react'; + +import AddLearnerModal from '@/components/AddLeanerModal'; +import CenterSessionModal from '@/components/CenterSessionModal'; +import CohortFacilitatorList from '@/components/CohortFacilitatorList'; +import CohortLearnerList from '@/components/CohortLearnerList'; +import DeleteSession from '@/components/DeleteSession'; +import Header from '@/components/Header'; +import PlannedSession from '@/components/PlannedSession'; +import SessionCard from '@/components/SessionCard'; +import SessionCardFooter from '@/components/SessionCardFooter'; +import WeekCalender from '@/components/WeekCalender'; +import DeleteCenterModal from '@/components/center/DeleteCenterModal'; +import RenameCenterModal from '@/components/center/RenameCenterModal'; +import { getCohortDetails } from '@/services/CohortServices'; +import { getSessions } from '@/services/Sessionservice'; +import { CustomField } from '@/utils/Interfaces'; +import AddIcon from '@mui/icons-material/Add'; +import ArrowForwardIcon from '@mui/icons-material/ArrowForward'; +import CalendarMonthIcon from '@mui/icons-material/CalendarMonth'; +import DeleteOutlineOutlinedIcon from '@mui/icons-material/DeleteOutlineOutlined'; +import KeyboardBackspaceOutlinedIcon from '@mui/icons-material/KeyboardBackspaceOutlined'; +import ModeEditOutlineOutlinedIcon from '@mui/icons-material/ModeEditOutlineOutlined'; +import MoreVertIcon from '@mui/icons-material/MoreVert'; +import Box from '@mui/material/Box'; +import Tab from '@mui/material/Tab'; +import Tabs from '@mui/material/Tabs'; +import { useTheme } from '@mui/material/styles'; +import { GetStaticPaths } from 'next'; +import { useTranslation } from 'next-i18next'; +import { serverSideTranslations } from 'next-i18next/serverSideTranslations'; +import { useRouter } from 'next/router'; +import ReactGA from 'react-ga4'; +import { Session } from '../../../utils/Interfaces'; +import Schedule from '../../../components/Schedule'; +import reassignLearnerStore from '@/store/reassignLearnerStore'; +import { Role } from '@/utils/app.constant'; +import { showToastMessage } from '@/components/Toastify'; +import { getEventList } from '@/services/EventService'; + +import manageUserStore from '@/store/manageUserStore'; +import { modifyAttendanceLimit, eventDaysLimit } from '../../../../app.config'; + +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 [role, setRole] = React.useState(''); + + const store = manageUserStore(); + const setDistrictCode = manageUserStore( + (state: { setDistrictCode: any }) => state.setDistrictCode + ); + const setDistrictId = manageUserStore( + (state: { setDistrictId: any }) => state.setDistrictId + ); + const setStateCode = manageUserStore( + (state: { setStateCode: any }) => state.setStateCode + ); + const setStateId = manageUserStore( + (state: { setStateId: any }) => state.setStateId + ); + const setBlockCode = manageUserStore( + (state: { setBlockCode: any }) => state.setBlockCode + ); + const setBlockId = manageUserStore( + (state: { setBlockId: any }) => state.setBlockId + ); + + const [open, setOpen] = React.useState(false); + 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 [extraSessions, setExtraSessions] = React.useState(); + const [percentageAttendanceData, setPercentageAttendanceData] = + React.useState(null); + const [openRenameCenterModal, setOpenRenameCenterModal] = + React.useState(false); + const [openDeleteCenterModal, setOpenDeleteCenterModal] = + React.useState(false); + const [openAddLearnerModal, setOpenAddLearnerModal] = React.useState(false); + const [openSchedule, setOpenSchedule] = React.useState(false); + + const [deleteModal, setDeleteModal] = React.useState(false); + + const [clickedBox, setClickedBox] = useState(null); + const [isLearnerAdded, setIsLearnerAdded] = useState(false); + + const handleClick = (selection: string) => { + setClickedBox(selection); + }; + + const removeModal = () => { + setDeleteModal(true); + }; + + const handleCentermodel = () => { + setOpenSchedule(true); + }; + + const handleSchedule = () => {}; + + const handleOpen = () => setOpen(true); + const handleClose = () => { + setOpen(false); + setOpenSchedule(false); + setDeleteModal(false); + }; + const setRemoveCohortId = reassignLearnerStore( + (state) => state.setRemoveCohortId + ); + + useEffect(() => { + if (typeof window !== 'undefined' && window.localStorage) { + const role = localStorage.getItem('role'); + setRole(role); + } + }, []); + + useEffect(() => { + const getCohortData = async () => { + const response = await getCohortDetails(cohortId); + + let cohortData = null; + + if (response?.cohortData?.length) { + cohortData = response?.cohortData[0]; + setRemoveCohortId(cohortData?.cohortId); + + if (cohortData?.customField?.length) { + const district = cohortData.customField.find( + (item: CustomField) => item.label === 'DISTRICTS' + ); + const districtCode = district?.code || ''; + const districtId = district?.fieldId || ''; + const state = cohortData.customField.find( + (item: CustomField) => item.label === 'STATES' + ); + const stateCode = state?.code || ''; + const stateId = state?.fieldId || ''; + + const blockField = cohortData?.customField.find( + (field: any) => field.label === 'BLOCKS' + ); + + cohortData.address = + `${toPascalCase(district?.value)}, ${toPascalCase(state?.value)}` || + ''; + } + setCohortDetails(cohortData); + } + }; + getCohortData(); + }, []); + + useEffect(() => { + const getSessionsData = async () => { + try { + const limit = 0; + const offset = 0; + const filters = { + date: selectedDate, + cohortId: cohortId, + status: ['live'], + }; + const response = await getEventList({ limit, offset, filters }); + let sessionArray: any[] = []; + if (response?.events.length > 0) { + response?.events.forEach((event: any) => { + if (event.isRecurring) { + sessionArray.push(event); + } + }); + } + setSessions(sessionArray); + } catch (error) { + setSessions([]); + } + }; + + getSessionsData(); + }, [selectedDate]); + + useEffect(() => { + const getExtraSessionsData = async () => { + try { + const date = new Date(); + const startDate = shortDateFormat(new Date()); + const lastDate = new Date( + date.setDate(date.getDate() + modifyAttendanceLimit) + ); + const endDate = shortDateFormat(lastDate); + const limit = 0; + const offset = 0; + const filters = { + startDate: startDate, + endDate: endDate, + cohortId: cohortId, + status: ['live'], + }; + const response = await getEventList({ limit, offset, filters }); + let extraSessionArray: any[] = []; + if (response?.events.length > 0) { + response?.events.forEach((event: any) => { + if (!event.isRecurring) { + extraSessionArray.push(event); + } + }); + } + setExtraSessions(extraSessionArray); + } catch (error) { + setExtraSessions([]); + } + }; + + getExtraSessionsData(); + }, []); + + const handleChange = (event: React.SyntheticEvent, newValue: number) => { + setValue(newValue); + }; + + const handleBackEvent = () => { + window.history.back(); + }; + + const showDetailsHandle = (dayStr: string) => { + setSelectedDate(formatSelectedDate(dayStr)); + setShowDetails(true); + }; + + const [anchorEl, setAnchorEl] = useState(null); + + const handleMenuOpen = (event: any) => { + setAnchorEl(event.currentTarget); + }; + + const handleMenuClose = () => { + setAnchorEl(null); + }; + + const handleRenameCenterClose = () => { + setOpenRenameCenterModal(false); + }; + + const handleDeleteCenterClose = () => { + setOpenDeleteCenterModal(false); + }; + + const handleOpenAddLearnerModal = () => { + setOpenAddLearnerModal(true); + }; + + const handleCloseAddLearnerModal = () => { + setOpenAddLearnerModal(false); + }; + + const viewAttendanceHistory = () => { + if (classId !== 'all') { + router.push(`${router.asPath}/events/${getMonthName()?.toLowerCase()}`); + ReactGA.event('month-name-clicked', { selectedCohortID: classId }); + } + }; + + const handleLearnerAdded = () => { + setIsLearnerAdded(true); + }; + + return ( + <> +
+ + + + + + + {toPascalCase(cohortDetails?.name)} + + {cohortDetails?.centerType && ( + + {cohortDetails?.centerType} + + )} + + + {cohortDetails?.address} + + + + + {role === Role.TEAM_LEADER && ( + + + + )} + + { + setOpenRenameCenterModal(true); + handleMenuClose(); + }} + > + + + + {t('CENTERS.RENAME_CENTER')} + + { + setOpenDeleteCenterModal(true); + handleMenuClose(); + }} + > + + + + {t('CENTERS.REQUEST_TO_DELETE')} + + + + + + + + + + + + + + + {value === 1 && ( + <> + + + + + + {deleteModal ? ( + + ) : openSchedule ? ( + + ) : ( + + )} + + + + + {t('COMMON.UPCOMING_EXTRA_SESSION', { days: eventDaysLimit })} + + + {extraSessions?.map((item) => ( + + + + ))} + + {extraSessions && extraSessions?.length === 0 && ( + + {t('COMMON.NO_SESSIONS_SCHEDULED')} + + )} + + + + + + {t('CENTER_SESSION.PLANNED_SESSIONS')} + + + + + {getMonthName()} + + + + + + + + + + {sessions?.map((item) => ( + + + + ))} + {sessions && sessions?.length === 0 && ( + + {t('COMMON.NO_SESSIONS_SCHEDULED')} + + )} + + + )} + + + {value === 2 && ( + <> + + + + + { + router.push('/attendance-overview'); + }} + > + {t('COMMON.REVIEW_ATTENDANCE')} + + + + + + + + + )} + + + {value === 3 && ( + <> + + {/* */} + + + {/* { + router.push('/attendance-overview'); + }} + > + {t('COMMON.REVIEW_ATTENDANCE')} + */} + {/* */} + + + + + + )} + + + ); +}; + +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 + }; +}; + +export default TeachingCenterDetails;