Merge pull request #372 from Aar-if/renameCohort

Issue #PS-1282 feat: Implement the delete center
tekdi · Jul 12, 2024 · 23bd911 · 23bd911
2 parents fd403ef + f4c6da4
commit 23bd911
Show file tree

Hide file tree

Showing 6 changed files with 149 additions and 7 deletions.
diff --git a/public/locales/en/common.json b/public/locales/en/common.json
@@ -288,7 +288,10 @@
     "RENAME_CENTER": "Rename Center",
     "REQUEST_TO_DELETE": "Request to Delete",
     "RENAME": "Rename",
-    "CENTER_RENAMED": "Center Renamed Successfully!"
+    "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"
   },
   "MANAGE_USERS": {
     "CENTERS_REQUESTED_SUCCESSFULLY": "Center Requested Successfully"

diff --git a/public/locales/hi/common.json b/public/locales/hi/common.json
@@ -267,6 +267,9 @@
     "RENAME_CENTER": " केंद्र का नाम बदलें",
     "REQUEST_TO_DELETE": "हटाने का अनुरोध",
     "RENAME": "नाम बदलें",
-    "CENTER_RENAMED": "केंद्र का नाम सफलतापूर्वक बदल दिया गया!"
+    "CENTER_RENAMED": "केंद्र का नाम सफलतापूर्वक बदल दिया गया!",
+    "SEND_REQUEST":"अनुरोध भेजें",
+    "REQUEST_TO_DELETE_HAS_BEEN_SENT": " हटाने का अनुरोध भेजा गया है",
+    "YOU_ARE_SENDING_REQUEST_TO_THE_STATE_ADMIN": "आप राज्य प्रशासन को इस केंद्र को हटाने का अनुरोध भेज रहे हैं"
   }
 }
diff --git a/public/locales/mr/common.json b/public/locales/mr/common.json
@@ -268,6 +268,9 @@
     "RENAME_CENTER": "केंद्राचे नाव बदला",
     "REQUEST_TO_DELETE": "हटवण्याची विनंती",
     "RENAME": "नाव बदला",
-    "CENTER_RENAMED": "केंद्राचे नाव यशस्वीरित्या बदलले गेले!"
+    "CENTER_RENAMED": "केंद्राचे नाव यशस्वीरित्या बदलले गेले!",
+    "SEND_REQUEST":"विनंती पाठवा",
+    "REQUEST_TO_DELETE_HAS_BEEN_SENT": "हटवण्याची विनंती पाठवली आहे",
+    "YOU_ARE_SENDING_REQUEST_TO_THE_STATE_ADMIN": "आपण या केंद्राला हटविण्याचे विनंती राज्य प्रशासनाला पाठवत आहात"
   }
 }
diff --git a/public/locales/or/common.json b/public/locales/or/common.json
@@ -212,6 +212,11 @@
     "RENAME_CENTER": "କେନ୍ଦ୍ରର ନାମ ପରିବର୍ତ୍ତନ କରନ୍ତୁ",
     "REQUEST_TO_DELETE": "ହଟାଇବାକୁ ଅନୁରୋଧ",
     "RENAME": "ପୁନ ame ନାମ କରନ୍ତୁ",
-    "CENTER_RENAMED": "କେନ୍ଦ୍ରର ନାମ ସଫଳତାର ସହ ଚାଲିଛି!"
+    "CENTER_RENAMED": "କେନ୍ଦ୍ରର ନାମ ସଫଳତାର ସହ ଚାଲିଛି!",
+    "SEND_REQUEST":"ଅନୁରୋଧ ପଠାନ୍ତୁ",
+    "REQUEST_TO_DELETE_HAS_BEEN_SENT": "ହଟାଇବାକୁ ଅନୁରୋଧ ପଠାଯାଇଛି",
+    "YOU_ARE_SENDING_REQUEST_TO_THE_STATE_ADMIN": "ଆପଣ ଏହି କେନ୍ଦ୍ରଟିକୁ ବିଲୋପ କରିବା ପାଇଁ ରାଜ୍ୟ ପ୍ରଶାସନକୁ ଅନୁରୋଧ ପଠାଉଛନ୍ତି"
+
+    }
   }
 }
