#PS-1317 fixPS-1527 UI Improvement

tekdi · Aug 21, 2024 · 0662391 · 0662391
1 parent 039c4d1
commit 0662391
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 10 deletions.
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
@@ -82,7 +82,9 @@ 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);
@@ -92,7 +94,7 @@ const PlannedSession: React.FC<PlannedModalProps> = ({
   const [modalOpen, setModalOpen] = React.useState<boolean>(false);
   const [selectedSubject, setSelectedSubject] = useState<string>();
   const [selectedBlockId, setSelectedBlockId] = useState(0);
-  const [editSelection, setEditSelection] = React.useState('EDIT_SESSION');
+
   const [subjects, setSubjects] = useState<string[]>();
   dayjs.extend(utc);
   const [startDate, setStartDate] = useState<Dayjs | null>(dayjs());
@@ -127,9 +129,7 @@ const PlannedSession: React.FC<PlannedModalProps> = ({
   const handleCloseModal =() => {
     setModalOpen(false);
   }
-  const handleEditSelection = (selection: string) => {
-    setEditSelection(selection);
-  };
+
 
   useEffect(() => {
     const initialStartDateTime = combineDateAndTime(startDate, startTime);

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