Merge pull request #306 from Rushikesh-Sonawane99/shiksha-2.0

Issue #PS-793 feat: Added UI for mark as dropout and remove learner from cohort functionality and added translations for it
tekdi · Jun 20, 2024 · af9e3ba · af9e3ba
2 parents adfc4f5 + 6700dd1
commit af9e3ba
Show file tree

Hide file tree

Showing 11 changed files with 233 additions and 95 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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<BottomDrawerProps> = ({
   toggleDrawer,
   state,
   optionList,
   listItemClick,
-}: BottomDrawerProps) {
-  const { t } = useTranslation();
+  renderCustomContent
+}) => {
   const theme = useTheme<any>();
 
   const list = (anchor: Anchor) => (
@@ -53,6 +51,7 @@ export default function BottomDrawer({
       >
         <Box className="bg-grey"></Box>
       </Box>
+      {renderCustomContent?.()}
       <List>
         {optionList.map(({ label, icon, name }, index) => (
           <ListItem disablePadding key={index}>
@@ -81,4 +80,6 @@ export default function BottomDrawer({
       </Drawer>
     </div>
   );
-}
+};
+
+export default BottomDrawer;
diff --git 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<boolean>(false);
-  const [userData, setUserData] = React.useState<{}[]>();
+  const [userData, setUserData] = React.useState<UserDataProps[]>();
+
   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 (
     <div>
-        {
-          userData?.map((userData: any) => {
-            return (
-              <LearnersList
-                key={userData.userId}
-                learnerName={userData.name}
-                enrollmentId={userData.enrollmentNumber}
-                isDropout={userData.memberStatus === 'dropout'}
-              />
-            );
-          })}
+      {userData?.map((data: any) => {
+        return (
+          <LearnersList
+            key={data.userId}
+            learnerName={data.name}
+            enrollmentId={data.enrollmentNumber}
+            isDropout={data.memberStatus === 'dropout'}
+          />
+        );
+      })}
+      {!userData?.length && (
+        <Box
+          sx={{
+            m: '1.125rem',
+            display: 'flex',
+            justifyContent: 'left',
+            alignItems: 'center',
+          }}
+        >
+          <Typography style={{ fontWeight: 'bold' }}>
+            {t('COMMON.NO_DATA_FOUND')}
+          </Typography>
+        </Box>
+      )}
     </div>
   );
 };

diff --git 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<string>('');
+  const [isButtonDisabled, setIsButtonDisabled] = React.useState<boolean>(true);
+
+
   const { t } = useTranslation();
+  const theme = useTheme<any>();
 
   const style = {
     position: 'absolute',
@@ -40,7 +46,19 @@ function DropOutModal({ open, onClose }: DropOutModalProps) {
     },
   };
 
-  const theme = useTheme<any>();
+  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 (
     <React.Fragment>
@@ -88,25 +106,23 @@ function DropOutModal({ open, onClose }: DropOutModalProps) {
                 labelId="demo-multiple-name-label"
                 id="demo-multiple-name"
                 input={<OutlinedInput label="Reason for Dropout" />}
+                onChange={handleSelection}
               >
-                <MenuItem
-                  value="Unable to cope with studies"
-                  sx={{
-                    fontSize: '16px',
-                    color: theme.palette.warning['300'],
-                  }}
-                >
-                  Unable to cope with studies {/* come from API   */}
-                </MenuItem>
-                <MenuItem
-                  value="Family responsibilities"
-                  sx={{
-                    fontSize: '16px',
-                    color: theme.palette.warning['300'],
-                  }}
-                >
-                  Family responsibilities {/* come from API   */}
-                </MenuItem>
+                {dropoutReasons?.map((reason) => (
+                  <MenuItem
+                    key={reason.value}
+                    value={reason.value}
+                    sx={{
+                      fontSize: '16px',
+                      color: theme.palette.warning['300'],
+                    }}
+                  >
+                    {reason.label
+                      .replace(/_/g, ' ')
+                      .toLowerCase()
+                      .replace(/^\w/, (c) => c.toUpperCase())}
+                  </MenuItem>
+                ))}
               </Select>
             </FormControl>
           </Box>
@@ -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')}
             </Button>