Merge pull request #36 from shreyas1434shinde/centerSession

Issue #PS-1333 fix: Select Topic Sub-topic modal UI Implementation
tekdi · Jul 23, 2024 · 4a5e905 · 4a5e905
2 parents 921a80c + 8ab7b36
commit 4a5e905
Show file tree

Hide file tree

Showing 9 changed files with 177 additions and 77 deletions.
diff --git a/public/locales/en/common.json b/public/locales/en/common.json
@@ -326,7 +326,9 @@
     "TOPIC": "Topic",
     "SUBTOPIC": "Sub Topic",
     "FACILITATORS": " Facilitators Pre-requisites",
-    "TITLE": "Title"
+    "TITLE": "Title",
+    "DELETE_SESSION": "Delete Session",
+    "SCHEDULE": "Schedule"
   },
   "MANAGE_USERS": {
     "CENTERS_REQUESTED_SUCCESSFULLY": "Center Requested Successfully"

diff --git a/public/locales/hi/common.json b/public/locales/hi/common.json
@@ -130,7 +130,7 @@
     "AS_OF_TODAY_DATE": "आज तक, {{day_date}}",
     "LEARNER": "शिक्षार्थियों",
     "ATTENDANCE_COMPARISON": "उपस्थिति तुलना",
-    "CENTER_TYPE":"केंद्र प्रकार",
+    "CENTER_TYPE": "केंद्र प्रकार",
     "BLOCK_AVERAGE_ATTENDANCE": "ब्लॉक औसत उपस्थिति"
   },
   "ATTENDANCE": {
@@ -299,6 +299,8 @@
     "TOPIC": "विषय",
     "SUBTOPIC": "उप विषय",
     "FACILITATORS": "सुविधादाताओं की पूर्व आवश्यकताएँ",
-    "TITLE": "शीर्षक"
+    "TITLE": "शीर्षक",
+    "DELETE_SESSION": "सत्र हटाएँ",
+    "SCHEDULE": "अनुसूची"
   }
 }
diff --git a/public/locales/mr/common.json b/public/locales/mr/common.json
@@ -131,7 +131,7 @@
     "AS_OF_TODAY_DATE": "आजपर्यंत, {{day_date}}",
     "LEARNER": "शिकणारे",
     "ATTENDANCE_COMPARISON": "उपस्थिती तुलना",
-    "CENTER_TYPE":"केंद्र प्रकार",
+    "CENTER_TYPE": "केंद्र प्रकार",
     "BLOCK_AVERAGE_ATTENDANCE": "ब्लॉक सरासरी उपस्थिती"
   },
   "ATTENDANCE": {
@@ -300,6 +300,8 @@
     "TOPIC": "विषय",
     "SUBTOPIC": "उपविषय",
     "FACILITATORS": "सुविधादात्यांची पूर्व आवश्यकताएं",
-    "TITLE": "शीर्षक"
+    "TITLE": "शीर्षक",
+    "DELETE_SESSION": "सत्र हटवा",
+    "SCHEDULE": "वेळापत्रक"
   }
 }
