From 941404e287308497b1519eb3594338e1022d134f Mon Sep 17 00:00:00 2001 From: Arif Date: Wed, 17 Jul 2024 16:48:45 +0530 Subject: [PATCH 1/2] Issue #PS-1282 feat: Implement the delete center --- public/locales/en/common.json | 5 +- public/locales/hi/common.json | 4 +- public/locales/mr/common.json | 4 +- public/locales/or/common.json | 4 +- src/components/DeleteUserModal.tsx | 11 +-- src/components/ManageUser.tsx | 76 ++++++++++++++----- src/components/RemoveFacilitatorAlert.tsx | 91 +++++++++++++++++++++++ src/store/manageUserStore.js | 2 +- 8 files changed, 164 insertions(+), 33 deletions(-) create mode 100644 src/components/RemoveFacilitatorAlert.tsx diff --git a/public/locales/en/common.json b/public/locales/en/common.json index e6adf58a..34000079 100644 --- a/public/locales/en/common.json +++ b/public/locales/en/common.json @@ -297,7 +297,9 @@ "CENTER_RENAMED": "Center Renamed Successfully!", "SEND_REQUEST": "Send Request", "REQUEST_TO_DELETE_HAS_BEEN_SENT": "Request to Delete has been sent", - "YOU_ARE_SENDING_REQUEST_TO_THE_STATE_ADMIN": "You are sending a request to the State Admin to delete this Center" + "YOU_ARE_SENDING_REQUEST_TO_THE_STATE_ADMIN": "You are sending a request to the State Admin to delete this Center", + "THE_USER_BELONGS_TO_THE_FOLLOWING_COHORT": "The user belongs to the following cohort: ", + "PLEASE_REMOVE_THE_USER_FROM_COHORT": "Please remove the user from these cohorts before proceeding with deletion." }, "CENTER_SESSION": { "THIS_SESSION": "This session", @@ -324,6 +326,7 @@ }, "MANAGE_USERS": { "CENTERS_REQUESTED_SUCCESSFULLY": "Center Requested Successfully" + }, "FORM": { "FULL_NAME":"Full Name", diff --git a/public/locales/hi/common.json b/public/locales/hi/common.json index 8832c891..eb63a2c0 100644 --- a/public/locales/hi/common.json +++ b/public/locales/hi/common.json @@ -273,7 +273,9 @@ "CENTER_RENAMED": "केंद्र का नाम सफलतापूर्वक बदल दिया गया!", "SEND_REQUEST": "अनुरोध भेजें", "REQUEST_TO_DELETE_HAS_BEEN_SENT": " हटाने का अनुरोध भेजा गया है", - "YOU_ARE_SENDING_REQUEST_TO_THE_STATE_ADMIN": "आप राज्य प्रशासन को इस केंद्र को हटाने का अनुरोध भेज रहे हैं" + "YOU_ARE_SENDING_REQUEST_TO_THE_STATE_ADMIN": "आप राज्य प्रशासन को इस केंद्र को हटाने का अनुरोध भेज रहे हैं", + "THE_USER_BELONGS_TO_THE_FOLLOWING_COHORT": "उपयोगकर्ता निम्नलिखित समूह का सदस्य है: ", + "PLEASE_REMOVE_THE_USER_FROM_COHORT": "कृपया हटाने से पहले उपयोगकर्ता को इन समूहों से हटा दें।" }, "CENTER_SESSION": { "THIS_SESSION": "यह सत्र", diff --git a/public/locales/mr/common.json b/public/locales/mr/common.json index 7ec42eff..77045c04 100644 --- a/public/locales/mr/common.json +++ b/public/locales/mr/common.json @@ -274,7 +274,9 @@ "CENTER_RENAMED": "केंद्राचे नाव यशस्वीरित्या बदलले गेले!", "SEND_REQUEST": "विनंती पाठवा", "REQUEST_TO_DELETE_HAS_BEEN_SENT": "हटवण्याची विनंती पाठवली आहे", - "YOU_ARE_SENDING_REQUEST_TO_THE_STATE_ADMIN": "आपण या केंद्राला हटविण्याचे विनंती राज्य प्रशासनाला पाठवत आहात" + "YOU_ARE_SENDING_REQUEST_TO_THE_STATE_ADMIN": "आपण या केंद्राला हटविण्याचे विनंती राज्य प्रशासनाला पाठवत आहात", + "THE_USER_BELONGS_TO_THE_FOLLOWING_COHORT": "वापरकर्ता खालील गटाचा सदस्य आहे: ", + "PLEASE_REMOVE_THE_USER_FROM_COHORT": "हटविण्यापूर्वी कृपया वापरकर्त्याला या गटांमधून काढून टाका।" }, "CENTER_SESSION": { "THIS_SESSION": "हे सत्र", diff --git a/public/locales/or/common.json b/public/locales/or/common.json index 08527dac..fd713ede 100644 --- a/public/locales/or/common.json +++ b/public/locales/or/common.json @@ -221,7 +221,9 @@ "CENTER_RENAMED": "କେନ୍ଦ୍ରର ନାମ ସଫଳତାର ସହ ଚାଲିଛି!", "SEND_REQUEST":"ଅନୁରୋଧ ପଠାନ୍ତୁ", "REQUEST_TO_DELETE_HAS_BEEN_SENT": "ହଟାଇବାକୁ ଅନୁରୋଧ ପଠାଯାଇଛି", - "YOU_ARE_SENDING_REQUEST_TO_THE_STATE_ADMIN": "ଆପଣ ଏହି କେନ୍ଦ୍ରଟିକୁ ବିଲୋପ କରିବା ପାଇଁ ରାଜ୍ୟ ପ୍ରଶାସନକୁ ଅନୁରୋଧ ପଠାଉଛନ୍ତି" + "YOU_ARE_SENDING_REQUEST_TO_THE_STATE_ADMIN": "ଆପଣ ଏହି କେନ୍ଦ୍ରଟିକୁ ବିଲୋପ କରିବା ପାଇଁ ରାଜ୍ୟ ପ୍ରଶାସନକୁ ଅନୁରୋଧ ପଠାଉଛନ୍ତି", + "THE_USER_BELONGS_TO_THE_FOLLOWING_COHORT": "ୟୁଜର ନିମ୍ନଲିଖିତ ସମୁହର ସଦସ୍ୟ: ", + "PLEASE_REMOVE_THE_USER_FROM_COHORT": "ଦୟାକରି ହଟାଇବା ପୂର୍ବରୁ ୟୁଜରକୁ ଏହି ସମୁହଗୁଡିକରୁ କାଢ଼ି ଦିଅନ୍ତୁ।" } } diff --git a/src/components/DeleteUserModal.tsx b/src/components/DeleteUserModal.tsx index 69d64b55..3eefe018 100644 --- a/src/components/DeleteUserModal.tsx +++ b/src/components/DeleteUserModal.tsx @@ -16,6 +16,8 @@ import { useTheme } from '@mui/material/styles'; import { useTranslation } from 'next-i18next'; import CloseIcon from '@mui/icons-material/Close'; import { showToastMessage } from './Toastify'; +import manageUserStore from '@/store/manageUserStore'; +import { getCohortList } from '@/services/CohortServices'; interface DeleteUserModalProps { open: boolean; @@ -23,6 +25,7 @@ interface DeleteUserModalProps { } const DeleteUserModal: React.FC = ({ open, onClose }) => { const { t } = useTranslation(); + const store = manageUserStore(); const theme = useTheme(); const style = { position: 'absolute', @@ -53,16 +56,8 @@ const DeleteUserModal: React.FC = ({ open, onClose }) => { }; const handleDeleteAction = () => { - - - - - // setOtherReason(''); setSelectedValue(''); - - - onClose(); showToastMessage(t('COMMON.USER_DELETED_PERMANENTLY'), 'success'); }; diff --git a/src/components/ManageUser.tsx b/src/components/ManageUser.tsx index 1d731bdc..39cddafe 100644 --- a/src/components/ManageUser.tsx +++ b/src/components/ManageUser.tsx @@ -43,6 +43,7 @@ import { getMyUserList } from '@/services/MyClassDetailsService'; import DeleteUserModal from './DeleteUserModal'; import Image from 'next/image'; import profileALT from '../assets/images/Profile.png'; +import RemoveFacilitatorAlert from './RemoveFacilitatorAlert'; interface Cohort { cohortId: string; parentId: string; @@ -82,7 +83,7 @@ const manageUsers: React.FC = ({ const { t } = useTranslation(); const theme = useTheme(); const router = useRouter(); -const store = manageUserStore(); + const store = manageUserStore(); const [value, setValue] = React.useState(1); const [users, setUsers] = useState< { @@ -112,13 +113,14 @@ const store = manageUserStore(); const [reassignBlockRequestModalOpen, setReassignBlockRequestModalOpen] = React.useState(false); const [openDeleteUserModal, setOpenDeleteUserModal] = React.useState(false); - + const [openRemoveUserModal, setOpenRemoveUserModal] = React.useState(false); + const [removeCohortNames, setRemoveCohortNames] = React.useState(''); const CustomLink = styled(Link)(({ theme }) => ({ textDecoration: 'underline', textDecorationColor: theme?.palette?.secondary.main, textDecorationThickness: '1px', })); - const setDeleteId = manageUserStore((state) => state.setDeleteId); + const setCohortDeleteId = manageUserStore((state) => state.setCohortDeleteId); useEffect(() => { const getFacilitator = async () => { @@ -148,22 +150,26 @@ const store = manageUserStore(); return; } const userIds = facilitatorList.map((user: any) => user.userId); - const cohortDetailsPromises = userIds.map((userId: string) => + const cohortDetailsPromises = userIds.map((userId: string) => getCohortList(userId, { filter: 'true' }) ); const cohortDetails = await Promise.all(cohortDetailsPromises); console.log('Cohort Details:', cohortDetails); - - const extractedData = facilitatorList.map((user: any, index: number) => { - const cohorts = cohortDetails[index] || []; - const cohortNames = cohorts.map((cohort: any) => cohort.cohortName).join(', '); - - return { - userId: user.userId, - name: user.name, - cohortNames: cohortNames || null, - }; - }); + + const extractedData = facilitatorList.map( + (user: any, index: number) => { + const cohorts = cohortDetails[index] || []; + const cohortNames = cohorts + .map((cohort: any) => cohort.cohortName) + .join(', '); + + return { + userId: user.userId, + name: user.name, + cohortNames: cohortNames || null, + }; + } + ); setTimeout(() => { setUsers(extractedData); }); @@ -244,10 +250,15 @@ const store = manageUserStore(); setState({ ...state, bottom: false }); }; + const handleCloseRemoveModal = () => { + setOpenRemoveUserModal(false); + + }; + const toggleDrawer = (anchor: Anchor, open: boolean, user: any) => (event: React.KeyboardEvent | React.MouseEvent) => { - setDeleteId(user.userId); + setCohortDeleteId(user.userId); setCenters( cohortsData?.[user.userId]?.map((cohort) => cohort.name) || [] ); @@ -266,7 +277,23 @@ const store = manageUserStore(); const listItemClick = async (event: React.MouseEvent, name: string) => { if (name === 'delete-User') { - setOpenDeleteUserModal(true); + const userId = store.deleteId; + console.log(userId); + + const cohortList = await getCohortList(userId); + console.log('Cohort List:', cohortList); + + if (cohortList && cohortList.length > 0) { + const cohortNames = cohortList + .map((cohort: { cohortName: any }) => cohort.cohortName) + .join(', '); + setOpenRemoveUserModal(true); + setRemoveCohortNames(cohortNames) + } else { + console.log('User does not belong to any cohorts, proceed with deletion'); + setOpenDeleteUserModal(true); + } + // const name = selectedUser?.name || ''; // const userId = selectedUser?.userId || ''; @@ -565,11 +592,13 @@ const store = manageUserStore(); borderRadius: '5px', fontSize: '12px', fontWeight: '600', - color: 'black', - marginBottom: '10px', + color: 'black', + marginBottom: '10px', }} > - {user?.cohortNames ? `${user.cohortNames}` : 'N/A'} + {user?.cohortNames + ? `${user.cohortNames}` + : 'N/A'} @@ -704,6 +733,13 @@ const store = manageUserStore(); open={openDeleteUserModal} onClose={handleCloseModal} /> + + + )} diff --git a/src/components/RemoveFacilitatorAlert.tsx b/src/components/RemoveFacilitatorAlert.tsx new file mode 100644 index 00000000..518d2388 --- /dev/null +++ b/src/components/RemoveFacilitatorAlert.tsx @@ -0,0 +1,91 @@ +import { + Box, + Button, + Divider, + FormControl, + FormControlLabel, + InputLabel, + Modal, + Radio, + RadioGroup, + TextField, + Typography, + } from '@mui/material'; + import React, { useState } from 'react'; + import { useTheme } from '@mui/material/styles'; + import { useTranslation } from 'next-i18next'; + import CloseIcon from '@mui/icons-material/Close'; + import { showToastMessage } from './Toastify'; + import manageUserStore from '@/store/manageUserStore'; + import { getCohortList } from '@/services/CohortServices'; + + interface RemoveFacilitatorAlertProps { + removeCohortNames : string; + open: boolean; + onClose: () => void; + } + const RemoveFacilitatorAlert: React.FC = ({removeCohortNames, open, onClose }) => { + const { t } = useTranslation(); + const store = manageUserStore(); + const theme = useTheme(); + const style = { + padding : "20px", + position: 'absolute', + top: '50%', + left: '50%', + transform: 'translate(-50%, -50%)', + width: '85%', + boxShadow: 24, + bgcolor: '#fff', + borderRadius: '16px', + '@media (min-width: 600px)': { + width: '450px', + }, + }; + + return ( + + + + + + {t('COMMON.DELETE_USER')} + + + + + + + + {t('CENTERS.THE_USER_BELONGS_TO_THE_FOLLOWING_COHORT')} {removeCohortNames}. {t('CENTERS.PLEASE_REMOVE_THE_USER_FROM_COHORT')} + + + + + + ); + }; + + export default RemoveFacilitatorAlert; + \ No newline at end of file diff --git a/src/store/manageUserStore.js b/src/store/manageUserStore.js index dc46454d..576f1dc2 100644 --- a/src/store/manageUserStore.js +++ b/src/store/manageUserStore.js @@ -5,7 +5,7 @@ const manageUserStore = create( persist( (set) => ({ deleteId: '', - setDeleteId: (newDeleteId) => set((state) => ({ deleteId: newDeleteId })), + setCohortDeleteId: (newCohortDeleteId) => set((state) => ({ deleteId: newCohortDeleteId })), }), { name: 'teacherApp', From 0896654fc0f7cfd86d28132a7cb7332af0b1d6f5 Mon Sep 17 00:00:00 2001 From: Arif Date: Wed, 17 Jul 2024 17:18:54 +0530 Subject: [PATCH 2/2] Issue #PS-1282 feat: Implement the delete center --- src/components/ManageUser.tsx | 37 +++--- src/components/RemoveFacilitatorAlert.tsx | 91 -------------- src/components/SimpleModal.tsx | 140 ++++++++++++++++++++++ 3 files changed, 163 insertions(+), 105 deletions(-) delete mode 100644 src/components/RemoveFacilitatorAlert.tsx create mode 100644 src/components/SimpleModal.tsx diff --git a/src/components/ManageUser.tsx b/src/components/ManageUser.tsx index 39cddafe..d7717291 100644 --- a/src/components/ManageUser.tsx +++ b/src/components/ManageUser.tsx @@ -43,7 +43,8 @@ import { getMyUserList } from '@/services/MyClassDetailsService'; import DeleteUserModal from './DeleteUserModal'; import Image from 'next/image'; import profileALT from '../assets/images/Profile.png'; -import RemoveFacilitatorAlert from './RemoveFacilitatorAlert'; +import RemoveFacilitatorAlert from './SimpleModal'; +import SimpleModal from './SimpleModal'; interface Cohort { cohortId: string; parentId: string; @@ -252,7 +253,6 @@ const manageUsers: React.FC = ({ const handleCloseRemoveModal = () => { setOpenRemoveUserModal(false); - }; const toggleDrawer = @@ -279,21 +279,22 @@ const manageUsers: React.FC = ({ if (name === 'delete-User') { const userId = store.deleteId; console.log(userId); - + const cohortList = await getCohortList(userId); console.log('Cohort List:', cohortList); - + if (cohortList && cohortList.length > 0) { const cohortNames = cohortList .map((cohort: { cohortName: any }) => cohort.cohortName) .join(', '); setOpenRemoveUserModal(true); - setRemoveCohortNames(cohortNames) + setRemoveCohortNames(cohortNames); } else { - console.log('User does not belong to any cohorts, proceed with deletion'); + console.log( + 'User does not belong to any cohorts, proceed with deletion' + ); setOpenDeleteUserModal(true); } - // const name = selectedUser?.name || ''; // const userId = selectedUser?.userId || ''; @@ -733,13 +734,21 @@ const manageUsers: React.FC = ({ open={openDeleteUserModal} onClose={handleCloseModal} /> - - - + + {' '} + + + {t('CENTERS.THE_USER_BELONGS_TO_THE_FOLLOWING_COHORT')}{' '} + {removeCohortNames}.{' '} + {t('CENTERS.PLEASE_REMOVE_THE_USER_FROM_COHORT')} + + + )} diff --git a/src/components/RemoveFacilitatorAlert.tsx b/src/components/RemoveFacilitatorAlert.tsx deleted file mode 100644 index 518d2388..00000000 --- a/src/components/RemoveFacilitatorAlert.tsx +++ /dev/null @@ -1,91 +0,0 @@ -import { - Box, - Button, - Divider, - FormControl, - FormControlLabel, - InputLabel, - Modal, - Radio, - RadioGroup, - TextField, - Typography, - } from '@mui/material'; - import React, { useState } from 'react'; - import { useTheme } from '@mui/material/styles'; - import { useTranslation } from 'next-i18next'; - import CloseIcon from '@mui/icons-material/Close'; - import { showToastMessage } from './Toastify'; - import manageUserStore from '@/store/manageUserStore'; - import { getCohortList } from '@/services/CohortServices'; - - interface RemoveFacilitatorAlertProps { - removeCohortNames : string; - open: boolean; - onClose: () => void; - } - const RemoveFacilitatorAlert: React.FC = ({removeCohortNames, open, onClose }) => { - const { t } = useTranslation(); - const store = manageUserStore(); - const theme = useTheme(); - const style = { - padding : "20px", - position: 'absolute', - top: '50%', - left: '50%', - transform: 'translate(-50%, -50%)', - width: '85%', - boxShadow: 24, - bgcolor: '#fff', - borderRadius: '16px', - '@media (min-width: 600px)': { - width: '450px', - }, - }; - - return ( - - - - - - {t('COMMON.DELETE_USER')} - - - - - - - - {t('CENTERS.THE_USER_BELONGS_TO_THE_FOLLOWING_COHORT')} {removeCohortNames}. {t('CENTERS.PLEASE_REMOVE_THE_USER_FROM_COHORT')} - - - - - - ); - }; - - export default RemoveFacilitatorAlert; - \ No newline at end of file diff --git a/src/components/SimpleModal.tsx b/src/components/SimpleModal.tsx new file mode 100644 index 00000000..e2575ae8 --- /dev/null +++ b/src/components/SimpleModal.tsx @@ -0,0 +1,140 @@ +import { + Box, + Button, + Divider, + FormControl, + FormControlLabel, + InputLabel, + Modal, + Radio, + RadioGroup, + TextField, + Typography, +} from '@mui/material'; +import React, { ReactNode, useState } from 'react'; +import { useTheme } from '@mui/material/styles'; +import { useTranslation } from 'next-i18next'; +import CloseIcon from '@mui/icons-material/Close'; +import { showToastMessage } from './Toastify'; +import manageUserStore from '@/store/manageUserStore'; +import { getCohortList } from '@/services/CohortServices'; + +interface SimpleModalProps { + secondaryActionHandler?: () => void; + primaryActionHandler: () => void; + secondaryText?: string; + primaryText: string; + children: ReactNode; + open: boolean; + onClose: () => void; +} +const SimpleModal: React.FC = ({ + open, + onClose, + primaryText, + secondaryText, + primaryActionHandler, + secondaryActionHandler, + children, +}) => { + const { t } = useTranslation(); + const store = manageUserStore(); + const theme = useTheme(); + const style = { + padding: '20px', + position: 'absolute', + top: '50%', + left: '50%', + transform: 'translate(-50%, -50%)', + width: '85%', + boxShadow: 24, + bgcolor: '#fff', + borderRadius: '16px', + '@media (min-width: 600px)': { + width: '450px', + }, + }; + + return ( + + + + + + {t('COMMON.DELETE_USER')} + + + + + + {children} + + + + {primaryText && ( + + )} + + {secondaryText && ( + + )} + + + + ); +}; + +export default SimpleModal;