diff --git a/public/locales/en/common.json b/public/locales/en/common.json index 8196c457..8b8747e3 100644 --- a/public/locales/en/common.json +++ b/public/locales/en/common.json @@ -15,8 +15,8 @@ "SEARCH_STUDENT": "Search Learner", "SORT_BY": "Sort by", "APPLY": "Apply", - "A_TO_Z": "A TO Z", - "Z_TO_A": "Z TO A", + "A_TO_Z": "A to Z", + "Z_TO_A": "Z to A", "HIGH_TO_LOW": "High to Low", "LOW_TO_HIGH": "Low to High", "NAMES": "Names", @@ -123,7 +123,8 @@ "FACILITATOR_UPDATED_SUCCESSFULLY": "Facilitator profile updated successfully!", "PLEASE_SELECT_THE_CENTER": "Please select the center.", "CREATE": "Create", - "OKAY": "Okay" + "OKAY": "Okay", + "HELD_EVERY_WEEK_ON": "Held every week on {{days}}" }, "LOGIN_PAGE": { "USERNAME": "Username", @@ -191,7 +192,7 @@ "ATTENDANCE_OVERVIEW": "Attendance Overview", "CENTER_ATTENDANCE": "Center Attendance", "LOW_ATTENDANCE_STUDENTS": "Low Attendance Learners", - "N/A": "N/A", + "N/A": "No Centers Assigned", "CENTER_NAME": "Center Name", "ALL_CENTERS": "All Centers", "NO_LEARNER_WITH_LOW_ATTENDANCE": "No Learner with low attendance", @@ -457,14 +458,14 @@ "EXPAND_ALL": "Expand All", "RESOURCES": "Resources" }, - "ASSESSMENTS":{ - "ASSESSMENTS":"Assessments", - "CENTER":"Center", - "ASSESSMENT_TYPE":"Assessment Type", - "COMPLETED_THE_ASSESSMENT":"completed the assessment", - "SUBMITTED_ON":"Submitted On", - "CORRECT_ANSWER":"correct answers", - "NO_DATA_FOUND":"No data found", - "SEARCH_STUDENT":"search student" + "ASSESSMENTS": { + "ASSESSMENTS": "Assessments", + "CENTER": "Center", + "ASSESSMENT_TYPE": "Assessment Type", + "COMPLETED_THE_ASSESSMENT": "completed the assessment", + "SUBMITTED_ON": "Submitted On", + "CORRECT_ANSWER": "correct answers", + "NO_DATA_FOUND": "No data found", + "SEARCH_STUDENT": "search student" } } diff --git a/public/locales/hi/common.json b/public/locales/hi/common.json index 42d4620d..47801341 100644 --- a/public/locales/hi/common.json +++ b/public/locales/hi/common.json @@ -15,8 +15,8 @@ "SEARCH_STUDENT": "छात्र खोजें", "SORT_BY": "इसके अनुसार क्रमबद्ध करें", "APPLY": "आवेदन करना", - "A_TO_Z": "A TO Z", - "Z_TO_A": "Z TO A", + "A_TO_Z": "A to Z", + "Z_TO_A": "Z tO A", "HIGH_TO_LOW": "उच्चे से नीचा", "LOW_TO_HIGH": "नीचा से उच्चे", "NAMES": "नाम", diff --git a/public/locales/mr/common.json b/public/locales/mr/common.json index ba0c84ae..aa346b4b 100644 --- a/public/locales/mr/common.json +++ b/public/locales/mr/common.json @@ -15,8 +15,8 @@ "SEARCH_STUDENT": "विद्यार्थी शोधा", "SORT_BY": "क्रमवारी लावा", "APPLY": "लागू करा", - "A_TO_Z": "A TO Z", - "Z_TO_A": "Z TO A", + "A_TO_Z": "A to Z", + "Z_TO_A": "Z to A", "HIGH_TO_LOW": "उच्च ते कमी", "LOW_TO_HIGH": "कमी ते उच्च", "NAMES": "नावे", diff --git a/src/components/FormButtons.tsx b/src/components/FormButtons.tsx index bfad644a..b1277c1e 100644 --- a/src/components/FormButtons.tsx +++ b/src/components/FormButtons.tsx @@ -75,7 +75,7 @@ const FormButtons: React.FC = ({ height: '2.5rem', padding: theme.spacing(1), fontWeight: '500', - width: isSingleButton ? '100%' : '48%', + width: '100%', }} type="submit" onClick={() => onClick(formData)} diff --git a/src/components/ManageUser.tsx b/src/components/ManageUser.tsx index fbd25298..b5481768 100644 --- a/src/components/ManageUser.tsx +++ b/src/components/ManageUser.tsx @@ -154,7 +154,6 @@ const ManageUser: React.FC = ({ return; } const userIds = facilitatorList?.map((user: any) => user.userId); - const cohortDetailsPromises = userIds?.map((userId: string) => getCohortList(userId, { filter: 'true' }) @@ -175,7 +174,6 @@ const ManageUser: React.FC = ({ } }); - const extractedData = facilitatorList?.map( (user: any, index: number) => { const cohorts = cohortDetails[index] || []; @@ -631,70 +629,72 @@ const ManageUser: React.FC = ({ > {users && users.length !== 0 && - users.map((user) => ( - - - img - - e.preventDefault()} - > - { - handleTeacherFullProfile(user.userId!); - // ReactGA.event('teacher-details-link-clicked', { - // userId: userId, - // }); - }} + [...users] + .sort((a, b) => a.name.localeCompare(b.name)) + .map((user) => ( + + + + e.preventDefault()} + > + { + handleTeacherFullProfile(user.userId!); + // ReactGA.event('teacher-details-link-clicked', { + // userId: userId, + // }); + }} + sx={{ + textAlign: 'left', + fontSize: '16px', + fontWeight: '400', + marginTop: '5px', + color: theme.palette.secondary.main, + }} + > + {user.name} + + + - {user.name} - - - + + + + - {user?.cohortNames - ? `${user.cohortNames}` - : t('ATTENDANCE.N/A')} - + /> - - - - - ))} + ))} + {!users?.length && ( = ({ removeModal, clickedBox, }) => { const [mode, setMode] = useState(sessionMode.OFFLINE); const [type, setType] = useState(sessionType.REPEATING); - + const [selectedWeekDays, setSelectedWeekDays] = useState(); + const [sessionBlocks, setSessionBlocks] = useState([ + { id: 0, selectedWeekDays: [] }, + ]); const handleSessionModeChange = (event: ChangeEvent) => { + console.log(event.target.value); setMode(event.target.value as mode); }; const handleSessionTypeChange = (event: ChangeEvent) => { setType(event.target.value as type); + console.log(event.target.value); }; const [date, setDate] = React.useState( @@ -53,6 +65,7 @@ const PlannedSession: React.FC = ({ ); const handleChange = (newValue: Dayjs | null) => { + console.log(newValue); setDate(newValue); }; const CustomTimePicker = styled(TimePicker)(({ theme }) => ({ @@ -61,263 +74,318 @@ const PlannedSession: React.FC = ({ }, })); + const handleLinkChange = (event: any) => { + console.log(event.target.value); + }; + // const handleTimeChange = (event: any) => { + // console.log(event.target.value); + // }; + const handlePasscodeChange = (event: any) => { + console.log(event.target.value); + }; + const { t } = useTranslation(); const theme = useTheme(); - return ( - <> - - - - - {clickedBox === 'PLANNED_SESSION' && ( - - - - {t('CENTER_SESSION.SUBJECT')} - - - - - )} + const handleSelectionChange = ( + id: string | number | undefined, + newSelectedDays: string[] + ) => { + if (id) { + setSessionBlocks( + sessionBlocks.map((block) => + block?.id === id + ? { ...block, selectedWeekDays: newSelectedDays } + : block + ) + ); + } + }; - {mode === sessionMode.ONLINE && ( - <> - {clickedBox === 'EXTRA_SESSION' && ( - <> - - {t('CENTER_SESSION.SET_UP')} - - - )} - - - - - - - - )} - {clickedBox === 'EXTRA_SESSION' && ( - - { + setSessionBlocks([ + ...sessionBlocks, + { id: sessionBlocks.length, selectedWeekDays: [] }, + ]); + }; + + const handleRemoveSession = (id: any) => { + setSessionBlocks(sessionBlocks.filter((block) => block?.id !== id)); + }; + + return ( + + {sessionBlocks.map((block, index) => ( + + + - {t('CENTER_SESSION.SESSION_DETAILS')} - + /> + + {clickedBox === 'PLANNED_SESSION' && ( - {t('CENTER_SESSION.SUBJECT_OPTIONAL')} + {t('CENTER_SESSION.SUBJECT')} - - - - - )} + )} - {clickedBox === 'EXTRA_SESSION' && ( - <> + {mode === sessionMode.ONLINE && ( + <> + {clickedBox === 'EXTRA_SESSION' && ( + <> + + {t('CENTER_SESSION.SET_UP')} + + + )} + + + + + + + + )} + {clickedBox === 'EXTRA_SESSION' && ( - - {type === sessionType.JUST && ( - - - - - - - - )} + > + {t('CENTER_SESSION.SESSION_DETAILS')} + + + + + {t('CENTER_SESSION.SUBJECT_OPTIONAL')} + + + + + + + - - )} + )} - - - - - - - + {clickedBox === 'EXTRA_SESSION' && ( + <> + + + {type === sessionType.JUST && ( + + + + + + + + )} - - - - - - + + )} + + {type !== sessionType.JUST && ( + + + + {t('COMMON.HELD_EVERY_WEEK_ON', { + days: block?.selectedWeekDays?.join(', '), + })} + + { + handleSelectionChange(block?.id, newSelectedDays); + }} + /> - - - - {type !== sessionType.JUST && ( - - - - - - - + + + + - - - - - - - - - + + + + + + - - - + + + - - - )} - - - {t('CENTER_SESSION.REMOVE_THIS_SESSION')} + + + + + + + + + + + + + + + + + + + + + + )} + {sessionBlocks.length > 1 && ( + + handleRemoveSession(block.id)} + > + {t('CENTER_SESSION.REMOVE_THIS_SESSION')} + + + + )} + + - - - - - - - - + + + - - + ))} + ); }; diff --git a/src/components/WeekDays.tsx b/src/components/WeekDays.tsx index 1add9e0f..7de1bc84 100644 --- a/src/components/WeekDays.tsx +++ b/src/components/WeekDays.tsx @@ -1,11 +1,13 @@ import { Box, Card, CardContent, Typography } from '@mui/material'; -import React, { useEffect, useRef } from 'react'; +import React, { useEffect, useRef, useState } from 'react'; import { styled } from '@mui/system'; import { useTheme } from '@mui/material/styles'; interface WeekDaysProps { useAbbreviation?: boolean; + onSelectionChange?: (selectedDays: string[]) => void; + selectedDays?: string[]; } const CardStyled = styled(Card)(({ theme }) => ({ @@ -20,12 +22,15 @@ const CardStyled = styled(Card)(({ theme }) => ({ overflow: 'visible', })); -const WeekDays: React.FC = ({ useAbbreviation }) => { +const WeekDays: React.FC = ({ + useAbbreviation, + onSelectionChange, + selectedDays = [], +}) => { const theme = useTheme(); - - const days = useAbbreviation - ? ['S', 'M', 'T', 'W', 'T', 'F', 'S'] - : ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']; + const [localSelectedDays, setLocalSelectedDays] = useState([]); + const fullDays = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']; + const days = useAbbreviation ? ['S', 'M', 'T', 'W', 'T', 'F', 'S'] : fullDays; const currentDate = new Date(); const currentDayIndex = currentDate.getDay(); @@ -46,27 +51,70 @@ const WeekDays: React.FC = ({ useAbbreviation }) => { } }, []); + const handleDayClick = (index: number) => { + if (useAbbreviation) { + // setLocalSelectedDays((prev) => + // prev.includes(index) + // ? prev.filter((day) => day !== index) + // : [...prev, index] + // ); + const newSelectedDays = localSelectedDays.includes(index) + ? localSelectedDays.filter((day) => day !== index) + : [...localSelectedDays, index]; + + setLocalSelectedDays(newSelectedDays); + + if (onSelectionChange) { + const selectedWeekDays = newSelectedDays.map( + (dayIndex) => fullDays[dayIndex] + ); + onSelectionChange(selectedWeekDays); + } + } + }; + + useEffect(() => { + if (useAbbreviation) { + // const selectedWeekDays = selectedDays.map( + // (dayIndex) => fullDays[dayIndex] + // ); + // console.log('Selected days:', selectedWeekDays); + + // if (onSelectionChange) { + // onSelectionChange(selectedWeekDays); + // } + + const selectedIndices = selectedDays.map((day) => fullDays.indexOf(day)); + setLocalSelectedDays(selectedIndices); + } + }, [selectedDays, useAbbreviation, fullDays, onSelectionChange]); + return ( {days.map((day, index) => ( handleDayClick(index)} > {day} diff --git a/src/pages/blocks/components/FilterModalCenter.tsx b/src/pages/blocks/components/FilterModalCenter.tsx index 8f505434..61799063 100644 --- a/src/pages/blocks/components/FilterModalCenter.tsx +++ b/src/pages/blocks/components/FilterModalCenter.tsx @@ -95,7 +95,7 @@ const FilterModalCenter: React.FC = ({ > {t('COMMON.FILTERS')} - + diff --git a/src/pages/centers/index.tsx b/src/pages/centers/index.tsx index bc7a1386..aa0ca25b 100644 --- a/src/pages/centers/index.tsx +++ b/src/pages/centers/index.tsx @@ -197,7 +197,7 @@ const TeachingCenters = () => { <>
{loading && } - + {accessGranted('showBlockLevelData', accessControl, userRole) ? ( <> {blockData?.length !== 0 && @@ -206,12 +206,12 @@ const TeachingCenters = () => { key={block.blockId} textAlign={'left'} fontSize={'22px'} - p={'18px 0'} + p={'18px 18px 0 18px'} color={theme?.palette?.warning['300']} > {block.blockName} {block?.district && ( - + {toPascalCase(block?.district)},{' '} {toPascalCase(block?.state)} @@ -236,14 +236,17 @@ const TeachingCenters = () => { onChange={handleChange} textColor="inherit" // Use "inherit" to apply custom color aria-label="secondary tabs example" + sx={{ + fontSize: '14px', borderBottom: (theme) => - `1px solid ${theme.palette.primary.main}`, + `1px solid #EBE1D4`, '& .MuiTab-root': { color: theme.palette.warning['A200'], padding: '0 20px', + flexGrow: 1, }, '& .Mui-selected': { color: theme.palette.warning['A200'], @@ -277,7 +280,7 @@ const TeachingCenters = () => { container > - + { handleClose={handleCreateCenterClose} onCenterAdded={handleCenterAdded} /> - - {accessGranted( - 'showBlockLevelCenterData', - accessControl, - userRole - ) && - filteredCenters && ( - <> - {/* Regular Centers */} - {filteredCenters.some( - (center) => - center.centerType?.toUpperCase() === 'REGULAR' || - center.centerType === '' - ) && ( -
- - {t('CENTERS.REGULAR_CENTERS')} - - - - - {filteredCenters - .filter( - (center) => - center.centerType?.toUpperCase() === - 'REGULAR' || center.centerType === '' - ) - .map((center) => ( - - + + {accessGranted('showBlockLevelCenterData', accessControl, userRole) && + filteredCenters && ( + <> + {/* Regular Centers */} + + {t('CENTERS.REGULAR_CENTERS')} + + {filteredCenters.some( + (center) => + center.centerType?.toUpperCase() === 'REGULAR' || + center.centerType === '' + ) && ( + + + {filteredCenters + .filter( + (center) => + center.centerType?.toUpperCase() === 'REGULAR' || + center.centerType === '' + ) + .map((center) => ( + + { + router.push(`/centers/${center.cohortId}`); + localStorage.setItem('classId', center.cohortId); + }} + sx={{ + cursor: 'pointer', + marginBottom: '20px', + }} + > + + + center + + + { - router.push(`/centers/${center.cohortId}`); - localStorage.setItem( - 'classId', - center.cohortId - ); - }} sx={{ - cursor: 'pointer', - // marginBottom: '20px', + fontSize: '16px', + fontWeight: '400', + color: theme.palette.warning['300'], }} > - - - center - - - - - {center.cohortName} - - - - + {center.cohortName} - - - ))} - -
- )} - - {/* Remote Centers */} + + + + + + ))} + + )} + {/* Remote Centers */} + + {t('CENTERS.REMOTE_CENTERS')} + + {filteredCenters.some( + (center) => + center.centerType?.toUpperCase() === 'REMOTE' + ) && ( + - {filteredCenters.some( - (center) => - center.centerType?.toUpperCase() === 'REMOTE' - ) && ( -
- - {t('CENTERS.REMOTE_CENTERS')} - - - {filteredCenters - .filter( - (center) => - center.centerType?.toUpperCase() === 'REMOTE' - ) - .map((center) => ( - - + {filteredCenters + .filter( + (center) => + center.centerType?.toUpperCase() === 'REMOTE' + ) + .map((center) => ( + + { + router.push(`/centers/${center.cohortId}`); + localStorage.setItem('classId', center.cohortId); + }} + sx={{ + cursor: 'pointer', + marginBottom: '20px', + }} + > + + + + + + { - router.push(`/centers/${center.cohortId}`); - localStorage.setItem( - 'classId', - center.cohortId - ); - }} sx={{ - cursor: 'pointer', - // marginBottom: '20px', + fontSize: '16px', + fontWeight: '400', + color: theme.palette.warning['300'], }} > - - - - - - - - {center.cohortName} - - - - + {center.cohortName} - - - ))} - - -
- )} - - )} - - {accessGranted( - 'showTeacherLevelCenterData', - accessControl, - userRole - ) && - cohortsData?.map((cohort: any) => { - return ( - + + + + + + ))} + + )} + + )} + + {/* Teacher-Level Centers */} + {accessGranted('showTeacherLevelCenterData', accessControl, userRole) && + cohortsData?.map((cohort: any) => { + return ( + + { + router.push(`/centers/${cohort.cohortId}`); + localStorage.setItem('classId', cohort.cohortId); + }} + sx={{ cursor: 'pointer', marginBottom: '20px', background: theme.palette.action.selected, p: 2, m: 2, borderRadius: 5 }} + > { - router.push(`/centers/${cohort.cohortId}`); - localStorage.setItem('classId', cohort.cohortId); + sx={{ + + display: 'flex', + gap: '10px', + background: '#fff', + height: '56px', + borderRadius: '8px', }} - sx={{ cursor: 'pointer', marginBottom: '20px' }} + > - {/* {cohort?.['customFields']?.address?.value} */} + center + - center - - - - - {cohort?.cohortName} - - + {cohort?.cohortName} + - - ); - })} - + + + ); + })} + )}