Merge pull request #53 from Aar-if/reassign

Issue #PS-1455 feat: UI for reassign Learners with centres List API and Search functionality
tekdi · Jul 29, 2024 · 20fc91a · 20fc91a
2 parents 6957bdb + 8e10f3b
commit 20fc91a
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 46 deletions.
diff --git a/public/locales/en/common.json b/public/locales/en/common.json
@@ -290,6 +290,7 @@
     "REGULAR": "Regular",
     "REMOTE": "Remote",
     "SEARCH_BLOCKS": "Search Blocks",
+    "SEARCH_CENTERS": "Search Centers",
     "BLOCK_REQUEST": "You are sending a request to the state Team Leader to re-assign the Block to this user",
     "NEW_CENTER": "New Center",
     "CENTER_TYPE": "Center Type",

diff --git a/src/components/LearnersListItem.tsx b/src/components/LearnersListItem.tsx
@@ -32,10 +32,9 @@ import { useTheme } from '@mui/material/styles';
 import { useTranslation } from 'next-i18next';
 import { useRouter } from 'next/router';
 import manageUserStore from '../store/manageUserStore';
+import useStore from '@/store/store';
 
 type Anchor = 'bottom';
-const centerList = ['Nashik', 'Shirdi', 'kamptee'];
-const centers = ['shirdi'];
 
 const LearnersListItem: React.FC<LearnerListProps> = ({
   type,
@@ -72,13 +71,14 @@ const LearnersListItem: React.FC<LearnerListProps> = ({
     contactNumber: '',
     customFieldsData: [] as updateCustomField[],
   });
-
+  const userStore = useStore();
   const theme = useTheme<any>();
   const router = useRouter();
   const { learnerId }: any = router.query;
   const { t } = useTranslation();
   const [openCentersModal, setOpenCentersModal] = React.useState(false);
   const [openDeleteUserModal, setOpenDeleteUserModal] = React.useState(false);
+const [centers, setCenters] = React.useState();
   const store = manageUserStore();
 
   const CustomLink = styled(Link)(({ theme }) => ({
@@ -95,6 +95,10 @@ const LearnersListItem: React.FC<LearnerListProps> = ({
       setReloadState(false);
       // window.location.reload();
     }
+    const cohorts = userStore.cohorts
+      const centerList = cohorts.map((cohort: { name: string; }) => cohort.name);
+      setCenters(centerList);
+
   }, [reloadState, setReloadState]);
 
   const toggleDrawer =
@@ -646,7 +650,7 @@ const LearnersListItem: React.FC<LearnerListProps> = ({
       <ManageCentersModal
         open={openCentersModal}
         onClose={handleCloseCentersModal}
-        centersName={centerList}
+        centersName={centers}
         centers={centers}
         onAssign={handleAssignCenters}
         isForLearner={true}

diff --git a/src/components/ManageCentersModal.tsx b/src/components/ManageCentersModal.tsx
@@ -1,17 +1,14 @@
 import * as React from 'react';
-
 import {
   Checkbox,
   Divider,
   InputAdornment,
   Radio,
   TextField,
 } from '@mui/material';
-
 import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
 import CloseIcon from '@mui/icons-material/Close';
-import { Height } from '@mui/icons-material';
 import Modal from '@mui/material/Modal';
 import SearchIcon from '@mui/icons-material/Search';
 import Typography from '@mui/material/Typography';
@@ -39,6 +36,7 @@ const ManageCentersModal: React.FC<ManageUsersModalProps> = ({
   const { t } = useTranslation();
   const [checkedCenters, setCheckedCenters] = React.useState<string[]>([]);
   const [selectedValue, setSelectedValue] = React.useState('');
+  const [searchQuery, setSearchQuery] = React.useState('');
 
   const style = {
     position: 'absolute',
@@ -78,7 +76,6 @@ const ManageCentersModal: React.FC<ManageUsersModalProps> = ({
   };
 
   const handleRadioChange = (name: string) => {
-    console.log(name);
     setSelectedValue(name);
   };
 
@@ -88,6 +85,14 @@ const ManageCentersModal: React.FC<ManageUsersModalProps> = ({
     }
   };
 
+  const handleSearchChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setSearchQuery(event.target.value);
+  };
+
+  const filteredCenters = centersName?.filter((name) =>
+    name.toLowerCase().includes(searchQuery.toLowerCase())
+  );
+
   return (
     <div>
       <Modal
@@ -126,13 +131,15 @@ const ManageCentersModal: React.FC<ManageUsersModalProps> = ({
           <Box sx={{ display: 'flex', justifyContent: 'center', p: '20px' }}>
             <TextField
               className="input_search"
-              placeholder="Search Facilitators.."
+              placeholder={t('CENTERS.SEARCH_CENTERS')}
               color="secondary"
               focused
+              value={searchQuery}
+              onChange={handleSearchChange}
               sx={{
                 borderRadius: '100px',
                 height: '40px',
-                // width: '225px',
+                width: '100%',
               }}
               InputProps={{
                 endAdornment: (
@@ -145,47 +152,45 @@ const ManageCentersModal: React.FC<ManageUsersModalProps> = ({
           </Box>
           <Box mx={'20px'}>
             <Box sx={{ height: '37vh', mt: '10px', overflowY: 'auto' }}>
-              {centersName?.map((name, index) => {
-                return (
-                  <React.Fragment key={index}>
+              {filteredCenters?.map((name, index) => (
+                <React.Fragment key={index}>
+                  <Box
+                    borderBottom={theme.palette.warning['A100']}
+                    sx={{
+                      display: 'flex',
+                      justifyContent: 'space-between',
+                      alignItems: 'center',
+                    }}
+                  >
                     <Box
-                      borderBottom={theme.palette.warning['A100']}
                       sx={{
-                        display: 'flex',
-                        justifyContent: 'space-between',
-                        alignItems: 'center',
+                        fontSize: '16px',
+                        color: theme.palette.warning['300'],
+                        pb: '20px',
                       }}
                     >
-                      <Box
-                        sx={{
-                          fontSize: '16px',
-                          color: theme.palette.warning['300'],
-                          pb: '20px',
-                        }}
-                      >
-                        {name}
-                      </Box>
-                      <Box>
-                        {isForLearner ? (
-                          <Radio
-                            sx={{ pb: '20px' }}
-                            checked={selectedValue.includes(name)}
-                            onChange={() => handleRadioChange(name)}
-                            value={selectedValue}
-                          />
-                        ) : (
-                          <Checkbox
-                            sx={{ pb: '20px' }}
-                            className="checkBox_svg"
-                            checked={checkedCenters.includes(name)}
-                            onChange={() => handleToggle(name)}
-                          />
-                        )}
-                      </Box>
+                      {name}
+                    </Box>
+                    <Box>
+                      {isForLearner ? (
+                        <Radio
+                          sx={{ pb: '20px' }}
+                          checked={selectedValue.includes(name)}
+                          onChange={() => handleRadioChange(name)}
+                          value={selectedValue}
+                        />
+                      ) : (
+                        <Checkbox
+                          sx={{ pb: '20px' }}
+                          className="checkBox_svg"
+                          checked={checkedCenters.includes(name)}
+                          onChange={() => handleToggle(name)}
+                        />
+                      )}
                     </Box>
-                  </React.Fragment>
-                );
-              })}
+                  </Box>
+                </React.Fragment>
+              ))}
             </Box>
           </Box>
           <Divider />