diff --git a/src/components/CenterSessionModal.tsx b/src/components/CenterSessionModal.tsx
@@ -18,6 +18,7 @@ const CenterSessionModal: React.FC<SessionsModalProps> = ({
   primary,
   center,
   date,
+  secondary,
   handlePrimaryModel,
 }) => {
   const theme = useTheme<any>();
@@ -104,30 +105,69 @@ const CenterSessionModal: React.FC<SessionsModalProps> = ({
           </Box>
           <Divider />
           {children}
-          {primary && (
-            <>
-              <Divider />
-              <Box sx={{ padding: '20px 16px' }}>
-                <Button
-                  variant="contained"
-                  color="primary"
-                  sx={{
-                    '&.Mui-disabled': {
-                      backgroundColor: theme?.palette?.primary?.main,
-                    },
-                    minWidth: '84px',
-                    height: '2.5rem',
-                    padding: theme.spacing(1),
-                    fontWeight: '500',
-                    width: '100%',
-                  }}
-                  onClick={handlePrimaryModel}
-                >
-                  {primary}
-                </Button>
+          <Divider />
+
+          <Box
+            sx={{
+              display: 'flex',
+              width: '100%',
+              justifyContent: 'center',
+              gap: '10px',
+            }}
+          >
+            {secondary && (
+              <Box>
+                <Box sx={{ padding: '20px 16px' }}>
+                  <Button
+                    variant="outlined"
+                    color="primary"
+                    sx={{
+                      '&.Mui-disabled': {
+                        backgroundColor: theme?.palette?.primary?.main,
+                      },
+                      minWidth: '84px',
+                      padding: theme.spacing(1),
+                      fontWeight: '500',
+                      width: '128px',
+                      height: '40px',
+                      '@media (max-width: 430px)': {
+                        width: '100%',
+                      },
+                    }}
+                    onClick={handlePrimaryModel}
+                  >
+                    {secondary}
+                  </Button>
+                </Box>
               </Box>
-            </>
-          )}
+            )}
+            {primary && (
+              <Box sx={{ width: secondary ? 'unset' : '100%' }}>
+                <Box sx={{ padding: '20px 16px' }}>
+                  <Button
+                    variant="contained"
+                    color="primary"
+                    sx={{
+                      '&.Mui-disabled': {
+                        backgroundColor: theme?.palette?.primary?.main,
+                      },
+                      minWidth: '84px',
+                      padding: theme.spacing(1),
+                      fontWeight: '500',
+                      width: secondary ? '128px' : '100%',
+                      height: '40px',
+                      '@media (max-width: 430px)': {
+                        width: '100%',
+                      },
+                    }}
+                    onClick={handlePrimaryModel}
+                  >
+                    {primary}
+                  </Button>
+                </Box>
+              </Box>
+            )}
+          </Box>
         </Box>
       </Modal>
     </div>

diff --git a/src/components/DeleteSession.tsx b/src/components/DeleteSession.tsx
@@ -6,39 +6,53 @@ import {
   Radio,
   RadioGroup,
 } from '@mui/material';
+import React, { useState } from 'react';
 
-import React from 'react';
 import { useTheme } from '@mui/material/styles';
 import { useTranslation } from 'react-i18next';
 
 const DeleteSession = () => {
   const theme = useTheme<any>();
   const { t } = useTranslation();
+  const [selectedValue, setSelectedValue] = useState('thisSession');
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setSelectedValue(event.target.value);
+  };
+
   return (
     <>
       <Box sx={{ padding: '8px 16px' }}>
-        <Box
-          sx={{
-            display: 'flex',
-            justifyContent: 'space-between',
-            alignItems: 'center',
-            mt: 2,
-          }}
-        >
-          <Box>{t('CENTER_SESSION.THIS_SESSION')}</Box>
-          <Radio style={{ color: theme?.palette?.warning['300'] }} />
-        </Box>
-        <Box
-          sx={{
-            display: 'flex',
-            justifyContent: 'space-between',
-            alignItems: 'center',
-            my: 2,
-          }}
-        >
-          <Box>{t('CENTER_SESSION.FOLLOWING_SESSIONS')}</Box>
-          <Radio style={{ color: theme?.palette?.warning['300'] }} />
-        </Box>
+        <RadioGroup value={selectedValue} onChange={handleChange}>
+          <Box
+            sx={{
+              display: 'flex',
+              justifyContent: 'space-between',
+              alignItems: 'center',
+              mt: 2,
+            }}
+          >
+            <Box>{t('CENTER_SESSION.THIS_SESSION')}</Box>
+            <Radio
+              value="thisSession"
+              style={{ color: theme?.palette?.warning['300'] }}
+            />
+          </Box>
+          <Box
+            sx={{
+              display: 'flex',
+              justifyContent: 'space-between',
+              alignItems: 'center',
+              my: 2,
+            }}
+          >
+            <Box>{t('CENTER_SESSION.FOLLOWING_SESSIONS')}</Box>
+            <Radio
+              value="followingSessions"
+              style={{ color: theme?.palette?.warning['300'] }}
+            />
+          </Box>
+        </RadioGroup>
       </Box>
     </>
   );

diff --git a/src/components/PlannedSession.tsx b/src/components/PlannedSession.tsx
@@ -31,7 +31,7 @@ import { useTranslation } from 'next-i18next';
 
 type mode = (typeof sessionMode)[keyof typeof sessionMode];
 
-const PlannedSession = () => {
+const PlannedSession = ({ removeModal }) => {
   const [mode, setMode] = useState<mode>(sessionMode.OFFLINE);
 
   const handleSessionModeChange = (event: ChangeEvent<HTMLInputElement>) => {
@@ -242,6 +242,7 @@ const PlannedSession = () => {
               color: theme?.palette?.secondary.main,
               fontWeight: '500',
             }}
+            onClick={removeModal}
           >
             {t('CENTER_SESSION.REMOVE_THIS_SESSION')}
           </Box>

diff --git a/src/components/SimpleModal.tsx b/src/components/SimpleModal.tsx
@@ -12,13 +12,14 @@ import {
   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';
 import CloseSharpIcon from '@mui/icons-material/CloseSharp';
+import { getCohortList } from '@/services/CohortServices';
+import manageUserStore from '@/store/manageUserStore';
+import { showToastMessage } from './Toastify';
+import { useTheme } from '@mui/material/styles';
+import { useTranslation } from 'next-i18next';
 
 interface SimpleModalProps {
   secondaryActionHandler?: () => void;
@@ -47,10 +48,10 @@ const SimpleModal: React.FC<SimpleModalProps> = ({
   const theme = useTheme<any>();
 
   const modalStyle = {
-    paddingTop: '0', 
-    paddingLeft: theme.spacing(2), 
-    paddingRight: theme.spacing(2), 
-    paddingBottom: theme.spacing(2), 
+    paddingTop: '0',
+    paddingLeft: theme.spacing(2),
+    paddingRight: theme.spacing(2),
+    paddingBottom: theme.spacing(2),
     position: 'absolute',
     top: '50%',
     left: '50%',