diff --git a/src/components/center/DeleteCenterModal.tsx b/src/components/center/DeleteCenterModal.tsx
@@ -0,0 +1,117 @@
+import React, { useState } from 'react';
+import {
+  Box,
+  Typography,
+  TextField,
+  Button,
+  Modal,
+  Fade,
+  Divider,
+  IconButton,
+  Radio,
+  RadioGroup,
+  FormControlLabel,
+  FormControl,
+  FormLabel,
+} from '@mui/material';
+import CloseIcon from '@mui/icons-material/Close';
+import { useTranslation } from 'next-i18next';
+import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
+import { useTheme, styled } from '@mui/material/styles';
+import { showToastMessage } from '../Toastify';
+
+interface CreateBlockModalProps {
+  open: boolean;
+  handleClose: () => void;
+}
+
+const CustomRadio = styled(Radio)(({ theme }) => ({
+  color: theme.palette.text.primary,
+  '&.Mui-checked': {
+    color: theme.palette.text.primary,
+  },
+}));
+
+const DeleteCenterModal: React.FC<CreateBlockModalProps> = ({
+  open,
+  handleClose,
+}) => {
+  const { t } = useTranslation();
+  const theme = useTheme<any>();
+
+
+
+  const handleDeleteButtonClick = () => {
+    console.log('Delete request sent');
+    showToastMessage(t('CENTERS.REQUEST_TO_DELETE_HAS_BEEN_SENT'), 'success');
+    handleClose();
+  };
+
+  return (
+    <Modal open={open} onClose={handleClose} closeAfterTransition>
+      <Fade in={open}>
+        <Box
+          sx={{
+            backgroundColor: 'white',
+            boxShadow: 24,
+            maxWidth: 400,
+            width: '90%',
+            margin: 'auto',
+            borderRadius: 3,
+            outline: 'none',
+            p: 2,
+            position: 'absolute',
+            top: '50%',
+            left: '50%',
+            transform: 'translate(-50%, -50%)',
+          }}
+        >
+          <Typography variant="body2" color="textSecondary" sx={{ mb: 2, mt: 2 }}>
+
+          {t('CENTERS.YOU_ARE_SENDING_REQUEST_TO_THE_STATE_ADMIN')}
+          </Typography>
+          <Divider sx={{ mb: 2, mx: -2 }} />
+          <Box
+            sx={{
+              display: 'flex',
+              justifyContent: 'space-between',
+              alignItems: 'center',
+
+              pl: 1,
+              pr: 2,
+            }}
+          >
+          <Button
+            variant="outlined"
+            onClick={handleClose}
+            sx={{
+              width: '60%',
+              border: 'none',
+              color: theme?.palette?.secondary?.main,
+              mb: 2,
+            }}
+          >
+
+            {t('COMMON.CANCEL')}
+          </Button>
+          <Button
+            variant="outlined"
+            onClick={handleDeleteButtonClick}
+            sx={{
+              width: '100%',
+              border: 'none',
+              backgroundColor: theme?.palette?.primary?.main,
+              mb: 2,
+            }}
+          >
+
+            {t('CENTERS.SEND_REQUEST')}
+          </Button>
+          </Box>
+        </Box>
+      </Fade>
+    </Modal>
+  );
+};
+
+export default DeleteCenterModal;
diff --git a/src/pages/centers/[cohortId].tsx b/src/pages/centers/[cohortId].tsx
@@ -41,6 +41,7 @@ import MoreVertIcon from '@mui/icons-material/MoreVert';
 import ModeEditOutlineOutlinedIcon from '@mui/icons-material/ModeEditOutlineOutlined';
 import DeleteOutlineOutlinedIcon from '@mui/icons-material/DeleteOutlineOutlined';
 import RenameCenterModal from '@/components/center/RenameCenterModal';
+import DeleteCenterModal from '@/components/center/DeleteCenterModal';
 
 const TeachingCenterDetails = () => {
   const [value, setValue] = React.useState(1);
@@ -60,6 +61,8 @@ const TeachingCenterDetails = () => {
     React.useState<any>(null);
   const [openRenameCenterModal, setOpenRenameCenterModal] =
     React.useState(false);
+    const [openDeleteCenterModal, setOpenDeleteCenterModal] =
+    React.useState(false);
 
   useEffect(() => {
     const getCohortData = async () => {
@@ -125,6 +128,10 @@ const TeachingCenterDetails = () => {
     setOpenRenameCenterModal(false);
   };
 
+  const handleDeleteCenterClose = () => {
+    setOpenDeleteCenterModal(false);
+  };
+
   return (
     <>
       <Header />
@@ -186,13 +193,13 @@ const TeachingCenterDetails = () => {
             open={Boolean(anchorEl)}
             onClose={handleMenuClose}
           >
-            <MenuItem onClick={() => setOpenRenameCenterModal(true)}>
-              <ListItemIcon sx={{ color: theme.palette.warning['A200'] }}>
+            <MenuItem onClick={() => { setOpenRenameCenterModal(true); handleMenuClose(); }}>
+              <ListItemIcon  sx={{ color: theme.palette.warning['A200'] }}>
                 <ModeEditOutlineOutlinedIcon fontSize="small" />
               </ListItemIcon>
               {t('CENTERS.RENAME_CENTER')}
             </MenuItem>
-            <MenuItem onClick={handleMenuClose}>
+            <MenuItem onClick={() => {setOpenDeleteCenterModal(true); handleMenuClose(); }}>
               <ListItemIcon sx={{ color: theme.palette.warning['A200'] }}>
                 <DeleteOutlineOutlinedIcon fontSize="small" />
               </ListItemIcon>
@@ -203,6 +210,10 @@ const TeachingCenterDetails = () => {
             open={openRenameCenterModal}
             handleClose={handleRenameCenterClose}
           />
+            <DeleteCenterModal
+            open={openDeleteCenterModal}
+            handleClose={handleDeleteCenterClose}
+          />
         </Box>
       </Box>
       <Box sx={{ width: '100%' }}>