diff --git a/public/locales/en/common.json b/public/locales/en/common.json index a676842f..8ae4488d 100644 --- a/public/locales/en/common.json +++ b/public/locales/en/common.json @@ -54,6 +54,7 @@ "FROM_TO_DATE": "From - To dates", "REMOVE": "Remove", "MARK_DROP_OUT": "Mark as Drop Out", + "UNMARK_DROP_OUT": "Unmark as Drop Out", "SOMETHING_WENT_WRONG": "Something went wrong", "NO_GO_BACK":"No, go back", "YES":"Yes", @@ -66,6 +67,7 @@ "REASON_FOR_DROPOUT":"Reason for Dropout", "SURE_LOGOUT" :"Are you sure you want to Logout?", "SURE_UPDATE" :"Are you sure you want to update this attendance?", + "SURE_REMOVE" : "Are you sure you want to remove this learner?", "SURE_CLOSE":"Are you sure you want to close?", "LEARNER_LIST":"Learners List", "FILTERS":"Filters", diff --git a/public/locales/hi/common.json b/public/locales/hi/common.json index 6e5ba72e..58da4151 100644 --- a/public/locales/hi/common.json +++ b/public/locales/hi/common.json @@ -54,6 +54,7 @@ "FROM_TO_DATE": "से - दिनांक तक", "REMOVE": "हटाएं", "MARK_DROP_OUT": "ड्रॉप आउट के रूप में चिह्नित करें", + "UNMARK_DROP_OUT": "ड्रॉप आउट के रूप में हटाएं", "SOMETHING_WENT_WRONG": "कुछ गलत हो गया", "YES": "हाँ", "NO_GO_BACK": "नहीं, वापस जाएँ", @@ -66,6 +67,7 @@ "REASON_FOR_DROPOUT": "ड्रॉपआउट का कारण", "SURE_LOGOUT": "क्या आप वाकई लोगआउट करना चाहते हैं?", "SURE_UPDATE": "क्या आप इस उपस्थिति को अपडेट करना चाहते हैं?", + "SURE_REMOVE" : "क्या आप वाकई इस शिक्षार्थी को हटाना चाहते हैं?", "SURE_CLOSE": "क्या आप वाकई बंद करना चाहते हैं?", "LEARNER_LIST": "अभियांत्रिकी सूची", "FILTERS": "फिल्टर्स", diff --git a/public/locales/mr/common.json b/public/locales/mr/common.json index bcd3c419..ff8445c7 100644 --- a/public/locales/mr/common.json +++ b/public/locales/mr/common.json @@ -54,6 +54,7 @@ "FROM_TO_DATE": "पासून - पर्यंत तारीख", "REMOVE": "काढून टाका", "MARK_DROP_OUT": "ड्रॉप आउट म्हणून चिन्हांकित करा", + "UNMARK_DROP_OUT": "ड्रॉप आउट म्हणून काढून टाका", "SOMETHING_WENT_WRONG": "काहीतरी चूक झाली", "NO_GO_BACK": "नाही, परत जा", "YES": "होय", @@ -66,6 +67,7 @@ "REASON_FOR_DROPOUT": "बाहेर पडण्याचे कारण", "SURE_LOGOUT": "तुम्हाला खाते बंद करायचं आहे का?", "SURE_UPDATE": "तुम्हाला ही उपस्थिती अपडेट करायची आहे का?", + "SURE_REMOVE" : "आपण खरोखरच या विद्यार्थ्याला काढून टाकू इच्छिता का?", "SURE_CLOSE": "तुम्हाला हे बंद करायचं आहे का?", "LEARNER_LIST": "शिक्षार्थ्यांची यादी", "FILTERS": "फिल्टर्स", diff --git a/public/locales/or/common.json b/public/locales/or/common.json index 4b34f4c5..4bedf72e 100644 --- a/public/locales/or/common.json +++ b/public/locales/or/common.json @@ -54,7 +54,9 @@ "FROM_TO_DATE": "ରୁ/ଠାରୁ - କୁ ତାରିଖଗୁଡ଼ିକ", "REMOVE": "ହଟାନ୍ତୁ", "MARK_DROP_OUT": "ଡ୍ରପ୍ ଆଉଟ୍ ରୁପରେ ଚିହ୍ନିତ କରନ୍ତୁ", - "SOMETHING_WENT_WRONG": "କିଛି ଭୁଲ ହେଇଗଲା।" + "UNMARK_DROP_OUT": " ଡ୍ରପ୍ ଆଉଟ୍ ଭାବରେ ଅପସାରଣ କରନ୍ତୁ", + "SOMETHING_WENT_WRONG": "କିଛି ଭୁଲ ହେଇଗଲା।", + "SURE_REMOVE" : "ଆପଣ ନିଶ୍ଚିତ ଏହି ଶିକ୍ଷାର୍ଥୀକୁ ହଟାଇବାକୁ ଚାହୁଁଛନ୍ତି କି?" }, "LOGIN_PAGE": { "USERNAME": "ଉପଯୋଗକର୍ତା ନାମ", diff --git a/src/components/BottomDrawer.tsx b/src/components/BottomDrawer.tsx index f711450c..7be2f8f4 100644 --- a/src/components/BottomDrawer.tsx +++ b/src/components/BottomDrawer.tsx @@ -1,15 +1,12 @@ import * as React from 'react'; - import Box from '@mui/material/Box'; import Drawer from '@mui/material/Drawer'; -import DropOutModal from './DropOutModal'; import List from '@mui/material/List'; import ListItem from '@mui/material/ListItem'; import ListItemButton from '@mui/material/ListItemButton'; import ListItemIcon from '@mui/material/ListItemIcon'; import ListItemText from '@mui/material/ListItemText'; import { useTheme } from '@mui/material/styles'; -import { useTranslation } from 'next-i18next'; type Anchor = 'bottom'; @@ -25,15 +22,16 @@ interface BottomDrawerProps { name: string; }[]; listItemClick: (event: React.MouseEvent, name: string) => void; + renderCustomContent?: () => React.ReactNode; } -export default function BottomDrawer({ +const BottomDrawer: React.FC = ({ toggleDrawer, state, optionList, listItemClick, -}: BottomDrawerProps) { - const { t } = useTranslation(); + renderCustomContent +}) => { const theme = useTheme(); const list = (anchor: Anchor) => ( @@ -53,6 +51,7 @@ export default function BottomDrawer({ > + {renderCustomContent?.()} {optionList.map(({ label, icon, name }, index) => ( @@ -81,4 +80,6 @@ export default function BottomDrawer({ ); -} +}; + +export default BottomDrawer; diff --git a/src/components/CohortLearnerList.tsx b/src/components/CohortLearnerList.tsx index 42111ec1..dd2844fe 100644 --- a/src/components/CohortLearnerList.tsx +++ b/src/components/CohortLearnerList.tsx @@ -1,4 +1,4 @@ -import React, { useEffect } from 'react'; +import React, { useEffect, useState } from 'react'; import { getMyCohortMemberList } from '@/services/MyClassDetailsService'; import { capitalizeEachWord, @@ -9,21 +9,29 @@ import LearnersList from '@/components/LearnersList'; import { limit } from '@/utils/app.constant'; import { showToastMessage } from './Toastify'; import { useTranslation } from 'next-i18next'; +import { Box, Typography } from '@mui/material'; -const CohortLearnerList = () => { +interface UserDataProps { + name: string; + userId: string; + memberStatus: string; + cohortMembershipId: string; + enrollmentNumber: string; +} + +const CohortLearnerList = (cohortId: any) => { const [loading, setLoading] = React.useState(false); - const [userData, setUserData] = React.useState<{}[]>(); + const [userData, setUserData] = React.useState(); + const { t } = useTranslation(); - // const classId = localStorage.getItem('classId'); - const classId = '18e800d0-11c4-4a8c-af97-8f9811976ed6'; // TODO: get userId as a prop or from localStorage dynamically useEffect(() => { const getCohortMemberList = async () => { setLoading(true); try { - if (classId) { + if (cohortId) { const page = 0; - const filters = { cohortId: classId }; + const filters = cohortId; const response = await getMyCohortMemberList({ limit, page, @@ -54,21 +62,34 @@ const CohortLearnerList = () => { } }; getCohortMemberList(); - }, [classId]); + }, [cohortId]); return (
- { - userData?.map((userData: any) => { - return ( - - ); - })} + {userData?.map((data: any) => { + return ( + + ); + })} + {!userData?.length && ( + + + {t('COMMON.NO_DATA_FOUND')} + + + )}
); }; diff --git a/src/components/DropOutModal.tsx b/src/components/DropOutModal.tsx index e4c2bcd6..ad19c1d9 100644 --- a/src/components/DropOutModal.tsx +++ b/src/components/DropOutModal.tsx @@ -13,18 +13,24 @@ import { SelectChangeEvent, Typography, } from '@mui/material'; -import { Theme, useTheme } from '@mui/material/styles'; +import { useTheme } from '@mui/material/styles'; import CloseIcon from '@mui/icons-material/Close'; import { useTranslation } from 'next-i18next'; +import { dropoutReasons } from '../../app.config'; interface DropOutModalProps { open: boolean; - onClose: (confirmed: boolean) => void; + onClose: (confirmed: boolean, reason?: string) => void; } function DropOutModal({ open, onClose }: DropOutModalProps) { + const [selectedReason, setSelectedReason] = React.useState(''); + const [isButtonDisabled, setIsButtonDisabled] = React.useState(true); + + const { t } = useTranslation(); + const theme = useTheme(); const style = { position: 'absolute', @@ -40,7 +46,19 @@ function DropOutModal({ open, onClose }: DropOutModalProps) { }, }; - const theme = useTheme(); + const handleSelection = (event: SelectChangeEvent) => { + setSelectedReason(event.target.value); + setIsButtonDisabled(false) + }; + + const handleMarkDropout = () => { + onClose(true, selectedReason); + console.log('Dropout api called') + setIsButtonDisabled(true) + // console.log('!!!!!!!!!!!!!!!!!!!!!!!!', selectedReason) + // call dropout api here + }; + return ( @@ -88,25 +106,23 @@ function DropOutModal({ open, onClose }: DropOutModalProps) { labelId="demo-multiple-name-label" id="demo-multiple-name" input={} + onChange={handleSelection} > - - Unable to cope with studies {/* come from API */} - - - Family responsibilities {/* come from API */} - + {dropoutReasons?.map((reason) => ( + + {reason.label + .replace(/_/g, ' ') + .toLowerCase() + .replace(/^\w/, (c) => c.toUpperCase())} + + ))} @@ -118,7 +134,8 @@ function DropOutModal({ open, onClose }: DropOutModalProps) { className="w-100" sx={{ boxShadow: 'none' }} variant="contained" - onClick={() => onClose(true)} + onClick={handleMarkDropout} + disabled={isButtonDisabled} > {t('COMMON.MARK_DROP_OUT')} diff --git a/src/components/LearnersList.tsx b/src/components/LearnersList.tsx index 6af7f764..b6feb96a 100644 --- a/src/components/LearnersList.tsx +++ b/src/components/LearnersList.tsx @@ -1,24 +1,33 @@ import BottomDrawer from './BottomDrawer'; -import { Box } from '@mui/material'; +import { Box, Typography } from '@mui/material'; import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline'; import DropOutModal from './DropOutModal'; import ErrorOutlineIcon from '@mui/icons-material/ErrorOutline'; // import FiberManualRecordIcon from '@mui/icons-material/FiberManualRecord'; import MoreVertIcon from '@mui/icons-material/MoreVert'; import NoAccountsIcon from '@mui/icons-material/NoAccounts'; -import React from 'react'; +import React, { useEffect } from 'react'; // import Woman2Icon from '@mui/icons-material/Woman2'; import { useTheme } from '@mui/material/styles'; import { useTranslation } from 'next-i18next'; import { LearnerListProps } from '@/utils/Interfaces'; +import ConfirmationModal from './ConfirmationModal'; type Anchor = 'bottom'; -const LearnersList: React.FC = ({learnerName, isDropout, enrollmentId}) => { +const LearnersList: React.FC = ({ + learnerName, + isDropout, + enrollmentId, +}) => { const [state, setState] = React.useState({ bottom: false, }); + // useEffect(()=>{ + + // },[handleRemoveLearnerFromCohort, ]) //TODO: refresh page on mark/unmark dropout and remove learner + const toggleDrawer = (anchor: Anchor, open: boolean) => (event: React.KeyboardEvent | React.MouseEvent) => { @@ -34,14 +43,76 @@ const LearnersList: React.FC = ({learnerName, isDropout, enrol }; const theme = useTheme(); const { t } = useTranslation(); - const [showModal, setShowModal] = React.useState(false); + const [showModal, setShowModal] = React.useState(false); + const [confirmationModalOpen, setConfirmationModalOpen] = + React.useState(false); const listItemClick = (event: React.MouseEvent, name: string) => { if (name === 'mark-drop-out') { setShowModal(true); + } else if (name === 'unmark-drop-out') { + // call api to unmark as dropout + } + else { + setConfirmationModalOpen(true); } }; + const handleAction = () => { + // handleRemoveLearnerFromCohort(); + //Close all modals + //add toast messages on success and failure + console.log( + 'handleRemoveLearnerFromCohort api call' + ); + setConfirmationModalOpen(false); + handleCloseBottomDrawer() + }; + + const handleCloseModel = () => { + setConfirmationModalOpen(false); + }; + + const handleCloseBottomDrawer = () => { + setState({ ...state, bottom: false }); + }; + + const handleDroppedOutLabelClick = () =>{ + console.log('handleDroppedOutLabelClick') + } + + const renderCustomContent = () => { + if (isDropout) { + return ( + + + {t('COMMON.REASON_FOR_DROPOUT')} + + + {t('COMMON.REASON_FOR_DROPOUT')} + + {/* TODO: Add reason dynamically from api */} + + ); + } + return null; + }; + return ( <> = ({learnerName, isDropout, enrol */} {learnerName} @@ -84,39 +159,43 @@ const LearnersList: React.FC = ({learnerName, isDropout, enrol 19 y/o */} {isDropout ? ( - - Dropped Out - - - ) : ( + + Dropped Out + + + ) : ( <> - - {/* */} - - {enrollmentId} - - - )} + + {enrollmentId} + + + )} @@ -133,11 +212,11 @@ const LearnersList: React.FC = ({learnerName, isDropout, enrol listItemClick={listItemClick} optionList={[ { - label: t('COMMON.MARK_DROP_OUT'), + label: isDropout ? t('COMMON.UNMARK_DROP_OUT') : t('COMMON.MARK_DROP_OUT'), icon: ( ), - name: 'mark-drop-out', + name: isDropout ? 'unmark-drop-out' : 'mark-drop-out' }, { label: t('COMMON.REMOVE_FROM_CENTER'), @@ -147,9 +226,20 @@ const LearnersList: React.FC = ({learnerName, isDropout, enrol name: 'remove-from-center', }, ]} + renderCustomContent={renderCustomContent} /> setShowModal(false)} /> + ); }; diff --git a/src/pages/centers/[cohortId].tsx b/src/pages/centers/[cohortId].tsx index 5c1dd9c5..69c85242 100644 --- a/src/pages/centers/[cohortId].tsx +++ b/src/pages/centers/[cohortId].tsx @@ -128,7 +128,7 @@ const TeachingCenterDetails = () => { /> - + )} diff --git a/src/pages/login.tsx b/src/pages/login.tsx index 58ce9153..1fab8946 100644 --- a/src/pages/login.tsx +++ b/src/pages/login.tsx @@ -26,6 +26,7 @@ import { useTranslation } from 'next-i18next'; import { telemetryFactory } from '@/utils/telemetry'; import { logEvent } from '@/utils/googleAnalytics'; import { showToastMessage } from '@/components/Toastify'; +import Link from '@mui/material/Link'; const LoginPage = () => { const { t } = useTranslation(); @@ -323,16 +324,16 @@ const LoginPage = () => { { - // - // - // {t('LOGIN_PAGE.FORGOT_PASSWORD')} - // - // + + + {t('LOGIN_PAGE.FORGOT_PASSWORD')} + + } => { -// const apiUrl: string = `${process.env.NEXT_PUBLIC_BASE_URL}/cohortmember/update/${userId}`; +// const apiUrl: string = `${process.env.NEXT_PUBLIC_BASE_URL}/cohortmember/update/${membershipId}`; // try { // const response = await put(apiUrl, { // memberStatus,