From 221f9d298cbb64100c1b21659d49e9ce51f5dcfd Mon Sep 17 00:00:00 2001 From: Arif Date: Tue, 30 Jul 2024 12:57:42 +0530 Subject: [PATCH] Issue #PS-1450 feat: UI for reassign Facilitators with centres List API and Search functionality --- public/locales/en/common.json | 3 +- src/components/ManageUser.tsx | 27 ++++- src/components/ReassignModal.tsx | 189 +++++++++++++++++++++++++++++++ 3 files changed, 217 insertions(+), 2 deletions(-) create mode 100644 src/components/ReassignModal.tsx diff --git a/public/locales/en/common.json b/public/locales/en/common.json index 6da61341..3abe29f4 100644 --- a/public/locales/en/common.json +++ b/public/locales/en/common.json @@ -80,7 +80,8 @@ "FACILITATORS": "Facilitators", "CENTERS_ASSIGNED": "Centers Assigned in {{block}}", "REASSIGN_CENTERS": "Re-assign Center", - "REASSIGN_BLOCKS_REQUEST": "Request to Re-assign Block", + "REASSIGN_BLOCKS": "Add or Re-assign Centers", + "REASSIGN_BLOCKS_REQUEST": "Request to Re-assign Blocks", "ASSIGN": "Assign", "SEARCH_FACILITATORS": "Search Facilitators..", "ADD_LEARNER": "Add Learners", diff --git a/src/components/ManageUser.tsx b/src/components/ManageUser.tsx index 17386c40..bc8cae9d 100644 --- a/src/components/ManageUser.tsx +++ b/src/components/ManageUser.tsx @@ -46,6 +46,7 @@ import profileALT from '../assets/images/Profile.png'; import RemoveFacilitatorAlert from './SimpleModal'; import SimpleModal from './SimpleModal'; import AddFacilitatorModal from './AddFacilitator'; +import ReassignModal from './ReassignModal'; interface Cohort { cohortId: string; @@ -112,6 +113,8 @@ const manageUsers: React.FC = ({ }); const [confirmationModalOpen, setConfirmationModalOpen] = React.useState(false); + const [reassignModalOpen, setReassignModalOpen] = + React.useState(false); const [learnerData, setLearnerData] = React.useState(); const [reassignBlockRequestModalOpen, setReassignBlockRequestModalOpen] = React.useState(false); @@ -280,6 +283,10 @@ const manageUsers: React.FC = ({ setState({ ...state, bottom: false }); }; + const handleCloseReassignModal = () => { + setReassignModalOpen(false); + }; + const handleCloseRemoveModal = () => { setOpenRemoveUserModal(false); }; @@ -342,13 +349,16 @@ const manageUsers: React.FC = ({ // console.log(error); // showToastMessage(t('COMMON.SOMETHING_WENT_WRONG'), 'error'); // } + }if (name === 'reassign-block') { + setReassignModalOpen(true); + getTeamLeadersCenters(); } if (name === 'reassign-centers') { setOpenCentersModal(true); getTeamLeadersCenters(); } if (name === 'reassign-block-request') { - setConfirmationModalOpen(true); + setReassignModalOpen(true); getTeamLeadersCenters(); } }; @@ -687,6 +697,15 @@ const manageUsers: React.FC = ({ state={state} listItemClick={listItemClick} optionList={[ + { + label: t('COMMON.REASSIGN_BLOCKS'), + icon: ( + + ), + name: 'reassign-block', + }, { label: t('COMMON.REASSIGN_BLOCKS_REQUEST'), icon: ( @@ -771,6 +790,12 @@ const manageUsers: React.FC = ({ handleCloseModal={handleCloseModal} modalOpen={confirmationModalOpen} /> + void; + buttonNames?: ButtonNames; + handleCloseReassignModal: () => void; + modalOpen: boolean; +} + +interface ButtonNames { + primary: string; + secondary: string; +} + +const ReassignModal: React.FC = ({ + modalOpen, + message, + handleAction, + buttonNames, + handleCloseReassignModal, +}) => { + const theme = useTheme(); + const { t } = useTranslation(); + const store = useStore(); + const cohorts = store.cohorts; + const centerList = cohorts.map((cohort: { name: string }) => cohort.name); + + const [searchInput, setSearchInput] = React.useState(''); + const [checkedCenters, setCheckedCenters] = React.useState([]); + + const handleSearchInputChange = (event: React.ChangeEvent) => { + setSearchInput(event.target.value); + }; + + const handleToggle = (name: string) => { + setCheckedCenters((prevCheckedCenters) => { + const currentIndex = prevCheckedCenters.indexOf(name); + const isCurrentlyChecked = currentIndex !== -1; + const newChecked = [...prevCheckedCenters]; + + if (isCurrentlyChecked) { + newChecked.splice(currentIndex, 1); + } else { + newChecked.push(name); + } + return newChecked; + }); + }; + + const filteredCenters = centerList.filter((center: string) => + center.toLowerCase().includes(searchInput.toLowerCase()) + ); + + const style = { + position: 'absolute', + top: '50%', + left: '50%', + transform: 'translate(-50%, -50%)', + width: '75%', + bgcolor: '#fff', + boxShadow: 24, + borderRadius: '16px', + '@media (min-width: 600px)': { + width: '350px', + }, + }; + + return ( + + + + {message} + + + + + + + + + + ), + }} + /> + + + {filteredCenters.map((center: string, index: number) => ( + + {center} + handleToggle(center)} + /> + + ))} + + + + + + + + + ); +}; + +export default ReassignModal;