Merge pull request #167 from shreyas1434shinde/BugFixes

#PS-1317 fix PS-1527 UI Improvement
tekdi · Aug 21, 2024 · 3367fc0 · 3367fc0
2 parents 0150aac + fc2dda5
commit 3367fc0
Show file tree

Hide file tree

Showing 7 changed files with 141 additions and 37 deletions.
diff --git a/public/locales/en/common.json b/public/locales/en/common.json
@@ -371,7 +371,12 @@
     "GOOGLEMEET": "GoogleMeet",
     "SET_UP": "Set-Up",
     "EDIT_THIS_SESSION":" Edit this session",
-    "EDIT_FOLLOWING_SESSIONS":" Edit this and following sessions"
+    "EDIT_FOLLOWING_SESSIONS":" Edit this and following sessions",
+    "DELETE_SESSION_MSG":"Are you sure you want to delete this session?",
+    "DELETE_ALL_SESSION_MSG":"Are you sure you want to delete all sessions in this series?",
+    "DELETE_THIS_SESSION":"Delete this session",
+    "DELETE_FOLLOWING_SESSION":"Delete this and following sessions",
+    "UPDATE_CHANGES":"Are you sure you want to update the changes?"
   },
   "MANAGE_USERS": {
     "CENTERS_REQUESTED_SUCCESSFULLY": "Center Requested Successfully",

diff --git a/src/components/CenterSessionModal.tsx b/src/components/CenterSessionModal.tsx
@@ -20,6 +20,7 @@ const CenterSessionModal: React.FC<SessionsModalProps> = ({
   date,
   secondary,
   handlePrimaryModel,
+  handleEditModal
 }) => {
   const theme = useTheme<any>();
   const { t } = useTranslation();
@@ -164,7 +165,7 @@ const CenterSessionModal: React.FC<SessionsModalProps> = ({
                       width: '100%',
                     },
                   }}
-                  onClick={handlePrimaryModel}
+                  onClick={handlePrimaryModel || handleEditModal}
                 >
                   {primary}
                 </Button>

diff --git a/src/components/LearnersListItem.tsx b/src/components/LearnersListItem.tsx
@@ -356,6 +356,8 @@ const LearnersListItem: React.FC<LearnerListProps> = ({
 
   const handleMenuOpen = (event: any) => {
     setAnchorEl(event.currentTarget);
+     setCohortLearnerDeleteId(cohortMembershipId);
+        setReassignId(userId);
   };
 
   const renderCustomContent = () => {

diff --git a/src/components/PlannedSession.tsx b/src/components/PlannedSession.tsx
@@ -10,7 +10,7 @@ import {
   Role,
   Status,
   sessionMode,
-  sessionType,
+  sessionType
 } from '@/utils/app.constant';
 import AddIcon from '@mui/icons-material/Add';
 import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
@@ -40,6 +40,7 @@ import dayjs, { Dayjs } from 'dayjs';
 import utc from 'dayjs/plugin/utc';
 import { useTranslation } from 'next-i18next';
 import { ChangeEvent, useEffect, useState } from 'react';
+import ReactGA from 'react-ga4';
 import {
   DaysOfWeek,
   eventDaysLimit,
@@ -48,7 +49,7 @@ import {
 import SessionMode from './SessionMode';
 import { showToastMessage } from './Toastify';
 import WeekDays from './WeekDays';
-import ReactGA from 'react-ga4';
+import ConfirmationModal from './ConfirmationModal';
 
 type mode = (typeof sessionMode)[keyof typeof sessionMode];
 type type = (typeof sessionType)[keyof typeof sessionType];
@@ -81,15 +82,19 @@ const PlannedSession: React.FC<PlannedModalProps> = ({
   cohortName,
   cohortId,
   onCloseModal,
-  editSession
+  editSession,
+  handleEditSelection,
+  editSelection
 }) => {
   const [mode, setMode] = useState<mode>(sessionMode.OFFLINE);
   const [eventType, setEventType] = useState<type>(sessionType.REPEATING);
   const [link, setLink] = useState('');
   const [linkError, setLinkError] = useState('');
   const [selectedWeekDays, setSelectedWeekDays] = useState<string[]>();
+  const [modalOpen, setModalOpen] = React.useState<boolean>(false);
   const [selectedSubject, setSelectedSubject] = useState<string>();
   const [selectedBlockId, setSelectedBlockId] = useState(0);
+
   const [subjects, setSubjects] = useState<string[]>();
   dayjs.extend(utc);
   const [startDate, setStartDate] = useState<Dayjs | null>(dayjs());
@@ -118,6 +123,13 @@ const PlannedSession: React.FC<PlannedModalProps> = ({
       sessionEndTime: endTime,
     },
   ]);
+  const handleOpenModel = () => {
+    setModalOpen(true);
+  };
+  const handleCloseModal =() => {
+    setModalOpen(false);
+  }
+
 
   useEffect(() => {
     const initialStartDateTime = combineDateAndTime(startDate, startTime);
@@ -679,6 +691,7 @@ const PlannedSession: React.FC<PlannedModalProps> = ({
               >
                 <FormControlLabel
                   value={t('CENTER_SESSION.EDIT_THIS_SESSION')}
+                  onClick={() => handleEditSelection?.('EDIT_SESSION')}
                   label={
                     <span
                       style={{
@@ -703,6 +716,7 @@ const PlannedSession: React.FC<PlannedModalProps> = ({
 
                 <FormControlLabel
                   value={t('CENTER_SESSION.EDIT_FOLLOWING_SESSIONS')}
+                  onClick={() => handleEditSelection?.('FOLLOWING_SESSION')}
                   control={<Radio style={{ color: theme.palette.warning['300'] }} />}
                   label={
                     <span
@@ -1044,6 +1058,41 @@ const PlannedSession: React.FC<PlannedModalProps> = ({
             </Box>
           )}
 
+
+          {editSession && (
+            <Box>
+              <Box
+                sx={{
+                  display: 'flex',
+                  gap: '5px',
+                  mt: 3,
+                  mb: 2,
+                  alignItems: 'center',
+                }}
+              >
+                <Box
+                  sx={{
+                    fontSize: '14px',
+                    color: theme?.palette?.secondary.main,
+                    fontWeight: '500',
+                    cursor: 'pointer',
+                  }}
+                  onClick={handleOpenModel}
+                >
+                  {
+
+                    editSelection === 'EDIT_SESSION' ? t('CENTER_SESSION.DELETE_THIS_SESSION') :  t('CENTER_SESSION.DELETE_FOLLOWING_SESSION')
+                  }
+                </Box>
+                <DeleteOutlineIcon
+                  sx={{ fontSize: '18px', color: theme?.palette?.error.main }}
+                />
+              </Box>
+            </Box>
+          )}
+
+
+
           {sessionBlocks.length > 1 && (
             <Box
               sx={{
@@ -1069,30 +1118,46 @@ const PlannedSession: React.FC<PlannedModalProps> = ({
               />
             </Box>
           )}
-          <Box sx={{ mt: 2 }}>
-            <Divider />
-          </Box>
 
-          <Divider />
 
-          <Box mt={2.5} mb={2}>
-            <Button
-              sx={{
-                border: `1px solid ${theme.palette.error.contrastText}`,
-                borderRadius: '100px',
-                height: '40px',
-                width: '163px',
-                color: theme.palette.error.contrastText,
-              }}
-              className="text-1E"
-              endIcon={<AddIcon />}
-              onClick={handleAddSession}
-            >
-              {t('CENTER_SESSION.ADD_SESSION')}
-            </Button>
-          </Box>
+
+          {!editSession && (
+            <>
+              <Box sx={{ mt: 2 }}>
+                <Divider />
+              </Box>
+              <Divider />
+              <Box mt={2.5} mb={2}>
+                <Button
+                  sx={{
+                    border: `1px solid ${theme.palette.error.contrastText}`,
+                    borderRadius: '100px',
+                    height: '40px',
+                    width: '163px',
+                    color: theme.palette.error.contrastText,
+                  }}
+                  className="text-1E"
+                  endIcon={<AddIcon />}
+                  onClick={handleAddSession}
+                >
+                  {t('CENTER_SESSION.ADD_SESSION')}
+                </Button>
+              </Box>
+            </>
+          )}
+
         </Box>
       ))}
+
+      <ConfirmationModal
+        message={editSelection === 'EDIT_SESSION' ? t('CENTER_SESSION.DELETE_SESSION_MSG') : t('CENTER_SESSION.DELETE_ALL_SESSION_MSG')}
+        buttonNames={{
+          primary: t('COMMON.YES'),
+          secondary: t('COMMON.NO_GO_BACK'),
+        }}
+        handleCloseModal={handleCloseModal}
+        modalOpen={modalOpen}
+      />
     </Box>
   );
 };

diff --git a/src/components/SessionCard.tsx b/src/components/SessionCard.tsx
@@ -10,6 +10,8 @@ import { useTheme } from '@mui/material/styles';
 import { convertUTCToIST } from '@/utils/Helper';
 import { useTranslation } from 'next-i18next';
 import CalendarMonthIcon from '@mui/icons-material/CalendarMonth';
+import ConfirmationModal from './ConfirmationModal';
+
 
 const SessionsCard: React.FC<SessionsCardProps> = ({ data, children }) => {
   const theme = useTheme<any>();
@@ -20,8 +22,15 @@ const SessionsCard: React.FC<SessionsCardProps> = ({ data, children }) => {
   const [endTime, setEndTime] = React.useState('');
   const [startDate, setStartDate] = React.useState('');
   const [editSession, setEditSession] = React.useState('');
+  const [modalOpen, setModalOpen] = React.useState<boolean>(false);
+  const [editSelection, setEditSelection] = React.useState('EDIT_SESSION');
+
 
 
+  const handleEditSelection = (selection: string) => {
+    setEditSelection(selection);
+  };
+
   const handleOpen = (selection: string) => {
     setOpen(true)
     setEditSession(selection);
@@ -57,6 +66,14 @@ const SessionsCard: React.FC<SessionsCardProps> = ({ data, children }) => {
     console.log(startDate, startTime, endDate, endTime);
   }, [data]);
 
+  const handleCloseModal = () => {
+    setModalOpen(false);
+  }
+
+  const handleEditModal = () => {
+    setModalOpen(true);
+  }
+
   return (
     <Box
       sx={{
@@ -140,9 +157,10 @@ const SessionsCard: React.FC<SessionsCardProps> = ({ data, children }) => {
         open={open}
         handleClose={handleClose}
         title={'Home Science'}
-        primary={'Schedule'}
+        primary={editSession === 'EDIT_SESSION' ? "Update" : 'Schedule'}
+        handleEditModal={handleEditModal}
       >
-        <PlannedSession editSession={editSession} />
+        <PlannedSession editSelection={editSelection} handleEditSelection={handleEditSelection} editSession={editSession} />
       </CenterSessionModal>
 
       <Box>{children}</Box>
@@ -152,8 +170,18 @@ const SessionsCard: React.FC<SessionsCardProps> = ({ data, children }) => {
         onClose={handleSnackbarClose}
         message="URL copied to clipboard"
       />
+      <ConfirmationModal
+        message={t('CENTER_SESSION.UPDATE_CHANGES')}
+        buttonNames={{
+          primary: t('COMMON.YES'),
+          secondary: t('COMMON.NO_GO_BACK'),
+        }}
+        handleCloseModal={handleCloseModal}
+        modalOpen={modalOpen}
+      />
     </Box>
   );
+
 };
 
 export default SessionsCard;
diff --git a/src/pages/centers/[cohortId]/index.tsx b/src/pages/centers/[cohortId]/index.tsx
@@ -510,11 +510,11 @@ const CohortPage = () => {
             >
               {t('COMMON.UPCOMING_EXTRA_SESSION', { days: eventDaysLimit })}
             </Box>
-            <Box mt={3} px="18px">
-              <Grid container>
+            <Box mt={3}>
+              <Grid container spacing={2}>
                 {extraSessions?.map((item) => (
-                  <Grid xs={12} sm={6} md={4}>
-                    <SessionCard data={item} key={item.id}>
+                  <Grid item xs={12} sm={6} md={6} key={item.id}>
+                    <SessionCard data={item}>
                       <SessionCardFooter item={item} />
                     </SessionCard>
                   </Grid>
@@ -578,15 +578,15 @@ const CohortPage = () => {
           </Box>
 
           <Box mt={3} px="18px">
-            <Grid container>
+            <Grid container spacing={2}>
               {sessions?.map((item) => (
-                <Grid xs={12} sm={6} md={4}>
-                  <SessionCard data={item} key={item.id}>
+                <Grid item xs={12} sm={6} md={6} key={item.id}>
+                  <SessionCard data={item}>
                     <SessionCardFooter item={item} />
                   </SessionCard>
                 </Grid>
               ))}
-              {sessions && sessions?.length === 0 && (
+              {sessions && sessions.length === 0 && (
                 <Box
                   className="fs-12 fw-400 italic"
                   sx={{ color: theme.palette.warning['300'] }}
@@ -595,6 +595,7 @@ const CohortPage = () => {
                 </Box>
               )}
             </Grid>
+
           </Box>
         </>
       )}

diff --git a/src/utils/Interfaces.ts b/src/utils/Interfaces.ts
@@ -140,6 +140,7 @@ export interface SessionsModalProps {
   date?: string;
   handlePrimaryModel?: () => void;
   secondary?: string;
+  handleEditModal?: () => void; 
 }
 
 export interface PlannedModalProps {
@@ -149,8 +150,9 @@ export interface PlannedModalProps {
   cohortName?: string;
   cohortId?: string;
   onCloseModal?: () => void | undefined;
-  editSession?: string;
-
+  editSelection: string;
+  handleEditSelection: (selection: string) => void;
+  editSession: string;
 }
 
 export interface ScheduleModalProps {