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 />